FE/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-17 14:04:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Doc: update

Browse Source
This commit is contained in:
街角小林
2024-07-12 17:05:55 +08:00
parent f819cbc5b1
commit e293039b3c
17 changed files with 379 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,5 +1,54 @@
# Changelog
## 0.10.3
> 2024.7.12
Node tag data structure update:
The node tag data has been changed from a string array to an object array, mainly to support setting the style of a single tag. The current node tag data structure is as follows:
```js
{
tag: ['tag']
}
```
Change to the following:
```js
{
tag: [
{
text: 'tag',
style: {}
}
]
}
```
Fix:
> 1.Fix the issue where the isRoot and parent attributes of node instances obtained through methods customCreateNodeContent and createNodePrefixContent are both null;
>
> 2.Fixed the issue where the last edited node would enter editing mode when zooming in and out of the canvas using the scroll wheel or shortcut keys after editing the node text, and the mind map shortcut keys would become invalid;
>
> 3.Fixed the issue where multiple nodes can be selected simultaneously, allowing unlimited insertion of summaries;
New:
> 1.Support setting single label styles for nodes;
>
> 2.Add instantiation options for displaying the location of node labels;
>
> 3.Two callback parameters have been added to the node_tag_click event;
>
> 4.When copying, cutting, or moving multiple nodes, operate them in the order they are on the nodes, rather than in the order they are activated;
Demo:
> 1.Support clicking on node tags to modify text and color;
## 0.10.2 / 0.10.2-fix.1
> 2024.7.3

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

@@ -1,6 +1,43 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.10.3</h2>
<blockquote>
<p>2024.7.12</p>
</blockquote>
<p>Node tag data structure update:</p>
<p>The node tag data has been changed from a string array to an object array, mainly to support setting the style of a single tag. The current node tag data structure is as follows:</p>
<pre class="hljs"><code>{
<span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;tag&#x27;</span>]
}
</code></pre>
<p>Change to the following:</p>
<pre class="hljs"><code>{
<span class="hljs-attr">tag</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;tag&#x27;</span>,
<span class="hljs-attr">style</span>: {}
}
]
}
</code></pre>
<p>Fix:</p>
<blockquote>
<p>1.Fix the issue where the isRoot and parent attributes of node instances obtained through methods customCreateNodeContent and createNodePrefixContent are both null;</p>
<p>2.Fixed the issue where the last edited node would enter editing mode when zooming in and out of the canvas using the scroll wheel or shortcut keys after editing the node text, and the mind map shortcut keys would become invalid;</p>
<p>3.Fixed the issue where multiple nodes can be selected simultaneously, allowing unlimited insertion of summaries;</p>
</blockquote>
<p>New:</p>
<blockquote>
<p>1.Support setting single label styles for nodes;</p>
<p>2.Add instantiation options for displaying the location of node labels;</p>
<p>3.Two callback parameters have been added to the node_tag_click event;</p>
<p>4.When copying, cutting, or moving multiple nodes, operate them in the order they are on the nodes, rather than in the order they are activated;</p>
</blockquote>
<p>Demo:</p>
<blockquote>
<p>1.Support clicking on node tags to modify text and color;</p>
</blockquote>
<h2>0.10.2 / 0.10.2-fix.1</h2>
<blockquote>
<p>2024.7.3</p>

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

