diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 14db4e59..442ec94d 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -185,4 +185,6 @@ export const defaultOpt = { selectTextOnEnterEditText: false, // 删除节点后激活相邻节点 deleteNodeActive: true, + // 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 + autoMoveWhenMouseInEdgeOnDrag: true } diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index 5886e490..aaa52e01 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -841,8 +841,9 @@ class Render { } else { // 如果只选中了一个节点,删除后激活其兄弟节点或者父节点 if ( - this.activeNodeList.length === 1 && - !this.activeNodeList[0].isGeneralization&&this.mindMap.opt.deleteNodeActive + this.activeNodeList.length === 1 && + !this.activeNodeList[0].isGeneralization && + this.mindMap.opt.deleteNodeActive ) { const node = this.activeNodeList[0] const broList = node.parent.children @@ -1123,7 +1124,13 @@ class Render { // 设置节点图片 setNodeImage(node, data) { - const { url, title, width, height, custom = false } = data || { url: '', title: '', width: 0, height: 0, custom: false } + const { + url, + title, + width, + height, + custom = false + } = data || { url: '', title: '', width: 0, height: 0, custom: false } this.setNodeDataRender(node, { image: url, imageTitle: title || '', diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index eeeed75f..bf730605 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -186,6 +186,8 @@ class Drag extends Base { if (!this.isMousedown) { return } + let originX = x + let originY = y this.createCloneNode() let { scaleX, scaleY, translateX, translateY } = this.drawTransform this.cloneNodeLeft = x - this.offsetX @@ -205,6 +207,12 @@ class Drag extends Base { ) ) this.checkOverlapNode() + // 如果注册了多选节点插件,那么复用它的边缘自动移动画布功能 + if (this.mindMap.opt.autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) { + this.drawTransform = this.mindMap.draw.transform() + this.mindMap.select.clearAutoMoveTimer() + this.mindMap.select.onMove(originX, originY) + } } // 检测重叠节点 diff --git a/simple-mind-map/src/plugins/Select.js b/simple-mind-map/src/plugins/Select.js index bd782a47..1998d192 100644 --- a/simple-mind-map/src/plugins/Select.js +++ b/simple-mind-map/src/plugins/Select.js @@ -54,8 +54,40 @@ class Select { ) { return } - clearTimeout(this.autoMoveTimer) - this.onMove(e.clientX, e.clientY) + this.clearAutoMoveTimer() + this.onMove( + e.clientX, + e.clientY, + () => { + this.isSelecting = true + // 绘制矩形 + this.rect.plot([ + [this.mouseDownX, this.mouseDownY], + [this.mouseMoveX, this.mouseDownY], + [this.mouseMoveX, this.mouseMoveY], + [this.mouseDownX, this.mouseMoveY] + ]) + this.checkInNodes() + }, + (dir, step) => { + switch (dir) { + case 'left': + this.mouseDownX += step + break + case 'top': + this.mouseDownY += step + break + case 'right': + this.mouseDownX -= step + break + case 'bottom': + this.mouseDownY -= step + break + default: + break + } + } + ) }) this.mindMap.on('mouseup', () => { if (this.mindMap.opt.readonly) { @@ -78,79 +110,78 @@ class Select { // 如果激活节点改变了,那么触发事件 checkTriggerNodeActiveEvent() { - let isNumChange = this.cacheActiveList.length !== this.mindMap.renderer.activeNodeList.length + let isNumChange = + this.cacheActiveList.length !== + this.mindMap.renderer.activeNodeList.length let isNodeChange = false if (!isNumChange) { - for(let i = 0; i < this.cacheActiveList.length; i++) { + for (let i = 0; i < this.cacheActiveList.length; i++) { let cur = this.cacheActiveList[i] - if (!this.mindMap.renderer.activeNodeList.find((item) => { - return item.nodeData.data.uid === cur.nodeData.data.uid - })){ + if ( + !this.mindMap.renderer.activeNodeList.find(item => { + return item.nodeData.data.uid === cur.nodeData.data.uid + }) + ) { isNodeChange = true break } } } if (isNumChange || isNodeChange) { - this.mindMap.emit( - 'node_active', - null, - [...this.mindMap.renderer.activeNodeList] - ) + this.mindMap.emit('node_active', null, [ + ...this.mindMap.renderer.activeNodeList + ]) } } // 鼠标移动事件 - onMove(x, y) { - this.isSelecting = true - // 绘制矩形 - this.rect.plot([ - [this.mouseDownX, this.mouseDownY], - [this.mouseMoveX, this.mouseDownY], - [this.mouseMoveX, this.mouseMoveY], - [this.mouseDownX, this.mouseMoveY] - ]) - this.checkInNodes() + onMove(x, y, callback = () => {}, handle = () => {}) { + callback() // 检测边缘移动 let step = this.mindMap.opt.selectTranslateStep let limit = this.mindMap.opt.selectTranslateLimit let count = 0 // 左边缘 if (x <= this.mindMap.elRect.left + limit) { - this.mouseDownX += step + handle('left', step) this.mindMap.view.translateX(step) count++ } // 右边缘 if (x >= this.mindMap.elRect.right - limit) { - this.mouseDownX -= step + handle('right', step) this.mindMap.view.translateX(-step) count++ } // 上边缘 if (y <= this.mindMap.elRect.top + limit) { - this.mouseDownY += step + handle('top', step) this.mindMap.view.translateY(step) count++ } // 下边缘 if (y >= this.mindMap.elRect.bottom - limit) { - this.mouseDownY -= step + handle('bottom', step) this.mindMap.view.translateY(-step) count++ } if (count > 0) { - this.startAutoMove(x, y) + this.startAutoMove(x, y, callback, handle) } } // 开启自动移动 - startAutoMove(x, y) { + startAutoMove(x, y, callback, handle) { this.autoMoveTimer = setTimeout(() => { - this.onMove(x, y) + this.onMove(x, y, callback, handle) }, 20) } + // 清除自动移动定时器 + clearAutoMoveTimer() { + clearTimeout(this.autoMoveTimer) + } + // 创建矩形 createRect(x, y) { this.rect = this.mindMap.svg