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-07-28 09:33:18 +08:00
parent d06f57a5dc
commit 8e59677623
38 changed files with 452 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -144,4 +144,8 @@ const mindMap = new MindMap({
<img src="./web/src/assets/avatar/水车.jpg" style="width: 50px;height: 50px;" />
<span>水车</span>
</span>
<span>
<img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
<span>仓鼠</span>
</span>
</p>

2
simple-mind-map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
"version": "0.6.8",
"version": "0.6.9",
"description": "一个简单的web在线思维导图",
"authors": [
{

BIN
web/src/assets/avatar/仓鼠.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

10
web/src/assets/icon-font/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2479351 */
src: url('iconfont.woff2?t=1689407546912') format('woff2'),
url('iconfont.woff?t=1689407546912') format('woff'),
url('iconfont.ttf?t=1689407546912') format('truetype');
src: url('iconfont.woff2?t=1690506335310') format('woff2'),
url('iconfont.woff?t=1690506335310') format('woff'),
url('iconfont.ttf?t=1690506335310') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.iconsousuo:before {
content: "\e693";
}
.iconjiantouyou:before {
content: "\e62d";
}

BIN
web/src/assets/icon-font/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff2
View File

Binary file not shown.

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

@ -271,6 +271,11 @@ export const shortcutKeyList = [
icon: 'iconzhengli',
name: 'Arrange layout',
value: 'Ctrl + L'
},
{
icon: 'iconsousuo',
name: 'Search and Replace',
value: 'Ctrl + F'
}
]
},

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

@ -331,6 +331,11 @@ export const shortcutKeyList = [
icon: 'iconzhengli',
name: '一键整理布局',
value: 'Ctrl + L'
},
{
icon: 'iconsousuo',
name: '搜索和替换',
value: 'Ctrl + F'
}
]
},

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

@ -210,5 +210,12 @@ export default {
mouseAction: {
tip1: 'Current: Left click to drag the canvas, right click to box select nodes',
tip2: 'Current: Left click to box select nodes, right click to drag the canvas',
},
search: {
searchPlaceholder: 'Please enter the search content',
replacePlaceholder: 'Please enter replacement content',
replace: 'Replace',
replaceAll: 'Replace all',
cancel: 'Cancel'
}
}

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

@ -210,5 +210,12 @@ export default {
mouseAction: {
tip1: '当前：左键拖动画布，右键框选节点',
tip2: '当前：左键框选节点，右键拖动画布',
},
search: {
searchPlaceholder: '请输入查找内容',
replacePlaceholder: '请输入替换内容',
replace: '替换',
replaceAll: '全部替换',
cancel: '取消'
}
}

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

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

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

@ -1,5 +1,13 @@
# Changelog
## 0.6.9
Fix: 1.Fixed an issue where setting styles to summary nodes would cause summary nodes to disappear. 2.Fixed the issue of node content not rendering when creating a root instance again when customizing node content. 3.Fix the issue of losing focus when adding a new node while the node is in editing. 2.Fix the issue of continuously pressing the tab key not being able to continuously create child nodes.
New: 1.Replace existing `&nbsp;` in SVG when exporting Characters to avoid exporting SVG errors. 2.Support for search and replace.
Demo: 1.When switching themes, it is supported to choose whether to overwrite the set basic style.
## 0.6.8
Fix: 1.Change the shortcut key for inserting a summary to Ctrl+G to avoid conflicts with the save shortcut key. 2.Fix the issue of abnormal switching between rich text editing configuration input boxes while nodes are being edited.

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

@ -1,6 +1,10 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.9</h2>
<p>Fix: 1.Fixed an issue where setting styles to summary nodes would cause summary nodes to disappear. 2.Fixed the issue of node content not rendering when creating a root instance again when customizing node content. 3.Fix the issue of losing focus when adding a new node while the node is in editing. 2.Fix the issue of continuously pressing the tab key not being able to continuously create child nodes.</p>
<p>New: 1.Replace existing <code>&amp;nbsp;</code> in SVG when exporting Characters to avoid exporting SVG errors. 2.Support for search and replace.</p>
<p>Demo: 1.When switching themes, it is supported to choose whether to overwrite the set basic style.</p>
<h2>0.6.8</h2>
<p>Fix: 1.Change the shortcut key for inserting a summary to Ctrl+G to avoid conflicts with the save shortcut key. 2.Fix the issue of abnormal switching between rich text editing configuration input boxes while nodes are being edited.</p>
<p>New: 1.Modify the copy, cut, and paste logic, and support pasting data from the clipboard.</p>

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

