feat(tree): add data sources for tree (#9036)

Author: tinayuangao

src/cdk-experimental/tree/padding.ts

@@ -31,6 +31,7 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
     this._level = coerceNumberProperty(value);
     this._setPadding();
   }
+  get level(): number { return this._level; }
   _level: number;
 
   /** The indent for each level. Default number 40px from material design menu sub-menu spec. */
@@ -40,6 +41,7 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
     this._indent = coerceNumberProperty(value);
     this._setPadding();
   }
+  get indent(): number { return this._indent; }
   _indent: number = 40;
 
   constructor(private _treeNode: CdkTreeNode<T>,

src/demo-app/tree/tree-demo.ts

@@ -8,11 +8,11 @@
 
 import {Component} from '@angular/core';
 import {FlatTreeControl, NestedTreeControl} from '@angular/cdk-experimental/tree';
+import {MatTreeFlattener, MatTreeFlatDataSource, MatTreeNestedDataSource} from '@angular/material-experimental/tree';
 import {of as ofObservable} from 'rxjs/observable/of';
 
 import {JsonNode, JsonDatabase} from './json-database';
-import {FlatDataSource, JsonFlatNode} from './flat-data-source';
-import {JsonNestedDataSource} from './nested-data-source';
+import {JsonFlatNode} from './flat-data-source';
 
 
 @Component({
@@ -28,22 +28,41 @@ export class TreeDemo {
   // Nested tree control
   nestedTreeControl: NestedTreeControl<JsonNode>;
 
+  treeFlattener: MatTreeFlattener<JsonNode, JsonFlatNode>;
+
   // Flat tree data source
-  dataSource: FlatDataSource;
+  dataSource: MatTreeFlatDataSource<JsonNode, JsonFlatNode>;
 
   // Nested tree data source
-  nestedDataSource: JsonNestedDataSource;
+  nestedDataSource: MatTreeNestedDataSource<JsonNode>;
 
   constructor(database: JsonDatabase) {
+    this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
+                                              this.isExpandable, this.getChildren);
     // For flat tree
     this.treeControl = new FlatTreeControl<JsonFlatNode>(this.getLevel, this.isExpandable);
-    this.dataSource = new FlatDataSource(database, this.treeControl);
+    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
     // For nested tree
     this.nestedTreeControl = new NestedTreeControl<JsonNode>(this.getChildren);
-    this.nestedDataSource = new JsonNestedDataSource(database);
+    this.nestedDataSource = new MatTreeNestedDataSource();
+
+    database.dataChange.subscribe(data => {
+      console.log(`datachanges in demo`)
+      this.dataSource.data = data;
+      this.nestedDataSource.data = data;
+    })
   }
 
+  transformer = (node: JsonNode, level: number) => {
+    let flatNode = new JsonFlatNode();
+    flatNode.key = node.key;
+    flatNode.value = node.value;
+    flatNode.level = level;
+    flatNode.expandable = !!node.children;
+    return flatNode;
+  };
+
   getLevel = (node: JsonFlatNode) => { return node.level; };
 
   isExpandable = (node: JsonFlatNode) => { return node.expandable; };

src/material-experimental/tree/data-source/flat-data-source.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CollectionViewer, DataSource} from '@angular/cdk/collections';
+import {FlatTreeControl, TreeControl} from '@angular/cdk-experimental/tree';
+import {Observable} from 'rxjs/Observable';
+import {merge} from 'rxjs/observable/merge';
+import {map} from 'rxjs/operators/map';
+import {take} from 'rxjs/operators/take';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+/**
+ * Tree flattener to convert a normal type of node to node with children & level information.
+ * Transform nested nodes of type `T` to flattened nodes of type `F`.
+ *
+ * For example, the input data of type `T` is nested, and contains its children data:
+ *   SomeNode: {
+ *     key: 'Fruits',
+ *     children: [
+ *       NodeOne: {
+ *         key: 'Apple',
+ *       },
+ *       NodeTwo: {
+ *        key: 'Pear',
+ *      }
+ *    ]
+ *  }
+ *  After flattener flatten the tree, the structure will become
+ *  SomeNode: {
+ *    key: 'Fruits',
+ *    expandable: true,
+ *    level: 1
+ *  },
+ *  NodeOne: {
+ *    key: 'Apple',
+ *    expandable: false,
+ *    level: 2
+ *  },
+ *  NodeTwo: {
+  *   key: 'Pear',
+  *   expandable: false,
+  *   level: 2
+  * }
+ * and the output flattened type is `F` with additional information.
+ */
+export class MatTreeFlattener<T, F> {
+
+  constructor(public transformFunction: (node: T, level: number) => F,
+              public getLevel: (node: F) => number,
+              public isExpandable: (node: F) => boolean,
+              public getChildren: (node: T) => Observable<T[]>) {}
+
+  _flattenNode(node: T, level: number,
+               resultNodes: F[], parentMap: boolean[]): F[] {
+    const flatNode = this.transformFunction(node, level);
+    resultNodes.push(flatNode);
+
+    if (this.isExpandable(flatNode)) {
+      this.getChildren(node).pipe(take(1)).subscribe(children => {
+        children.forEach((child, index) => {
+          let childParentMap: boolean[] = parentMap.slice();
+          childParentMap.push(index != children.length - 1);
+          this._flattenNode(child, level + 1, resultNodes, childParentMap);
+        });
+      });
+    }
+    return resultNodes;
+  }
+
+  /**
+   * Flatten a list of node type T to flattened version of node F.
+   * Please note that type T may be nested, and the length of `structuredData` may be different
+   * from that of returned list `F[]`.
+   */
+  flattenNodes(structuredData: T[]): F[] {
+    let resultNodes: F[] = [];
+    structuredData.forEach(node => this._flattenNode(node, 0, resultNodes, []));
+    return resultNodes;
+  }
+
+  /**
+   * Expand flattened node with current expansion status.
+   * The returned list may have different length.
+   */
+  expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F>): F[] {
+    let results: F[] = [];
+    let currentExpand: boolean[] = [];
+    currentExpand[0] = true;
+
+    nodes.forEach((node) => {
+      let expand = true;
+      for (let i = 0; i <= this.getLevel(node); i++) {
+        expand = expand && currentExpand[i];
+      }
+      if (expand) {
+        results.push(node);
+      }
+      if (this.isExpandable(node)) {
+        currentExpand[this.getLevel(node) + 1] = treeControl.isExpanded(node);
+      }
+    });
+    return results;
+  }
+}
+
+
+/**
+ * Data source for flat tree.
+ * The data source need to handle expansion/collapsion of the tree node and change the data feed
+ * to `MatTree`.
+ * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted
+ * to type `F` for `MatTree` to consume.
+ */
+export class MatTreeFlatDataSource<T, F> implements DataSource<F> {
+  _flattenedData = new BehaviorSubject<F[]>([]);
+
+  _expandedData = new BehaviorSubject<F[]>([]);
+
+  _data: BehaviorSubject<T[]>;
+  get data() { return this._data.value; }
+  set data(value: T[]) {
+    this._data.next(value);
+    this._flattenedData.next(this.treeFlattener.flattenNodes(this.data));
+    this.treeControl.dataNodes = this._flattenedData.value;
+  }
+
+  constructor(private treeControl: FlatTreeControl<F>,
+              private treeFlattener: MatTreeFlattener<T, F>,
+              initialData: T[] = []) {
+    this._data = new BehaviorSubject<T[]>(initialData);
+  }
+
+  connect(collectionViewer: CollectionViewer): Observable<F[]> {
+    return merge([
+      collectionViewer.viewChange,
+      this.treeControl.expansionModel.onChange,
+      this._flattenedData])
+      .pipe(map(() => {
+        this._expandedData.next(
+          this.treeFlattener.expandFlattenedNodes(this._flattenedData.value, this.treeControl));
+        return this._expandedData.value;
+      }));
+  }
+
+  disconnect() {
+  }
+}
+

src/material-experimental/tree/data-source/nested-data-source.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CollectionViewer, DataSource} from '@angular/cdk/collections';
+import {Observable} from 'rxjs/Observable';
+import {merge} from 'rxjs/observable/merge';
+import {map} from 'rxjs/operators/map';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+/**
+ * Data source for nested tree.
+ *
+ * The data source for nested tree doesn't have to consider node flattener, or the way to expand
+ * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
+ */
+export class MatTreeNestedDataSource<T> implements DataSource<T> {
+  _data = new BehaviorSubject<T[]>([]);
+
+  /**
+   * Data for the nested treee
+   */
+  get data() { return this._data.value; }
+  set data(value: T[]) { this._data.next(value); }
+
+  connect(collectionViewer: CollectionViewer): Observable<T[]> {
+    return merge([collectionViewer.viewChange, this._data])
+      .pipe(map(() => {
+        return this.data;
+      }));
+  }
+
+  disconnect() {
+    // no op
+  }
+}
+

src/material-experimental/tree/public-api.ts

@@ -12,3 +12,5 @@ export * from './padding';
 export * from './tree';
 export * from './tree-module';
 export * from './toggle';
+export * from './data-source/flat-data-source';
+export * from './data-source/nested-data-source';

src/material-experimental/tree/tree-module.ts

@@ -24,7 +24,7 @@ const MAT_TREE_DIRECTIVES = [
   MatTreeNodeToggle,
   MatTree,
   MatTreeNode,
-  MatTreeNodeOutlet,
+  MatTreeNodeOutlet
 ];
 
 @NgModule({