From fa5f2bda8d7f26c929b2aa63795638b9fb68f552 Mon Sep 17 00:00:00 2001 From: Mariusz Jamro Date: Mon, 12 Oct 2020 10:51:03 +0200 Subject: [PATCH] Add support for removing selected nodes directly. --- README.md | 11 ++++++----- demo/keyboardcontrol.html | 7 +++++++ src/sl-vue-tree.d.ts | 1 + src/sl-vue-tree.js | 9 +++++++++ 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c8a9dd6..9de869e 100644 --- a/README.md +++ b/README.md @@ -131,14 +131,15 @@ interface ICursorPosition { | method | description | |----------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| -| getNode(path: number[]): ISlTreeNode | Find the node by using its path | +| getNode(path: number[]): ISlTreeNode | Find the node by using its path | | traverse(cb: (node: ISlTreeNode, nodeModel: ISlTreeNodeModel, siblings: ISlTreeNodeModel[]) => boolean) | Helpful method to traverse all nodes. The traversing will be stopped if callback returns `false`. | -| updateNode(path: number[], patch: Partial) | Update the node by using its path | -| select(path: number[], addToSelection = false) | Select the node by using its path | | -| getNodeEl(): HTMLElement | Get the node HTMLElement by using its path | +| updateNode(path: number[], patch: Partial) | Update the node by using its path | +| 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]])` +| remove(paths: number[][]) | Remove nodes by paths. For example `.remove([[0,1], [0,2]])` | +| removeSelected() | Removes selected nodes (if any) | | getFirstNode(): ISlTreeNode | Get the first node in the tree | | getLastNode(): ISlTreeNode | Get the last node in the tree | getNextNode(path: number[], filter?: (node: ISlTreeNode) => boolean): ISlTreeNode; | Get the next node. You can skip the next nodes by using `filter` diff --git a/demo/keyboardcontrol.html b/demo/keyboardcontrol.html index e44ef48..d40fc08 100644 --- a/demo/keyboardcontrol.html +++ b/demo/keyboardcontrol.html @@ -101,6 +101,12 @@

Sl-vue-tree - Press Up and Down to move selection, Space and Enter to expan const keyCode = event.code; const slVueTree = this.$refs.slVueTree; + if(slVueTree.selectionSize > 0){ + if (keyCode === 'Delete') { + slVueTree.removeSelected(); + } + } + if (slVueTree.selectionSize === 1) { const selectedNode = slVueTree.getSelected()[0]; let nodeToSelect; @@ -124,6 +130,7 @@

Sl-vue-tree - Press Up and Down to move selection, Space and Enter to expan slVueTree.select(slVueTree.getLastNode().path); } } + } }) diff --git a/src/sl-vue-tree.d.ts b/src/sl-vue-tree.d.ts index c1c5ddc..55a9589 100644 --- a/src/sl-vue-tree.d.ts +++ b/src/sl-vue-tree.d.ts @@ -51,5 +51,6 @@ export default class SlVueTree extends Vue { getNodeEl(path: number[]): HTMLElement; select(path: number[], addToSelection?: boolean): ISlTreeNode; remove(paths: number[][]): void; + removeSelected(): void; insert(cursorPosition: ICursorPosition, nodeModel:ISlTreeNodeModel): void; } diff --git a/src/sl-vue-tree.js b/src/sl-vue-tree.js index 585871f..7b6e7ea 100644 --- a/src/sl-vue-tree.js +++ b/src/sl-vue-tree.js @@ -730,6 +730,15 @@ export default { this.emitInput(newNodes); }, + removeSelected() { + const selectedNodesPaths = []; + this.traverse((node) => { + if (node.isSelected) selectedNodesPaths.push(node.path); + }); + + this.remove(selectedNodesPaths); + }, + insertModels(cursorPosition, nodeModels, newNodes) { const destNode = cursorPosition.node; const destSiblings = this.getNodeSiblings(newNodes, destNode.path);