优化部分插件代码，增加解绑事件的逻辑

simple-mind-map/src/plugins/AssociativeLine.js

@@ -59,41 +59,68 @@ class AssociativeLine {
 
   // 监听事件
   bindEvent() {
-    // 节点树渲染完毕后渲染连接线
     this.renderAllLines = this.renderAllLines.bind(this)
+    this.onDrawClick = this.onDrawClick.bind(this)
+    this.onNodeClick = this.onNodeClick.bind(this)
+    this.removeLine = this.removeLine.bind(this)
+    this.addLine = this.addLine.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onNodeDragging = this.onNodeDragging.bind(this)
+    this.onNodeDragend = this.onNodeDragend.bind(this)
+    this.onControlPointMouseup = this.onControlPointMouseup.bind(this)
+
+    // 节点树渲染完毕后渲染连接线
     this.mindMap.on('node_tree_render_end', this.renderAllLines)
     // 状态改变后重新渲染连接线
     this.mindMap.on('data_change', this.renderAllLines)
     // 监听画布和节点点击事件，用于清除当前激活的连接线
-    this.mindMap.on('draw_click', () => {
+    this.mindMap.on('draw_click', this.onDrawClick)
+    this.mindMap.on('node_click', this.onNodeClick)
+    // 注册删除快捷键
+    this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeLine)
+    // 注册添加连接线的命令
+    this.mindMap.command.add('ADD_ASSOCIATIVE_LINE', this.addLine)
+    // 监听鼠标移动事件
+    this.mindMap.on('mousemove', this.onMousemove)
+    // 节点拖拽事件
+    this.mindMap.on('node_dragging', this.onNodeDragging)
+    this.mindMap.on('node_dragend', this.onNodeDragend)
+    // 拖拽控制点
+    this.mindMap.on('mouseup', this.onControlPointMouseup)
+    // 缩放事件
+    this.mindMap.on('scale', this.onScale)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('node_tree_render_end', this.renderAllLines)
+    this.mindMap.off('data_change', this.renderAllLines)
+    this.mindMap.off('draw_click', this.onDrawClick)
+    this.mindMap.off('node_click', this.onNodeClick)
+    this.mindMap.keyCommand.removeShortcut('Del|Backspace', this.removeLine)
+    this.mindMap.command.remove('ADD_ASSOCIATIVE_LINE', this.addLine)
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('node_dragging', this.onNodeDragging)
+    this.mindMap.off('node_dragend', this.onNodeDragend)
+    this.mindMap.off('mouseup', this.onControlPointMouseup)
+    this.mindMap.off('scale', this.onScale)
+  }
+
+  // 画布点击事件
+  onDrawClick() {
     if (this.isControlPointMousedown) {
       return
     }
     this.clearActiveLine()
-    })
+  }
-    this.mindMap.on('node_click', node => {
+
+  // 节点点击事件
+  onNodeClick(node) {
     if (this.isCreatingLine) {
       this.completeCreateLine(node)
     } else {
       this.clearActiveLine()
     }
-    })
-    // 注册删除快捷键
-    this.mindMap.keyCommand.addShortcut(
-      'Del|Backspace',
-      this.removeLine.bind(this)
-    )
-    // 注册添加连接线的命令
-    this.mindMap.command.add('ADD_ASSOCIATIVE_LINE', this.addLine.bind(this))
-    // 监听鼠标移动事件
-    this.mindMap.on('mousemove', this.onMousemove.bind(this))
-    // 节点拖拽事件
-    this.mindMap.on('node_dragging', this.onNodeDragging.bind(this))
-    this.mindMap.on('node_dragend', this.onNodeDragend.bind(this))
-    // 拖拽控制点
-    this.mindMap.on('mouseup', this.onControlPointMouseup.bind(this))
-    // 缩放事件
-    this.mindMap.on('scale', this.onScale)
   }
 
   // 创建箭头
@@ -544,6 +571,16 @@ class AssociativeLine {
     this.associativeLineDraw.back() // 最底层
     this.associativeLineDraw.forward() // 连线层上面
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
 }
 
 AssociativeLine.instanceName = 'associativeLine'

simple-mind-map/src/plugins/Drag.js

