coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 18:37:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Feat：支持一键缩放思维导图至画布大小

Browse Source
This commit is contained in:
wanglin2 2023-06-08 20:06:20 +08:00
parent 6281f2360c
commit ee467cb155
19 changed files with 150 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
simple-mind-map/index.js
View File

@ -122,7 +122,9 @@ const defaultOpt = {
// 节点最大缓存数量
maxNodeCacheCount: 1000,
// 关联线默认文字
defaultAssociativeLineText: '关联'
defaultAssociativeLineText: '关联',
// 思维导图适应画布大小时的内边距
fitPadding: 50
}
// 思维导图

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

@ -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

5
web/src/config/en.js
View File

@ -291,6 +291,11 @@ export const shortcutKeyList = [
icon: 'icondingwei',
name: 'Reset',
value: 'Ctrl + Enter'
},
{
icon: 'iconquanping1',
name: 'fit canvas',
value: 'Ctrl + i'
}
]
}

5
web/src/config/zh.js
View File

@ -351,6 +351,11 @@ export const shortcutKeyList = [
icon: 'icondingwei',
name: '恢复默认',
value: 'Ctrl + Enter'
},
{
icon: 'iconquanping1',
name: '适应画布',
value: 'Ctrl + i'
}
]
}

3
web/src/lang/en_us.js
View File

@ -69,7 +69,8 @@ export default {
level4: 'Level4',
level5: 'Level5',
level6: 'Level6',
zenMode: 'Zen mode'
zenMode: 'Zen mode',
fitCanvas: 'Fit canvas'
},
count: {
words: 'Words',

3
web/src/lang/zh_cn.js
View File

@ -69,7 +69,8 @@ export default {
level4: '四级主题',
level5: '五级主题',
level6: '六级主题',
zenMode: '禅模式'
zenMode: '禅模式',
fitCanvas: '适应画布'
},
count: {
words: '字数',

4
web/src/pages/Doc/en/changelog/index.md
View File

@ -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

3
web/src/pages/Doc/en/changelog/index.vue
View File

@ -2,7 +2,8 @@
<div>
<h1>Changelog</h1>
<h2>0.6.0</h2>
<p>optimization: Optimize the directory structure of simple-mind-map source code</p>
<p>optimization: Optimize the directory structure of simple-mind-map source code.</p>
<p>New: 1.Supports one click zoom to fit the canvas function.</p>
<h2>0.5.11</h2>
<p>New: Supports associative text editing.</p>
<p>optimization: Optimizing theme configuration updates, changing configurations that do not involve node size does not trigger node recalculation.</p>

2
web/src/pages/Doc/en/constructor/index.md
View File

@ -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

14
web/src/pages/Doc/en/constructor/index.vue
View File

@ -294,6 +294,20 @@
<td>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</td>
<td></td>
</tr>
<tr>
<td>defaultAssociativeLineText（v0.5.11+）</td>
<td>String</td>
<td>关联</td>
<td>Association Line Default Text</td>
<td></td>
</tr>
<tr>
<td>fitPadding（v0.6.0+）</td>
<td>Number</td>
<td>50</td>
<td>The padding of mind mapping when adapting to canvas size, Unit: px</td>
<td></td>
</tr>
</tbody>
</table>
<h3>Watermark config</h3>

6
web/src/pages/Doc/en/view/index.md
View File

@ -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

5
web/src/pages/Doc/en/view/index.vue
View File

@ -4,6 +4,11 @@
<p>The <code>view</code> instance is responsible for view operations, and can be obtained
through <code>mindMap.view</code></p>
<h2>Methods</h2>
<h3>fit()</h3>
<blockquote>
<p>v0.6.0+</p>
</blockquote>
<p>Zoom the mind map to fit the canvas.</p>
<h3>translateX(step)</h3>
<p>Translate in the <code>x</code> direction, <code>step</code>: number of pixels to translate</p>
<h3>translateY(step)</h3>

4
web/src/pages/Doc/zh/changelog/index.md
View File

@ -2,7 +2,9 @@
## 0.6.0
优化：优化simple-mind-map源码目录结构
优化：优化simple-mind-map源码目录结构。
新增：1.支持一键缩放至适应画布功能。
## 0.5.11

3
web/src/pages/Doc/zh/changelog/index.vue
View File

@ -2,7 +2,8 @@
<div>
<h1>Changelog</h1>
<h2>0.6.0</h2>
<p>优化：优化simple-mind-map源码目录结构</p>
<p>优化：优化simple-mind-map源码目录结构。</p>
<p>新增：1.支持一键缩放至适应画布功能。</p>
<h2>0.5.11</h2>
<p>新增：支持关联性文本编辑。</p>
<p>优化：优化主题配置更新，改变不涉及节点大小的配置不触发节点重新计算。</p>

2
web/src/pages/Doc/zh/constructor/index.md
View File

@ -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 | |
### 水印配置

14
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -294,6 +294,20 @@
<td>节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量</td>
<td></td>
</tr>
<tr>
<td>defaultAssociativeLineText（v0.5.11+）</td>
<td>String</td>
<td>关联</td>
<td>关联线默认文字</td>
<td></td>
</tr>
<tr>
<td>fitPadding（v0.6.0+）</td>
<td>Number</td>
<td>50</td>
<td>思维导图适应画布大小时的内边距，单位：px</td>
<td></td>
</tr>
</tbody>
</table>
<h3>水印配置</h3>

6
web/src/pages/Doc/zh/view/index.md
View File

@ -4,6 +4,12 @@
## 方法
### fit()
> v0.6.0+
缩放思维导图至适应画布。
### translateX(step)
`x`方向进行平移，`step`：要平移的像素

5
web/src/pages/Doc/zh/view/index.vue
View File

@ -3,6 +3,11 @@
<h1>View实例</h1>
<p><code>view</code>实例负责视图操作，可通过<code>mindMap.view</code>获取到该实例</p>
<h2>方法</h2>
<h3>fit()</h3>
<blockquote>
<p>v0.6.0+</p>
</blockquote>
<p>缩放思维导图至适应画布。</p>
<h3>translateX(step)</h3>
<p><code>x</code>方向进行平移，<code>step</code>：要平移的像素</p>
<h3>translateY(step)</h3>

8
web/src/pages/Edit/components/Contextmenu.vue
View File

@ -65,6 +65,7 @@
<template v-if="type === 'svg'">
<div class="item" @click="exec('RETURN_CENTER')">
{{ $t('contextmenu.backCenter') }}
<span class="desc">Ctrl + Enter</span>
</div>
<div class="item" @click="exec('EXPAND_ALL')">
{{ $t('contextmenu.expandAll') }}
@ -89,6 +90,10 @@
{{ $t('contextmenu.arrangeLayout') }}
<span class="desc">Ctrl + L</span>
</div>
<div class="item" @click="exec('FIT_CANVAS')">
{{ $t('contextmenu.fitCanvas') }}
<span class="desc">Ctrl + i</span>
</div>
<div class="item" @click="exec('TOGGLE_ZEN_MODE')">
{{ $t('contextmenu.zenMode') }}
{{ isZenMode ? '√' : '' }}
@ -295,6 +300,9 @@ export default {
isZenMode: !this.isZenMode
})
break
case 'FIT_CANVAS':
this.mindMap.view.fit()
break
default:
this.$bus.$emit('execCommand', key, ...args)
break