Feat：将Select插件的画布自动移动功能独立出来，解决没有注册Select插件的情况下Drag插件无法使用画布自动移动功能的问题

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.drawTransform = this.mindMap.draw.transform()
+    this.autoMove.clearAutoMoveTimer()
-      this.mindMap.select.clearAutoMoveTimer()
+    this.autoMove.onMove(e.clientX, e.clientY)
-      this.mindMap.select.onMove(e.clientX, e.clientY)
-    }
   }
 
   // 开始拖拽时初始化一些数据

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.autoMove.clearAutoMoveTimer()
-    this.onMove(
+    this.autoMove.onMove(
       e.clientX,
       e.clientY,
       () => {
         this.isSelecting = true
         // 绘制矩形
-        this.rect.plot([
+        if (this.rect) {
-          [this.mouseDownX, this.mouseDownY],
+          this.rect.plot([
-          [this.mouseMoveX, this.mouseDownY],
+            [this.mouseDownX, this.mouseDownY],
-          [this.mouseMoveX, this.mouseMoveY],
+            [this.mouseMoveX, this.mouseDownY],
-          [this.mouseDownX, this.mouseMoveY]
+            [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()

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