update: make providers global only within one tree - meaning each tree will have its own set of providers global across this tree

To accomplish this new component was introduced - BranchyComponent - that is also new name for a component

Author: rychkog

demo/app.ts

@@ -1,16 +1,14 @@
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
-import {TreeComponent, TreeService} from '../ng2-tree';
-import {NodeDraggableService} from '../src/node-draggable.service';
-import {NodeMenuService} from '../src/node-menu.service';
+import {BranchyComponent} from 'ng2-branchy.ts';
 
 @Component({
   selector: 'app',
   template: `
-        <tree [model]="tree"></tree>
-        <tree [model]="tree2"></tree>
+        <branchy [model]="tree"></branchy>
+        <branchy [model]="tree2"></branchy>
     `,
-  directives: [TreeComponent]
+  directives: [BranchyComponent]
 })
 class App {
   private tree: any = {
@@ -115,4 +113,4 @@ class App {
 
 }
 
-bootstrap(App, [TreeService, NodeDraggableService, NodeMenuService]);
+bootstrap(App);

ng2-branchy.ts

@@ -0,0 +1 @@
+export * from './src/branchy.component';

ng2-tree.ts

@@ -1,8 +1,8 @@
 {
-  "name": "ng2-tree",
+  "name": "ng2-branchy",
   "version": "1.0.0",
-  "description": "angular2 component for representing ui tree structures",
-  "main": "ng2-tree.js",
+  "description": "angular2 component for visualizing a tree",
+  "main": "ng2-branchy.js",
   "scripts": {
     "preinstall": "rm -rf ./typings && typings install",
     "dev": "webpack-dev-server --inline --hot",

package.json

@@ -11,21 +11,27 @@ import {
   NodeMenuEvent,
   TreeModel,
   FoldingType,
-  TreeEvent
+  TreeEvent, NodeDraggableEventAction
 } from './types';
 import {NodeEditableDirective} from './node-editable.directive';
 import {NodeMenuComponent} from './node-menu.component';
-import Draggable from './node-draggable.directive';
 import {NodeDraggableService} from './node-draggable.service';
 import {NodeMenuService} from './node-menu.service';
+import {NodeDraggableDirective} from './node-draggable.directive';
 
 @Component({
   selector: 'tree',
-  styles: [require('./tree.component.styl')],
-  template: require('./tree.component.html'),
-  directives: [NodeEditableDirective, TreeComponent, NodeMenuComponent, Draggable, CORE_DIRECTIVES],
+  styles: [require('./branchy.component.styl')],
+  template: require('./branchy.component.html'),
+  directives: [
+    NodeEditableDirective,
+    TreeComponent,
+    NodeMenuComponent,
+    NodeDraggableDirective,
+    CORE_DIRECTIVES
+  ],
 })
-export class TreeComponent implements OnInit {
+class TreeComponent implements OnInit {
   @Input('model')
   private tree: TreeModel;
 
@@ -70,12 +76,12 @@ export class TreeComponent implements OnInit {
 
   private setUpDraggableEventHandler() {
     this.nodeDraggableService.draggableNodeEvents$
-      .filter(event => event.action === 'remove')
+      .filter(event => event.action === NodeDraggableEventAction.Remove)
       .filter(event => event.captured.element === this.element)
       .subscribe(event => this.onChildRemoved({node: event.captured.tree}, this.parentTree));
 
     this.nodeDraggableService.draggableNodeEvents$
-      .filter(event => event.action !== 'remove')
+      .filter(event => event.action !== NodeDraggableEventAction.Remove)
       .filter(event => event.target === this.element)
       .filter(event => !this.hasChild(event.captured.tree))
       .subscribe(event => {
@@ -93,12 +99,12 @@ export class TreeComponent implements OnInit {
 
   private moveNodeToThisTreeAndRemoveFromPreviousOne(event: NodeDraggableEvent): void {
     this.tree.children.push(event.captured.tree);
-    this.nodeDraggableService.draggableNodeEvents$.next(_.merge(event, {action: 'remove'}));
+    this.nodeDraggableService.draggableNodeEvents$.next(_.merge(event, {action: NodeDraggableEventAction.Remove}));
   }
 
   private moveNodeToParentTreeAndRemoveFromPreviousOne(event: NodeDraggableEvent): void {
     this.parentTree.children.splice(this.indexInParent, 0, event.captured.tree);
-    this.nodeDraggableService.draggableNodeEvents$.next(_.merge(event, {action: 'remove'}));
+    this.nodeDraggableService.draggableNodeEvents$.next(_.merge(event, {action: NodeDraggableEventAction.Remove}));
   }
 
   private isEditInProgress() {
@@ -114,7 +120,7 @@ export class TreeComponent implements OnInit {
   }
 
   private isSiblingOf(child: TreeModel) {
-    return _.includes(this.parentTree.children, child);
+    return this.parentTree && _.includes(this.parentTree.children, child);
   }
 
   private swapWithSibling(sibling: TreeModel): void {
@@ -132,7 +138,7 @@ export class TreeComponent implements OnInit {
   }
 
   private switchFolding($event: any, tree: TreeModel): void {
-    this.handleFoldingType($event.target.parentTree.parentNode, tree);
+    this.handleFoldingType($event.target.parentNode.parentNode, tree);
   }
 
   private foldingType(node: TreeModel): FoldingTypeCssClass {
@@ -257,3 +263,14 @@ export class TreeComponent implements OnInit {
 }
 
 type FoldingTypeCssClass = 'node-expanded' | 'node-collapsed' | 'node-leaf';
+
+@Component({
+  selector: 'branchy',
+  providers: [NodeMenuService, NodeDraggableService],
+  template: `<tree [model]="tree"></tree>`,
+  directives: [TreeComponent]
+})
+export class BranchyComponent {
+  @Input('model')
+  private tree: TreeModel
+}

src/tree.component.html src/branchy.component.htmlsrc/tree.component.html renamed to src/branchy.component.html

@@ -5,9 +5,9 @@ import {NodeDraggableService} from './node-draggable.service';
 @Directive({
   selector: '[nodeDraggable]'
 })
-export default class NodeDraggableDirective implements OnDestroy {
+export class NodeDraggableDirective implements OnDestroy {
   private static DATA_TRANSFER_STUB_DATA: string = 'some browsers enable drag-n-drop only when dataTransfer has data';
-  
+
   @Input()
   private nodeDraggable: ElementRef;
 
@@ -67,9 +67,7 @@ export default class NodeDraggableDirective implements OnDestroy {
 
     this.removeClass('over-drop-target');
 
-    const capturedNode = this.nodeDraggableService.getCapturedNode();
-    if (!this.containsElementAt(e.pageX, e.pageY)
-      || !capturedNode.canBeDroppedAt(this.nodeDraggable)) {
+    if (!this.isDropPossible(e)) {
       return false;
     }
 
@@ -78,6 +76,11 @@ export default class NodeDraggableDirective implements OnDestroy {
     }
   }
 
+  private isDropPossible(e: DragEvent) {
+    const capturedNode = this.nodeDraggableService.getCapturedNode();
+    return capturedNode && capturedNode.canBeDroppedAt(this.nodeDraggable) && this.containsElementAt(e.pageX, e.pageY);
+  }
+
   private handleDragEnd(e: DragEvent): any {
     this.removeClass('over-drop-target');
     this.nodeDraggableService.releaseCapturedNode();

src/tree.component.styl src/branchy.component.stylsrc/tree.component.styl renamed to src/branchy.component.styl

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Output, Renderer, Inject, OnDestroy, OnInit} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
-import {MouseButtons, NodeMenuItemAction, NodeMenuItemSelectedEvent, NodeMenuAction} from './types';
+import {MouseButtons, NodeMenuItemAction, NodeMenuItemSelectedEvent, NodeMenuAction, NodeMenuEvent} from './types';
 import {NodeMenuService} from './node-menu.service';
 
 @Component({
@@ -59,7 +59,12 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
     const escapePressed = event instanceof KeyboardEvent && event.key === 'Escape';
 
     if (escapePressed || mouseClicked) {
-      this.nodeMenuService.nodeMenuEvents$.next({sender: event.target, action: NodeMenuAction.Close});
+      const nodeMenuEvent: NodeMenuEvent = {
+        sender: (event.target as HTMLElement),
+        action: NodeMenuAction.Close
+      };
+
+      this.nodeMenuService.nodeMenuEvents$.next(nodeMenuEvent);
     }
   }