feat(node editing): add support of cancel and applying actions for the node value

For example: esc will cancel editing, enter will apply new value to the node, mouse click elsewhere cancels editing

Author: Georgii Rychko

components/editable-node.directive.ts

@@ -26,18 +26,17 @@ export class EditableNodeDirective implements OnInit {
 
   @HostListener('keyup', ['$event', '$event.target.value'])
   private editCompleted($event: any, newValue: any) {
-    //13 - enter
-    //27 - esc
-    if ($event.keyCode === 13) {
-      // http://stackoverflow.com/questions/35515254/what-is-a-dehydrated-detector-and-how-am-i-using-one-here
-      setTimeout(() => this.valueChanged.emit({value: newValue}), 1);
+    if ($event.keyCode === 13) {//enter
+      return this.valueChanged.emit({type: 'keyup', value: newValue});
+    }
+
+    if ($event.keyCode === 27) {//esc
+      return this.valueChanged.emit({type: 'keyup', value: this.nodeValue});
     }
   }
 
   @HostListener('blur', ['$event', '$event.target.value'])
   private editCompletedByMouse($event: any, newValue: any) {
-    //13 - enter
-    //27 - esc
-    this.valueChanged.emit({value: newValue});
+    this.valueChanged.emit({type: 'blur', value: this.nodeValue});
   }
 }

components/ng2-tree.component.ts

@@ -6,7 +6,7 @@ import {EditableNodeDirective} from './editable-node.directive.ts';
 @Component({
   selector: 'ng2-tree',
   template: `
-      <ul *ngIf="tree" class="tree" (keyup)="cancelActions($event)">
+      <ul *ngIf="tree" class="tree">
         <li>
           <div (contextmenu)="showMenu($event)">
             <span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span>
@@ -38,13 +38,13 @@ export class Ng2Tree implements OnInit {
   private treeService: Ng2TreeService;
   private isMenuVisible: boolean = false;
   private edit: boolean = false;
+  private previousEvent: any;
 
   constructor(treeService: Ng2TreeService) {
     this.treeService = treeService;
   }
 
   private switchFolding($event: any, tree: any): void {
-    console.log('fold');
     this.handleFoldingType($event.target.parentNode.parentNode, tree);
   }
 
@@ -91,14 +91,12 @@ export class Ng2Tree implements OnInit {
   private rename($event: any, node: any) {
     if ($event.which === 1) {
       this.edit = true;
-      this.isMenuVisible = false;
     }
   }
 
   private remove($event: any, node: any) {
     if ($event.which === 1) {
       this.treeService.emitRemoveEvent({node});
-      this.isMenuVisible = false;
     }
   }
 
@@ -110,11 +108,17 @@ export class Ng2Tree implements OnInit {
     $event.preventDefault();
   }
 
-  private cancelActions($event: any): void {
-    
-  }
-
   private applyNewValue($event: any, node: any): void {
+    if (!this.previousEvent) {
+      this.previousEvent = $event.type;
+    }
+    
+    if (this.previousEvent === 'keyup' && $event.type === 'blur') {
+      this.previousEvent = $event.type;
+      return;
+    }
+    
+    this.previousEvent = $event.type;
     node.value = $event.value;
     this.edit = false;
   }
@@ -126,7 +130,7 @@ export class Ng2Tree implements OnInit {
           this.isMenuVisible = false;
         }
       })
-    
+      
     this.treeService.removeNodeEventStream()
       .subscribe(removeEvent => {
         if (!this.tree || !this.tree.children) return;

components/ng2-tree.service.ts

@@ -6,7 +6,21 @@ 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) => {
+      if (event.keyCode === 27) {
+        this.emitMenuEvent({sender: null, action: 'close'});
+      }
+    });
+    
 
+    window.addEventListener('click', (event: any) => {
+        this.emitMenuEvent({sender: null, action: 'close'});
+    });
+    }
+  
     menuEventStream(): Observable<any> {
       return this.menuEvents$;
     }