From 3effff95fae7b6349c73ef8b703b06179d0adde5 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, 22 Feb 2024 10:05:51 +0800 Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=BD=93?= =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=A4=A7=E5=B0=8F=E6=94=B9=E5=8F=98=E5=90=8E?= =?UTF-8?q?=EF=BC=8C=E9=99=90=E5=88=B6=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE?= =?UTF-8?q?=E5=9C=A8=E7=94=BB=E5=B8=83=E5=86=85=E5=92=8C=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/index.js | 4 +++ simple-mind-map/src/core/view/View.js | 31 ++++++++++++++++++------ simple-mind-map/src/plugins/Scrollbar.js | 8 ++++-- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 99057704..a375d360 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -39,6 +39,10 @@ class MindMap { // 获取容器尺寸位置信息 this.getElRectInfo() + // 画布初始大小 + this.initWidth = this.width + this.initHeight = this.height + // 添加css this.cssEl = null this.addCss() diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index 09640aa2..8def88a3 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -128,6 +128,10 @@ class View { this.translateXY(mx, my) } }) + this.mindMap.on('resize', () => { + if (!this.checkNeedMindMapInCanvas()) return + this.transform() + }) } // 获取当前变换状态数据 @@ -313,20 +317,31 @@ class View { this.translateXY(newX, newY) } - // 将思维导图限制在画布内 - limitMindMapInCanvas() { + // 判断是否需要将思维导图限制在画布内 + checkNeedMindMapInCanvas() { const { isLimitMindMapInCanvasWhenHasScrollbar, isLimitMindMapInCanvas } = this.mindMap.opt // 如果注册了滚动条插件，那么使用isLimitMindMapInCanvasWhenHasScrollbar配置 if (this.mindMap.scrollbar) { - if (!isLimitMindMapInCanvasWhenHasScrollbar) return + return isLimitMindMapInCanvasWhenHasScrollbar } else { // 否则使用isLimitMindMapInCanvas配置 - if (!isLimitMindMapInCanvas) return + return isLimitMindMapInCanvas } + } + + // 将思维导图限制在画布内 + limitMindMapInCanvas() { + if (!this.checkNeedMindMapInCanvas()) return let { scale, left, top, right, bottom } = this.getPositionLimit() + // 画布宽高改变了，但是思维导图元素变换的中心点依旧是原有位置，所以需要加上中心点变化量 + const centerXChange = + ((this.mindMap.width - this.mindMap.initWidth) / 2) * scale + const centerYChange = + ((this.mindMap.height - this.mindMap.initHeight) / 2) * scale + // 如果缩放值改变了 const scaleRatio = this.scale / scale left *= scaleRatio @@ -338,10 +353,10 @@ class View { const centerX = this.mindMap.width / 2 const centerY = this.mindMap.height / 2 const scaleOffset = this.scale - 1 - left -= scaleOffset * centerX - right -= scaleOffset * centerX - top -= scaleOffset * centerY - bottom -= scaleOffset * centerY + left -= scaleOffset * centerX - centerXChange + right -= scaleOffset * centerX - centerXChange + top -= scaleOffset * centerY - centerYChange + bottom -= scaleOffset * centerY - centerYChange // 判断是否超出边界 if (this.x > left) { diff --git a/simple-mind-map/src/plugins/Scrollbar.js b/simple-mind-map/src/plugins/Scrollbar.js index b2ba6dcb..7e1c8f3c 100644 --- a/simple-mind-map/src/plugins/Scrollbar.js +++ b/simple-mind-map/src/plugins/Scrollbar.js @@ -40,6 +40,7 @@ class Scrollbar { this.mindMap.on('mouseup', this.onMouseup) this.mindMap.on('node_tree_render_end', this.updateScrollbar) this.mindMap.on('view_data_change', this.updateScrollbar) + this.mindMap.on('resize', this.updateScrollbar) } // 解绑事件 @@ -48,6 +49,7 @@ class Scrollbar { this.mindMap.off('mouseup', this.onMouseup) this.mindMap.off('node_tree_render_end', this.updateScrollbar) this.mindMap.off('view_data_change', this.updateScrollbar) + this.mindMap.off('resize', this.updateScrollbar) } // 渲染后、数据改变需要更新滚动条 @@ -202,7 +204,8 @@ class Scrollbar { yOffset - paddingY * t.scaleY + paddingY - - rootCenterOffset.y * t.scaleY + rootCenterOffset.y * t.scaleY + + ((this.mindMap.height - this.mindMap.initHeight) / 2) * t.scaleY // 画布宽高改变了，但是思维导图元素变换的中心点依旧是原有位置，所以需要加上中心点变化量 this.mindMap.view.translateYTo(chartTop) this.emitEvent({ horizontal: scrollbarData.horizontal, @@ -238,7 +241,8 @@ class Scrollbar { xOffset - paddingX * t.scaleX + paddingX - - rootCenterOffset.x * t.scaleX + rootCenterOffset.x * t.scaleX + + ((this.mindMap.width - this.mindMap.initWidth) / 2) * t.scaleX // 画布宽高改变了，但是思维导图元素变换的中心点依旧是原有位置，所以需要加上中心点变化量 this.mindMap.view.translateXTo(chartLeft) this.emitEvent({ vertical: scrollbarData.vertical,