mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 22:08:25 +08:00
Doc:updagte
This commit is contained in:
wanglin2
@@ -148,4 +148,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>
|
||||
File diff suppressed because one or more lines are too long
BIN
web/src/assets/avatar/千帆.jpg
Normal file
BIN
web/src/assets/avatar/千帆.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
@@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 0.6.10
|
||||
|
||||
Fix: 1.Fix the issue of deleting a node after searching for it and not updating the search results when searching again. 2.Fixed an issue where the button for adjusting image size did not update after node operation. 3.Fix the issue of incorrect internal data deep copy location. 4.Fix the issue of ineffective line wrapping in rich text nodes. 5. Fix the issue of node swapping and loss when switching themes and other scenarios.
|
||||
|
||||
New: 1.Search supports searching for white space characters and replacing them with white space characters.
|
||||
|
||||
Demo: 1.Support calling up search through icon buttons. 2.Support for switching to dark mode through icon buttons. 3.Optimize search: The mouse is not in the search area and not focused, solving the problem of not being able to delete input text when the mouse is not in the search area. 4.Adjust the interface UI for adding node icons and add a series of node icons. 5.Add a sticker list. 6.Fixed the issue of missing focus in the input box after entering the search box. 7.Support clicking on the icon within the node to display an icon for quick replacement and deletion of the floating panel.
|
||||
|
||||
## 0.6.9-fix.1
|
||||
|
||||
Fix: 1.Fix the issue of incorrect replacement after a single search.
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.6.10</h2>
|
||||
<p>Fix: 1.Fix the issue of deleting a node after searching for it and not updating the search results when searching again. 2.Fixed an issue where the button for adjusting image size did not update after node operation. 3.Fix the issue of incorrect internal data deep copy location. 4.Fix the issue of ineffective line wrapping in rich text nodes. 5. Fix the issue of node swapping and loss when switching themes and other scenarios.</p>
|
||||
<p>New: 1.Search supports searching for white space characters and replacing them with white space characters.</p>
|
||||
<p>Demo: 1.Support calling up search through icon buttons. 2.Support for switching to dark mode through icon buttons. 3.Optimize search: The mouse is not in the search area and not focused, solving the problem of not being able to delete input text when the mouse is not in the search area. 4.Adjust the interface UI for adding node icons and add a series of node icons. 5.Add a sticker list. 6.Fixed the issue of missing focus in the input box after entering the search box. 7.Support clicking on the icon within the node to display an icon for quick replacement and deletion of the floating panel.</p>
|
||||
<h2>0.6.9-fix.1</h2>
|
||||
<p>Fix: 1.Fix the issue of incorrect replacement after a single search.</p>
|
||||
<p>New: 1.We will no longer directly modify the incoming data object, but will make a deep copy internally.</p>
|
||||
|
||||
@@ -246,6 +246,7 @@ Listen to an event. Event list:
|
||||
| associative_line_click（v0.4.5+） | Triggered when an associated line is clicked | path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node) |
|
||||
| svg_mouseenter（v0.5.1+） | Triggered when the mouse moves into the SVG canvas | e（event object） |
|
||||
| svg_mouseleave（v0.5.1+） | Triggered when the mouse moves out of the SVG canvas | e（event object） |
|
||||
| node_icon_click（v0.6.10+） | Triggered when clicking on an icon within a node | this（node instance）、item（Click on the icon name）、e（event object） |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
@@ -333,7 +334,7 @@ redo. All commands are as follows:
|
||||
| UNEXPAND_ALL | Collapse all nodes | |
|
||||
| UNEXPAND_TO_LEVEL (v0.2.8+) | Expand to a specified level | level (the level to expand to, 1, 2, 3...) |
|
||||
| SET_NODE_DATA | Update node data, that is, update the data in the data object of the node data object | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) |
|
||||
| SET_NODE_TEXT | Set node text | node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to `true`） |
|
||||
| SET_NODE_TEXT | Set node text | node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to `true`）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset） |
|
||||
| SET_NODE_IMAGE | Set Node Image | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed) |
|
||||
| SET_NODE_ICON | Set Node Icon | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) |
|
||||
| SET_NODE_HYPERLINK | Set Node Hyperlink | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
|
||||
|
||||
@@ -714,6 +714,11 @@ poor performance and should be used sparingly.</p>
|
||||
<td>Triggered when the mouse moves out of the SVG canvas</td>
|
||||
<td>e（event object）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_icon_click（v0.6.10+）</td>
|
||||
<td>Triggered when clicking on an icon within a node</td>
|
||||
<td>this（node instance）、item（Click on the icon name）、e（event object）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
@@ -853,7 +858,7 @@ redo. All commands are as follows:</p>
|
||||
<tr>
|
||||
<td>SET_NODE_TEXT</td>
|
||||
<td>Set node text</td>
|
||||
<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）</td>
|
||||
<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_IMAGE</td>
|
||||
|
||||
@@ -168,4 +168,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>
|
||||
@@ -127,6 +127,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>
|
||||
|
||||
@@ -131,6 +131,8 @@ nodeData, `SET_NODE_DATA` command's shortcut method
|
||||
|
||||
- `richText`: v0.4.2+，`Boolean`, If you want to set rich text content, that is, `html` character, `richText` needs to be passed `true`
|
||||
|
||||
- `resetRichText`: v0.6.10+, `Boolean`, whether to reset rich text, The default is 'false'. If 'true' is passed, the style of the rich text node will be reset
|
||||
|
||||
Setting the node text, a shortcut for the `SET_NODE_TEXT` command
|
||||
|
||||
### setImage(imgData)
|
||||
|
||||
@@ -76,7 +76,12 @@ if <code>key</code> is not passed, return the <code>data</code> object</p>
|
||||
nodeData, <code>SET_NODE_DATA</code> command's shortcut method</p>
|
||||
<h3>setText(text, richText)</h3>
|
||||
<ul>
|
||||
<li><code>richText</code>: v0.4.2+，<code>Boolean</code>, If you want to set rich text content, that is, <code>html</code> character, <code>richText</code> needs to be passed <code>true</code></li>
|
||||
<li>
|
||||
<p><code>richText</code>: v0.4.2+，<code>Boolean</code>, If you want to set rich text content, that is, <code>html</code> character, <code>richText</code> needs to be passed <code>true</code></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>resetRichText</code>: v0.6.10+, <code>Boolean</code>, whether to reset rich text, The default is 'false'. If 'true' is passed, the style of the rich text node will be reset</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Setting the node text, a shortcut for the <code>SET_NODE_TEXT</code> command</p>
|
||||
<h3>setImage(imgData)</h3>
|
||||
|
||||
@@ -202,6 +202,24 @@ Load image, return:
|
||||
|
||||
Get the type of a data, such as `Boolean`、`Array`.
|
||||
|
||||
#### removeHtmlStyle(html)
|
||||
|
||||
> v0.6.10+
|
||||
|
||||
Remove the inline style of nodes in the HTML string.
|
||||
|
||||
#### addHtmlStyle(html, tag, style)
|
||||
|
||||
> v0.6.10+
|
||||
|
||||
Add inline styles to the specified tags in the HTML tag.
|
||||
|
||||
#### checkIsRichText(str)
|
||||
|
||||
> v0.6.10+
|
||||
|
||||
Check if a string is a rich text character.
|
||||
|
||||
## Simulate CSS background in Canvas
|
||||
|
||||
Import:
|
||||
|
||||
@@ -139,6 +139,21 @@ and copying the <code>data</code> of the data object, example:</p>
|
||||
<p>v0.6.9+</p>
|
||||
</blockquote>
|
||||
<p>Get the type of a data, such as <code>Boolean</code>、<code>Array</code>.</p>
|
||||
<h4>removeHtmlStyle(html)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>Remove the inline style of nodes in the HTML string.</p>
|
||||
<h4>addHtmlStyle(html, tag, style)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>Add inline styles to the specified tags in the HTML tag.</p>
|
||||
<h4>checkIsRichText(str)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>Check if a string is a rich text character.</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">'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'</span>
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 0.6.10
|
||||
|
||||
修复：1.修复搜索定位到某个节点后删除该节点，再次搜索时搜索结果未更新的问题。 2.修复调整图片大小的按钮在节点操作后没有更新的问题。 3.修复内部数据深拷贝位置不正确的问题。 4.修复富文本节点换行不生效的问题。 5.修复切换主题等场景时节点换行会丢失的问题。
|
||||
|
||||
新增：1.搜索支持搜索空白字符和替换为空白字符。
|
||||
|
||||
Demo：1.支持通过图标按钮调出搜索。 2.支持通过图标按钮切换暗黑模式。 3.优化搜索:鼠标不在搜索区域内不聚焦,解决鼠标不在搜索区域内无法删除输入的文字的问题。 4.调整添加节点图标的界面UI，新增系列节点图标。 5.新增贴纸列表。 6.修复在搜索框回车后输入框焦点丢失的问题。 7.支持点击节点内的图标显示一个图标快捷替换和删除悬浮面板。
|
||||
|
||||
## 0.6.9-fix.1
|
||||
|
||||
修复：1.修复搜索进行一次单个替换后再全部替换不正确的问题。
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.6.10</h2>
|
||||
<p>修复：1.修复搜索定位到某个节点后删除该节点，再次搜索时搜索结果未更新的问题。 2.修复调整图片大小的按钮在节点操作后没有更新的问题。 3.修复内部数据深拷贝位置不正确的问题。 4.修复富文本节点换行不生效的问题。 5.修复切换主题等场景时节点换行会丢失的问题。</p>
|
||||
<p>新增：1.搜索支持搜索空白字符和替换为空白字符。</p>
|
||||
<p>Demo：1.支持通过图标按钮调出搜索。 2.支持通过图标按钮切换暗黑模式。 3.优化搜索:鼠标不在搜索区域内不聚焦,解决鼠标不在搜索区域内无法删除输入的文字的问题。 4.调整添加节点图标的界面UI，新增系列节点图标。 5.新增贴纸列表。 6.修复在搜索框回车后输入框焦点丢失的问题。 7.支持点击节点内的图标显示一个图标快捷替换和删除悬浮面板。</p>
|
||||
<h2>0.6.9-fix.1</h2>
|
||||
<p>修复：1.修复搜索进行一次单个替换后再全部替换不正确的问题。</p>
|
||||
<p>新增：1.不会再直接修改传入的data对象，内部会深拷贝一份。</p>
|
||||
|
||||
@@ -241,6 +241,7 @@ mindMap.setTheme('主题名称')
|
||||
| associative_line_click（v0.4.5+） | 点击某条关联线时触发 | path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点） |
|
||||
| svg_mouseenter（v0.5.1+） | 鼠标移入svg画布时触发 | e（事件对象） |
|
||||
| svg_mouseleave（v0.5.1+） | 鼠标移出svg画布时触发 | e（事件对象） |
|
||||
| node_icon_click（v0.6.10+） | 点击节点内的图标时触发 | this（节点实例）、item（点击的图标名称）、e（事件对象） |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
@@ -326,7 +327,7 @@ mindMap.updateConfig({
|
||||
| UNEXPAND_ALL | 收起所有节点 | |
|
||||
| UNEXPAND_TO_LEVEL（v0.2.8+） | 展开到指定层级 | level（要展开到的层级，1、2、3...） |
|
||||
| SET_NODE_DATA | 更新节点数据，即更新节点数据对象里`data`对象的数据 | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
|
||||
| SET_NODE_TEXT | 设置节点文本 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为`true`） |
|
||||
| SET_NODE_TEXT | 设置节点文本 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为`true`）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式） |
|
||||
| SET_NODE_IMAGE | 设置节点图片 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
|
||||
| SET_NODE_ICON | 设置节点图标 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
|
||||
| SET_NODE_HYPERLINK | 设置节点超链接 | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
|
||||
|
||||
@@ -707,6 +707,11 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<td>鼠标移出svg画布时触发</td>
|
||||
<td>e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_icon_click（v0.6.10+）</td>
|
||||
<td>点击节点内的图标时触发</td>
|
||||
<td>this（节点实例）、item（点击的图标名称）、e（事件对象）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
@@ -848,7 +853,7 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<tr>
|
||||
<td>SET_NODE_TEXT</td>
|
||||
<td>设置节点文本</td>
|
||||
<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）</td>
|
||||
<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_IMAGE</td>
|
||||
|
||||
@@ -159,4 +159,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>
|
||||
@@ -119,6 +119,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>
|
||||
|
||||
@@ -124,10 +124,12 @@
|
||||
|
||||
设置节点数据，`SET_NODE_DATA`命令的快捷方法
|
||||
|
||||
### setText(text, richText)
|
||||
### setText(text, richText, resetRichText)
|
||||
|
||||
- `richText`：v0.4.2+，`Boolean`，如果要设置的是富文本内容，也就是`html`字符，`richText`需要传`true`
|
||||
|
||||
- `resetRichText`：v0.6.10+，`Boolean`，是否要复位富文本，默认为`false`，如果传`true`那么会重置富文本节点的样式
|
||||
|
||||
设置节点文本，`SET_NODE_TEXT`命令的快捷方法
|
||||
|
||||
### setImage(imgData)
|
||||
|
||||
@@ -71,9 +71,14 @@
|
||||
<p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
|
||||
<h3>setData(data)</h3>
|
||||
<p>设置节点数据，<code>SET_NODE_DATA</code>命令的快捷方法</p>
|
||||
<h3>setText(text, richText)</h3>
|
||||
<h3>setText(text, richText, resetRichText)</h3>
|
||||
<ul>
|
||||
<li><code>richText</code>：v0.4.2+，<code>Boolean</code>，如果要设置的是富文本内容，也就是<code>html</code>字符，<code>richText</code>需要传<code>true</code></li>
|
||||
<li>
|
||||
<p><code>richText</code>：v0.4.2+，<code>Boolean</code>，如果要设置的是富文本内容，也就是<code>html</code>字符，<code>richText</code>需要传<code>true</code></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>resetRichText</code>：v0.6.10+，<code>Boolean</code>，是否要复位富文本，默认为<code>false</code>，如果传<code>true</code>那么会重置富文本节点的样式</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>设置节点文本，<code>SET_NODE_TEXT</code>命令的快捷方法</p>
|
||||
<h3>setImage(imgData)</h3>
|
||||
|
||||
@@ -197,6 +197,24 @@ copyNodeTree({}, node)
|
||||
|
||||
获取一个数据的类型，比如`Boolean`、`Array`等。
|
||||
|
||||
#### removeHtmlStyle(html)
|
||||
|
||||
> v0.6.10+
|
||||
|
||||
移除html字符串中节点的内联样式。
|
||||
|
||||
#### addHtmlStyle(html, tag, style)
|
||||
|
||||
> v0.6.10+
|
||||
|
||||
给html标签中指定的标签添加内联样式。
|
||||
|
||||
#### checkIsRichText(str)
|
||||
|
||||
> v0.6.10+
|
||||
|
||||
检查一个字符串是否是富文本字符。
|
||||
|
||||
## 在canvas中模拟css的背景属性
|
||||
|
||||
引入：
|
||||
|
||||
@@ -134,6 +134,21 @@
|
||||
<p>v0.6.9+</p>
|
||||
</blockquote>
|
||||
<p>获取一个数据的类型，比如<code>Boolean</code>、<code>Array</code>等。</p>
|
||||
<h4>removeHtmlStyle(html)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>移除html字符串中节点的内联样式。</p>
|
||||
<h4>addHtmlStyle(html, tag, style)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>给html标签中指定的标签添加内联样式。</p>
|
||||
<h4>checkIsRichText(str)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>检查一个字符串是否是富文本字符。</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">'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'</span>
|
||||
|
||||
Reference in New Issue
Block a user