Feat：拖拽节点时鼠标移到画布边缘时画布自动移动

simple-mind-map/src/constants/defaultOptions.js

@@ -185,4 +185,6 @@ export const defaultOpt = {
   selectTextOnEnterEditText: false,
   // 删除节点后激活相邻节点
   deleteNodeActive: true,
+  // 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动
+  autoMoveWhenMouseInEdgeOnDrag: true
 }

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 || '',

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)
+    }
   }
 
   //  检测重叠节点

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