diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index eef656f0..d8132c12 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -6,6 +6,7 @@ import { } from '../utils' import Base from '../layouts/Base' import { CONSTANTS } from '../constants/constant' +import AutoMove from '../utils/AutoMove' // 节点拖动插件 class Drag extends Base { @@ -13,6 +14,7 @@ class Drag extends Base { constructor({ mindMap }) { super(mindMap.renderer) this.mindMap = mindMap + this.autoMove = new AutoMove(mindMap) this.reset() this.bindEvent() } @@ -131,7 +133,7 @@ class Drag extends Base { this.mindMap.opt // 停止自动移动 if (autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) { - this.mindMap.select.clearAutoMoveTimer() + this.autoMove.clearAutoMoveTimer() } this.isMousedown = false // 恢复被拖拽节点的临时设置 @@ -237,12 +239,10 @@ class Drag extends Base { this.clone.translate(x - t.translateX, y - t.translateY) // 检测新位置 this.checkOverlapNode() - // 如果注册了多选节点插件,那么复用它的边缘自动移动画布功能 - if (this.mindMap.opt.autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) { - this.drawTransform = this.mindMap.draw.transform() - this.mindMap.select.clearAutoMoveTimer() - this.mindMap.select.onMove(e.clientX, e.clientY) - } + // 边缘自动移动画布 + this.drawTransform = this.mindMap.draw.transform() + this.autoMove.clearAutoMoveTimer() + this.autoMove.onMove(e.clientX, e.clientY) } // 开始拖拽时初始化一些数据 diff --git a/simple-mind-map/src/plugins/Select.js b/simple-mind-map/src/plugins/Select.js index 2892d08f..30209a8a 100644 --- a/simple-mind-map/src/plugins/Select.js +++ b/simple-mind-map/src/plugins/Select.js @@ -1,4 +1,5 @@ import { bfsWalk, throttle, checkTwoRectIsOverlap } from '../utils' +import AutoMove from '../utils/AutoMove' // 节点选择插件 class Select { @@ -13,6 +14,7 @@ class Select { this.mouseMoveY = 0 this.isSelecting = false this.cacheActiveList = [] + this.autoMove = new AutoMove(mindMap) this.bindEvent() } @@ -75,19 +77,21 @@ class Select { ) { return } - this.clearAutoMoveTimer() - this.onMove( + this.autoMove.clearAutoMoveTimer() + this.autoMove.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] - ]) + if (this.rect) { + this.rect.plot([ + [this.mouseDownX, this.mouseDownY], + [this.mouseMoveX, this.mouseDownY], + [this.mouseMoveX, this.mouseMoveY], + [this.mouseDownX, this.mouseMoveY] + ]) + } this.checkInNodes() }, (dir, step) => { @@ -120,7 +124,7 @@ class Select { return } this.checkTriggerNodeActiveEvent() - clearTimeout(this.autoMoveTimer) + this.autoMove.clearAutoMoveTimer() this.isMousedown = false this.cacheActiveList = [] if (this.rect) this.rect.remove() @@ -154,54 +158,6 @@ class Select { } } - // 鼠标移动事件 - 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) { - handle('left', step) - this.mindMap.view.translateX(step) - count++ - } - // 右边缘 - if (x >= this.mindMap.elRect.right - limit) { - handle('right', step) - this.mindMap.view.translateX(-step) - count++ - } - // 上边缘 - if (y <= this.mindMap.elRect.top + limit) { - handle('top', step) - this.mindMap.view.translateY(step) - count++ - } - // 下边缘 - if (y >= this.mindMap.elRect.bottom - limit) { - handle('bottom', step) - this.mindMap.view.translateY(-step) - count++ - } - if (count > 0) { - this.startAutoMove(x, y, callback, handle) - } - } - - // 开启自动移动 - startAutoMove(x, y, callback, handle) { - this.autoMoveTimer = setTimeout(() => { - this.onMove(x, y, callback, handle) - }, 20) - } - - // 清除自动移动定时器 - clearAutoMoveTimer() { - clearTimeout(this.autoMoveTimer) - } - // 创建矩形 createRect(x, y) { if (this.rect) this.rect.remove() diff --git a/simple-mind-map/src/utils/AutoMove.js b/simple-mind-map/src/utils/AutoMove.js new file mode 100644 index 00000000..bfee6848 --- /dev/null +++ b/simple-mind-map/src/utils/AutoMove.js @@ -0,0 +1,57 @@ +// 画布自动移动类 +class AutoMove { + constructor(mindMap) { + this.mindMap = mindMap + this.autoMoveTimer = null + } + + // 鼠标移动事件 + 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) { + handle('left', step) + this.mindMap.view.translateX(step) + count++ + } + // 右边缘 + if (x >= this.mindMap.elRect.right - limit) { + handle('right', step) + this.mindMap.view.translateX(-step) + count++ + } + // 上边缘 + if (y <= this.mindMap.elRect.top + limit) { + handle('top', step) + this.mindMap.view.translateY(step) + count++ + } + // 下边缘 + if (y >= this.mindMap.elRect.bottom - limit) { + handle('bottom', step) + this.mindMap.view.translateY(-step) + count++ + } + if (count > 0) { + this.startAutoMove(x, y, callback, handle) + } + } + + // 开启自动移动 + startAutoMove(x, y, callback, handle) { + this.autoMoveTimer = setTimeout(() => { + this.onMove(x, y, callback, handle) + }, 20) + } + + // 清除自动移动定时器 + clearAutoMoveTimer() { + clearTimeout(this.autoMoveTimer) + } +} + +export default AutoMove