From ee467cb155bd2f9a426fb6a0a90f46157d74a599 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Thu, 8 Jun 2023 20:06:20 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E4=B8=80?= =?UTF-8?q?=E9=94=AE=E7=BC=A9=E6=94=BE=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE?= =?UTF-8?q?=E8=87=B3=E7=94=BB=E5=B8=83=E5=A4=A7=E5=B0=8F?= 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 | 64 ++++++++++++++++++- web/src/config/en.js | 5 ++ web/src/config/zh.js | 5 ++ web/src/lang/en_us.js | 3 +- web/src/lang/zh_cn.js | 3 +- web/src/pages/Doc/en/changelog/index.md | 4 +- web/src/pages/Doc/en/changelog/index.vue | 3 +- web/src/pages/Doc/en/constructor/index.md | 2 + web/src/pages/Doc/en/constructor/index.vue | 14 ++++ web/src/pages/Doc/en/view/index.md | 6 ++ web/src/pages/Doc/en/view/index.vue | 5 ++ web/src/pages/Doc/zh/changelog/index.md | 4 +- web/src/pages/Doc/zh/changelog/index.vue | 3 +- web/src/pages/Doc/zh/constructor/index.md | 2 + web/src/pages/Doc/zh/constructor/index.vue | 14 ++++ web/src/pages/Doc/zh/view/index.md | 6 ++ web/src/pages/Doc/zh/view/index.vue | 5 ++ web/src/pages/Edit/components/Contextmenu.vue | 8 +++ 19 files changed, 150 insertions(+), 10 deletions(-) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 224a0249..cc1c86ae 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -122,7 +122,9 @@ const defaultOpt = { // 节点最大缓存数量 maxNodeCacheCount: 1000, // 关联线默认文字 - defaultAssociativeLineText: '关联' + defaultAssociativeLineText: '关联', + // 思维导图适应画布大小时的内边距 + fitPadding: 50 } // 思维导图 diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index 532424a1..fa464f37 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -28,6 +28,9 @@ class View { this.mindMap.keyCommand.addShortcut('Control+Enter', () => { this.reset() }) + this.mindMap.keyCommand.addShortcut('Control+i', () => { + this.fit() + }) this.mindMap.svg.on('dblclick', () => { this.reset() }) @@ -57,10 +60,15 @@ class View { }) // 放大缩小视图 this.mindMap.event.on('mousewheel', (e, dir) => { - if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') { + if ( + this.mindMap.opt.customHandleMousewheel && + typeof this.mindMap.opt.customHandleMousewheel === 'function' + ) { return this.mindMap.opt.customHandleMousewheel(e) } - if (this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) { + if ( + this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM + ) { switch (dir) { // 鼠标滚轮，向上和向左，都是缩小 case CONSTANTS.DIR.UP: @@ -74,7 +82,7 @@ class View { break } } else { - switch (dir){ + switch (dir) { // 上移 case CONSTANTS.DIR.DOWN: this.translateY(-this.mindMap.opt.mousewheelMoveStep) @@ -201,6 +209,56 @@ class View { this.transform() this.mindMap.emit('scale', this.scale) } + + // 适应画布大小 + fit() { + let { fitPadding } = this.mindMap.opt + let draw = this.mindMap.draw + let origTransform = draw.transform() + let rect = draw.rbox() + let drawWidth = rect.width / origTransform.scaleX + let drawHeight = rect.height / origTransform.scaleY + let drawRatio = drawWidth / drawHeight + let { width: elWidth, height: elHeight } = + this.mindMap.el.getBoundingClientRect() + elWidth = elWidth - fitPadding * 2 + elHeight = elHeight - fitPadding * 2 + let elRatio = elWidth / elHeight + let newScale = 0 + let flag = '' + if (drawWidth <= elWidth && drawHeight <= elHeight) { + newScale = 1 + flag = 1 + } else { + let newWidth = 0 + let newHeight = 0 + if (drawRatio > elRatio) { + newWidth = elWidth + newHeight = elWidth / drawRatio + flag = 2 + } else { + newHeight = elHeight + newWidth = elHeight * drawRatio + flag = 3 + } + newScale = newWidth / drawWidth + } + this.setScale(newScale) + let newRect = draw.rbox() + let newX = 0 + let newY = 0 + if (flag === 1) { + newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2 + newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2 + } else if (flag === 2) { + newX = -newRect.x + fitPadding + newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2 + } else if (flag === 3) { + newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2 + newY = -newRect.y + fitPadding + } + this.translateXY(newX, newY) + } } export default View diff --git a/web/src/config/en.js b/web/src/config/en.js index f813eb63..e0a8136d 100644 --- a/web/src/config/en.js +++ b/web/src/config/en.js @@ -291,6 +291,11 @@ export const shortcutKeyList = [ icon: 'icondingwei', name: 'Reset', value: 'Ctrl + Enter' + }, + { + icon: 'iconquanping1', + name: 'fit canvas', + value: 'Ctrl + i' } ] } diff --git a/web/src/config/zh.js b/web/src/config/zh.js index 07080b96..db06f4c5 100644 --- a/web/src/config/zh.js +++ b/web/src/config/zh.js @@ -351,6 +351,11 @@ export const shortcutKeyList = [ icon: 'icondingwei', name: '恢复默认', value: 'Ctrl + Enter' + }, + { + icon: 'iconquanping1', + name: '适应画布', + value: 'Ctrl + i' } ] } diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index f66a24ea..e64f5ae7 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -69,7 +69,8 @@ export default { level4: 'Level4', level5: 'Level5', level6: 'Level6', - zenMode: 'Zen mode' + zenMode: 'Zen mode', + fitCanvas: 'Fit canvas' }, count: { words: 'Words', diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 407866ef..fcda058c 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -69,7 +69,8 @@ export default { level4: '四级主题', level5: '五级主题', level6: '六级主题', - zenMode: '禅模式' + zenMode: '禅模式', + fitCanvas: '适应画布' }, count: { words: '字数', diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 90c60425..b68343c3 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -2,7 +2,9 @@ ## 0.6.0 -optimization: Optimize the directory structure of simple-mind-map source code +optimization: Optimize the directory structure of simple-mind-map source code. + +New: 1.Supports one click zoom to fit the canvas function. ## 0.5.11 diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 4ce12897..42e747d0 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -2,7 +2,8 @@

Changelog

0.6.0

-

optimization: Optimize the directory structure of simple-mind-map source code

+

optimization: Optimize the directory structure of simple-mind-map source code.

+

New: 1.Supports one click zoom to fit the canvas function.

0.5.11

New: Supports associative text editing.

optimization: Optimizing theme configuration updates, changing configurations that do not involve node size does not trigger node recalculation.

diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index d9cdf098..ad2f2bc8 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -62,6 +62,8 @@ const mindMap = new MindMap({ | alwaysShowExpandBtn（v0.5.8+） | Boolean | false | Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default | | | iconList（v0.5.8+） | Array | [] | The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the "Icon Configuration" table below for the detailed structure of the object | | | maxNodeCacheCount（v0.5.10+） | Number | 1000 | The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool | | +| defaultAssociativeLineText（v0.5.11+） | String | 关联 | Association Line Default Text | | +| fitPadding（v0.6.0+） | Number | 50 | The padding of mind mapping when adapting to canvas size, Unit: px | | ### Watermark config diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index dca476d8..9c6a5d04 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -294,6 +294,20 @@ The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool + +defaultAssociativeLineText（v0.5.11+） +String +关联 +Association Line Default Text + + + +fitPadding（v0.6.0+） +Number +50 +The padding of mind mapping when adapting to canvas size, Unit: px + +

Watermark config

diff --git a/web/src/pages/Doc/en/view/index.md b/web/src/pages/Doc/en/view/index.md index 4c77956c..f11130be 100644 --- a/web/src/pages/Doc/en/view/index.md +++ b/web/src/pages/Doc/en/view/index.md @@ -5,6 +5,12 @@ through `mindMap.view` ## Methods +### fit() + +> v0.6.0+ + +Zoom the mind map to fit the canvas. + ### translateX(step) Translate in the `x` direction, `step`: number of pixels to translate diff --git a/web/src/pages/Doc/en/view/index.vue b/web/src/pages/Doc/en/view/index.vue index 90f077fd..085f4f1e 100644 --- a/web/src/pages/Doc/en/view/index.vue +++ b/web/src/pages/Doc/en/view/index.vue @@ -4,6 +4,11 @@

The view instance is responsible for view operations, and can be obtained through mindMap.view

Methods

+

fit()

+
+

v0.6.0+

+
+

Zoom the mind map to fit the canvas.

translateX(step)

Translate in the x direction, step: number of pixels to translate

translateY(step)

diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index f0c36f78..4ad94360 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -2,7 +2,9 @@ ## 0.6.0 -优化：优化simple-mind-map源码目录结构 +优化：优化simple-mind-map源码目录结构。 + +新增：1.支持一键缩放至适应画布功能。 ## 0.5.11 diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index f6be2f3a..084ac3a0 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -2,7 +2,8 @@

Changelog

0.6.0

-

优化：优化simple-mind-map源码目录结构

+

优化：优化simple-mind-map源码目录结构。

+

新增：1.支持一键缩放至适应画布功能。

0.5.11

新增：支持关联性文本编辑。

优化：优化主题配置更新，改变不涉及节点大小的配置不触发节点重新计算。

diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 490d0dda..2d47cd7e 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -62,6 +62,8 @@ const mindMap = new MindMap({ | alwaysShowExpandBtn（v0.5.8+） | Boolean | false | 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示 | | | iconList（v0.5.8+） | Array | [] | 扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格 | | | maxNodeCacheCount（v0.5.10+） | Number | 1000 | 节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量 | | +| defaultAssociativeLineText（v0.5.11+） | String | 关联 | 关联线默认文字 | | +| fitPadding（v0.6.0+） | Number | 50 | 思维导图适应画布大小时的内边距，单位：px | | ### 水印配置 diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index df3d03c0..3ffac050 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -294,6 +294,20 @@ 节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量 + +defaultAssociativeLineText（v0.5.11+） +String +关联 +关联线默认文字 + + + +fitPadding（v0.6.0+） +Number +50 +思维导图适应画布大小时的内边距，单位：px + +

水印配置

diff --git a/web/src/pages/Doc/zh/view/index.md b/web/src/pages/Doc/zh/view/index.md index a53ecad9..218b318c 100644 --- a/web/src/pages/Doc/zh/view/index.md +++ b/web/src/pages/Doc/zh/view/index.md @@ -4,6 +4,12 @@ ## 方法 +### fit() + +> v0.6.0+ + +缩放思维导图至适应画布。 + ### translateX(step) `x`方向进行平移，`step`：要平移的像素 diff --git a/web/src/pages/Doc/zh/view/index.vue b/web/src/pages/Doc/zh/view/index.vue index 101af875..d994036a 100644 --- a/web/src/pages/Doc/zh/view/index.vue +++ b/web/src/pages/Doc/zh/view/index.vue @@ -3,6 +3,11 @@

View实例

view实例负责视图操作，可通过mindMap.view获取到该实例

方法

+

fit()

+
+

v0.6.0+

+
+

缩放思维导图至适应画布。

translateX(step)

x方向进行平移，step：要平移的像素

translateY(step)

diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue index 552fb0d9..db045bf5 100644 --- a/web/src/pages/Edit/components/Contextmenu.vue +++ b/web/src/pages/Edit/components/Contextmenu.vue @@ -65,6 +65,7 @@