feat(tree): make it possible to create static tree (refs #21)

By adding "options.static" to the TreeModel instance you can make it static - no drag and drop and no menu for the node with this option enabled
valor-software · Jan 4, 2017 · d9b3c79 · d9b3c79
1 parent 3435441
commit d9b3c79
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -56,7 +56,10 @@ export class AppComponent {
     value: 'Fonts',
     children: [
       {
-        value: 'Serif',
+        value: 'Serif  -  All my children and I are STATIC ¯\\_(ツ)_/¯',
+        options: {
+          static: true
+        },
         children: [
           {value: 'Antiqua'},
           {value: 'DejaVu Serif'},

diff --git a/src/draggable/node-draggable.directive.ts b/src/draggable/node-draggable.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, Inject, Renderer, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, Input, Inject, Renderer, OnDestroy, OnInit } from '@angular/core';
 import { TreeModel } from '../tree.types';
 import { NodeDraggableService } from './node-draggable.service';
 import { CapturedNode } from './captured-node';
@@ -7,7 +7,7 @@ import { NodeDraggableEvent } from './draggable.types';
 @Directive({
   selector: '[nodeDraggable]'
 })
-export class NodeDraggableDirective implements OnDestroy {
+export class NodeDraggableDirective implements OnDestroy, OnInit {
   public static DATA_TRANSFER_STUB_DATA: string = 'some browsers enable drag-n-drop only when dataTransfer has data';
 
   @Input()
@@ -24,15 +24,18 @@ export class NodeDraggableDirective implements OnDestroy {
                      @Inject(Renderer) private renderer: Renderer) {
 
     this.nodeNativeElement = element.nativeElement;
+  }
 
-    renderer.setElementAttribute(this.nodeNativeElement, 'draggable', 'true');
-
-    this.disposersForDragListeners.push(renderer.listen(this.nodeNativeElement, 'dragstart', this.handleDragStart.bind(this)));
-    this.disposersForDragListeners.push(renderer.listen(this.nodeNativeElement, 'dragenter', this.handleDragEnter.bind(this)));
-    this.disposersForDragListeners.push(renderer.listen(this.nodeNativeElement, 'dragover', this.handleDragOver.bind(this)));
-    this.disposersForDragListeners.push(renderer.listen(this.nodeNativeElement, 'dragleave', this.handleDragLeave.bind(this)));
-    this.disposersForDragListeners.push(renderer.listen(this.nodeNativeElement, 'drop', this.handleDrop.bind(this)));
-    this.disposersForDragListeners.push(renderer.listen(this.nodeNativeElement, 'dragend', this.handleDragEnd.bind(this)));
+  public ngOnInit(): void {
+    if (!this.tree.options.static) {
+      this.renderer.setElementAttribute(this.nodeNativeElement, 'draggable', 'true');
+      this.disposersForDragListeners.push(this.renderer.listen(this.nodeNativeElement, 'dragenter', this.handleDragEnter.bind(this)));
+      this.disposersForDragListeners.push(this.renderer.listen(this.nodeNativeElement, 'dragover', this.handleDragOver.bind(this)));
+      this.disposersForDragListeners.push(this.renderer.listen(this.nodeNativeElement, 'dragstart', this.handleDragStart.bind(this)));
+      this.disposersForDragListeners.push(this.renderer.listen(this.nodeNativeElement, 'dragleave', this.handleDragLeave.bind(this)));
+      this.disposersForDragListeners.push(this.renderer.listen(this.nodeNativeElement, 'drop', this.handleDrop.bind(this)));
+      this.disposersForDragListeners.push(this.renderer.listen(this.nodeNativeElement, 'dragend', this.handleDragEnd.bind(this)));
+    }
   }
 
   public ngOnDestroy(): void {

diff --git a/src/tree.component.ts b/src/tree.component.ts
@@ -1,5 +1,5 @@
 import { Input, Component, OnInit, EventEmitter, Output, ElementRef, Inject } from '@angular/core';
-import { TreeStatus, TreeModel, FoldingType, NodeEvent, RenamableNode, NodeSelectedEvent } from './tree.types';
+import { TreeStatus, TreeModel, TreeModelOptions, FoldingType, NodeEvent, RenamableNode, NodeSelectedEvent } from './tree.types';
 import { NodeDraggableService } from './draggable/node-draggable.service';
 import { NodeMenuService } from './menu/node-menu.service';
 import { NodeDraggableEventAction, NodeDraggableEvent } from './draggable/draggable.types';
@@ -62,9 +62,10 @@ export class TreeInternalComponent implements OnInit {
 
   public ngOnInit(): void {
     this.indexInParent = 0;
-
-    this.isLeaf = !Array.isArray(this.tree.children);
     this.tree._indexInParent = this.indexInParent;
+
+    this.isLeaf = !Array.isArray(this.tree.children);
+    this.tree.options = TreeModelOptions.merge(this.tree, this.parentTree);
 
     this.setUpNodeSelectedEventHandler();
     this.setUpMenuEventHandler();
@@ -257,6 +258,10 @@ export class TreeInternalComponent implements OnInit {
   }
 
   private showMenu(e: MouseEvent): void {
+    if (this.tree.options.static) {
+      return;
+    }
+
     if (isRightButtonClicked(e)) {
       this.isMenuVisible = !this.isMenuVisible;
       this.nodeMenuService.nodeMenuEvents$.next({

diff --git a/src/tree.types.ts b/src/tree.types.ts
@@ -1,3 +1,5 @@
+import * as _ from 'lodash';
+
 export class FoldingType {
   public static Expanded: FoldingType = new FoldingType('node-expanded');
   public static Collapsed: FoldingType = new FoldingType('node-collapsed');
@@ -14,11 +16,20 @@ export class FoldingType {
 export interface TreeModel {
   value: string | RenamableNode;
   children?: Array<TreeModel>;
+  options?: TreeModelOptions; 
   _status?: TreeStatus;
   _foldingType?: FoldingType;
   _indexInParent?: number;
 }
 
+export class TreeModelOptions {
+  static: boolean = false;
+
+  static merge(sourceA: TreeModel, sourceB: TreeModel): TreeModelOptions {
+    return _.defaults({}, _.get(sourceA, 'options'), _.get(sourceB, 'options'), {static: false});
+  }
+}
+
 export enum TreeStatus {
   New,
   Modified,