@ -347,7 +347,7 @@ redo. All commands are as follows:
| SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) |
| RESET_LAYOUT (v0.2.0+) | Arrange layout with one click | |
| SET_NODE_SHAPE (v0.2.4+) | Set the shape of a node | node (the node to set), shape (the shape, all shapes: [Shape.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js)) |
| GO_TARGET_NODE（v0.6.7+） | Navigate to a node, and if the node is collapsed, it will automatically expand to that node | node（Node instance or node uid to locate） |
| GO_TARGET_NODE（v0.6.7+） | Navigate to a node, and if the node is collapsed, it will automatically expand to that node | node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion） |
### setData(data)

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

@ -923,7 +923,7 @@ redo. All commands are as follows:</p>
<tr>
<td>GO_TARGET_NODE（v0.6.7+）</td>
<td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td>
<td>node（Node instance or node uid to locate）</td>
<td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion）</td>
</tr>
</tbody>
</table>

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

@ -164,4 +164,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
<img src="../../../../assets/avatar/水车.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>水车</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>仓鼠</p>
</div>
</div>

40
web/src/pages/Doc/en/introduction/index.vue
View File

@ -8,21 +8,21 @@
</blockquote>
<h2>Features</h2>
<ul>
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">Supports six types of structures: logical structure diagrams, mind maps,</label>
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Supports six types of structures: logical structure diagrams, mind maps,</label>
organizational structure diagrams, directory organization diagrams, timeline, and fishbone diagrams</li>
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">Supports shortcuts</label></li>
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">Node content supports images, icons, hyperlinks, notes, tags, and</label>
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Supports shortcuts</label></li>
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Node content supports images, icons, hyperlinks, notes, tags, and</label>
summaries</li>
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">Supports forward and backward navigation</label></li>
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">Supports dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">Supports right-click and Ctrl + left-click to select multiple items</label></li>
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">Supports free dragging and dragging to adjust nodes</label></li>
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">Supports various node shapes</label></li>
<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">Supports mini map、support watermark</label></li>
<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">Supports associative lines</label></li>
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supports forward and backward navigation</label></li>
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Supports dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Supports right-click and Ctrl + left-click to select multiple items</label></li>
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Supports free dragging and dragging to adjust nodes</label></li>
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Supports various node shapes</label></li>
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown</label></li>
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Supports mini map、support watermark</label></li>
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Supports associative lines</label></li>
</ul>
<h2>Repository Catalog Introduction</h2>
<p>1.<code>simple-mind-map</code></p>
@ -32,16 +32,16 @@ frameworks such as Vue and React, or without a framework.</p>
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
<ul>
<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">Toolbar, which supports inserting and deleting nodes, and editing node</label>
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Toolbar, which supports inserting and deleting nodes, and editing node</label>
images, icons, hyperlinks, notes, tags, and summaries</li>
<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">Sidebar, with panels for basic style settings, node style settings,</label>
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Sidebar, with panels for basic style settings, node style settings,</label>
outline, theme selection, and structure selection</li>
<li><input type="checkbox" id="checkbox51" checked="true" /><label for="checkbox51">Import and export functionality; data is saved in the browser's local</label>
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Import and export functionality; data is saved in the browser's local</label>
storage by default, but it also supports creating, opening, and editing
local files on the computer directly</li>
<li><input type="checkbox" id="checkbox52" checked="true" /><label for="checkbox52">Right-click menu, which supports operations such as expanding, collapsing,</label>
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Right-click menu, which supports operations such as expanding, collapsing,</label>
and organizing layout</li>
<li><input type="checkbox" id="checkbox53" checked="true" /><label for="checkbox53">Bottom bar, which supports node and word count statistics, switching</label>
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Bottom bar, which supports node and word count statistics, switching</label>
between edit and read-only modes, zooming in and out, and switching to
full screen, support mini map</li>
</ul>
@ -123,6 +123,10 @@ full screen, support mini map</li>
<img src="../../../../assets/avatar/水车.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>水车</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>仓鼠</p>
</div>
</div>
</div>
</template>

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

