feat(tree): add support of async children loading on node expand

Author: rychkog

TODO.md

@@ -0,0 +1,2 @@
+- Cover with protractor e2e test async children loading
+- Document `Tree` class

demo/app.component.ts

@@ -99,16 +99,22 @@ export class AppComponent implements OnInit {
         ]
       },
       {
-        value: 'Monospace',
-        children: [
-          { value: 'Input Mono' },
-          { value: 'Roboto Mono' },
-          { value: 'Liberation Mono' },
-          { value: 'Hack' },
-          { value: 'Consolas' },
-          { value: 'Menlo' },
-          { value: 'Source Code Pro' }
-        ]
+        value: 'Monospace - With ASYNC CHILDREN',
+        // children property is ignored if "loadChildren" is present
+        children: [{value: 'I am the font that will be ignored'}],
+        loadChildren: (callback) => {
+          setTimeout(() => {
+            callback([
+              { value: 'Input Mono' },
+              { value: 'Roboto Mono' },
+              { value: 'Liberation Mono' },
+              { value: 'Hack' },
+              { value: 'Consolas' },
+              { value: 'Menlo' },
+              { value: 'Source Code Pro' }
+            ]);
+          }, 5000);
+        }
       }
     ]
   };

src/styles.css

@@ -150,4 +150,30 @@ tree-internal ul.rootless {
 
 tree-internal div.rootless {
   display: none !important;
-}
+}
+
+tree-internal .loading-children:after {
+  content: ' loading ...';
+  color: #6a1b9a;
+  font-style: italic;
+  font-size: 0.9em;
+  animation-name: loading-children;
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+@keyframes loading-children {
+  0%    { color: #f3e5f5; }
+  12.5% { color: #e1bee7; }
+  25%   { color: #ce93d8; }
+  37.5% { color: #ba68c8; }
+  50%   { color: #ab47bc; }
+  62.5% { color: #9c27b0; }
+  75%   { color: #8e24aa; }
+  87.5% { color: #7b1fa2; }
+  100%  { color: #6a1b9a; }
+}
+
+
+

src/tree-internal.component.ts

@@ -7,6 +7,7 @@ import { NodeEditableEvent, NodeEditableEventAction } from './editable/editable.
 import { TreeService } from './tree.service';
 import * as EventUtils from './utils/event.utils';
 import { NodeDraggableEvent } from './draggable/draggable.events';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'tree-internal',
@@ -23,7 +24,9 @@ import { NodeDraggableEvent } from './draggable/draggable.events';
         <div class="node-value"
           *ngIf="!shouldShowInputForTreeValue()"
           [class.node-selected]="isSelected"
-          (click)="onNodeSelected($event)">{{tree.value}}</div>
+          (click)="onNodeSelected($event)">
+            {{tree.value}}<span class="loading-children" *ngIf="tree.childrenAreBeingLoaded()"></span>
+        </div>
 
         <input type="text" class="node-value"
            *ngIf="shouldShowInputForTreeValue()"
@@ -34,7 +37,7 @@ import { NodeDraggableEvent } from './draggable/draggable.events';
       <node-menu *ngIf="isMenuVisible" (menuItemSelected)="onMenuItemSelected($event)"></node-menu>
 
       <template [ngIf]="tree.isNodeExpanded()">
-        <tree-internal *ngFor="let child of tree.children" [tree]="child"></tree-internal>
+        <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child"></tree-internal>
       </template>
     </li>
   </ul>
@@ -48,7 +51,7 @@ export class TreeInternalComponent implements OnInit {
   public settings: Ng2TreeSettings;
 
   public isSelected: boolean = false;
-  private isMenuVisible: boolean = false;
+  public isMenuVisible: boolean = false;
 
   public constructor(@Inject(NodeMenuService) private nodeMenuService: NodeMenuService,
                      @Inject(TreeService) private treeService: TreeService,

src/tree.component.ts

@@ -44,7 +44,7 @@ export class TreeComponent implements OnInit, OnChanges {
     if (!this.treeModel) {
       this.tree = TreeComponent.EMPTY_TREE;
     } else {
-      this.tree = Tree.buildTreeFromModel(this.treeModel);
+      this.tree = new Tree(this.treeModel);
     }
   }
 

src/tree.ts

@@ -1,11 +1,62 @@
 import * as _ from 'lodash';
-import { TreeModel, RenamableNode, FoldingType, TreeStatus, TreeModelSettings } from './tree.types';
+import { Observable, Observer } from 'rxjs';
+import { TreeModel, RenamableNode, FoldingType, TreeStatus, TreeModelSettings, ChildrenLoadingFunction } from './tree.types';
+
+enum ChildrenLoadingState {
+  NotStarted,
+  Loading,
+  Completed
+}
 
 export class Tree {
   private _children: Tree[];
+  private _loadChildren: ChildrenLoadingFunction;
+  private _childrenLoadingState: ChildrenLoadingState = ChildrenLoadingState.NotStarted;
+  public node: TreeModel;
+  public parent: Tree;
 
-  public constructor(public node: TreeModel, public parent: Tree = null, isBranch: boolean = false) {
-    this._children = isBranch ? [] : null;
+  public constructor(node: TreeModel, parent: Tree = null, isBranch: boolean = false) {
+    this.buildTreeFromModel(node, parent, isBranch);
+  }
+
+  /**
+   * Build an instance of Tree from an object implementing TreeModel interface.
+   * @param {TreeModel} model - A model that is used to build a tree.
+   * @param {Tree} [parent] - An optional parent if you want to build a tree from the model that should be a child of an existing Tree instance.
+   * @param {boolean} [isBranch] - An option that makes a branch from created tree. Branch can have children.
+   * @static
+   */
+  private buildTreeFromModel(model: TreeModel, parent: Tree, isBranch: boolean): void {
+    this.parent = parent;
+    this.node = _.extend(_.omit(model, 'children') as TreeModel, {
+      settings: TreeModelSettings.merge(model, _.get(parent, 'node') as TreeModel)
+    }) as TreeModel;
+
+    if (_.isFunction(this.node.loadChildren)) {
+      this._loadChildren = this.node.loadChildren;
+    } else {
+      _.forEach(_.get(model, 'children') as TreeModel[], (child: TreeModel, index: number) => {
+        this._addChild(new Tree(child, this), index);
+      });
+    }
+
+    if (!Array.isArray(this._children)) {
+      this._children = this.node.loadChildren || isBranch ? [] : null;
+    }
+  }
+
+  public childrenAreBeingLoaded(): boolean {
+    return (this._childrenLoadingState === ChildrenLoadingState.Loading);
+  }
+
+  private canLoadChildren(): boolean {
+    return (this._childrenLoadingState === ChildrenLoadingState.NotStarted)
+     && (this.foldingType === FoldingType.Expanded)
+     && (!!this._loadChildren);
+  }
+
+  public childrenShouldBeLoaded(): boolean {
+    return !!this._loadChildren;
   }
 
   /**
@@ -16,6 +67,22 @@ export class Tree {
     return this._children;
   }
 
+  public get childrenAsync(): Observable<Tree[]> {
+    if(this.canLoadChildren()) {
+      setTimeout(() => this._childrenLoadingState = ChildrenLoadingState.Loading);
+      return new Observable((observer: Observer<Tree[]>) => {
+        this._loadChildren((children: TreeModel[]) => {
+          this._children = _.map(children, (child: TreeModel) => new Tree(child, this));
+          this._childrenLoadingState = ChildrenLoadingState.Completed;
+          observer.next(this.children);
+          observer.complete();
+        });
+      });
+    }
+
+    return Observable.of(this.children);
+  }
+
   /**
    * Create a new node in the current tree.
    * @param {boolean} isBranch - A flag that indicates whether a new node should be a "Branch". "Leaf" node will be created by default
@@ -215,7 +282,9 @@ export class Tree {
    */
   public get foldingType(): FoldingType {
     if (!this.node._foldingType) {
-      if (this._children) {
+      if (this.childrenShouldBeLoaded()) {
+        this.node._foldingType = FoldingType.Collapsed;
+      } else if (this._children) {
         this.node._foldingType = FoldingType.Expanded;
       } else {
         this.node._foldingType = FoldingType.Leaf;
@@ -271,24 +340,6 @@ export class Tree {
 
   // STATIC METHODS ----------------------------------------------------------------------------------------------------
 
-  /**
-   * Build an instance of Tree from an object implementing TreeModel interface.
-   * @param {TreeModel} model - A model that is used to build a tree.
-   * @param {Tree} [parent] - An optional parent if you want to build a tree from the model that should be a child of an existing Tree instance.
-   * @returns {Tree} A tree build from given model (with parent if it was given)
-   * @static
-   */
-  public static buildTreeFromModel(model: TreeModel, parent: Tree = null): Tree {
-    model.settings = TreeModelSettings.merge(model, _.get(parent, 'node') as TreeModel);
-    const tree = new Tree(_.omit(model, 'children') as TreeModel, parent);
-
-    _.forEach(model.children, (child: TreeModel, index: number) => {
-      tree._addChild(Tree.buildTreeFromModel(child, tree), index);
-    });
-
-    return tree;
-  }
-
   /**
    * Check that value passed is not empty (it doesn't consist of only whitespace symbols).
    * @param {string} value - A value that should be checked.

src/tree.types.ts

@@ -13,9 +13,12 @@ export class FoldingType {
   }
 }
 
+export type ChildrenLoadingFunction = (callback: (children: TreeModel[]) => void) => void;
+
 export interface TreeModel {
   value: string | RenamableNode;
   children?: TreeModel[];
+  loadChildren?: ChildrenLoadingFunction;
   settings?: TreeModelSettings;
   _status?: TreeStatus;
   _foldingType?: FoldingType;

test/draggable/node-draggable.service.spec.ts

@@ -42,7 +42,7 @@ describe('NodeDraggableService', function () {
   }));
 
   it('should not fire event if node is static', inject([NodeDraggableService], (nodeDraggableService) => {
-    const masterTree = Tree.buildTreeFromModel({
+    const masterTree = new Tree({
       value: 'Master',
       settings: {
         'static': true
@@ -72,4 +72,14 @@ describe('NodeDraggableService', function () {
 
     expect(actualCapturedNode).toBe(stubCapturedNode);
   }));
+
+  it('should release captured node', inject([NodeDraggableService], (nodeDraggableService) => {
+    const stubCapturedNode = new CapturedNode(null, null);
+
+    nodeDraggableService.captureNode(stubCapturedNode);
+    expect(nodeDraggableService.getCapturedNode(stubCapturedNode)).toBe(stubCapturedNode);
+
+    nodeDraggableService.releaseCapturedNode();
+    expect(nodeDraggableService.getCapturedNode(stubCapturedNode)).toBeNull();
+  }));
 });

test/tree.service.spec.ts

@@ -105,7 +105,7 @@ describe('TreeService', () => {
   });
 
   it('removes node from parent when when appropriate event fires', done => {
-    const masterTree = Tree.buildTreeFromModel({
+    const masterTree = new Tree({
       value: 'Master',
       children: [
         {value: 'Servant#1'},
@@ -127,7 +127,7 @@ describe('TreeService', () => {
   });
 
   it('should produce drag event for the same element and not on captured node children', done => {
-    const masterTree = Tree.buildTreeFromModel({
+    const masterTree = new Tree({
       value: 'Master',
       children: [
         {value: 'Servant#1'},