@@ -34,6 +34,7 @@ const mindMap = new MindMap({
| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: [default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | |
| scaleRatio | Number | 0.1 | The incremental scaling ratio | |
| maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | |
| tagPosition（v0.10.3+） | String | right | The position of the tag display relative to the node text，bottom（Below the text）、right（On the right side of the text） | |
| imgTextMargin | Number | 5 | The spacing between the image and text in the node | |
| textContentMargin | Number | 2 | The spacing between various text information in the node, such as the spacing between the icon and text | |
| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top, node) => {// your display node note logic. node is a new parameter added in v0.8.1+ version, representing node instances }, hide: () => {// your hide node note logic }} | |
@@ -121,7 +122,7 @@ The basic data structure is as follows:
hyperlink: '', // Hyperlink address
hyperlinkTitle: '', // Title of hyperlink
note: '', // Content of remarks
tag: [], // Tag list
tag: [], // Tag list, Prior to v0.10.3, only string arrays, i.e. ['tag'], were supported. However, v0.10.3+versions support object arrays, i.e. [{text: 'tag', style: {}}]. The specific supported label styles can refer to the "Tag Styles" below
generalization: [{// (Arrays are not supported in versions below 0.9.0, and only a single summary data can be set)The summary of the node, if there is no summary, the generalization can be set to null
text: '', // Summary Text
richText: false, // Is the text of the node in rich text mode
@@ -142,6 +143,19 @@ The basic data structure is as follows:
If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the `_` Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.
##### Tag Styles
The style object of the tag supports the following properties:
| Field Name | Type | Default Value | Description |
| ----------- | ------ | -------- | ----------- |
| radius | Number | 3 | The corner size of the tag rectangle |
| fontSize | Number | 12 | Font size, it is recommended that the height of the text should not exceed height |
| fill | String | | Background color of tag rectangle |
| height | Number | 20 | Height of tag rectangle |
| paddingX | Number | 8 | Horizontal margin, if width is set, this configuration will be ignored |
| width | Number | | The width of the tag rectangle, if not set, defaults to the width of the text plus paddingX * 2 |
### 1.2Icon Configuration
| Field Name | Type | Default Value | Description |
@@ -586,7 +600,7 @@ Listen to an event. Event list:
| node_cooperate_avatar_mouseleave（v0.9.9+） | Triggered when removing personnel avatars with the mouse during collaborative editing | userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) |
| exit_demonstrate（v0.9.11+） | Triggered when exiting demonstration mode | |
| demonstrate_jump（v0.9.11+） | Trigger when switching steps in demonstration mode | currentStepIndex（The index of the steps currently played, counting from 0）、stepLength（Total number of playback steps） |
| node_tag_click（v0.9.12+） | Click events on node labels | this(Current node instance)、item（Content of clicked tags） |
| node_tag_click（v0.9.12+） | Click events on node labels | this(Current node instance)、item（Content of clicked tags）、index（v0.10.3+，The index of this tag in the tag list）、tagNode（v0.10.3+，Tag node, G instance of @svgdotjs/svg.js library, Can be used to obtain label position and size information） |
| node_layout_end（v0.10.1+） | Event where the content layout of a single node is completed | this(Current node instance) |
| node_attachmentClick（v0.9.10+） | Click event for node attachment icon | this(Current node instance)、e（Event Object）、node（Icon node） |
| node_attachmentContextmenu（v0.9.10+） | Right click event on node attachment icon | this(Current node instance)、e（Event Object）、node（Icon node） |
@@ -690,7 +704,7 @@ redo. All commands are as follows:
| SET_NODE_HYPERLINK | Set Node Hyperlink | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
| SET_NODE_NOTE | Set Node Note | node (node to set), note (note text) |
| SET_NODE_ATTACHMENT（v0.9.10+） | Set node attachment | node（node to set）、url（attachment url）、name（attachment name, optional） |
| SET_NODE_TAG | Set Node Tag | node (node to set), tag (string array, built-in color information can be obtained in [constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)) |
| SET_NODE_TAG | Set Node Tag | node (node to set), tag (Previous versions before v0.10.3 only support string arrays, i.e. ['tag'], while v0.10.3+versions support object arrays, i.e. [{text: 'tag', style: {} }]) |
| INSERT_AFTER (v0.1.5+) | Move Node to After Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node) |
| INSERT_BEFORE (v0.1.5+) | Move Node to Before Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node) |
| MOVE_NODE_TO (v0.1.5+) | Move a node as a child of another node | node (the node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), toNode (the target node) |

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

@@ -86,6 +86,13 @@
<td></td>
</tr>
<tr>
<td>tagPosition（v0.10.3+）</td>
<td>String</td>
<td>right</td>
<td>The position of the tag display relative to the node text，bottom（Below the text）、right（On the right side of the text）</td>
<td></td>
</tr>
<tr>
<td>imgTextMargin</td>
<td>Number</td>
<td>5</td>
@@ -554,7 +561,7 @@
<span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// Hyperlink address</span>
<span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// Title of hyperlink</span>
<span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// Content of remarks</span>
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// Tag list</span>
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// Tag list, Prior to v0.10.3, only string arrays, i.e. [&#x27;tag&#x27;], were supported. However, v0.10.3+versions support object arrays, i.e. [{text: &#x27;tag&#x27;, style: {}}]. The specific supported label styles can refer to the &quot;Tag Styles&quot; below</span>
<span class="hljs-attr">generalization</span>: [{<span class="hljs-comment">// (Arrays are not supported in versions below 0.9.0, and only a single summary data can be set)The summary of the node, if there is no summary, the generalization can be set to null</span>
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// Summary Text</span>
<span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Is the text of the node in rich text mode</span>
@@ -573,6 +580,56 @@
}
</code></pre>
<p>If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the <code>_</code> Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.</p>
<h5>Tag Styles</h5>
<p>The style object of the tag supports the following properties:</p>
<table>
<thead>
<tr>
<th>Field Name</th>
<th>Type</th>
<th>Default Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>radius</td>
<td>Number</td>
<td>3</td>
<td>The corner size of the tag rectangle</td>
</tr>
<tr>
<td>fontSize</td>
<td>Number</td>
<td>12</td>
<td>Font size, it is recommended that the height of the text should not exceed height</td>
</tr>
<tr>
<td>fill</td>
<td>String</td>
<td></td>
<td>Background color of tag rectangle</td>
</tr>
<tr>
<td>height</td>
<td>Number</td>
<td>20</td>
<td>Height of tag rectangle</td>
</tr>
<tr>
<td>paddingX</td>
<td>Number</td>
<td>8</td>
<td>Horizontal margin, if width is set, this configuration will be ignored</td>
</tr>
<tr>
<td>width</td>
<td>Number</td>
<td></td>
<td>The width of the tag rectangle, if not set, defaults to the width of the text plus paddingX * 2</td>
</tr>
</tbody>
</table>
<h3>1.2Icon Configuration</h3>
<table>
<thead>
@@ -1620,7 +1677,7 @@ poor performance and should be used sparingly.</p>
<tr>
<td>node_tag_click（v0.9.12+）</td>
<td>Click events on node labels</td>
<td>this(Current node instance)、item（Content of clicked tags）</td>
<td>this(Current node instance)、item（Content of clicked tags）、index（v0.10.3+，The index of this tag in the tag list）、tagNode（v0.10.3+，Tag node, G instance of @svgdotjs/svg.js library, Can be used to obtain label position and size information）</td>
</tr>
<tr>
<td>node_layout_end（v0.10.1+）</td>
@@ -1820,7 +1877,7 @@ redo. All commands are as follows:</p>
<tr>
<td>SET_NODE_TAG</td>
<td>Set Node Tag</td>
<td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)</td>
<td>node (node to set), tag (Previous versions before v0.10.3 only support string arrays, i.e. ['tag'], while v0.10.3+versions support object arrays, i.e. [{text: 'tag', style: {} }])</td>
</tr>
<tr>
<td>INSERT_AFTER (v0.1.5+)</td>

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

@@ -90,13 +90,7 @@ This project may not have fully tested every function point, so there may be bug
If you have suggestions or find bugs, you can submit [issues](https://github.com/wanglin2/mind-map/issues) here.
The built-in themes and icons in the project part come from:
[Baidu Mind Map](https://naotu.baidu.com/)
[Zhixi Mind Map](https://www.zhixi.com/)
Respect the copyright, and do not use the theme and icons directly for commercial projects.
The built-in themes and icons in the project part come from:[Baidu Mind Map](https://naotu.baidu.com/)、[Zhixi Mind Map](https://www.zhixi.com/)。Respect the copyright, and do not use the theme and icons directly for commercial projects.
## Why not？

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

@@ -68,10 +68,7 @@ full screen, support mini map</li>
<p>This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.</p>
<p>This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself. Generally speaking, within 500 nodes, it is more smooth, while over 1000 nodes have more noticeable lag.</p>
<p>If you have suggestions or find bugs, you can submit <a href="https://github.com/wanglin2/mind-map/issues">issues</a> here.</p>
<p>The built-in themes and icons in the project part come from:</p>
<p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
<p><a href="https://www.zhixi.com/">Zhixi Mind Map</a></p>
<p>Respect the copyright, and do not use the theme and icons directly for commercial projects.</p>
<p>The built-in themes and icons in the project part come from:<a href="https://naotu.baidu.com/">Baidu Mind Map</a>、<a href="https://www.zhixi.com/">Zhixi Mind Map</a>。Respect the copyright, and do not use the theme and icons directly for commercial projects.</p>
<h2>Why not？</h2>
<p>1.<a href="https://www.zhixi.com/">Zhixi</a></p>
<p>Zhixi is a free mind mapping product that supports multi end synchronization. The UI design is beautiful and the features are complete, but it is not open source, so it can only be used as a user and cannot be used in your project.</p>

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

@@ -1,5 +1,54 @@
# Changelog
## 0.10.3
> 2024.7.12
节点标签数据结构更新：
节点标签数据由字符串数组，改为对象数组，主要是为了支持设置单个标签的样式，当前节点的标签数据结构如下：
```js
{
tag: ['标签']
}
```
改为如下：
```js
{
tag: [
{
text: '标签',
style: {}
}
]
}
```
修复：
> 1.修复customCreateNodeContent、createNodePrefixContent等方法里获取到的节点实例的isRoot和parent等属性都为null的问题；
>
> 2.修复编辑过节点文本后，再使用滚轮或快捷键缩放画布时上次被编辑的节点会进入编辑状态，同时思维导图快捷键会失效的问题；
>
> 3.修复同时选中多个节点，可以无限插入概要的问题；
新增：
> 1.支持设置节点单个标签样式；
>
> 2.新增节点标签显示位置的实例化选项；
>
> 3.node_tag_click事件新增两个回调参数；
>
> 4.复制、剪切、移动多个节点时，按其在节点上的顺序进行操作，而不是激活的顺序；
Demo：
> 1.支持点击节点标签进行文本和颜色的修改；
## 0.10.2 / 0.10.2-fix.1
> 2024.7.3

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

@@ -1,6 +1,43 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.10.3</h2>
<blockquote>
<p>2024.7.12</p>
</blockquote>
<p>节点标签数据结构更新：</p>
<p>节点标签数据由字符串数组，改为对象数组，主要是为了支持设置单个标签的样式，当前节点的标签数据结构如下：</p>
<pre class="hljs"><code>{
<span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;标签&#x27;</span>]
}
</code></pre>
<p>改为如下：</p>
<pre class="hljs"><code>{
<span class="hljs-attr">tag</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;标签&#x27;</span>,
<span class="hljs-attr">style</span>: {}
}
]
}
</code></pre>
<p>修复：</p>
<blockquote>
<p>1.修复customCreateNodeContent、createNodePrefixContent等方法里获取到的节点实例的isRoot和parent等属性都为null的问题；</p>
<p>2.修复编辑过节点文本后，再使用滚轮或快捷键缩放画布时上次被编辑的节点会进入编辑状态，同时思维导图快捷键会失效的问题；</p>
<p>3.修复同时选中多个节点，可以无限插入概要的问题；</p>
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.支持设置节点单个标签样式；</p>
<p>2.新增节点标签显示位置的实例化选项；</p>
<p>3.node_tag_click事件新增两个回调参数；</p>
<p>4.复制、剪切、移动多个节点时，按其在节点上的顺序进行操作，而不是激活的顺序；</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.支持点击节点标签进行文本和颜色的修改；</p>
</blockquote>
<h2>0.10.2 / 0.10.2-fix.1</h2>
<blockquote>
<p>2024.7.3</p>

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

@@ -34,6 +34,7 @@ const mindMap = new MindMap({
| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |
| scaleRatio | Number | 0.1 | 放大缩小的增量比例 |
| maxTag | Number | 5 | 节点里最多显示的标签数量，多余的会被丢弃 |
| tagPosition（v0.10.3+） | String | right | 标签显示的位置，相对于节点文本，bottom（下方）、right（右侧） |
| imgTextMargin | Number | 5 | 节点里图片和文字的间距 |
| textContentMargin | Number | 2 | 节点里各种文字信息的间距，如图标和文字的间距 |
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top, node) => {// 你的显示节点备注逻辑。node为v0.8.1+版本新增的回参，代表节点实例 }, hide: () => {// 你的隐藏节点备注逻辑 }} |
@@ -123,7 +124,7 @@ const mindMap = new MindMap({
note: '', // 备注的内容
attachmentUrl: '',// v0.9.10+，附件url
attachmentName: '',// v0.9.10+，附件名称
tag: [], // 标签列表
tag: [], // 标签列表，v0.10.3以前的版本只支持字符串数组，即['标签']，v0.10.3+版本支持对象数组，即[{text: '标签', style: {}}]，具体支持的标签样式可参考下方【标签的样式】
generalization: [{// （0.9.0以下版本不支持数组，只能设置单个概要数据）节点的概要，如果没有概要generalization设为null即可
text: '', // 概要的文本
richText: false, // 节点的文本是否是富文本模式
@@ -144,6 +145,19 @@ const mindMap = new MindMap({
如果你要添加自定义的字段，可以添加到`data`、`children`同级，如果你要添加到`data`对象里，那么请使用`_`开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
##### 标签的样式
标签的样式`style`对象支持以下属性：
| 字段名称 | 类型 | 默认值 | 描述 |
| ----------- | ------ | -------- | ----------- |
| radius | Number | 3 | 标签矩形的圆角大小 |
| fontSize | Number | 12 | 字号，建议文字高度不要大于height |
| fill | String | | 标签矩形的背景颜色 |
| height | Number | 20 | 标签矩形的高度 |
| paddingX | Number | 8 | 水平内边距，如果设置了width，将忽略该配置 |
| width | Number | | 标签矩形的宽度，如果不设置，默认以文字的宽度+paddingX*2为宽度 |
#### 1.2图标配置
| 字段名称 | 类型 | 默认值 | 描述 |
@@ -585,7 +599,7 @@ mindMap.setTheme('主题名称')
| node_cooperate_avatar_mouseleave（v0.9.9+） | 协同编辑时，鼠标移除人员头像时触发 | userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) |
| exit_demonstrate（v0.9.11+） | 退出演示模式时触发 | |
| demonstrate_jump（v0.9.11+） | 演示模式中，切换步骤时触发 | currentStepIndex（当前播放到的步骤索引，从0开始计数）、stepLength（总的播放步骤数量） |
| node_tag_click（v0.9.12+） | 节点标签的点击事件 | this(当前节点实例)、item（点击的标签内容） |
| node_tag_click（v0.9.12+） | 节点标签的点击事件 | this(当前节点实例)、item（点击的标签内容）、index（v0.10.3+，该标签在标签列表里的索引）、tagNode（v0.10.3+，标签节点，@svgdotjs/svg.js库的G实例，可以用于获取标签位置和大小信息） |
| node_layout_end（v0.10.1+） | 单个节点内容布局完成的事件 | this(当前节点实例) |
| node_attachmentClick（v0.9.10+） | 节点附件图标的点击事件 | this(当前节点实例)、e（事件对象）、node（图标节点） |
| node_attachmentContextmenu（v0.9.10+） | 节点附件图标的右键点击事件 | this(当前节点实例)、e（事件对象）、node（图标节点） |
@@ -687,7 +701,7 @@ mindMap.updateConfig({
| SET_NODE_HYPERLINK | 设置节点超链接 | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
| SET_NODE_NOTE | 设置节点备注 | node（要设置的节点）、note（备注文字） |
| SET_NODE_ATTACHMENT（v0.9.10+） | 设置节点附件 | node（要设置的节点）、url（附件url）、name（附件名称，可选） |
| SET_NODE_TAG | 设置节点标签 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)里获取到） |
| SET_NODE_TAG | 设置节点标签 | node（要设置的节点）、tag（v0.10.3以前的版本只支持字符串数组，即['标签']，v0.10.3+版本支持对象数组，即[{ text: '标签', style: {} }]） |
| INSERT_AFTER（v0.1.5+） | 将节点移动到另一个节点的后面 | node（要移动的节点，（v0.7.2+支持传递节点数组实现同时移动多个节点））、 exist（目标节点） |
| INSERT_BEFORE（v0.1.5+） | 将节点移动到另一个节点的前面，（v0.7.2+支持传递节点数组实现同时移动多个节点） | node（要移动的节点）、 exist（目标节点） |
| MOVE_NODE_TO（v0.1.5+） | 移动节点作为另一个节点的子节点，（v0.7.2+支持传递节点数组实现同时移动多个节点） | node（要移动的节点）、 toNode（目标节点） |

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

@@ -77,6 +77,12 @@
<td>节点里最多显示的标签数量，多余的会被丢弃</td>
</tr>
<tr>
<td>tagPosition（v0.10.3+）</td>
<td>String</td>
<td>right</td>
<td>标签显示的位置，相对于节点文本，bottom（下方）、right（右侧）</td>
</tr>
<tr>
<td>imgTextMargin</td>
<td>Number</td>
<td>5</td>
@@ -483,7 +489,7 @@
<span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 备注的内容</span>
<span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
<span class="hljs-attr">attachmentName</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表，v0.10.3以前的版本只支持字符串数组，即[&#x27;标签&#x27;]，v0.10.3+版本支持对象数组，即[{text: &#x27;标签&#x27;, style: {}}]，具体支持的标签样式可参考下方【标签的样式】</span>
<span class="hljs-attr">generalization</span>: [{<span class="hljs-comment">// （0.9.0以下版本不支持数组，只能设置单个概要数据）节点的概要，如果没有概要generalization设为null即可</span>
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 概要的文本</span>
<span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>
@@ -502,6 +508,56 @@
}
</code></pre>
<p>如果你要添加自定义的字段，可以添加到<code>data</code>、<code>children</code>同级，如果你要添加到<code>data</code>对象里，那么请使用<code>_</code>开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。</p>
<h5>标签的样式</h5>
<p>标签的样式<code>style</code>对象支持以下属性：</p>
<table>
<thead>
<tr>
<th>字段名称</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>radius</td>
<td>Number</td>
<td>3</td>
<td>标签矩形的圆角大小</td>
</tr>
<tr>
<td>fontSize</td>
<td>Number</td>
<td>12</td>
<td>字号，建议文字高度不要大于height</td>
</tr>
<tr>
<td>fill</td>
<td>String</td>
<td></td>
<td>标签矩形的背景颜色</td>
</tr>
<tr>
<td>height</td>
<td>Number</td>
<td>20</td>
<td>标签矩形的高度</td>
</tr>
<tr>
<td>paddingX</td>
<td>Number</td>
<td>8</td>
<td>水平内边距，如果设置了width，将忽略该配置</td>
</tr>
<tr>
<td>width</td>
<td>Number</td>
<td></td>
<td>标签矩形的宽度，如果不设置，默认以文字的宽度+paddingX*2为宽度</td>
</tr>
</tbody>
</table>
<h4>1.2图标配置</h4>
<table>
<thead>
@@ -1486,7 +1542,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr>
<td>node_tag_click（v0.9.12+）</td>
<td>节点标签的点击事件</td>
<td>this(当前节点实例)、item（点击的标签内容）</td>
<td>this(当前节点实例)、item（点击的标签内容）、index（v0.10.3+，该标签在标签列表里的索引）、tagNode（v0.10.3+，标签节点，@svgdotjs/svg.js库的G实例，可以用于获取标签位置和大小信息）</td>
</tr>
<tr>
<td>node_layout_end（v0.10.1+）</td>
@@ -1688,7 +1744,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr>
<td>SET_NODE_TAG</td>
<td>设置节点标签</td>
<td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）</td>
<td>node（要设置的节点）、tag（v0.10.3以前的版本只支持字符串数组，即['标签']，v0.10.3+版本支持对象数组，即[{ text: '标签', style: {} }]）</td>
</tr>
<tr>
<td>INSERT_AFTER（v0.1.5+）</td>

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

@@ -43,7 +43,7 @@
note: '', // 备注的内容
attachmentUrl: '',// v0.9.10+，附件url
attachmentName: '',// v0.9.10+，附件名称
tag: [], // 标签列表
tag: [], // 标签列表，v0.10.3以前的版本只支持字符串数组，即['标签']，v0.10.3+版本支持对象数组，即[{text: '标签', style: {}}]
generalization: [{// （0.9.0以下版本不支持数组，只能设置单个概要数据）节点的概要，如果没有概要generalization设为null即可
text: '', // 概要的文本
richText: false, // 节点的文本是否是富文本模式

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

@@ -35,7 +35,7 @@
<span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 备注的内容</span>
<span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
<span class="hljs-attr">attachmentName</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表，v0.10.3以前的版本只支持字符串数组，即[&#x27;标签&#x27;]，v0.10.3+版本支持对象数组，即[{text: &#x27;标签&#x27;, style: {}}]</span>
<span class="hljs-attr">generalization</span>: [{<span class="hljs-comment">// （0.9.0以下版本不支持数组，只能设置单个概要数据）节点的概要，如果没有概要generalization设为null即可</span>
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 概要的文本</span>
<span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>

17
web/src/pages/Doc/zh/course2/index.md
View File

@@ -148,6 +148,23 @@ activeNodes.value.forEach(node => {
const tagArr = activeNode.getData('tag') || []
```
v0.10.3+版本支持设置单个标签的样式，所以标签数据的类型也由字符串数组（即`['标签']`），改为对象数组（即`[{text: '标签', style: {}}]`）。所以要插入指定样式的标签可以这样操作：
```js
activeNodes.value.forEach(node => {
node.setTag([
{
text: '标签1',
style: {
fill: 'red'
}
}
])
})
```
`style`具体支持的属性可以参考【构造函数】文档。
## 插入概要
插入概要可以不需要实现UI，直接调用插入概要的命令即可：

13
web/src/pages/Doc/zh/course2/index.vue
View File

@@ -97,6 +97,19 @@ activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">
<p>获取节点标签数据：</p>
<pre class="hljs"><code><span class="hljs-keyword">const</span> tagArr = activeNode.getData(<span class="hljs-string">&#x27;tag&#x27;</span>) || []
</code></pre>
<p>v0.10.3+版本支持设置单个标签的样式，所以标签数据的类型也由字符串数组（即<code>['标签']</code>），改为对象数组（即<code>[{text: '标签', style: {}}]</code>）。所以要插入指定样式的标签可以这样操作：</p>
<pre class="hljs"><code>activeNodes.value.forEach(<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
node.setTag([
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;标签1&#x27;</span>,
<span class="hljs-attr">style</span>: {
<span class="hljs-attr">fill</span>: <span class="hljs-string">&#x27;red&#x27;</span>
}
}
])
})
</code></pre>
<p><code>style</code>具体支持的属性可以参考【构造函数】文档。</p>
<h2>插入概要</h2>
<p>插入概要可以不需要实现UI，直接调用插入概要的命令即可：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;ADD_GENERALIZATION&#x27;</span>, data)

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

@@ -82,13 +82,7 @@
如果有建议或发现了bug，可以在此提交[issues](https://github.com/wanglin2/mind-map/issues)。
项目内置的主题和图标部分来自于：
[百度脑图](https://naotu.baidu.com/)
[知犀思维导图](https://www.zhixi.com/)
尊重版权，主题和图标请勿直接用于商业项目。
项目内置的主题和图标部分来自于：[百度脑图](https://naotu.baidu.com/)、[知犀思维导图](https://www.zhixi.com/)。尊重版权，主题和图标请勿直接用于商业项目。
## 为什么不是？

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

@@ -8,18 +8,18 @@
</blockquote>
<h2>特性</h2>
<ul>
<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="checkbox36" checked="true" /><label for="checkbox36">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持画布拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">提供丰富的配置，满足各种场景各种使用习惯</label></li>
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">支持协同编辑</label></li>
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">支持演示模式</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">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</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">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</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></li>
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持演示模式</label></li>
</ul>
<p>官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：</p>
<blockquote>
@@ -37,11 +37,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="checkbox46" checked="true" /><label for="checkbox46">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</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>
</ul>
<p>提供文档页面服务。</p>
<p>3.<code>dist</code></p>
@@ -59,10 +59,7 @@
<p>本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。</p>
<p>本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。一般来说，500个节点以内比较流畅，1000个节点以上卡顿比较明显。</p>
<p>如果有建议或发现了bug，可以在此提交<a href="https://github.com/wanglin2/mind-map/issues">issues</a>。</p>
<p>项目内置的主题和图标部分来自于：</p>
<p><a href="https://naotu.baidu.com/">百度脑图</a></p>
<p><a href="https://www.zhixi.com/">知犀思维导图</a></p>
<p>尊重版权，主题和图标请勿直接用于商业项目。</p>
<p>项目内置的主题和图标部分来自于：<a href="https://naotu.baidu.com/">百度脑图</a>、<a href="https://www.zhixi.com/">知犀思维导图</a>。尊重版权，主题和图标请勿直接用于商业项目。</p>
<h2>为什么不是？</h2>
<p>1.<a href="https://www.zhixi.com/">知犀</a></p>
<p>知犀是一个免费的思维导图产品，支持多端同步，ui设计很漂亮，功能也很齐全，但是它并不开源，所以只能作为一个用户，而无法在你的项目中使用。</p>