Feat：支持配置注册了滚动条插件的情况下是否限制将思维导图限制在画布内

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

@@ -241,5 +241,7 @@ export const defaultOpt = {
   defaultNodeImage: '',
   // 是否将思维导图限制在画布内
   // 比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理
-  isLimitMindMapInCanvas: false
+  isLimitMindMapInCanvas: false,
+  // 当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas不再起作用
+  isLimitMindMapInCanvasWhenHasScrollbar: true
 }

simple-mind-map/src/core/view/View.js

@@ -194,7 +194,9 @@ class View {
 
   //   应用变换
   transform() {
-    this.limitMindMapInCanvas()
+    try {
+      this.limitMindMapInCanvas()
+    } catch (error) {}
     this.mindMap.draw.transform({
       origin: [0, 0],
       scale: this.scale,
@@ -313,7 +315,16 @@ class View {
 
   // 将思维导图限制在画布内
   limitMindMapInCanvas() {
-    if (!this.mindMap.opt.isLimitMindMapInCanvas) return
+    const { isLimitMindMapInCanvasWhenHasScrollbar, isLimitMindMapInCanvas } =
+      this.mindMap.opt
+    // 如果注册了滚动条插件，那么使用isLimitMindMapInCanvasWhenHasScrollbar配置
+    if (this.mindMap.scrollbar) {
+      if (!isLimitMindMapInCanvasWhenHasScrollbar) return
+    } else {
+      // 否则使用isLimitMindMapInCanvas配置
+      if (!isLimitMindMapInCanvas) return
+    }
+
     let { scale, left, top, right, bottom } = this.getPositionLimit()
 
     // 如果缩放值改变了

simple-mind-map/src/layouts/Base.js

@@ -17,6 +17,8 @@ class Base {
     // 根节点
     this.root = null
     this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
+    // 当initRootNodePosition不为默认的值时，根节点的位置距默认的配置时根节点距离的差值
+    this.rootNodeCenterOffset = null
   }
 
   //  计算节点位置
@@ -195,9 +197,10 @@ class Base {
     )
   }
 
-  // 当initRootNodePosition配置不为默认的['center','center']时，计算当前配置和默认配置情况下，中心点位置的差值
+  // 当initRootNodePosition配置不为默认的['center','center']时，计算当前配置和默认配置情况下，根节点位置的差值
   getRootCenterOffset(width, height) {
-    // 如果initRootNodePosition是默认的，那么不需要计算
+    // 因为根节点的大小不会影响这个差值，所以计算一次就足够了
+    if (this.rootNodeCenterOffset) return this.rootNodeCenterOffset
     let { initRootNodePosition } = this.mindMap.opt
     const { CENTER } = CONSTANTS.INIT_ROOT_NODE_POSITION
     initRootNodePosition = this.formatInitRootNodePosition(initRootNodePosition)
@@ -205,26 +208,29 @@ class Base {
       initRootNodePosition[0] === CENTER &&
       initRootNodePosition[1] === CENTER
     ) {
-      return {
+      // 如果initRootNodePosition是默认的，那么不需要计算
+      this.rootNodeCenterOffset = {
         x: 0,
         y: 0
       }
+    } else {
+      // 否则需要计算当前配置和默认配置的差值
+      const tmpNode = {
+        width: width,
+        height: height
+      }
+      const tmpNode2 = {
+        width: width,
+        height: height
+      }
+      this.setNodeCenter(tmpNode, [CENTER, CENTER])
+      this.setNodeCenter(tmpNode2)
+      this.rootNodeCenterOffset = {
+        x: tmpNode2.left - tmpNode.left,
+        y: tmpNode2.top - tmpNode.top
+      }
     }
-    // 否则需要计算当前配置和默认配置的差值
+    return this.rootNodeCenterOffset
-    const tmpNode = {
-      width: width,
-      height: height
-    }
-    const tmpNode2 = {
-      width: width,
-      height: height
-    }
-    this.setNodeCenter(tmpNode, ['center', 'center'])
-    this.setNodeCenter(tmpNode2)
-    return {
-      x: tmpNode2.left - tmpNode.left,
-      y: tmpNode2.top - tmpNode.top
-    }
   }
 
   //  更新子节点属性

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

@@ -10,8 +10,6 @@ class Scrollbar {
       width: 0, // 水平滚动条的容器宽度
       height: 0 // 垂直滚动条的容器高度
     }
-    // 中心点差值
-    this.rootCenterOffset = null
     // 思维导图实际高度
     this.chartHeight = 0
     this.chartWidth = 0
@@ -44,26 +42,6 @@ class Scrollbar {
     this.mindMap.on('view_data_change', this.updateScrollbar)
   }
 
-  // 当initRootNodePosition配置不为默认的['center','center']时，计算当前配置和默认配置情况下，中心点位置的差值
-  // 因为拖动滚动条设置思维导图位置是根据默认配置计算的
-  setRootCenterOffset(width, height) {
-    if (this.rootCenterOffset) return
-    const tmpNode = {
-      width: width,
-      height: height
-    }
-    const tmpNode2 = {
-      width: width,
-      height: height
-    }
-    this.mindMap.renderer.layout.setNodeCenter(tmpNode, ['center', 'center'])
-    this.mindMap.renderer.layout.setNodeCenter(tmpNode2)
-    this.rootCenterOffset = {
-      x: tmpNode2.left - tmpNode.left,
-      y: tmpNode2.top - tmpNode.top
-    }
-  }
-
   // 解绑事件
   unBindEvent() {
     this.mindMap.off('mousemove', this.onMousemove)
@@ -193,7 +171,10 @@ class Scrollbar {
     const t = this.mindMap.draw.transform()
     const drawRect = this.mindMap.draw.rbox()
     const rootRect = this.mindMap.renderer.root.group.rbox()
-    this.setRootCenterOffset(rootRect.width, rootRect.height)
+    const rootCenterOffset = this.mindMap.renderer.layout.getRootCenterOffset(
+      rootRect.width,
+      rootRect.height
+    )
     if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
       // 滚动条新位置
       let oy = offset
@@ -221,7 +202,7 @@ class Scrollbar {
         yOffset -
         paddingY * t.scaleY +
         paddingY -
-        this.rootCenterOffset.y * t.scaleX
+        rootCenterOffset.y * t.scaleY
       this.mindMap.view.translateYTo(chartTop)
       this.emitEvent({
         horizontal: scrollbarData.horizontal,
@@ -257,7 +238,7 @@ class Scrollbar {
         xOffset -
         paddingX * t.scaleX +
         paddingX -
-        this.rootCenterOffset.x * t.scaleX
+        rootCenterOffset.x * t.scaleX
       this.mindMap.view.translateXTo(chartLeft)
       this.emitEvent({
         vertical: scrollbarData.vertical,