feat(tree): make it possible to collapse a tree on a first load. Closes #102

Author: Georgii Rychko

README.md

@@ -345,6 +345,7 @@ Here is an example of its usage:
 ```
 
 * `static` - Boolean - This option makes it impossible to drag a tree or modify it in a some way, though you still can select nodes in the static tree and appropriate events will be generated.
+* `isCollapsedOnInit` - Boolean - This option makes a tree to be collapsed on first load (this option cascades to its children).
 * `rightMenu` - Boolean - This option allows you to activate (true, by default) or deactivate (false) right menu when clicking with right button of a mouse.
 * `leftMenu` - Boolean - This option allows you to activate (true) or deactivate (false, by default) left menu.
 * `cssClasses` - Object:

package.json

@@ -49,27 +49,27 @@
     "webdriver-update": "node ./node_modules/protractor/bin/webdriver-manager update"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/compiler-cli": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/language-service": "5.0.0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
-    "@types/jasmine": "2.6.2",
-    "@types/node": "8.0.47",
+    "@angular/cli": "1.5.2",
+    "@angular/common": "5.0.2",
+    "@angular/compiler": "5.0.2",
+    "@angular/compiler-cli": "5.0.2",
+    "@angular/core": "5.0.2",
+    "@angular/forms": "5.0.2",
+    "@angular/http": "5.0.2",
+    "@angular/language-service": "5.0.2",
+    "@angular/platform-browser": "5.0.2",
+    "@angular/platform-browser-dynamic": "5.0.2",
+    "@angular/router": "5.0.2",
+    "@types/jasmine": "2.8.2",
+    "@types/node": "8.0.53",
     "alertifyjs": "1.10.0",
     "codelyzer": "3.0.1",
-    "conventional-changelog": "1.1.6",
-    "conventional-changelog-cli": "1.3.4",
+    "conventional-changelog": "1.1.7",
+    "conventional-changelog-cli": "1.3.5",
     "conventional-github-releaser": "2.0.0",
     "core-js": "2.5.1",
     "font-awesome": "4.7.0",
-    "gh-pages": "1.0.0",
+    "gh-pages": "1.1.0",
     "jasmine-core": "2.8.0",
     "jasmine-data-provider": "2.2.0",
     "jasmine-spec-reporter": "4.2.1",
@@ -90,7 +90,7 @@
     "ts-node": "3.3.0",
     "tslint": "5.4.3",
     "tslint-config-valorsoft": "2.0.1",
-    "typescript": "2.5.0",
+    "typescript": "2.4.2",
     "webpack": "3.8.1",
     "zone.js": "0.8.18"
   }

src/demo/app/app.component.ts

@@ -269,7 +269,10 @@ export class AppComponent implements OnInit {
           {value: 'chmod', id: 10},
           {value: 'chown', id: 11},
           {value: 'nano', id: 12}
-        ]
+        ],
+        settings: {
+          isCollapsedOnInit: true
+        }
       },
       {
         value: 'boot',

src/tree.ts

@@ -256,7 +256,14 @@ export class Tree {
    * @returns {Tree} A newly inserted child.
    */
   public addChild(child: Tree, position?: number): Tree {
-    return this._addChild(Tree.cloneTreeShallow(child), position);
+    const newborn = this._addChild(Tree.cloneTreeShallow(child), position);
+
+    this._setFoldingType();
+    if (this.isNodeCollapsed()) {
+      this.switchFoldingType();
+    }
+
+    return newborn;
   }
 
   private _addChild(child: Tree, position: number = size(this._children) || 0): Tree {
@@ -268,10 +275,6 @@ export class Tree {
       this._children = [child];
     }
 
-    this._setFoldingType();
-    if (this.isNodeCollapsed()) {
-      this.switchFoldingType();
-    }
     return child;
   }
 
@@ -414,6 +417,9 @@ export class Tree {
     if (this.isLeaf() || !this.hasChildren()) {
       return;
     }
+
+    this.disableCollapseOnInit();
+
     this.node._foldingType = this.isNodeExpanded() ? FoldingType.Collapsed : FoldingType.Expanded;
   }
 
@@ -440,7 +446,7 @@ export class Tree {
     if (this.childrenShouldBeLoaded()) {
       this.node._foldingType = FoldingType.Collapsed;
     } else if (this._children && !isEmpty(this._children)) {
-      this.node._foldingType = FoldingType.Expanded;
+      this.node._foldingType = this.isCollapsedOnInit() ? FoldingType.Collapsed : FoldingType.Expanded;
     } else if (Array.isArray(this._children)) {
       this.node._foldingType = FoldingType.Empty;
     } else {
@@ -510,6 +516,16 @@ export class Tree {
     return '';
   }
 
+  private disableCollapseOnInit() {
+    if (this.node.settings) {
+      this.node.settings.isCollapsedOnInit = false;
+    }
+  }
+
+  public isCollapsedOnInit() {
+    return !!get(this.node.settings, 'isCollapsedOnInit');
+  }
+
   /**
    * Check that current tree is newly created (added by user via menu for example). Tree that was built from the TreeModel is not marked as new.
    * @returns {boolean} A flag whether the tree is new.

src/tree.types.ts

@@ -84,8 +84,15 @@ export class TreeModelSettings {
    */
   public static?: boolean;
 
+  public isCollapsedOnInit?: boolean;
+
   public static merge(sourceA: TreeModel, sourceB: TreeModel): TreeModelSettings {
-    return defaultsDeep({}, get(sourceA, 'settings'), get(sourceB, 'settings'), {static: false, leftMenu: false, rightMenu: true});
+    return defaultsDeep(
+      {},
+      get(sourceA, 'settings'),
+      get(sourceB, 'settings'),
+      {static: false, leftMenu: false, rightMenu: true, isCollapsedOnInit: false}
+    );
   }
 }
 

test/data-provider/tree.data-provider.ts

@@ -3,72 +3,72 @@ export class TreeDataProvider {
     'default values': {
       treeModelA: { value: '42' },
       treeModelB: { value: '12' },
-      result: { static: false, leftMenu: false, rightMenu: true }
+      result: { static: false, leftMenu: false, rightMenu: true, isCollapsedOnInit: false }
     },
     'first settings source has higher priority': {
-      treeModelA: { value: '42', settings: { static: true, leftMenu: true, rightMenu: true } },
-      treeModelB: { value: '12', settings: { static: false, leftMenu: false, rightMenu: false } },
-      result: { static: true, leftMenu: true, rightMenu: true }
+      treeModelA: { value: '42', settings: { static: true, leftMenu: true, rightMenu: true, isCollapsedOnInit: true } },
+      treeModelB: { value: '12', settings: { static: false, leftMenu: false, rightMenu: false, isCollapsedOnInit: false } },
+      result: { static: true, leftMenu: true, rightMenu: true, isCollapsedOnInit: true }
     },
     'second settings source has priority if first settings source doesn\'t have the option': {
       treeModelA: { value: '42' },
-      treeModelB: { value: '12', settings: { static: true, leftMenu: true, rightMenu: false } },
-      result: { static: true, leftMenu: true, rightMenu: false }
+      treeModelB: { value: '12', settings: { static: true, leftMenu: true, rightMenu: false, isCollapsedOnInit: true } },
+      result: { static: true, leftMenu: true, rightMenu: false, isCollapsedOnInit: true }
     },
     'first expanded property of cssClasses has higher priority': {
       treeModelA: { value: '12', settings: { cssClasses: { expanded: 'arrow-down-o' } } },
       treeModelB: { value: '42', settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } }
     },
     'first collapsed property of cssClasses has higher priority': {
       treeModelA: { value: '12', settings: { cssClasses: { collapsed: 'arrow-right-o' } } },
       treeModelB: { value: '42', settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right-o', empty: 'arrow-gray', leaf: 'dot' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right-o', empty: 'arrow-gray', leaf: 'dot' } }
     },
     'first empty property of cssClasses has higher priority': {
       treeModelA: { value: '12', settings: { cssClasses: { empty: 'arrow-gray-o' } } },
       treeModelB: { value: '42', settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray-o', leaf: 'dot' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray-o', leaf: 'dot' } }
     },
     'first leaf property of cssClasses has higher priority': {
       treeModelA: { value: '12', settings: { cssClasses: { leaf: 'dot-o' } } },
       treeModelB: { value: '42', settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot-o' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot-o' } }
     },
     'first properties of cssClasses has higher priority': {
       treeModelA: { value: '12', settings: { cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } } },
       treeModelB: { value: '42', settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } }
     },
     'second properties of cssClasses in settings has priority, if first source doesn\'t have them': {
       treeModelA: { value: '42', settings: { static: true, leftMenu: true, rightMenu: false } },
       treeModelB: { value: '12', settings: { cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } } },
-      result: { static: true, leftMenu: true, rightMenu: false, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } }
+      result: { isCollapsedOnInit: false, static: true, leftMenu: true, rightMenu: false, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } }
     },
     'first node property of templates has higher priority': {
       treeModelA: { value: '12', settings: { templates: { node: '<i class="folder-o"></i>' } } },
       treeModelB: { value: '42', settings: { templates: { node: '<i class="folder"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation"></i>' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation"></i>' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation"></i>' } }
     },
     'first leaf property in templates has higher priority': {
       treeModelA: { value: '12', settings: { templates: { leaf: '<i class="file-o"></i>' } } },
       treeModelB: { value: '42', settings: { templates: { node: '<i class="folder"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation"></i>' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation"></i>' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation"></i>' } }
     },
     'first leftMenu property in templates has higher priority': {
       treeModelA: { value: '12', settings: { templates: { leftMenu: '<i class="navigation-o"></i>' } } },
       treeModelB: { value: '42', settings: { templates: { node: '<i class="folder"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation"></i>' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation-o"></i>' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation-o"></i>' } }
     },
     'first properties of templates has higher priority': {
       treeModelA: { value: '12', settings: { templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation-o"></i>' } } },
       treeModelB: { value: '42', settings: { templates: { node: '<i class="folder"></i>', leaf: '<i class="file"></i>', leftMenu: '<i class="navigation"></i>' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation-o"></i>' } }
+      result: { isCollapsedOnInit: false, static: false, leftMenu: false, rightMenu: true, templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation-o"></i>' } }
     },
     'second properties of templates in settings has priority, if first source doesn\'t have them': {
       treeModelA: { value: '42', settings: { static: true, leftMenu: true, rightMenu: false } },
       treeModelB: { value: '12', settings: { templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation-o"></i>' } } },
-      result: { static: true, leftMenu: true, rightMenu: false, templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation-o"></i>' } }
+      result: { isCollapsedOnInit: false, static: true, leftMenu: true, rightMenu: false, templates: { node: '<i class="folder-o"></i>', leaf: '<i class="file-o"></i>', leftMenu: '<i class="navigation-o"></i>' } }
     }
   };
 }

tsconfig-aot.json

@@ -17,6 +17,8 @@
     "./index.ts"
   ],
   "angularCompilerOptions": {
-    "genDir": "factories"
+    "strictMetadataEmit" : true,
+    "skipMetadataEmit" : false,
+    "preserveWhitespaces": false
   }
 }