@ -61,7 +61,9 @@ Delete a specific node
Copy a node, the active node is the node to be operated on, if there are
multiple active nodes, only the first node will be operated on
### setNodeDataRender(node, data)
### setNodeDataRender(node, data, notRender)
- `notRender`: v0.6.9+, `Boolean`, Default is `false`, Do not trigger rendering.
Set node `data`, i.e. the data in the data field, and will determine whether the
node needs to be re-rendered based on whether the node size has changed, `data`

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

@ -37,7 +37,10 @@ disable the enter key and delete key related shortcuts to prevent conflicts</p>
<h3>copyNode()</h3>
<p>Copy a node, the active node is the node to be operated on, if there are
multiple active nodes, only the first node will be operated on</p>
<h3>setNodeDataRender(node, data)</h3>
<h3>setNodeDataRender(node, data, notRender)</h3>
<ul>
<li><code>notRender</code>: v0.6.9+, <code>Boolean</code>, Default is <code>false</code>, Do not trigger rendering.</li>
</ul>
<p>Set node <code>data</code>, i.e. the data in the data field, and will determine whether the
node needs to be re-rendered based on whether the node size has changed, <code>data</code>
is an object, e.g. <code>{text: 'I am new text'}</code></p>

68
web/src/pages/Doc/en/search/index.md Normal file
View File

@ -0,0 +1,68 @@
# Search plugin
> v0.6.9+
This plugin provides the ability to search and replace node content.
## Register
```js
import MindMap from 'simple-mind-map'
import Search from 'simple-mind-map/src/plugins/Search.js'
MindMap.usePlugin(Search)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.Search`.
## Event
### search_info_change
You can listen to 'search_info_change' event to get the number of current search results and the index currently located.
```js
mindMap.on('search_info_change', (data) => {
/*
data: {
currentIndex,// Index, from zero
total
}
*/
})
```
## Method
### search(searchText, callback)
- `searchText`: Text to search for
- `callback`: The callback function that completes this search will be triggered after jumping to the node
Search for node content, which can be called repeatedly. Each call will search and locate to the next matching node. If the search text changes, it will be searched again.
### endSearch()
End search.
### replace(replaceText)
- `replaceText`: Text to be replaced
To replace the content of the current node, call the 'search' method after calling it to replace the content of the currently located matching node.
### replaceAll(replaceText)
- `replaceText`: Text to be replaced
Replace all matching node contents, and call it after calling the 'search' method.
### getReplacedText(node, searchText, replaceText)
- `node`: Node instance
- `searchText`: Text to search for
- `replaceText`: Text to be replaced
Return the text content of the node after search and replacement. Note that the node content will not be actually changed, but is only used to calculate the content of a node after replacement.

74
web/src/pages/Doc/en/search/index.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div>
<h1>Search plugin</h1>
<blockquote>
<p>v0.6.9+</p>
</blockquote>
<p>This plugin provides the ability to search and replace node content.</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> Search <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Search.js&#x27;</span>
MindMap.usePlugin(Search)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.Search</code>.</p>
<h2>Event</h2>
<h3>search_info_change</h3>
<p>You can listen to 'search_info_change' event to get the number of current search results and the index currently located.</p>
<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;search_info_change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
<span class="hljs-comment">/*
data: {
currentIndex,// Index, from zero
total
}
*/</span>
})
</code></pre>
<h2>Method</h2>
<h3>search(searchText, callback)</h3>
<ul>
<li>
<p><code>searchText</code>: Text to search for</p>
</li>
<li>
<p><code>callback</code>: The callback function that completes this search will be triggered after jumping to the node</p>
</li>
</ul>
<p>Search for node content, which can be called repeatedly. Each call will search and locate to the next matching node. If the search text changes, it will be searched again.</p>
<h3>endSearch()</h3>
<p>End search.</p>
<h3>replace(replaceText)</h3>
<ul>
<li><code>replaceText</code>: Text to be replaced</li>
</ul>
<p>To replace the content of the current node, call the 'search' method after calling it to replace the content of the currently located matching node.</p>
<h3>replaceAll(replaceText)</h3>
<ul>
<li><code>replaceText</code>: Text to be replaced</li>
</ul>
<p>Replace all matching node contents, and call it after calling the 'search' method.</p>
<h3>getReplacedText(node, searchText, replaceText)</h3>
<ul>
<li>
<p><code>node</code>: Node instance</p>
</li>
<li>
<p><code>searchText</code>: Text to search for</p>
</li>
<li>
<p><code>replaceText</code>: Text to be replaced</p>
</li>
</ul>
<p>Return the text content of the node after search and replacement. Note that the node content will not be actually changed, but is only used to calculate the content of a node after replacement.</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

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

