Merge pull request #64 from IndustriaTech/feature/events-collapse-expand

Event listeners - collapse and expand; Id - optional property

Author: Georgii Rychko

README.md

@@ -13,12 +13,14 @@ ng2-tree is a simple [Angular 2](https://github.com/angular/angular) component f
     - [Configure node via TreeModelSettings](#configure-node-via-treemodelsettings)
   - [[settings]](#settings)
   - [`Tree` class](#tree-class)
-  - [events (nodeMoved, nodeSelected, nodeRenamed, nodeRemoved, nodeCreated)](#events-nodemoved-nodeselected-noderenamed-noderemoved-nodecreated)
+  - [events (nodeMoved, nodeSelected, nodeRenamed, nodeRemoved, nodeCreated, nodeExpanded, nodeCollapsed)](#events-nodemoved-nodeselected-noderenamed-noderemoved-nodecreated-nodeexpanded-nodecollapsed)
     - [NodeSelectedEvent](#nodeselectedevent)
     - [NodeMovedEvent](#nodemovedevent)
     - [NodeRemovedEvent](#noderemovedevent)
     - [NodeCreatedEvent](#nodecreatedevent)
     - [NodeRenamedEvent](#noderenamedevent)
+    - [NodeExpandedEvent](#nodeexpandedevent)
+    - [NodeCollapsedEvent](#nodecollapsedevent)
 - [Changes that should be taken into account in order to migrate from __ng2-tree V1__ to __ng2-tree V2__](#changes-that-should-be-taken-into-account-in-order-to-migrate-from-__ng2-tree-v1__-to-__ng2-tree-v2__)
 - [:bulb: Want to help?](#bulb-want-to-help)
 
@@ -124,7 +126,9 @@ Here is the fully stuffed *tree* tag that you can use in your templates:
       (nodeRenamed)="handleRenamed($event)"
       (nodeSelected)="handleSelected($event)"
       (nodeMoved)="handleMoved($event)"
-      (nodeCreated)="handleCreated($event)">
+      (nodeCreated)="handleCreated($event)"
+      (nodeExpanded)="handleExpanded($event)"
+      (nodeCollapsed)="handleCollapsed($event)">
     </tree>
 ```
 
@@ -147,6 +151,7 @@ Here is the definition of the `TreeModel` interface:
 ```typescript
 interface TreeModel {
   value: string | RenamableNode;
+  id: string | number;
   children?: Array<TreeModel>;
   loadChildren?: ChildrenLoadingFunction;
   settings?: TreeModelSettings;
@@ -299,7 +304,7 @@ By default `rootIsVisible` equals to `true`
 
 Also in the next section you'll be reading about events generated by the `ng2-tree`. And here [Tree](src/tree.ts) class comes in handy for us, because its instances propagated with event objects. Under the hood `ng2-tree` wraps a `TreeModel` provided by the user in `Tree`. And `Tree` in turn has lots of useful methods and properties (like `parent`, `hasChild()`, `isRoot()` etc.)
 
-### events (nodeMoved, nodeSelected, nodeRenamed, nodeRemoved, nodeCreated)
+### events (nodeMoved, nodeSelected, nodeRenamed, nodeRemoved, nodeCreated, nodeExpanded, nodeCollapsed)
 
 Here is the diagram that shows tree events' hierarchy
 
@@ -405,6 +410,40 @@ You can subscribe to `NodeRenamedEvent` by attaching listener to `(nodeRenamed)`
 }
 ```
 
+#### NodeExpandedEvent
+
+You can subscribe to `NodeExpandedEvent` by attaching listener to `(nodeExpanded)` attribute, this event wont fire on initial expansion
+
+```html
+    <tree
+      [tree]="tree"
+      (nodeExpanded)="handleExpanded($event)">
+    </tree>
+```
+
+`NodeExpandedEvent` has a `node` property of type `Tree`, which contains an expanded node.
+
+```typescript
+{node: <Tree>{...}}
+```
+
+#### NodeCollapsedEvent
+
+You can subscribe to `NodeCollapsedEvent` by attaching listener to `(nodeCollapsed)` attribute
+
+```html
+    <tree
+      [tree]="tree"
+      (nodeCollapsed)="handleCollapsed($event)">
+    </tree>
+```
+
+`NodeCollapsedEvent` has a `node` property of type `Tree`, which contains a collapsed node.
+
+```typescript
+{node: <Tree>{...}}
+```
+
 ## Changes that should be taken into account in order to migrate from __ng2-tree V1__ to __ng2-tree V2__
 - Events were reworked:
   - In V1 all events that were inherited from NodeDestructiveEvent used to have property `parent`. It's not the case anymore. If you need a parent you should get it from `node` in event object like `node.parent`;

demo/app.component.ts

@@ -17,7 +17,9 @@ declare const alertify: any;
           (nodeRenamed)="onNodeRenamed($event)"
           (nodeSelected)="onNodeSelected($event)"
           (nodeMoved)="onNodeMoved($event)"
-          (nodeCreated)="onNodeCreated($event)">
+          (nodeCreated)="onNodeCreated($event)"
+          (nodeExpanded)="onNodeExpanded($event)"
+          (nodeCollapsed)="onNodeCollapsed($event)">
         </tree>
       </div>
       <div class="tree-container">
@@ -42,9 +44,11 @@ declare const alertify: any;
           (nodeRenamed)="onNodeRenamed($event)"
           (nodeSelected)="onNodeSelected($event)"
           (nodeMoved)="onNodeMoved($event)"
-          (nodeCreated)="onNodeCreated($event)">
+          (nodeCreated)="onNodeCreated($event)"
+          (nodeExpanded)="onNodeExpanded($event)"
+          (nodeCollapsed)="onNodeCollapsed($event)">
         </tree>
-    </div>
+      </div>
     </div>
     `,
   styles: [`
@@ -135,18 +139,167 @@ export class AppComponent implements OnInit {
 
   public dfs: TreeModel = {
     value: '/',
-    settings: {
-      leftMenu: true,
-      rightMenu: false
-    },
+    id: 1,
     children: [
       {
-         value: 'bin',
-         children: [
-           {value: 'bash'},
-		   {value: 'umount'}
-         ]
-      }
+        value: 'bin',
+        id: 2,
+        children: [
+          {value: 'bash', id: 3},
+          {value: 'umount', id: 4},
+          {value: 'cp', id: 5},
+          {value: 'less', id: 6},
+          {value: 'rmdir', id: 7},
+          {value: 'touch', id: 8},
+          {value: 'chgrp', id: 9},
+          {value: 'chmod', id: 10},
+          {value: 'chown', id: 11},
+          {value: 'nano', id: 12}
+        ]
+      },
+      {
+        value: 'boot',
+        id: 13,
+        children: [
+          {
+            value: 'grub',
+            id: 14,
+            children: [
+              {value: 'fonts', id: 15},
+              {value: 'gfxblacklist.txt', id: 16},
+              {value: 'grub.cfg', id: 17},
+              {value: 'grubenv', id: 18},
+              {value: 'i386-pc', id: 19},
+              {value: 'locale', id: 20},
+              {value: 'unicode.pf2', id: 21}
+            ]
+          },
+          {
+            value: 'lost+found',
+            id: 22,
+            children: []
+          },
+          {value: 'abi-4.4.0-57-generic', id: 23},
+          {value: 'config-4.4.0-57-generic', id: 24},
+          {value: 'initrd.img-4.4.0-47-generic', id: 25},
+          {value: 'initrd.img-4.4.0-57-generic', id: 26},
+          {value: 'memtest86+.bin', id: 27},
+          {value: 'System.map-4.4.0-57-generic', id: 28},
+          {value: 'memtest86+.elf', id: 29},
+          {value: 'vmlinuz-4.4.0-57-generic', id: 30},
+          {value: 'memtest86+_multiboot.bin', id: 31}
+        ]
+      },
+      {
+        value: 'build-no-left-no-right-menus',
+        id: 32,
+        settings: {
+          leftMenu: false,
+          rightMenu: false
+        },
+        children: [
+          {
+            value: 'php5-left-menu',
+            id: 33,
+            settings: {
+              leftMenu: true
+            }
+          },
+          {
+            value: 'grails-left-menu',
+            id: 335,
+            settings: {
+              leftMenu: true
+            }
+          },
+          {
+            value: 'python-right-menu',
+            id: 333,
+            settings: {
+              rightMenu: true
+            }
+          }
+        ]
+      },
+      {value: 'cdrom', id: 34, children: []},
+      {value: 'dev', id: 35, children: []},
+      {value: 'etc', id: 36, children: []},
+      {
+        value: 'home',
+        id: 37,
+        children: [
+          {
+            value: 'firstUser',
+            id: 38,
+            children: [
+              {
+                value: 'Documents',
+                id: 39,
+                children: [
+                  {
+                    value: 'home',
+                    id: 40,
+                    children: [
+                      {
+                        value: 'bills',
+                        id: 41,
+                        children: [
+                          {value: '2016-07-01-mobile.pdf', id: 42},
+                          {value: '2016-07-01-electricity.pdf', id: 43},
+                          {value: '2016-07-01-water.pdf', id: 44},
+                          {value: '2016-07-01-internet.pdf', id: 45},
+                          {value: '2016-08-01-mobile.pdf', id: 46},
+                          {value: '2016-10-01-internet.pdf', id: 47}
+                        ]
+                      },
+                      {value: 'photos', id: 48, children: []}
+                    ]
+                  }
+                ]
+              },
+              {value: 'Downloads', id: 49, children: []},
+              {value: 'Desktop', id: 50, children: []},
+              {value: 'Pictures', id: 51, children: []},
+              {value: 'Music', id: 52, children: []},
+              {value: 'Public', id: 53, children: []}
+            ]
+          },
+          {
+            value: 'secondUser',
+            id: 54,
+            children: [
+              {value: 'Documents', id: 55, children: []},
+              {
+                value: 'Downloads',
+                id: 56,
+                children: [
+                  {value: 'Actobat3', id: 57},
+                  {value: 'Complib', id: 58},
+                  {value: 'Eudora', id: 59},
+                  {value: 'java', id: 60},
+                  {value: 'drivers', id: 61},
+                  {value: 'kathy', id: 62}
+                ]
+              },
+              {value: 'Desktop', id: 63, children: []},
+              {value: 'Pictures', id: 64, children: []},
+              {value: 'Music', id: 65, children: []},
+              {value: 'Public', id: 66, children: []}
+            ]
+          }
+        ]
+      },
+      {value: 'lib', id: 67, children: [] },
+      {value: 'media', id: 68, children: [] },
+      {value: 'opt', id: 69, children: [] },
+      {value: 'proc', id: 70, children: [] },
+      {value: 'root', id: 71, children: [] },
+      {value: 'run', id: 72, children: [] },
+      {value: 'sbin', id: 73, children: [] },
+      {value: 'srv', id: 74, children: [] },
+      {value: 'sys', id: 75, children: [] },
+      {value: 'usr', id: 76, children: [] },
+      {value: 'var', id: 77, children: [] }
     ]
   };
 
@@ -213,6 +366,14 @@ export class AppComponent implements OnInit {
     AppComponent.logEvent(e, 'Selected');
   }
 
+  public onNodeExpanded(e: NodeEvent): void {
+    AppComponent.logEvent(e, 'Expanded');
+  }
+
+  public onNodeCollapsed(e: NodeEvent): void {
+    AppComponent.logEvent(e, 'Collapsed');
+  }
+
   private static logEvent(e: NodeEvent, message: string): void {
     console.log(e);
     alertify.message(`${message}: ${e.node.value}`);

index.ts

@@ -16,6 +16,8 @@ import {
   NodeRenamedEvent,
   NodeMovedEvent,
   NodeSelectedEvent,
+  NodeExpandedEvent,
+  NodeCollapsedEvent,
   NodeDestructiveEvent
 } from './src/tree.events';
 
@@ -35,6 +37,8 @@ export {
   NodeRenamedEvent,
   NodeMovedEvent,
   NodeSelectedEvent,
+  NodeExpandedEvent,
+  NodeCollapsedEvent,
   NodeDestructiveEvent,
   TreeComponent,
   TreeModule

src/tree-internal.component.ts

@@ -20,7 +20,7 @@ import { Observable } from 'rxjs';
         [nodeDraggable]="element"
         [tree]="tree">
 
-        <div class="folding" (click)="tree.switchFoldingType()" [ngClass]="tree.foldingType.cssClass"></div>
+        <div class="folding" (click)="onSwitchFoldingType()" [ngClass]="tree.foldingType.cssClass"></div>
         <div class="node-value"
           *ngIf="!shouldShowInputForTreeValue()"
           [class.node-selected]="isSelected"
@@ -62,7 +62,7 @@ export class TreeInternalComponent implements OnInit {
   public isLeftMenuVisible: boolean = false;
 
   public constructor(@Inject(NodeMenuService) private nodeMenuService: NodeMenuService,
-                     @Inject(TreeService) private treeService: TreeService,
+                     @Inject(TreeService) public treeService: TreeService,
                      @Inject(ElementRef) public element: ElementRef) {
   }
 
@@ -175,6 +175,11 @@ export class TreeInternalComponent implements OnInit {
     this.treeService.fireNodeRemoved(this.tree);
   }
 
+  private onSwitchFoldingType(): void {
+    this.tree.switchFoldingType();
+	this.treeService.fireNodeSwitchFoldingType(this.tree);
+  }
+
   public applyNewValue(e: NodeEditableEvent): void {
     if ((e.action === NodeEditableEventAction.Cancel || this.tree.isNew()) && Tree.isValueEmpty(e.value)) {
       return this.treeService.fireNodeRemoved(this.tree);

src/tree.component.ts

@@ -35,6 +35,12 @@ export class TreeComponent implements OnInit, OnChanges {
   @Output()
   public nodeMoved: EventEmitter<any> = new EventEmitter();
 
+  @Output()
+  public nodeExpanded: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public nodeCollapsed: EventEmitter<any> = new EventEmitter();
+
   public tree: Tree;
 
   public constructor(@Inject(TreeService) private treeService: TreeService) {
@@ -68,5 +74,13 @@ export class TreeComponent implements OnInit, OnChanges {
     this.treeService.nodeMoved$.subscribe((e: NodeEvent) => {
       this.nodeMoved.emit(e);
     });
+
+    this.treeService.nodeExpanded$.subscribe((e: NodeEvent) => {
+      this.nodeExpanded.emit(e);
+    });
+
+    this.treeService.nodeCollapsed$.subscribe((e: NodeEvent) => {
+      this.nodeCollapsed.emit(e);
+    });
   }
 }

src/tree.events.ts

@@ -41,3 +41,15 @@ export class NodeRenamedEvent extends NodeDestructiveEvent {
     super(node);
   }
 }
+
+export class NodeExpandedEvent extends NodeEvent {
+  public constructor(node: Tree) {
+    super(node);
+  }
+}
+
+export class NodeCollapsedEvent extends NodeEvent {
+  public constructor(node: Tree) {
+    super(node);
+  }
+}