feat(tree): unselect tree via controller

Author: rychkog

src/demo/app/app.component.ts

@@ -55,6 +55,7 @@ declare const alertify: any;
                       (nodeRemoved)="onNodeRemoved($event)"
                       (nodeRenamed)="onNodeRenamed($event)"
                       (nodeSelected)="onNodeSelected($event)"
+                      (nodeUnselected)="onNodeUnselected($event)"
                       (nodeMoved)="onNodeMoved($event)"
                       (nodeCreated)="onNodeFFSCreated($event)"
                       (nodeExpanded)="onNodeExpanded($event)"
@@ -66,6 +67,7 @@ declare const alertify: any;
             <div class="tree-controlls">
                 <p class="notice">Tree API exposed via TreeController</p>
                 <button button (click)="handleActionOnFFS(13, 'select')">Select 'boot' node</button>
+                <button button (click)="handleActionOnFFS(13, 'unselect')">Unselect 'boot' node</button>
                 <button button (click)="handleActionOnFFS(13, 'allowSelection')">Allow selection of the 'boot' node</button>
                 <button button (click)="handleActionOnFFS(13, 'forbidSelection')">Forbid selection of the 'boot' node</button>
                 <button button (click)="handleActionOnFFS(2, 'collapse')">Collapse 'bin' node</button>
@@ -312,9 +314,6 @@ export class AppComponent implements OnInit {
       {
         value: 'boot',
         id: 13,
-        settings: {
-          selectionAllowed: false
-        },
         children: [
           {
             value: 'grub',
@@ -615,6 +614,10 @@ export class AppComponent implements OnInit {
     AppComponent.logEvent(e, 'Selected');
   }
 
+  public onNodeUnselected(e: NodeEvent): void {
+    AppComponent.logEvent(e, 'Unselected');
+  }
+
   public onMenuItemSelected(e: MenuItemSelectedEvent) {
     AppComponent.logEvent(e, `You selected ${e.selectedItem} menu item`);
   }

src/tree-controller.ts

@@ -21,6 +21,12 @@ export class TreeController {
     }
   }
 
+  public unselect(): void {
+    if (this.isSelected()) {
+      this.component.onNodeUnselected({ button: MouseButtons.Left });
+    }
+  }
+
   public isSelected(): boolean {
     return this.component.isSelected;
   }

src/tree-internal.component.ts

@@ -193,6 +193,17 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy, Afte
     }
   }
 
+  public onNodeUnselected(e: { button: number }): void {
+    if (!this.tree.selectionAllowed) {
+      return;
+    }
+
+    if (EventUtils.isLeftButtonClicked(e as MouseEvent)) {
+      this.isSelected = false;
+      this.treeService.fireNodeUnselected(this.tree);
+    }
+  }
+
   public showRightMenu(e: MouseEvent): void {
     if (!this.tree.hasRightMenu()) {
       return;

src/tree.component.ts

@@ -43,6 +43,8 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
 
   @Output() public nodeSelected: EventEmitter<any> = new EventEmitter();
 
+  @Output() public nodeUnselected: EventEmitter<any> = new EventEmitter();
+
   @Output() public nodeMoved: EventEmitter<any> = new EventEmitter();
 
   @Output() public nodeExpanded: EventEmitter<any> = new EventEmitter();
@@ -100,6 +102,12 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
       })
     );
 
+    this.subscriptions.push(
+      this.treeService.nodeUnselected$.subscribe((e: NodeEvent) => {
+        this.nodeUnselected.emit(e);
+      })
+    );
+
     this.subscriptions.push(
       this.treeService.nodeMoved$.subscribe((e: NodeEvent) => {
         this.nodeMoved.emit(e);

src/tree.events.ts

@@ -11,6 +11,12 @@ export class NodeSelectedEvent extends NodeEvent {
   }
 }
 
+export class NodeUnselectedEvent extends NodeEvent {
+  public constructor(node: Tree) {
+    super(node);
+  }
+}
+
 export class NodeDestructiveEvent extends NodeEvent {
   public constructor(node: Tree) {
     super(node);

src/tree.service.ts

@@ -10,7 +10,8 @@ import {
   NodeRemovedEvent,
   NodeRenamedEvent,
   NodeSelectedEvent,
-  NodeUncheckedEvent
+  NodeUncheckedEvent,
+  NodeUnselectedEvent
 } from './tree.events';
 import { RenamableNode } from './tree.types';
 import { Tree } from './tree';
@@ -29,6 +30,7 @@ export class TreeService {
   public nodeRenamed$: Subject<NodeRenamedEvent> = new Subject<NodeRenamedEvent>();
   public nodeCreated$: Subject<NodeCreatedEvent> = new Subject<NodeCreatedEvent>();
   public nodeSelected$: Subject<NodeSelectedEvent> = new Subject<NodeSelectedEvent>();
+  public nodeUnselected$: Subject<NodeUnselectedEvent> = new Subject<NodeUnselectedEvent>();
   public nodeExpanded$: Subject<NodeExpandedEvent> = new Subject<NodeExpandedEvent>();
   public nodeCollapsed$: Subject<NodeCollapsedEvent> = new Subject<NodeCollapsedEvent>();
   public menuItemSelected$: Subject<MenuItemSelectedEvent> = new Subject<MenuItemSelectedEvent>();
@@ -59,6 +61,10 @@ export class TreeService {
     this.nodeSelected$.next(new NodeSelectedEvent(tree));
   }
 
+  public fireNodeUnselected(tree: Tree): void {
+    this.nodeUnselected$.next(new NodeUnselectedEvent(tree));
+  }
+
   public fireNodeRenamed(oldValue: RenamableNode | string, tree: Tree): void {
     this.nodeRenamed$.next(new NodeRenamedEvent(tree, oldValue, tree.value));
   }