feat(tree): add tree demo pages

Author: tinayuangao

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

@@ -86,6 +86,7 @@ export class DemoApp {
     {name: 'Tabs', route: '/tabs'},
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
+    {name: 'Tree', route: '/tree'},
     {name: 'Typography', route: '/typography'}
   ];
 

src/demo-app/demo-app/demo-module.ts

@@ -57,6 +57,8 @@ import {TableHeaderDemo} from '../table/table-header-demo';
 import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
+import {TreeDemo} from '../tree/tree-demo';
+import {JsonDatabase} from '../tree/json-database';
 import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
@@ -122,11 +124,13 @@ import {DEMO_APP_ROUTES} from './routes';
     TabsDemo,
     ToolbarDemo,
     TooltipDemo,
+    TreeDemo,
     TypographyDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
-    PeopleDatabase
+    PeopleDatabase,
+    JsonDatabase
   ],
   entryComponents: [
     ContentElementDialog,

src/demo-app/demo-app/routes.ts

@@ -47,6 +47,7 @@ import {TABS_DEMO_ROUTES} from '../tabs/routes';
 import {TabsDemo} from '../tabs/tabs-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
+import {TreeDemo} from '../tree/tree-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 
@@ -89,6 +90,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
     {path: 'toolbar', component: ToolbarDemo},
     {path: 'tooltip', component: TooltipDemo},
+    {path: 'tree', component: TreeDemo},
     {path: 'typography', component: TypographyDemo},
     {path: 'expansion', component: ExpansionDemo},
     {path: 'stepper', component: StepperDemo},

src/demo-app/tree/flat-data-source.ts

@@ -0,0 +1,108 @@
+/**
+ * @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/tree';
+import {Observable} from 'rxjs/Observable';
+import {merge} from 'rxjs/observable/merge';
+import {map} from 'rxjs/operators/map';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+import {JsonNode, JsonDatabase} from './json-database';
+
+/** Flat node with expandable and level information */
+export class JsonFlatNode {
+  key: string;
+  value: any;
+  level: number;
+  expandable: boolean;
+}
+
+/** Tree flattener to transfrom JsonNode to JsonFlatNode */
+export class TreeFlattener {
+
+  static flattenNodes( structuredData: JsonNode[]): JsonFlatNode[] {
+    let resultNodes: JsonFlatNode[] = [];
+    structuredData.forEach((node) => {
+      this._flattenNode(node, 0, resultNodes, []);
+    });
+    return resultNodes;
+  }
+
+  static _flattenNode(node: JsonNode, level: number,
+                      resultNodes: JsonFlatNode[], parentMap: boolean[]) {
+    let flatNode: JsonFlatNode = new JsonFlatNode();
+    flatNode.key = node.key;
+    flatNode.value = node.value;
+    flatNode.level = level;
+    flatNode.expandable = !!node.children;
+    resultNodes.push(flatNode);
+
+    if (flatNode.expandable) {
+      node.children.forEach((child, index) => {
+        let childParentMap: boolean[] = parentMap.slice();
+        childParentMap.push(index != node.children.length - 1);
+        this._flattenNode(child, level + 1, resultNodes, childParentMap);
+      });
+    }
+    return flatNode;
+  }
+
+  static expandFlattenedNodes(nodes: JsonFlatNode[],
+                              treeControl: TreeControl<JsonFlatNode>): JsonFlatNode[] {
+    let results: JsonFlatNode[] = [];
+    let currentExpand: boolean[] = [];
+    currentExpand[0] = true;
+
+    nodes.forEach((node) => {
+      let expand = true;
+      for (let i = 0; i <= node.level; i++) {
+        expand = expand && currentExpand[i];
+      }
+      if (expand) {
+        results.push(node);
+      }
+      if (node.expandable) {
+        currentExpand[node.level + 1] = treeControl.isExpanded(node);
+      }
+    });
+    return results;
+  }
+}
+
+/** Flat data source */
+export class FlatDataSource implements DataSource<any> {
+  _flattenedData = new BehaviorSubject<any>([]);
+  get flattenedData() { return this._flattenedData.value; }
+
+  _expandedData = new BehaviorSubject<any>([]);
+  get expandedData() { return this._expandedData.value; }
+
+  constructor(database: JsonDatabase, private treeControl: FlatTreeControl<JsonFlatNode>) {
+    database.dataChange.subscribe((tree) => {
+      this._flattenedData.next(TreeFlattener.flattenNodes(tree));
+      this.treeControl.dataNodes = this.flattenedData;
+    });
+  }
+
+  connect(collectionViewer: CollectionViewer): Observable<JsonFlatNode[]> {
+    return merge([
+        collectionViewer.viewChange,
+        this.treeControl.expansionModel.onChange,
+        this._flattenedData])
+      .pipe(map(() => {
+        this._expandedData.next(
+            TreeFlattener.expandFlattenedNodes(this.flattenedData, this.treeControl));
+        return this.expandedData;
+      }));
+  }
+
+  disconnect() {
+  }
+}
+

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

@@ -0,0 +1,80 @@
+/**
+ * @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 {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+export class JsonNode {
+  children: JsonNode[];
+  key: string;
+  value: any;
+}
+
+const TREE_DATA = `{"widget": {
+    "debug": "on",
+    "window": {
+        "title": "Sample Konfabulator Widget",
+        "name": "main_window",
+        "width": 500,
+        "height": 500
+    },
+    "image": { 
+        "src": "Images/Sun.png",
+        "name": "sun1",
+        "hOffset": 250,
+        "vOffset": 250,
+        "alignment": "center"
+    },
+    "text": {
+        "data": "Click Here",
+        "size": 36,
+        "style": "bold",
+        "name": "text1",
+        "hOffset": 250,
+        "vOffset": 100,
+        "alignment": "center",
+        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
+    }
+}}    
+`;
+
+@Injectable()
+export class JsonDatabase {
+  dataChange: BehaviorSubject<JsonNode[]> = new BehaviorSubject<JsonNode[]>([]);
+
+  get data(): JsonNode[] { return this.dataChange.value; }
+
+  constructor() {
+    this.initialize();
+  }
+
+  initialize() {
+    const dataObject = JSON.parse(TREE_DATA);
+    const data = this.buildJsonTree(dataObject, 0);
+    this.dataChange.next(data);
+  }
+
+  buildJsonTree(value: any, level: number) {
+    let data: any[] = [];
+    for (let k in value) {
+      let v = value[k];
+      let node = new JsonNode();
+      node.key = `${k}`;
+      if (v === null || v === undefined) {
+        // no action
+      } else if (typeof v === 'object') {
+        node.children = this.buildJsonTree(v, level + 1);
+      } else {
+        node.value = v;
+      }
+      data.push(node);
+    }
+    return data;
+  }
+
+}

src/demo-app/tree/nested-data-source.ts

@@ -0,0 +1,33 @@
+/**
+ * @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';
+
+import {JsonNode, JsonDatabase} from './json-database';
+
+export class JsonNestedDataSource implements DataSource<any> {
+  _renderedData = new BehaviorSubject<JsonNode[]>([]);
+  get renderedData(): JsonNode[] { return this._renderedData.value; }
+
+  constructor(private database: JsonDatabase) {}
+
+  connect(collectionViewer: CollectionViewer): Observable<JsonNode[]> {
+    return merge([collectionViewer.viewChange, this.database.dataChange])
+      .pipe(map(() => {
+        this._renderedData.next(this.database.data);
+        return this.renderedData;
+      }));
+  }
+
+  disconnect() { }
+}
+

src/demo-app/tree/tree-demo.html

@@ -0,0 +1,47 @@
+<div class="demo-tree-container">
+  <mat-card>
+    <mat-card-header>Flattened tree</mat-card-header>
+
+    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">-->
+      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger matTreeNodePadding>
+          {{node.key}} : {{node.value}}
+      </mat-tree-node>
+
+      <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+          <mat-icon matTreeNodeTrigger>
+            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+          </mat-icon>
+          {{node.key}} : {{node.value}}
+      </mat-tree-node>
+    </mat-tree>
+
+  </mat-card>
+
+
+
+  <mat-card>
+    <mat-card-header>Nested tree</mat-card-header>
+
+    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+      <mat-tree-node *matTreeNodeDef="let node" role="treeitem" matTreeNodeTrigger>
+        <li>
+          <div>{{node.key}}:  {{node.value}}</div>
+        </li>
+      </mat-tree-node>
+
+      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild" role="group">
+        <li>
+          <div class="mat-tree-node">
+            <mat-icon matTreeNodeTrigger>
+              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+            </mat-icon>
+            {{node.key}}
+          </div>
+          <ul [class]="nestedTreeControl.isExpanded(node) ? '' : 'tree-demo-invisible'">
+            <ng-container matTreeNodeOutlet></ng-container>
+          </ul>
+        </li>
+      </mat-nested-tree-node>
+    </mat-tree>
+  </mat-card>
+</div>

src/demo-app/tree/tree-demo.scss

@@ -0,0 +1,15 @@
+.demo-tree-container {
+  .tree-demo-invisible {
+    display: none;
+  }
+
+  ul, li {
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    list-style-type: none;
+  }
+
+  .mat-card {
+    margin: 16px;
+  }
+}

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

@@ -0,0 +1,56 @@
+/**
+ * @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 {Component} from '@angular/core';
+import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/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';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'tree-demo',
+  templateUrl: 'tree-demo.html',
+  styleUrls: ['tree-demo.css'],
+})
+export class TreeDemo {
+  // Flat tree control
+  treeControl: FlatTreeControl<JsonFlatNode>;
+
+  // Nested tree control
+  nestedTreeControl: NestedTreeControl<JsonNode>;
+
+  // Flat tree data source
+  dataSource: FlatDataSource;
+
+  // Nested tree data source
+  nestedDataSource: JsonNestedDataSource;
+
+  constructor(database: JsonDatabase) {
+    // For flat tree
+    this.treeControl = new FlatTreeControl<JsonFlatNode>(this.getLevel, this.isExpandable);
+    this.dataSource = new FlatDataSource(database, this.treeControl);
+
+    // For nested tree
+    this.nestedTreeControl = new NestedTreeControl<JsonNode>(this.getChildren);
+    this.nestedDataSource = new JsonNestedDataSource(database);
+  }
+
+  getLevel = (node: JsonFlatNode) => { return node.level };
+
+  isExpandable = (node: JsonFlatNode) => { return node.expandable; }
+
+  getChildren = (node: JsonNode) => { return ofObservable(node.children); }
+
+  hasChild = (_: number, _nodeData: JsonFlatNode) => { return _nodeData.expandable; }
+
+  hasNestedChild = (_: number, nodeData: JsonNode) => {return !(nodeData.value); }
+}