diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index a1b16186..44257b04 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -254,6 +254,8 @@ export const defaultOpt = { // 拖拽单个节点时会克隆被拖拽节点,如果想修改该克隆节点,那么可以通过该选项提供一个处理函数,函数接收克隆节点对象 // 需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象,所以你需要阅读该库的文档来操作该对象 handleDragCloneNode: null, + // 即将拖拽完成前调用该函数,函数接收一个对象作为参数:{overlapNodeUid,prevNodeUid,nextNodeUid},代表拖拽信息,如果要阻止本次拖拽,那么可以返回true。函数可以是异步函数,返回Promise实例 + beforeDragEnd: null, // 【Watermark插件】 // 水印配置 diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index 9aa7e612..8d95cd7f 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -123,12 +123,14 @@ class Drag extends Base { } // 鼠标松开事件 - onMouseup(e) { + async onMouseup(e) { if (!this.isMousedown) { return } + const { autoMoveWhenMouseInEdgeOnDrag, enableFreeDrag, beforeDragEnd } = + this.mindMap.opt // 停止自动移动 - if (this.mindMap.opt.autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) { + if (autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) { this.mindMap.select.clearAutoMoveTimer() } this.isMousedown = false @@ -142,9 +144,20 @@ class Drag extends Base { let overlapNodeUid = this.overlapNode ? this.overlapNode.getData('uid') : '' let prevNodeUid = this.prevNode ? this.prevNode.getData('uid') : '' let nextNodeUid = this.nextNode ? this.nextNode.getData('uid') : '' + if (this.isDragging && typeof beforeDragEnd === 'function') { + const isCancel = await beforeDragEnd({ + overlapNodeUid, + prevNodeUid, + nextNodeUid + }) + if (isCancel) { + this.reset() + return + } + } // 存在重叠子节点,则移动作为其子节点 if (this.overlapNode) { - this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false) + this.removeNodeActive(this.overlapNode) this.mindMap.execCommand( 'MOVE_NODE_TO', this.beingDragNodeList, @@ -152,7 +165,7 @@ class Drag extends Base { ) } else if (this.prevNode) { // 存在前一个相邻节点,作为其下一个兄弟节点 - this.mindMap.execCommand('SET_NODE_ACTIVE', this.prevNode, false) + this.removeNodeActive(this.prevNode) this.mindMap.execCommand( 'INSERT_AFTER', this.beingDragNodeList, @@ -160,7 +173,7 @@ class Drag extends Base { ) } else if (this.nextNode) { // 存在下一个相邻节点,作为其前一个兄弟节点 - this.mindMap.execCommand('SET_NODE_ACTIVE', this.nextNode, false) + this.removeNodeActive(this.nextNode) this.mindMap.execCommand( 'INSERT_BEFORE', this.beingDragNodeList, @@ -168,7 +181,7 @@ class Drag extends Base { ) } else if ( this.clone && - this.mindMap.opt.enableFreeDrag && + enableFreeDrag && this.beingDragNodeList.length === 1 ) { // 如果只拖拽了一个节点,那么设置自定义位置 @@ -201,6 +214,13 @@ class Drag extends Base { this.reset() } + // 移除节点的激活状态 + removeNodeActive(node) { + if (node.getData('isActive')) { + this.mindMap.execCommand('SET_NODE_ACTIVE', node, false) + } + } + // 拖动中 onMove(x, y, e) { if (!this.isMousedown) {