@ -196,6 +196,12 @@ Load image, return:
}
```
#### getType(data)
> v0.6.9+
Get the type of a data, such as `Boolean`、`Array`.
## Simulate CSS background in Canvas
Import:

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

@ -134,6 +134,11 @@ and copying the <code>data</code> of the data object, example:</p>
size<span class="hljs-comment">// { width, height } width and height of image</span>
}
</code></pre>
<h4>getType(data)</h4>
<blockquote>
<p>v0.6.9+</p>
</blockquote>
<p>Get the type of a data, such as <code>Boolean</code>、<code>Array</code>.</p>
<h2>Simulate CSS background in Canvas</h2>
<p>Import:</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

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

@ -49,6 +49,7 @@ export default [
{ path: 'client', title: '客户端' },
{ path: 'touchEvent', title: 'TouchEvent插件' },
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
{ path: 'search', title: 'Search插件' },
{ path: 'help1', title: '概要/关联线' },
{ path: 'help2', title: '客户端' }
]
@ -80,7 +81,8 @@ export default [
{ path: 'xmind', title: 'XMind parse' },
{ path: 'deploy', title: 'Deploy' },
{ path: 'touchEvent', title: 'TouchEvent plugin' },
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' }
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' },
{ path: 'search', title: 'Search plugin' }
]
}
]

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

@ -1,5 +1,13 @@
# Changelog
## 0.6.9
修复：1.修复给概要节点设置样式概要节点会消失的问题。2.修复自定义节点内容时，二次创建根实例时节点内容不渲染的问题。3.修复节点处于编辑中时添加新节点时新节点的焦点丢失问题。 2.修复连续按tab键无法连续创建子节点的问题。
新增：1.导出svg时替换svg中存在的`&nbsp;`字符，避免导出的svg报错。 2.支持搜索和替换。
Demo：1.切换主题时支持选择是否覆盖设置过的基础样式。
## 0.6.8
修复：1.修改插入概要的快捷键为Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。

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

@ -1,6 +1,10 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.9</h2>
<p>修复：1.修复给概要节点设置样式概要节点会消失的问题。2.修复自定义节点内容时，二次创建根实例时节点内容不渲染的问题。3.修复节点处于编辑中时添加新节点时新节点的焦点丢失问题。 2.修复连续按tab键无法连续创建子节点的问题。</p>
<p>新增：1.导出svg时替换svg中存在的<code>&amp;nbsp;</code>字符，避免导出的svg报错。 2.支持搜索和替换。</p>
<p>Demo：1.切换主题时支持选择是否覆盖设置过的基础样式。</p>
<h2>0.6.8</h2>
<p>修复：1.修改插入概要的快捷键为Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。</p>
<p>新增：1.修改复制、剪切、粘贴逻辑，支持粘贴剪切板中的数据。</p>

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

@ -340,7 +340,7 @@ mindMap.updateConfig({
| SET_NODE_CUSTOM_POSITION（v0.2.0+） | 设置节点自定义位置 | node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined） |
| RESET_LAYOUT（v0.2.0+） | 一键整理布局 | |
| SET_NODE_SHAPE（v0.2.4+） | 设置节点形状 | node（要设置的节点）、shape（形状，全部形状：[Shape.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js)） |
| GO_TARGET_NODE（v0.6.7+） | 定位到某个节点，如果该节点被收起，那么会自动展开到该节点 | node（要定位到的节点实例或节点uid） |
| GO_TARGET_NODE（v0.6.7+） | 定位到某个节点，如果该节点被收起，那么会自动展开到该节点 | node（要定位到的节点实例或节点uid）、callback（v0.6.9+，定位完成后的回调函数） |
### setData(data)

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

@ -918,7 +918,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr>
<td>GO_TARGET_NODE（v0.6.7+）</td>
<td>定位到某个节点，如果该节点被收起，那么会自动展开到该节点</td>
<td>node（要定位到的节点实例或节点uid）</td>
<td>node（要定位到的节点实例或节点uid）、callback（v0.6.9+，定位完成后的回调函数）</td>
</tr>
</tbody>
</table>

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

@ -155,4 +155,8 @@
<img src="../../../../assets/avatar/水车.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>水车</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>仓鼠</p>
</div>
</div>

40
web/src/pages/Doc/zh/introduction/index.vue
View File

@ -8,19 +8,19 @@
</blockquote>
<h2>特性</h2>
<ul>
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构</label></li>
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">支持快捷键</label></li>
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">支持前进后退</label></li>
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">支持拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">支持右键和Ctrl+左键两种多选方式</label></li>
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">支持节点自由拖拽、拖拽调整</label></li>
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">支持多种节点形状</label></li>
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">支持小地图、支持水印</label></li>
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">支持关联线</label></li>
<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构</label></li>
<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">支持快捷键</label></li>
<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持前进后退</label></li>
<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">支持多种节点形状</label></li>
<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持小地图、支持水印</label></li>
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">支持关联线</label></li>
</ul>
<h2>仓库目录介绍</h2>
<p>1.<code>simple-mind-map</code></p>
@ -28,11 +28,11 @@
<p>2.<code>web</code></p>
<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
<ul>
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
</ul>
<p>提供文档页面服务。</p>
<p>3.<code>dist</code></p>
@ -115,6 +115,10 @@
<img src="../../../../assets/avatar/水车.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>水车</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>仓鼠</p>
</div>
</div>
</div>
</template>

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

@ -54,7 +54,9 @@
复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点
### setNodeDataRender(node, data)
### setNodeDataRender(node, data, notRender)
- `notRender`：v0.6.9+，`Boolean`，默认为`false`，是否不要触发渲染。
设置节点数据，即`data`字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，`data`为对象，如：`{text: '我是新文本'}`

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

@ -28,7 +28,10 @@
<p>删除某个指定节点</p>
<h3>copyNode()</h3>
<p>复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点</p>
<h3>setNodeDataRender(node, data)</h3>
<h3>setNodeDataRender(node, data, notRender)</h3>
<ul>
<li><code>notRender</code>：v0.6.9+，<code>Boolean</code>，默认为<code>false</code>，是否不要触发渲染。</li>
</ul>
<p>设置节点数据，即<code>data</code>字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，<code>data</code>为对象，如：<code>{text: '我是新文本'}</code></p>
<h3>moveNodeTo(node, toNode)</h3>
<blockquote>

68
web/src/pages/Doc/zh/search/index.md Normal file
View File

@ -0,0 +1,68 @@
# Search 插件
> v0.6.9+
该插件提供搜索和替换节点内容的功能。
## 注册
```js
import MindMap from 'simple-mind-map'
import Search from 'simple-mind-map/src/plugins/Search.js'
MindMap.usePlugin(Search)
```
注册完且实例化`MindMap`后可通过`mindMap.search`获取到该实例。
## 事件
### search_info_change
可以通过监听`search_info_change`事件来获取当前搜索结果的数量和当前定位到的索引。
```js
mindMap.on('search_info_change', (data) => {
/*
data: {
currentIndex,// 索引，从0开始
total
}
*/
})
```
## 方法
### search(searchText, callback)
- `searchText`：要进行搜索的文本
- `callback`：本次搜索完成的回调函数，会在跳转到节点后触发
搜索节点内容，可以重复调用，每调一次，会搜索和定位到下一个匹配的节点。如果搜索文本改变了，那么会重新搜索。
### endSearch()
结束搜索。
### replace(replaceText)
- `replaceText`：要进行替换的文本
替换当前节点内容，要在调用了`search`方法之后调用，会替换当前定位到的匹配节点内容。
### replaceAll(replaceText)
- `replaceText`：要进行替换的文本
替换所有匹配的节点内容，要在调用了`search`方法之后调用。
### getReplacedText(node, searchText, replaceText)
- `node`：节点实例
- `searchText`：要进行搜索的文本
- `replaceText`：要进行替换的文本
返回该节点搜索和替换后的文本内容，注意，不会实际改变节点内容，只是用来计算一个节点替换后的内容。

74
web/src/pages/Doc/zh/search/index.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div>
<h1>Search 插件</h1>
<blockquote>
<p>v0.6.9+</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> Search <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Search.js&#x27;</span>
MindMap.usePlugin(Search)
</code></pre>
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.search</code>获取到该实例。</p>
<h2>事件</h2>
<h3>search_info_change</h3>
<p>可以通过监听<code>search_info_change</code>事件来获取当前搜索结果的数量和当前定位到的索引。</p>
<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;search_info_change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
<span class="hljs-comment">/*
data: {
currentIndex,// 索引，从0开始
total
}
*/</span>
})
</code></pre>
<h2>方法</h2>
<h3>search(searchText, callback)</h3>
<ul>
<li>
<p><code>searchText</code>：要进行搜索的文本</p>
</li>
<li>
<p><code>callback</code>：本次搜索完成的回调函数，会在跳转到节点后触发</p>
</li>
</ul>
<p>搜索节点内容，可以重复调用，每调一次，会搜索和定位到下一个匹配的节点。如果搜索文本改变了，那么会重新搜索。</p>
<h3>endSearch()</h3>
<p>结束搜索。</p>
<h3>replace(replaceText)</h3>
<ul>
<li><code>replaceText</code>：要进行替换的文本</li>
</ul>
<p>替换当前节点内容，要在调用了<code>search</code>方法之后调用，会替换当前定位到的匹配节点内容。</p>
<h3>replaceAll(replaceText)</h3>
<ul>
<li><code>replaceText</code>：要进行替换的文本</li>
</ul>
<p>替换所有匹配的节点内容，要在调用了<code>search</code>方法之后调用。</p>
<h3>getReplacedText(node, searchText, replaceText)</h3>
<ul>
<li>
<p><code>node</code>：节点实例</p>
</li>
<li>
<p><code>searchText</code>：要进行搜索的文本</p>
</li>
<li>
<p><code>replaceText</code>：要进行替换的文本</p>
</li>
</ul>
<p>返回该节点搜索和替换后的文本内容，注意，不会实际改变节点内容，只是用来计算一个节点替换后的内容。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

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

@ -191,6 +191,12 @@ copyNodeTree({}, node)
}
```
#### getType(data)
> v0.6.9+
获取一个数据的类型，比如`Boolean`、`Array`等。
## 在canvas中模拟css的背景属性
引入：

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

