feat(node menu): implement 'Add node' menu item

So basically this commit provides implementation of adding new node to the exitsting tree.
Though there is left lots of work to do.

Author: Georgii Rychko

components/editable-node.directive.ts

@@ -7,13 +7,13 @@ import {Ng2TreeService} from './ng2-tree.service';
 export class EditableNodeDirective implements OnInit {
   @Input()
   nodeValue: string;
-  
+
   @Output()
   valueChanged: EventEmitter<any> = new EventEmitter(false);
 
   private element: any;
   private treeService: Ng2TreeService;
-  
+
   constructor(elementRef: ElementRef, treeService: Ng2TreeService) {
     this.element = elementRef;
     this.treeService = treeService;

components/ng2-tree.component.ts

@@ -16,7 +16,7 @@ import {EditableNodeDirective} from './editable-node.directive.ts';
           <div class="node-menu" *ngIf="isMenuVisible">
             <ul class="node-menu-content">
               <li (click)="rename($event, tree)">Rename node</li>
-              <li>Add node</li>
+              <li (click)="addNode($event, tree)">Add node</li>
               <li (click)="remove($event, tree)">Remove node</li>
             </ul>          
           </div>
@@ -88,6 +88,16 @@ export class Ng2Tree implements OnInit {
     }
   }
 
+
+  private addNode($event: any, node: any) {
+    if ($event.which === 1) {
+      if (!node.children || !node.children.push) {
+        node.children = [];
+      }
+      node.children.push({value: '', status: 'new'});
+    }
+  }
+
   private rename($event: any, node: any) {
     if ($event.which === 1) {
       this.edit = true;
@@ -112,36 +122,46 @@ export class Ng2Tree implements OnInit {
     if (!this.previousEvent) {
       this.previousEvent = $event.type;
     }
-    
+
     if (this.previousEvent === 'keyup' && $event.type === 'blur') {
       this.previousEvent = $event.type;
       return;
     }
-    
+
+    if (!$event.value) {
+      return this.treeService.emitRemoveEvent({node});
+    }
+
     this.previousEvent = $event.type;
     node.value = $event.value;
     this.edit = false;
   }
 
   ngOnInit(): void {
+    if (!this.tree) return;
+
+    if (this.tree.status === 'new') {
+      this.edit = true;
+    }
+
     this.treeService.menuEventStream()
       .subscribe(menuEvent => {
         if (menuEvent.sender !== this && menuEvent.action === 'close') {
           this.isMenuVisible = false;
         }
-      })
-      
+      });
+
     this.treeService.removeNodeEventStream()
       .subscribe(removeEvent => {
         if (!this.tree || !this.tree.children) return;
         for (let i = 0; i < this.tree.children.length; i++) {
           const child = this.tree.children[i];
           if (child === removeEvent.node) {
             delete this.tree.children[i];
-            
+
             break;
           }
         }
-      })
+      });
   }
 }

components/ng2-tree.service.ts

@@ -3,46 +3,34 @@ import {Observable} from 'rxjs/Observable';
 
 @Injectable()
 export class Ng2TreeService {
-    private menuEvents$:EventEmitter<any> = new EventEmitter();
-    private cancelEvents$:EventEmitter<any> = new EventEmitter();
-    private removeEvents$:EventEmitter<any> = new EventEmitter();
-    public root: any;
-  
-    constructor() {
-      window.addEventListener('keyup', (event: any) => {
+  private menuEvents$: EventEmitter<any> = new EventEmitter();
+  private removeEvents$: EventEmitter<any> = new EventEmitter();
+
+  constructor() {
+    window.addEventListener('keyup', (event: any) => {
       if (event.keyCode === 27) {
         this.emitMenuEvent({sender: null, action: 'close'});
       }
     });
-    
-    
+
     window.addEventListener('click', (event: any) => {
-        this.emitMenuEvent({sender: null, action: 'close'});
+      this.emitMenuEvent({sender: null, action: 'close'});
     });
-    }
-  
-    menuEventStream(): Observable<any> {
-      return this.menuEvents$;
-    }
-  
-    emitMenuEvent(event: any): void {
-      this.menuEvents$.emit(event);
-    }
-    
-    
-    removeNodeEventStream(): Observable<any> {
-      return this.removeEvents$;
-    }
-    
-    emitRemoveEvent(event: any): void {
-      this.removeEvents$.emit(event);
-    }
+  }
+
+  menuEventStream(): Observable<any> {
+    return this.menuEvents$;
+  }
+
+  emitMenuEvent(event: any): void {
+    this.menuEvents$.emit(event);
+  }
+
+  removeNodeEventStream(): Observable<any> {
+    return this.removeEvents$;
+  }
 
-    cancelEventStream(): Observable<any> {
-      return this.cancelEvents$;
-    }
-  
-    emitCancelEvent(event: any): void {
-      this.cancelEvents$.emit(event);
-    }
+  emitRemoveEvent(event: any): void {
+    this.removeEvents$.emit(event);
+  }
 }