From b4e0ad68813e5d889d72ae973ad5ed0280b75fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Thu, 21 Dec 2023 12:01:00 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=B3=A8=E5=86=8C=E4=BA=86=E6=BB=9A=E5=8A=A8=E6=9D=A1?= =?UTF-8?q?=E6=8F=92=E4=BB=B6=E7=9A=84=E6=83=85=E5=86=B5=E4=B8=8B=E6=98=AF?= =?UTF-8?q?=E5=90=A6=E9=99=90=E5=88=B6=E5=B0=86=E6=80=9D=E7=BB=B4=E5=AF=BC?= =?UTF-8?q?=E5=9B=BE=E9=99=90=E5=88=B6=E5=9C=A8=E7=94=BB=E5=B8=83=E5=86=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/constants/defaultOptions.js | 4 +- simple-mind-map/src/core/view/View.js | 15 ++++++- simple-mind-map/src/layouts/Base.js | 42 +++++++++++-------- simple-mind-map/src/plugins/Scrollbar.js | 31 +++----------- 4 files changed, 46 insertions(+), 46 deletions(-) diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 022d006a..c2689e5e 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -241,5 +241,7 @@ export const defaultOpt = { defaultNodeImage: '', // 是否将思维导图限制在画布内 // 比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 - isLimitMindMapInCanvas: false + isLimitMindMapInCanvas: false, + // 当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas不再起作用 + isLimitMindMapInCanvasWhenHasScrollbar: true } diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index ee97470b..af0c93ee 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/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() // 如果缩放值改变了 diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 6df5ae1f..75aa24e0 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/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 + } } - // 否则需要计算当前配置和默认配置的差值 - 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 - } + return this.rootNodeCenterOffset } // 更新子节点属性 diff --git a/simple-mind-map/src/plugins/Scrollbar.js b/simple-mind-map/src/plugins/Scrollbar.js index 145cda5b..9f97d777 100644 --- a/simple-mind-map/src/plugins/Scrollbar.js +++ b/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,