@ -129,6 +129,11 @@
size<span class="hljs-comment">// { width, height } 图片宽高</span>
}
</code></pre>
<h4>getType(data)</h4>
<blockquote>
<p>v0.6.9+</p>
</blockquote>
<p>获取一个数据的类型，比如<code>Boolean</code>、<code>Array</code>等。</p>
<h2>在canvas中模拟css的背景属性</h2>
<p>引入：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

20
web/src/pages/Edit/components/Search.vue
View File

@ -6,7 +6,7 @@
<div class="searchInputBox">
<el-input
ref="input"
placeholder="请输入查找内容"
:placeholder="$t('search.searchPlaceholder')"
size="small"
v-model="searchText"
@keyup.native.enter.stop="onSearchNext"
@ -17,7 +17,7 @@
slot="append"
v-if="!!searchText.trim()"
@click="showReplaceInput = true"
>替换</el-button
>{{ $t('search.replace') }}</el-button
>
</el-input>
<div class="searchInfo" v-if="showSearchInfo">
@ -26,19 +26,23 @@
</div>
<el-input
v-if="showReplaceInput"
placeholder="请输入替换内容"
:placeholder="$t('search.replacePlaceholder')"
size="small"
v-model="replaceText"
style="margin: 12px 0;"
>
<i slot="prefix" class="el-input__icon el-icon-edit"></i>
<el-button size="small" slot="append" @click="hideReplaceInput"
>取消</el-button
>
<el-button size="small" slot="append" @click="hideReplaceInput">{{
$t('search.cancel')
}}</el-button>
</el-input>
<div class="btnList" v-if="showReplaceInput">
<el-button size="small" @click="replace">替换</el-button>
<el-button size="small" @click="replaceAll">全部替换</el-button>
<el-button size="small" @click="replace">{{
$t('search.replace')
}}</el-button>
<el-button size="small" @click="replaceAll">{{
$t('search.replaceAll')
}}</el-button>
</div>
</div>
</template>