Inserting nodes to dropping position (#39)

Author: shibukk

README.md

@@ -136,6 +136,7 @@ interface ICursorPosition<TDataType> {
 | select(path: number[], addToSelection = false)                                                           | Select the node by using its path                                                                 |                                                                                                                                              |
 | getNodeEl(): HTMLElement                                                                                 | Get the node HTMLElement by using its path                                                        |
 | getSelected(): ISlTreeNode[]                                                                             | Get selected nodes                                                                                 |
+| insert(position: ICursorPosition, nodeModel: ISlTreeNodeModel)                                           | Insert nodes by the current cursor position.                                                       |
 | remove(paths: number[][])                                                                                | Remove nodes by paths. For example `.remove([[0,1], [0,2]])`
 | getFirstNode(): ISlTreeNode                                                                              | Get the first node in the tree                                                                     |
 | getLastNode(): ISlTreeNode                                                                               | Get the last node in the tree

demo/externaldrag.html

@@ -111,6 +111,7 @@ <h2> Sl-vue-tree - drag external elements</h2>
     methods: {
 
       onExternalDropHandler(cursorPosition, event) {
+        this.$refs.slVueTree.insert(cursorPosition, {title: "Dragged Item", isLeaf: true});
         console.log('external drop', cursorPosition);
       }
 

src/sl-vue-tree.js

@@ -589,21 +589,7 @@ export default {
       }
 
       // insert dragging nodes to the new place
-      const destNode = this.cursorPosition.node;
-      const destSiblings = this.getNodeSiblings(newNodes, destNode.path);
-      const destNodeModel = destSiblings[destNode.ind];
-
-      if (this.cursorPosition.placement === 'inside') {
-        destNodeModel.children = destNodeModel.children || [];
-        destNodeModel.children.unshift(...nodeModelsToInsert);
-      } else {
-        const insertInd = this.cursorPosition.placement === 'before' ?
-          destNode.ind :
-          destNode.ind + 1;
-
-        destSiblings.splice(insertInd, 0, ...nodeModelsToInsert);
-      }
-
+      this.insertModels(this.cursorPosition, nodeModelsToInsert, newNodes);
 
 
       // delete dragging node from the old place
@@ -740,6 +726,32 @@ export default {
       this.emitInput(newNodes);
     },
 
+    insertModels(cursorPosition, nodeModels, newNodes) {
+      const destNode = cursorPosition.node;
+      const destSiblings = this.getNodeSiblings(newNodes, destNode.path);
+      const destNodeModel = destSiblings[destNode.ind];
+
+      if (cursorPosition.placement === 'inside') {
+        destNodeModel.children = destNodeModel.children || [];
+        destNodeModel.children.unshift(...nodeModels);
+      } else {
+        const insertInd = cursorPosition.placement === 'before' ?
+          destNode.ind :
+          destNode.ind + 1;
+
+        destSiblings.splice(insertInd, 0, ...nodeModels);
+      }
+    },
+
+    insert(cursorPosition, nodeModel) {
+      const nodeModels = Array.isArray(nodeModel) ? nodeModel : [nodeModel];
+      const newNodes = this.copy(this.currentValue);
+
+      this.insertModels(cursorPosition, nodeModels, newNodes);
+
+      this.emitInput(newNodes);
+    },
+
     checkNodeIsParent(sourceNode, destNode) {
       const destPath = destNode.path;
       return JSON.stringify(destPath.slice(0, sourceNode.path.length)) == sourceNode.pathStr;