From 36fe1eba3ecaf0de149f1a5092e335a53e309660 Mon Sep 17 00:00:00 2001 From: shibuya kazuaki Date: Mon, 10 Dec 2018 17:22:34 +0900 Subject: [PATCH 1/3] carve out `insert` methods --- src/sl-vue-tree.js | 42 +++++++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/src/sl-vue-tree.js b/src/sl-vue-tree.js index afc14c7..db625f5 100644 --- a/src/sl-vue-tree.js +++ b/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; From 4cf1aebbae7817e2d1ff5052440a12161a988bc0 Mon Sep 17 00:00:00 2001 From: shibuya kazuaki Date: Mon, 10 Dec 2018 17:24:52 +0900 Subject: [PATCH 2/3] add demo to insert by dragging --- demo/externaldrag.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/externaldrag.html b/demo/externaldrag.html index 1a0eaad..82482ff 100644 --- a/demo/externaldrag.html +++ b/demo/externaldrag.html @@ -111,6 +111,7 @@

Sl-vue-tree - drag external elements

methods: { onExternalDropHandler(cursorPosition, event) { + this.$refs.slVueTree.insert(cursorPosition, {title: "Dragged Item", isLeaf: true}); console.log('external drop', cursorPosition); } From 8e819fa611c9b4aa495754a4220cd739f55a0fea Mon Sep 17 00:00:00 2001 From: shibuya kazuaki Date: Mon, 10 Dec 2018 17:25:06 +0900 Subject: [PATCH 3/3] fix README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 93e8cc0..ce3ffde 100644 --- a/README.md +++ b/README.md @@ -136,6 +136,7 @@ interface ICursorPosition { | 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