Merge pull request #171 from valor-software/develop

sync master with develop

Author: Georgii Rychko

README.md

@@ -32,6 +32,7 @@
     - [isCollapsed - check whether a node is collapsed](#iscollapsed---check-whether-a-node-is-collapsed)
     - [expand - expands a node](#expand---expands-a-node)
     - [isExpanded - checks whether a node is expanded](#isexpanded---checks-whether-a-node-is-expanded)
+    - [toTreeModel - converts a tree to a TreeModel instance](#totreemodel---converts-a-tree-to-a-treemodel-instance)
     - [rename - renames a node (changes its value underneath)](#rename---renames-a-node-changes-its-value-underneath)
     - [startRenaming - changes the node template so that text input appears and lets a user type a new name](#startrenaming---changes-the-node-template-so-that-text-input-appears-and-lets-a-user-type-a-new-name)
     - [remove - removes a node from the tree](#remove---removes-a-node-from-the-tree)
@@ -334,6 +335,12 @@ Here is an example of its usage:
       'node': '<i class="fa fa-folder-o fa-lg"></i>',
       'leaf': '<i class="fa fa-file-o fa-lg"></i>',
       'leftMenu': '<i class="fa fa-navicon fa-lg"></i>'
+    },
+    'menuItems': [
+        { action: NodeMenuItemAction.Custom, name: 'Foo', cssClass: 'fa fa-arrow-right' },
+        { action: NodeMenuItemAction.Custom, name: 'Bar', cssClass: 'fa fa-arrow-right' },
+        { action: NodeMenuItemAction.Custom, name: 'Baz', cssClass: 'fa fa-arrow-right'}
+      ]
     }
   },
   children: [
@@ -357,6 +364,7 @@ Here is an example of its usage:
   * `node` - String - It specifies a html template which will be included to the left of the node's value.
   * `leaf` - String - It specifies a html template which will be included to the left of the leaf's value.
   * `leftMenu` - String - It specifies a html template to the right of the node's value. This template becomes clickable and shows a menu on node's click.
+* `menuItems` - here you can specify your custom menu items. You should feed an array of NodeMenuItem instances to this setting. Once done - setup a subscription to `MenuItemSelectedEvent`s by listening to `(menuItemSelected)="onMenuItemSelected($event)"` on the tree.
 
 All options that are defined on a `parent` are automatically applied to children. If you want you can override them by `settings` of the child node.
 
@@ -450,7 +458,7 @@ You can subscribe to `NodeCreatedEvent` by attaching listener to `(nodeCreated)`
 `NodeCreatedEvent` has a `node` property of type `Tree`, which contains a created node and a `controller` property, which will give you access to node's controller.
 
 ```typescript
-{node: <Tree>{...}, controller: <TreeController>{...}}
+{node: <Tree>{...}}
 ```
 
 #### NodeRenamedEvent
@@ -531,7 +539,11 @@ Relevant for loading children via ngrx (or any redux-inspired library).
 ```
 
 ## :gun: Controller
-First of all you should know how to get a controller of a particular node. You can get a controller of a node only if you set an id property of a node. For example, your tree structure should look like:
+First of all you should know how to get a controller of a particular node. You can get a controller of a node only if you set an id property of a node.
+
+> TIP: Ids for nodes created via the context menu or using a TreeController instance get populated automatically unless nodes had ids before there were added to the tree
+
+For example, your tree structure should look like:
 
 ```typescript
 public tree: TreeModel = {
@@ -655,6 +667,14 @@ This method expands the node in case it can be expanded. On successful expanding
 oopNodeController.isExpanded();
 ```
 
+#### toTreeModel - converts a tree to a TreeModel instance
+
+Actually controller makes and returns a clone of tree's underlying model
+
+```typescript
+oopNodeController.toTreeModel();
+```
+
 This method returns true if the node is expanded and false otherwise.
 
 #### rename - renames a node (changes its value underneath)

index.ts

@@ -9,6 +9,9 @@ import {
 
 import { Tree } from './src/tree';
 
+import { NodeMenuItemAction } from './src/menu/menu.events';
+import { NodeMenuItem } from './src/menu/node-menu.component';
+
 import {
   NodeEvent,
   NodeCreatedEvent,
@@ -18,6 +21,7 @@ import {
   NodeSelectedEvent,
   NodeExpandedEvent,
   NodeCollapsedEvent,
+  MenuItemSelectedEvent,
   NodeDestructiveEvent
 } from './src/tree.events';
 
@@ -41,5 +45,9 @@ export {
   NodeCollapsedEvent,
   NodeDestructiveEvent,
   TreeComponent,
-  TreeModule
+  TreeModule,
+  NodeMenuItemAction,
+  NodeMenuItem,
+  ChildrenLoadingFunction,
+  MenuItemSelectedEvent
 };

package.json

@@ -63,7 +63,7 @@
     "@types/jasmine": "2.8.2",
     "@types/node": "8.0.53",
     "alertifyjs": "1.10.0",
-    "codelyzer": "3.0.1",
+    "codelyzer": "4.0.1",
     "conventional-changelog": "1.1.7",
     "conventional-changelog-cli": "1.3.5",
     "conventional-github-releaser": "2.0.0",
@@ -88,9 +88,10 @@
     "shelljs": "0.7.8",
     "systemjs-builder": "0.16.12",
     "ts-node": "3.3.0",
-    "tslint": "5.4.3",
-    "tslint-config-valorsoft": "2.0.1",
+    "tslint": "5.8.0",
+    "tslint-config-valorsoft": "2.1.1",
     "typescript": "2.4.2",
+    "uuid": "3.1.0",
     "webpack": "3.8.1",
     "zone.js": "0.8.18"
   }

src/demo/app/app.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { NodeEvent, TreeModel, RenamableNode, Ng2TreeSettings } from '../../../index';
+import { Ng2TreeSettings, NodeEvent, RenamableNode, TreeModel } from '../../../index';
+import { NodeMenuItemAction } from '../../menu/menu.events';
+import { MenuItemSelectedEvent } from '../../tree.events';
 
 declare const alertify: any;
 
@@ -12,6 +14,7 @@ declare const alertify: any;
         <div class="tree-content">
           <tree #treeFonts
                 [tree]="fonts"
+                (menuItemSelected)="onMenuItemSelected($event)"
                 (nodeRemoved)="onNodeRemoved($event)"
                 (nodeRenamed)="onNodeRenamed($event)"
                 (nodeSelected)="onNodeSelected($event)"
@@ -202,8 +205,15 @@ export class AppComponent implements OnInit {
         ]
       },
       {
-        value: 'Sans-serif',
+        value: 'Sans-serif (Right click me - I have a custom menu)',
         id: 11,
+        settings: {
+        menuItems: [
+            { action: NodeMenuItemAction.Custom, name: 'Foo', cssClass: 'fa fa-arrow-right' },
+            { action: NodeMenuItemAction.Custom, name: 'Bar', cssClass: 'fa fa-arrow-right' },
+            { action: NodeMenuItemAction.Custom, name: 'Baz', cssClass: 'fa fa-arrow-right'}
+          ]
+        },
         children: [
           {value: 'Arial', id: 12},
           {value: 'Century Gothic', id: 13},
@@ -567,6 +577,10 @@ export class AppComponent implements OnInit {
     AppComponent.logEvent(e, 'Selected');
   }
 
+  public onMenuItemSelected(e: MenuItemSelectedEvent) {
+    AppComponent.logEvent(e, `You selected ${e.selectedItem} menu item`);
+  }
+
   public onNodeExpanded(e: NodeEvent): void {
     AppComponent.logEvent(e, 'Expanded');
   }

src/menu/menu.events.ts

@@ -2,7 +2,8 @@ export enum NodeMenuItemAction {
   NewFolder,
   NewTag,
   Rename,
-  Remove
+  Remove,
+  Custom
 }
 
 export enum NodeMenuAction {
@@ -16,4 +17,5 @@ export interface NodeMenuEvent {
 
 export interface NodeMenuItemSelectedEvent {
   nodeMenuItemAction: NodeMenuItemAction;
+  nodeMenuItemSelected?: string;
 }

src/menu/node-menu.component.ts

@@ -1,5 +1,5 @@
 import {
-  Component, EventEmitter, Output, Inject, OnDestroy, OnInit, ViewChild, Renderer2
+  Component, EventEmitter, Output, Input, Inject, OnDestroy, OnInit, ViewChild, Renderer2
 } from '@angular/core';
 import { NodeMenuService } from './node-menu.service';
 import { NodeMenuItemSelectedEvent, NodeMenuItemAction, NodeMenuAction } from './menu.events';
@@ -23,6 +23,9 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
   @Output()
   public menuItemSelected: EventEmitter<NodeMenuItemSelectedEvent> = new EventEmitter<NodeMenuItemSelectedEvent>();
 
+  @Input()
+  public menuItems: NodeMenuItem[];
+
   @ViewChild('menuContainer') public menuContainer: any;
 
   public availableMenuItems: NodeMenuItem[] = [
@@ -55,6 +58,7 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
   }
 
   public ngOnInit(): void {
+    this.availableMenuItems = this.menuItems || this.availableMenuItems;
     this.disposersForGlobalListeners.push(this.renderer.listen('document', 'keyup', this.closeMenu.bind(this)));
     this.disposersForGlobalListeners.push(this.renderer.listen('document', 'mousedown', this.closeMenu.bind(this)));
   }
@@ -65,7 +69,11 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
 
   public onMenuItemSelected(e: MouseEvent, selectedMenuItem: NodeMenuItem): void {
     if (isLeftButtonClicked(e)) {
-      this.menuItemSelected.emit({nodeMenuItemAction: selectedMenuItem.action});
+      this.menuItemSelected.emit({
+        nodeMenuItemAction: selectedMenuItem.action,
+        nodeMenuItemSelected: selectedMenuItem.name
+      });
+
       this.nodeMenuService.fireMenuEvent(e.target as HTMLElement, NodeMenuAction.Close);
     }
   }
@@ -84,5 +92,5 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
 export interface NodeMenuItem {
   name: string;
   action: NodeMenuItemAction;
-  cssClass: string;
+  cssClass?: string;
 }

src/tree-controller.ts

@@ -44,6 +44,10 @@ export class TreeController {
     return this.tree.isNodeCollapsed();
   }
 
+  public toTreeModel(): TreeModel {
+    return this.tree.toTreeModel();
+  }
+
   public rename(newValue: string): void {
     this.tree.markAsBeingRenamed();
     this.component.applyNewValue({ type: 'keyup', value: newValue });

src/tree-internal.component.ts

@@ -1,4 +1,13 @@
-import { Component, ElementRef, TemplateRef, Inject, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  TemplateRef
+} from '@angular/core';
 import * as TreeTypes from './tree.types';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
@@ -41,13 +50,19 @@ import { get } from './utils/fn.utils';
 
         <div class="node-left-menu" *ngIf="tree.hasLeftMenu()" (click)="showLeftMenu($event)" [innerHTML]="tree.leftMenuTemplate">
         </div>
-        <node-menu *ngIf="tree.hasLeftMenu() && isLeftMenuVisible"
+        <node-menu *ngIf="tree.hasLeftMenu() && isLeftMenuVisible && !hasCustomMenu()"
           (menuItemSelected)="onMenuItemSelected($event)">
         </node-menu>
       </div>
 
-      <node-menu *ngIf="isRightMenuVisible" (menuItemSelected)="onMenuItemSelected($event)"></node-menu>
+      <node-menu *ngIf="isRightMenuVisible && !hasCustomMenu()"
+           (menuItemSelected)="onMenuItemSelected($event)">
+      </node-menu>
 
+      <node-menu *ngIf="hasCustomMenu() && (isRightMenuVisible || isLeftMenuVisible)"
+           [menuItems]="tree.menuItems"
+           (menuItemSelected)="onMenuItemSelected($event)">
+      </node-menu>
       <ng-template [ngIf]="tree.isNodeExpanded()">
         <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child" [template]="template"></tree-internal>
       </ng-template>
@@ -72,9 +87,9 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
 
   private subscriptions: Subscription[] = [];
 
-  public constructor(@Inject(NodeMenuService) private nodeMenuService: NodeMenuService,
-                     @Inject(TreeService) public treeService: TreeService,
-                     @Inject(ElementRef) public element: ElementRef) {
+  public constructor(private nodeMenuService: NodeMenuService,
+                     public treeService: TreeService,
+                     public element: ElementRef) {
   }
 
   public ngOnInit(): void {
@@ -84,7 +99,6 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     this.settings = this.settings || { rootIsVisible: true };
-
     this.subscriptions.push(this.nodeMenuService.hideMenuStream(this.element)
       .subscribe(() => {
         this.isRightMenuVisible = false;
@@ -182,6 +196,9 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
       case NodeMenuItemAction.Remove:
         this.onRemoveSelected();
         break;
+      case NodeMenuItemAction.Custom:
+        this.treeService.fireMenuItemSelected(this.tree, e.nodeMenuItemSelected);
+        break;
       default:
         throw new Error(`Chosen menu item doesn't exist`);
     }
@@ -235,4 +252,8 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
   public isRootHidden(): boolean {
     return this.tree.isRoot() && !this.settings.rootIsVisible;
   }
+
+  public hasCustomMenu(): boolean {
+    return this.tree.hasCustomMenu();
+  }
 }

src/tree.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 import { TreeService } from './tree.service';
 import * as TreeTypes from './tree.types';
-import { NodeEvent } from './tree.events';
+import { NodeEvent, MenuItemSelectedEvent } from './tree.events';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
 import { Subscription } from 'rxjs/Subscription';
@@ -46,8 +46,11 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
   @Output()
   public nodeCollapsed: EventEmitter<any> = new EventEmitter();
 
-@Output()
-public loadNextLevel: EventEmitter<any> = new EventEmitter();
+  @Output()
+  public menuItemSelected: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public loadNextLevel: EventEmitter<any> = new EventEmitter();
 
   public tree: Tree;
   @ViewChild('rootComponent') public rootComponent;
@@ -96,6 +99,10 @@ public loadNextLevel: EventEmitter<any> = new EventEmitter();
       this.nodeCollapsed.emit(e);
     }));
 
+    this.subscriptions.push(this.treeService.menuItemSelected$.subscribe((e: MenuItemSelectedEvent) => {
+      this.menuItemSelected.emit(e);
+    }));
+
     this.subscriptions.push(this.treeService.loadNextLevel$.subscribe((e: NodeEvent) => {
       this.loadNextLevel.emit(e);
     }));

src/tree.events.ts

@@ -55,6 +55,12 @@ export class NodeCollapsedEvent extends NodeEvent {
   }
 }
 
+export class MenuItemSelectedEvent extends NodeEvent {
+  public constructor(node: Tree, public selectedItem: string) {
+    super(node);
+  }
+}
+
 export class LoadNextLevelEvent extends NodeEvent {
   public constructor(node: Tree) {
     super(node);