@@ -55,8 +55,27 @@ class Drag extends Base {
 
   //  绑定事件
   bindEvent() {
+    this.onNodeMousedown = this.onNodeMousedown.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
     this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
-    this.mindMap.on('node_mousedown', (node, e) => {
+
+    this.mindMap.on('node_mousedown', this.onNodeMousedown)
+    this.mindMap.on('mousemove', this.onMousemove)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('mouseup', this.onMouseup)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('node_mousedown', this.onNodeMousedown)
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('node_mouseup', this.onMouseup)
+    this.mindMap.off('mouseup', this.onMouseup)
+  }
+
+  // 节点鼠标按下事件
+  onNodeMousedown(node, e) {
     // 只读模式、不是鼠标左键按下、按下的是概要节点或根节点直接返回
     if (
       this.mindMap.opt.readonly ||
@@ -74,8 +93,10 @@ class Drag extends Base {
     const { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
     this.mouseDownX = x
     this.mouseDownY = y
-    })
+  }
-    this.mindMap.on('mousemove', e => {
+
+  // 鼠标移动事件
+  onMousemove(e) {
     if (this.mindMap.opt.readonly || !this.isMousedown) {
       return
     }
@@ -94,10 +115,6 @@ class Drag extends Base {
     this.mindMap.emit('node_dragging')
     this.handleStartMove()
     this.onMove(x, y, e)
-    })
-    this.onMouseup = this.onMouseup.bind(this)
-    this.mindMap.on('node_mouseup', this.onMouseup)
-    this.mindMap.on('mouseup', this.onMouseup)
   }
 
   //  鼠标松开事件
@@ -685,6 +702,16 @@ class Drag extends Base {
       return item.uid === node.uid || item.isAncestor(node)
     })
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
 }
 
 Drag.instanceName = 'drag'

simple-mind-map/src/plugins/KeyboardNavigation.js

@@ -7,19 +7,61 @@ class KeyboardNavigation {
   constructor(opt) {
     this.opt = opt
     this.mindMap = opt.mindMap
-    this.onKeyup = this.onKeyup.bind(this)
+
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.LEFT, () => {
+    this.addShortcut()
+  }
+
+  addShortcut() {
+    this.onLeftKeyUp = this.onLeftKeyUp.bind(this)
+    this.onUpKeyUp = this.onUpKeyUp.bind(this)
+    this.onRightKeyUp = this.onRightKeyUp.bind(this)
+    this.onDownKeyUp = this.onDownKeyUp.bind(this)
+
+    this.mindMap.keyCommand.addShortcut(
+      CONSTANTS.KEY_DIR.LEFT,
+      this.onLeftKeyUp
+    )
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, this.onUpKeyUp)
+    this.mindMap.keyCommand.addShortcut(
+      CONSTANTS.KEY_DIR.RIGHT,
+      this.onRightKeyUp
+    )
+    this.mindMap.keyCommand.addShortcut(
+      CONSTANTS.KEY_DIR.DOWN,
+      this.onDownKeyUp
+    )
+  }
+
+  removeShortcut() {
+    this.mindMap.keyCommand.removeShortcut(
+      CONSTANTS.KEY_DIR.LEFT,
+      this.onLeftKeyUp
+    )
+    this.mindMap.keyCommand.removeShortcut(CONSTANTS.KEY_DIR.UP, this.onUpKeyUp)
+    this.mindMap.keyCommand.removeShortcut(
+      CONSTANTS.KEY_DIR.RIGHT,
+      this.onRightKeyUp
+    )
+    this.mindMap.keyCommand.removeShortcut(
+      CONSTANTS.KEY_DIR.DOWN,
+      this.onDownKeyUp
+    )
+  }
+
+  onLeftKeyUp() {
     this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
-    })
+  }
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, () => {
+
+  onUpKeyUp() {
     this.onKeyup(CONSTANTS.KEY_DIR.UP)
-    })
+  }
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.RIGHT, () => {
+
+  onRightKeyUp() {
     this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
-    })
+  }
-    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.DOWN, () => {
+
+  onDownKeyUp() {
     this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
-    })
   }
 
   //  处理按键事件
@@ -228,6 +270,16 @@ class KeyboardNavigation {
       y: (top + bottom) / 2
     }
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.removeShortcut()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.removeShortcut()
+  }
 }
 
 KeyboardNavigation.instanceName = 'keyboardNavigation'

simple-mind-map/src/plugins/Scrollbar.js

@@ -261,6 +261,11 @@ class Scrollbar {
     this.updateMindMapView(type, offset)
   }
 
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
   // 插件被卸载前做的事情
   beforePluginDestroy() {
     this.unBindEvent()

simple-mind-map/src/plugins/Search.js

@@ -22,10 +22,19 @@ class Search {
     this.notResetSearchText = false
     // 是否自动跳转下一个匹配节点
     this.isJumpNext = false
+
+    this.bindEvent()
+  }
+
+  bindEvent() {
     this.onDataChange = this.onDataChange.bind(this)
     this.mindMap.on('data_change', this.onDataChange)
   }
 
+  unBindEvent() {
+    this.mindMap.off('data_change', this.onDataChange)
+  }
+
   // 节点数据改变了，需要重新搜索
   onDataChange() {
     if (this.isJumpNext) {
@@ -177,6 +186,16 @@ class Search {
       total: this.matchNodeList.length
     })
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
 }
 
 Search.instanceName = 'search'

simple-mind-map/src/plugins/Select.js

@@ -18,8 +18,27 @@ class Select {
 
   //  绑定事件
   bindEvent() {
+    this.onMousedown = this.onMousedown.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
     this.checkInNodes = throttle(this.checkInNodes, 300, this)
-    this.mindMap.on('mousedown', e => {
+
+    this.mindMap.on('mousedown', this.onMousedown)
+    this.mindMap.on('mousemove', this.onMousemove)
+    this.mindMap.on('mouseup', this.onMouseup)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('mousedown', this.onMousedown)
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('mouseup', this.onMouseup)
+    this.mindMap.off('node_mouseup', this.onMouseup)
+  }
+
+  // 鼠标按下
+  onMousedown(e) {
     if (this.mindMap.opt.readonly) {
       return
     }
@@ -37,8 +56,10 @@ class Select {
     this.mouseDownX = x
     this.mouseDownY = y
     this.createRect(x, y)
-    })
+  }
-    this.mindMap.on('mousemove', e => {
+
+  // 鼠标移动
+  onMousemove(e) {
     if (this.mindMap.opt.readonly) {
       return
     }
@@ -88,10 +109,6 @@ class Select {
         }
       }
     )
-    })
-    this.onMouseup = this.onMouseup.bind(this)
-    this.mindMap.on('mouseup', this.onMouseup)
-    this.mindMap.on('node_mouseup', this.onMouseup)
   }
 
   // 结束框选
@@ -233,6 +250,16 @@ class Select {
   hasSelectRange() {
     return this.isSelecting
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
 }
 
 Select.instanceName = 'select'