Allow drag to empty tree

Author: adamkleingit

CHANGELOG.md

@@ -1,3 +1,7 @@
+<a name="2.6.1"></a>
+# 2.6.1 (2016-01-03)
+* Added drop slot for empty tree
+
 <a name="2.6.0"></a>
 # 2.6.0 (2016-01-01)
 * Added index to node content template

lib/angular2-tree-component.ts

@@ -2,7 +2,7 @@ import { NgModule }      from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { TREE_ACTIONS, IActionMapping, IActionHandler } from './models/tree-options.model';
-import { ITreeOptions } from './defs/api';
+import { ITreeOptions, IAllowDropFn } from './defs/api';
 import { KEYS } from './constants/keys';
 import { TreeModel } from './models/tree.model';
 import { TreeNode } from './models/tree-node.model';
@@ -43,6 +43,7 @@ export {
   KEYS,
   IActionMapping,
   IActionHandler,
+  IAllowDropFn,
   LoadingComponent,
   TreeComponent,
   TreeNodeComponent,

lib/components/tree.component.ts

@@ -16,6 +16,7 @@ import * as _ from 'lodash'
   providers: [TreeModel],
   styles: [
     '.tree-children { padding-left: 20px }',
+    '.empty-tree-drop-slot .node-drop-slot { height: 20px; min-width: 100px }',
     `.tree {
       display: inline-block;
       cursor: pointer;
@@ -39,6 +40,12 @@ import * as _ from 'lodash'
           treeNodeFullTemplate: treeNodeFullTemplate
         }">
       </TreeNode>
+      <TreeNodeDropSlot
+        class="empty-tree-drop-slot"
+        *ngIf="treeModel.isEmptyTree()"
+        [dropIndex]="0"
+        [node]="treeModel.virtualRoot">
+      </TreeNodeDropSlot>
     </div>
   `
 })

lib/models/tree.model.ts

@@ -132,6 +132,9 @@ export class TreeModel implements ITreeModel {
     TreeModel.focusedTree = value ? this : null;
   }
 
+  isEmptyTree():boolean {
+    return this.roots && this.roots.length === 0;
+  }
 
   private _treeNodeContentComponent:any;
   get treeNodeContentComponent() { return this._treeNodeContentComponent };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-tree-component",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "A simple yet powerful tree component for Angular2",
   "author": "Adam Klein <adam@500tech.com>",
   "homepage": "https://github.com/500tech/angular2-tree-component",