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

Doc: update

Browse Source
This commit is contained in:
wanglin2 2023-06-28 16:28:47 +08:00
parent d900c2f122
commit f8a345d8de
23 changed files with 214 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
simple-mind-map/src/core/render/node/nodeCreateContents.js
View File

@ -101,7 +101,7 @@ function createRichTextNode() {
el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
this.mindMap.el.appendChild(div)
let { width, height } = el.getBoundingClientRect()
width = Math.ceil(width)
width = Math.ceil(width) + 1// 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题
height = Math.ceil(height)
g.attr('data-width', width)
g.attr('data-height', height)

1
web/src/pages/Doc/catalogList.js
View File

@ -31,6 +31,7 @@ let APIList = [
'watermark',
'associativeLine',
'touchEvent',
'nodeImgAdjust',
'xmind',
'markdown',
'utils'

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

@ -1,5 +1,11 @@
# Changelog
## 0.6.5
Fix: 1.Fix the issue of xmind file import errors. 2.Fixed a rare issue where line breaks occur when the width of the node text is decimal.
New: 1.The packaged library supports obtaining built-in constants, themes, and other data. 2.Supports configuring the zoom behavior corresponding to the direction of the mouse wheel. 3.Node images support dragging and resizing.
## 0.6.4-fix.1
New: 1.When zooming with the mouse wheel, the default zoom is centered around the current position of the mouse, which can be turned off by configuring.

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

@ -1,6 +1,9 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.5</h2>
<p>Fix: 1.Fix the issue of xmind file import errors.</p>
<p>New: 1.The packaged library supports obtaining built-in constants, themes, and other data. 2.Supports configuring the zoom behavior corresponding to the direction of the mouse wheel. 3.Node images support dragging and resizing.</p>
<h2>0.6.4-fix.1</h2>
<p>New: 1.When zooming with the mouse wheel, the default zoom is centered around the current position of the mouse, which can be turned off by configuring.</p>
<p>Fix: 1.Fixed an issue where the default value of the zoom center point was not updated after changing the canvas size.</p>

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

@ -45,6 +45,7 @@ const mindMap = new MindMap({
| customHandleMousewheel（v0.4.3+） | Function | null | User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object | |
| mousewheelAction（v0.4.3+） | String | zoom | The behavior of the mouse wheel, `zoom`(Zoom in and out)、`move`(Move up and down). If `customHandleMousewheel` passes a custom function, this property will not take effect | |
| mousewheelMoveStep（v0.4.3+） | Number | 100 | When the `mousewheelAction` is set to `move`, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is `px` | |
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false | When `mousewheelAction` is set to `zoom`, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed | |
| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | Text of the default inserted secondary node | |
| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | Text for nodes below the second level inserted by default | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff' } | Expand the color of the stow button | |
@ -234,6 +235,9 @@ Listen to an event. Event list:
| hide_text_edit | Node text edit box close event | textEditNode (text edit box DOM node), activeNodeList (current list of active nodes) |
| scale | Zoom event | scale (zoom ratio) |
| node_img_dblclick（v0.2.15+） | Node image double-click event | this (node instance), e (event object) |
| node_img_mouseenter（v0.6.5+） | Node image mouseenter event | this（node instance）、imgNode（img node）、e（event object） |
| node_img_mouseleave（v0.6.5+） | Node image mouseleave event | this（node instance）、imgNode（img node）、e（event object） |
| node_img_mousemove（v0.6.5+） | Node image mousemove event | this（node instance）、imgNode（img node）、e（event object） |
| node_tree_render_end（v0.2.16+） | Node tree render end event | |
| rich_text_selection_change（v0.4.0+） | Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited | hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area） |
| transforming-dom-to-images（v0.4.0+） | Available when the `RichText` plugin is registered. When there is a `DOM` node in `svg`, the `DOM` node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting | index（Index of the node currently converted to）、len（Total number of nodes to be converted） |

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

@ -176,6 +176,13 @@
<td></td>
</tr>
<tr>
<td>mousewheelZoomActionReverse（v0.6.5+）</td>
<td>Boolean</td>
<td>false</td>
<td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
<td></td>
</tr>
<tr>
<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
<td>String</td>
<td>二级节点</td>
@ -653,6 +660,21 @@ poor performance and should be used sparingly.</p>
<td>this (node instance), e (event object)</td>
</tr>
<tr>
<td>node_img_mouseenter（v0.6.5+）</td>
<td>Node image mouseenter event</td>
<td>this（node instance）、imgNode（img node）、e（event object）</td>
</tr>
<tr>
<td>node_img_mouseleave（v0.6.5+）</td>
<td>Node image mouseleave event</td>
<td>this（node instance）、imgNode（img node）、e（event object）</td>
</tr>
<tr>
<td>node_img_mousemove（v0.6.5+）</td>
<td>Node image mousemove event</td>
<td>this（node instance）、imgNode（img node）、e（event object）</td>
</tr>
<tr>
<td>node_tree_render_end（v0.2.16+）</td>
<td>Node tree render end event</td>
<td></td>

16
web/src/pages/Doc/en/nodeImgAdjust/index.md Normal file
View File

@ -0,0 +1,16 @@
# NodeImgAdjust plugin
> v0.6.5+
This plugin provides the function of dragging and adjusting the size of images within nodes.
## Register
```js
import MindMap from 'simple-mind-map'
import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
MindMap.usePlugin(NodeImgAdjust)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.nodeImgAdjust`.

27
web/src/pages/Doc/en/nodeImgAdjust/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div>
<h1>NodeImgAdjust plugin</h1>
<blockquote>
<p>v0.6.5+</p>
</blockquote>
<p>This plugin provides the function of dragging and adjusting the size of images within nodes.</p>
<h2>Register</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> NodeImgAdjust <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/NodeImgAdjust.js&#x27;</span>
MindMap.usePlugin(NodeImgAdjust)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.nodeImgAdjust</code>.</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

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

@ -112,6 +112,8 @@ cd web
npm run buildLibrary
```
The packaging entry is `simple-mind-map/full.js`, which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.
The `package.json` file in the `simple-mind-map` library provides two export
fields:

1
web/src/pages/Doc/en/start/index.vue
View File

@ -80,6 +80,7 @@ simple-mind-map. This uses the same packaging tool as the sample project web.</p
<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
npm run buildLibrary
</code></pre>
<p>The packaging entry is <code>simple-mind-map/full.js</code>, which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.</p>
<p>The <code>package.json</code> file in the <code>simple-mind-map</code> library provides two export
fields:</p>
<pre class="hljs"><code>{

14
web/src/pages/Doc/en/utils/index.md
View File

@ -10,6 +10,20 @@ import {walk, ...} from 'simple-mind-map/src/utils'
### Methods
#### resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
> v0.6.5+
`width`: The original width of the image
`height`：The original height of the image
`newWidth`：Width to zoom in to
`newHeight`：Height to zoom in to
Scale the image proportionally. Zoom to the specified size of `newWidth` and `newHeight` while maintaining the original aspect ratio of the image.
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
Depth-first traversal of a tree

9
web/src/pages/Doc/en/utils/index.vue
View File

@ -6,6 +6,15 @@
<pre class="hljs"><code><span class="hljs-keyword">import</span> {walk, ...} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils&#x27;</span>
</code></pre>
<h3>Methods</h3>
<h4>resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)</h4>
<blockquote>
<p>v0.6.5+</p>
</blockquote>
<p><code>width</code>: The original width of the image</p>
<p><code>height</code>：The original height of the image</p>
<p><code>newWidth</code>：Width to zoom in to</p>
<p><code>newHeight</code>：Height to zoom in to</p>
<p>Scale the image proportionally. Zoom to the specified size of <code>newWidth</code> and <code>newHeight</code> while maintaining the original aspect ratio of the image.</p>
<h4>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)</h4>
<p>Depth-first traversal of a tree</p>
<p><code>root</code>: the root node of the tree to be traversed</p>

6
web/src/pages/Doc/routerList.js
View File

@ -46,7 +46,8 @@ export default [
{ path: 'xmind', title: 'XMind解析' },
{ path: 'deploy', title: '部署' },
{ path: 'client', title: '客户端' },
{ path: 'touchEvent', title: 'TouchEvent插件' }
{ path: 'touchEvent', title: 'TouchEvent插件' },
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' }
]
},
{
@ -75,7 +76,8 @@ export default [
{ path: 'watermark', title: 'Watermark plugin' },
{ path: 'xmind', title: 'XMind parse' },
{ path: 'deploy', title: 'Deploy' },
{ path: 'touchEvent', title: 'TouchEvent plugin' }
{ path: 'touchEvent', title: 'TouchEvent plugin' },
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' }
]
}
]

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

@ -1,5 +1,11 @@
# Changelog
## 0.6.5
修复：1.修复xmind文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。
新增：1.打包后的库支持获取内置常量、主题等数据。 2.支持配置鼠标滚轮方向对应的缩放行为。 3.节点图片支持拖拽调整大小。
## 0.6.4-fix.1
新增：1.鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放，可以通过配置关闭该特性。

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

@ -1,6 +1,9 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.5</h2>
<p>修复：1.修复xmind文件导入报错的问题。</p>
<p>新增：1.打包后的库支持获取内置常量、主题等数据。 2.支持配置鼠标滚轮方向对应的缩放行为。 3.节点图片支持拖拽调整大小。</p>
<h2>0.6.4-fix.1</h2>
<p>新增：1.鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放，可以通过配置关闭该特性。</p>
<p>修复：1.修复改变了画布大小后缩放中心点默认值不随之更新的问题。</p>

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

@ -45,6 +45,7 @@ const mindMap = new MindMap({
| customHandleMousewheel（v0.4.3+） | Function | null | 自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象 | |
| mousewheelAction（v0.4.3+） | String | zoom | 鼠标滚轮的行为，`zoom`（放大缩小）、`move`（上下移动）。如果`customHandleMousewheel`传了自定义函数，这个属性不生效 | |
| mousewheelMoveStep（v0.4.3+） | Number | 100 | 当`mousewheelAction`设为`move`时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位`px` | |
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false | 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来 | |
| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | 默认插入的二级节点的文字 | |
| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | 默认插入的二级以下节点的文字 | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色 | |
@ -229,6 +230,9 @@ mindMap.setTheme('主题名称')
| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
| scale | 放大缩小事件 | scale（缩放比例） |
| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
| node_img_mouseenter（v0.6.5+） | 节点内图片的鼠标移入事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_img_mouseleave（v0.6.5+） | 节点内图片的鼠标移出事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_img_mousemove（v0.6.5+） | 节点内图片的鼠标移动事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
| rich_text_selection_change（v0.4.0+） | 当注册了`RichText`插件时可用。当节点编辑时，文本选区发生改变时触发 | hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息） |
| transforming-dom-to-images（v0.4.0+） | 当注册了`RichText`插件时可用。当`svg`中存在`DOM`节点时，导出为图片时会将`DOM`节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点 | index（当前转换到的节点索引）、len（一共需要转换的节点数量） |

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

@ -176,6 +176,13 @@
<td></td>
</tr>
<tr>
<td>mousewheelZoomActionReverse（v0.6.5+）</td>
<td>Boolean</td>
<td>false</td>
<td>当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来</td>
<td></td>
</tr>
<tr>
<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
<td>String</td>
<td>二级节点</td>
@ -646,6 +653,21 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<td>this（节点实例）、e（事件对象）</td>
</tr>
<tr>
<td>node_img_mouseenter（v0.6.5+）</td>
<td>节点内图片的鼠标移入事件</td>
<td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
</tr>
<tr>
<td>node_img_mouseleave（v0.6.5+）</td>
<td>节点内图片的鼠标移出事件</td>
<td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
</tr>
<tr>
<td>node_img_mousemove（v0.6.5+）</td>
<td>节点内图片的鼠标移动事件</td>
<td>this（节点实例）、imgNode（图片节点）、e（事件对象）</td>
</tr>
<tr>
<td>node_tree_render_end（v0.2.16+）</td>
<td>节点树渲染完毕事件</td>
<td></td>

16
web/src/pages/Doc/zh/nodeImgAdjust/index.md Normal file
View File

@ -0,0 +1,16 @@
# NodeImgAdjust插件
> v0.6.5+
该插件提供拖拽调整节点内图片大小的功能。
## 注册
```js
import MindMap from 'simple-mind-map'
import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
MindMap.usePlugin(NodeImgAdjust)
```
注册完且实例化`MindMap`后可通过`mindMap.nodeImgAdjust`获取到该实例。

27
web/src/pages/Doc/zh/nodeImgAdjust/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div>
<h1>NodeImgAdjust插件</h1>
<blockquote>
<p>v0.6.5+</p>
</blockquote>
<p>该插件提供拖拽调整节点内图片大小的功能。</p>
<h2>注册</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> NodeImgAdjust <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/NodeImgAdjust.js&#x27;</span>
MindMap.usePlugin(NodeImgAdjust)
</code></pre>
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.nodeImgAdjust</code>获取到该实例。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

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

@ -106,6 +106,8 @@ cd web
npm run buildLibrary
```
打包入口为`simple-mind-map/full.js`，默认会引入所有插件，如果你不需要所有插件的话，那么可以修改该文件，只引入你需要的插件，这样可以减少打包后的文件体积。
`simple-mind-map`库的`package.json`文件提供了两个导出字段：
```json

1
web/src/pages/Doc/zh/start/index.vue
View File

@ -73,6 +73,7 @@ npm run serve
<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
npm run buildLibrary
</code></pre>
<p>打包入口为<code>simple-mind-map/full.js</code>，默认会引入所有插件，如果你不需要所有插件的话，那么可以修改该文件，只引入你需要的插件，这样可以减少打包后的文件体积。</p>
<p><code>simple-mind-map</code>库的<code>package.json</code>文件提供了两个导出字段：</p>
<pre class="hljs"><code>{
<span class="hljs-attr">&quot;module&quot;</span>: <span class="hljs-string">&quot;index.js&quot;</span>,

14
web/src/pages/Doc/zh/utils/index.md
View File

@ -10,6 +10,20 @@ import {walk, ...} from 'simple-mind-map/src/utils'
### 方法
#### resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
> v0.6.5+
`width`: 图片原始的宽度
`height`：图片原始的高度
`newWidth`：要缩放到的宽度
`newHeight`：要缩放到的高度
按比例缩放图片。在保持图片原始宽高比的情况下缩放到指定的`newWidth`、`newHeight`大小。
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
深度优先遍历树

9
web/src/pages/Doc/zh/utils/index.vue
View File

@ -6,6 +6,15 @@
<pre class="hljs"><code><span class="hljs-keyword">import</span> {walk, ...} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils&#x27;</span>
</code></pre>
<h3>方法</h3>
<h4>resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)</h4>
<blockquote>
<p>v0.6.5+</p>
</blockquote>
<p><code>width</code>: 图片原始的宽度</p>
<p><code>height</code>：图片原始的高度</p>
<p><code>newWidth</code>：要缩放到的宽度</p>
<p><code>newHeight</code>：要缩放到的高度</p>
<p>按比例缩放图片。在保持图片原始宽高比的情况下缩放到指定的<code>newWidth</code>、<code>newHeight</code>大小。</p>
<h4>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)</h4>
<p>深度优先遍历树</p>
<p><code>root</code>：要遍历的树的根节点</p>