mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 18:37:43 +08:00
Doc
This commit is contained in:
wanglin2
parent
83ce090402
commit
6be6f6ee8a
@ -226,4 +226,8 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/moom.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>moom</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/张扬.png" style="width: 50px;height: 50px;" />
|
||||
<span>张扬</span>
|
||||
</span>
|
||||
</p>
|
||||
BIN
web/src/assets/avatar/张扬.png
Normal file
BIN
web/src/assets/avatar/张扬.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@ -1,5 +1,37 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.1
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue of exporting images, SVGs, and PDFs with errors when customizing node content.
|
||||
>
|
||||
> 2.Optimize the distribution of node activation events, do not distribute events when the activation node has not changed, and skip intermediate events when distributing multiple events in a short period of time.
|
||||
>
|
||||
> 3.Fix the issue where the edit box and node detach when scrolling the canvas with the mouse while the node is in editing mode.
|
||||
>
|
||||
> 4.Fix the issue of shortcut keys becoming invalid when zooming the canvas with the mouse wheel and then exiting node editing while in node editing mode.
|
||||
>
|
||||
> 5.Fix the issue where clicking on a node can also trigger node_dragend event.
|
||||
>
|
||||
> 6.Fix that clicking on the canvas and nodes while not in the format brush will also trigger the painter_end event.
|
||||
>
|
||||
> 7.Fixed the issue where the mind map text editing box was not destroyed during node text editing and associated line text editing.
|
||||
|
||||
New:
|
||||
|
||||
> 1.When holding down the Ctrl key, disable the node double-click event.
|
||||
>
|
||||
> 2.Support configuring the behavior when creating new nodes: focusing and entering editing, not focusing, only focusing.
|
||||
>
|
||||
> 3.When searching in read-only mode, add a highlight effect to the currently matched node.
|
||||
>
|
||||
> 4.The default behavior of the mouse scroll wheel is to move the canvas up and down; The default is to scroll forward to enlarge the canvas and zoom back.
|
||||
>
|
||||
> 5.When the mouse scroll wheel behavior is to move the canvas up and down, it supports holding down the Ctrl key to zoom in and out of the canvas.
|
||||
|
||||
Demo：支持配置创建新节点时的行为。
|
||||
|
||||
## 0.9.0
|
||||
|
||||
New:
|
||||
|
||||
@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.1</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue of exporting images, SVGs, and PDFs with errors when customizing node content.</p>
|
||||
<p>2.Optimize the distribution of node activation events, do not distribute events when the activation node has not changed, and skip intermediate events when distributing multiple events in a short period of time.</p>
|
||||
<p>3.Fix the issue where the edit box and node detach when scrolling the canvas with the mouse while the node is in editing mode.</p>
|
||||
<p>4.Fix the issue of shortcut keys becoming invalid when zooming the canvas with the mouse wheel and then exiting node editing while in node editing mode.</p>
|
||||
<p>5.Fix the issue where clicking on a node can also trigger node_dragend event.</p>
|
||||
<p>6.Fix that clicking on the canvas and nodes while not in the format brush will also trigger the painter_end event.</p>
|
||||
<p>7.Fixed the issue where the mind map text editing box was not destroyed during node text editing and associated line text editing.</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.When holding down the Ctrl key, disable the node double-click event.</p>
|
||||
<p>2.Support configuring the behavior when creating new nodes: focusing and entering editing, not focusing, only focusing.</p>
|
||||
<p>3.When searching in read-only mode, add a highlight effect to the currently matched node.</p>
|
||||
<p>4.The default behavior of the mouse scroll wheel is to move the canvas up and down; The default is to scroll forward to enlarge the canvas and zoom back.</p>
|
||||
<p>5.When the mouse scroll wheel behavior is to move the canvas up and down, it supports holding down the Ctrl key to zoom in and out of the canvas.</p>
|
||||
</blockquote>
|
||||
<p>Demo：支持配置创建新节点时的行为。</p>
|
||||
<h2>0.9.0</h2>
|
||||
<p>New:</p>
|
||||
<p>1.Support adding summaries to some child nodes of the same node.</p>
|
||||
|
||||
@ -43,9 +43,9 @@ const mindMap = new MindMap({
|
||||
| watermarkConfig（v0.2.4+） | Object | | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration | |
|
||||
| textAutoWrapWidth（v0.3.4+） | Number | 500 | Each line of text in the node will wrap automatically when it reaches the width | |
|
||||
| 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 | |
|
||||
| mousewheelAction（v0.4.3+） | String | zoom（v0.9.1+ default is move） | 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 | |
|
||||
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false（v0.9.1+ default is true） | When `mousewheelAction` is set to `zoom`, Or when holding down the Ctrl key, 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', fontSize: 13, strokeColor: '#333333' } | Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded) | |
|
||||
@ -103,6 +103,7 @@ const mindMap = new MindMap({
|
||||
| isDisableDrag（v0.8.1+） | Boolean | false | Is disable dragging the canvas | |
|
||||
| disableTouchZoom（v0.8.1+） | Boolean | false | Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin | |
|
||||
| highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | Highlight box style when the mouse moves into the summary to highlight the node it belongs to | |
|
||||
| createNewNodeBehavior（v0.9.1+） | String | default | Behavior when creating a new node. default（By default, newly created nodes will be activated and enter editing mode. If multiple new nodes are created simultaneously, they will only be activated and will not enter editing mode）、notActive（Do not activate newly created nodes）、activeOnly（Only activate newly created nodes and do not enter editing mode） | |
|
||||
|
||||
### Data structure
|
||||
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
<tr>
|
||||
<td>mousewheelAction（v0.4.3+）</td>
|
||||
<td>String</td>
|
||||
<td>zoom</td>
|
||||
<td>zoom（v0.9.1+ default is move）</td>
|
||||
<td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@ -178,8 +178,8 @@
|
||||
<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>false（v0.9.1+ default is true）</td>
|
||||
<td>When <code>mousewheelAction</code> is set to <code>zoom</code>, Or when holding down the Ctrl key, 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>
|
||||
@ -581,6 +581,13 @@
|
||||
<td>Highlight box style when the mouse moves into the summary to highlight the node it belongs to</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>createNewNodeBehavior（v0.9.1+）</td>
|
||||
<td>String</td>
|
||||
<td>default</td>
|
||||
<td>Behavior when creating a new node. default（By default, newly created nodes will be activated and enter editing mode. If multiple new nodes are created simultaneously, they will only be activated and will not enter editing mode）、notActive（Do not activate newly created nodes）、activeOnly（Only activate newly created nodes and do not enter editing mode）</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Data structure</h3>
|
||||
|
||||
@ -253,4 +253,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
|
||||
<img src="../../../../assets/avatar/moom.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>moom</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/张扬.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>张扬</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -8,17 +8,17 @@
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
|
||||
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">Support collaborative editing</label></li>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
|
||||
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Support collaborative editing</label></li>
|
||||
</ul>
|
||||
<h2>Repository Catalog Introduction</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@ -28,16 +28,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="checkbox43" checked="true" /><label for="checkbox43">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">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="checkbox46" checked="true" /><label for="checkbox46">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">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>
|
||||
@ -209,6 +209,10 @@ full screen, support mini map</li>
|
||||
<img src="../../../../assets/avatar/moom.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>moom</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/张扬.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>张扬</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -408,6 +408,22 @@ Remove the data of a node from its parent node's `nodeData.children` list.
|
||||
|
||||
Determine whether there is a hierarchical relationship from the given node instance list.
|
||||
|
||||
#### handleSelfCloseTags(str)
|
||||
|
||||
> v0.9.1+
|
||||
|
||||
- `str`: html string
|
||||
|
||||
Add a closed state to HTML self closing tags, `<div><img src="xxx"></div>` -> `<div><img src="xxx" /></div>`。
|
||||
|
||||
#### checkNodeListIsEqual(list1, list2)
|
||||
|
||||
> v0.9.1+
|
||||
|
||||
- `list1/list2`: Node instance list
|
||||
|
||||
Check if the two node instance lists contain the same nodes.
|
||||
|
||||
## Simulate CSS background in Canvas
|
||||
|
||||
Import:
|
||||
|
||||
@ -333,6 +333,22 @@ and copying the <code>data</code> of the data object, example:</p>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>Determine whether there is a hierarchical relationship from the given node instance list.</p>
|
||||
<h4>handleSelfCloseTags(str)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.1+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>str</code>: html string</li>
|
||||
</ul>
|
||||
<p>Add a closed state to HTML self closing tags, <code><div><img src="xxx"></div></code> -> <code><div><img src="xxx" /></div></code>。</p>
|
||||
<h4>checkNodeListIsEqual(list1, list2)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.1+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>list1/list2</code>: Node instance list</li>
|
||||
</ul>
|
||||
<p>Check if the two node instance lists contain the same nodes.</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,37 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.1
|
||||
|
||||
修复：
|
||||
|
||||
> 1.修复自定义节点内容时导出图片、svg、pdf报错的问题。
|
||||
>
|
||||
> 2.优化节点激活事件的派发，激活节点未改变时不派发事件，短时间派发多次事件时跳过中间事件。
|
||||
>
|
||||
> 3.修复节点处于编辑状态时，通过鼠标滚动移动画布后编辑框和节点脱离的问题。
|
||||
>
|
||||
> 4.修复在节点编辑状态中通过鼠标滚轮缩放画布再退出节点编辑后快捷键失效的问题。
|
||||
>
|
||||
> 5.修复点击节点也会触发node_dragend事件的问题。
|
||||
>
|
||||
> 6.修复不在格式刷时点击画布和节点也会触发painter_end事件的问题。
|
||||
>
|
||||
> 7.修复在节点文本编辑中和关联线文本编辑中时销毁思维导图文本编辑框未被销毁的问题。
|
||||
|
||||
新增：
|
||||
|
||||
> 1.按住Ctrl键时禁用节点双击事件。
|
||||
>
|
||||
> 2.支持配置创建新节点时的行为：聚焦且进入编辑、不聚焦、只聚焦。
|
||||
>
|
||||
> 3.只读模式下搜索时给当前匹配到的节点增加高亮效果。
|
||||
>
|
||||
> 4.鼠标滚轮行为默认改为上下移动画布；默认改为向前滚动放大画布，向后缩小。
|
||||
>
|
||||
> 5.在鼠标滚轮行为为上下移动画布时，支持按住Ctrl键进行放大缩小画布。
|
||||
|
||||
Demo：支持配置创建新节点时的行为。
|
||||
|
||||
## 0.9.0
|
||||
|
||||
新增：
|
||||
|
||||
@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.1</h2>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
<p>1.修复自定义节点内容时导出图片、svg、pdf报错的问题。</p>
|
||||
<p>2.优化节点激活事件的派发，激活节点未改变时不派发事件，短时间派发多次事件时跳过中间事件。</p>
|
||||
<p>3.修复节点处于编辑状态时，通过鼠标滚动移动画布后编辑框和节点脱离的问题。</p>
|
||||
<p>4.修复在节点编辑状态中通过鼠标滚轮缩放画布再退出节点编辑后快捷键失效的问题。</p>
|
||||
<p>5.修复点击节点也会触发node_dragend事件的问题。</p>
|
||||
<p>6.修复不在格式刷时点击画布和节点也会触发painter_end事件的问题。</p>
|
||||
<p>7.修复在节点文本编辑中和关联线文本编辑中时销毁思维导图文本编辑框未被销毁的问题。</p>
|
||||
</blockquote>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
<p>1.按住Ctrl键时禁用节点双击事件。</p>
|
||||
<p>2.支持配置创建新节点时的行为：聚焦且进入编辑、不聚焦、只聚焦。</p>
|
||||
<p>3.只读模式下搜索时给当前匹配到的节点增加高亮效果。</p>
|
||||
<p>4.鼠标滚轮行为默认改为上下移动画布；默认改为向前滚动放大画布，向后缩小。</p>
|
||||
<p>5.在鼠标滚轮行为为上下移动画布时，支持按住Ctrl键进行放大缩小画布。</p>
|
||||
</blockquote>
|
||||
<p>Demo：支持配置创建新节点时的行为。</p>
|
||||
<h2>0.9.0</h2>
|
||||
<p>新增：</p>
|
||||
<p>1.支持对同一个节点的部分子节点添加概要。</p>
|
||||
|
||||
@ -43,9 +43,9 @@ const mindMap = new MindMap({
|
||||
| watermarkConfig（v0.2.4+） | Object | | 水印配置，详细配置请参考下方表格【水印配置】 |
|
||||
| textAutoWrapWidth（v0.3.4+） | Number | 500 | 节点内每行文本达到该宽度后自动换行 |
|
||||
| customHandleMousewheel（v0.4.3+） | Function | null | 自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象 |
|
||||
| mousewheelAction（v0.4.3+） | String | zoom | 鼠标滚轮的行为，`zoom`（放大缩小）、`move`（上下移动）。如果`customHandleMousewheel`传了自定义函数，这个属性不生效 |
|
||||
| mousewheelAction（v0.4.3+） | String | zoom（v0.9.1+默认改为move） | 鼠标滚轮的行为，`zoom`（放大缩小）、`move`（上下移动）。如果`customHandleMousewheel`传了自定义函数，这个属性不生效 |
|
||||
| mousewheelMoveStep（v0.4.3+） | Number | 100 | 当`mousewheelAction`设为`move`时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位`px` |
|
||||
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false | 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来 |
|
||||
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false（v0.9.1+默认改为true） | 当mousewheelAction设为zoom时，或者按住Ctrl键时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来 |
|
||||
| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | 默认插入的二级节点的文字 |
|
||||
| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | 默认插入的二级以下节点的文字 |
|
||||
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | 展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式） |
|
||||
@ -103,6 +103,7 @@ const mindMap = new MindMap({
|
||||
| isDisableDrag（v0.8.1+） | Boolean | false | 是否禁止拖动画布 |
|
||||
| disableTouchZoom（v0.8.1+） | Boolean | false | 禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效 |
|
||||
| highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | 鼠标移入概要高亮所属节点时的高亮框样式 |
|
||||
| createNewNodeBehavior（v0.9.1+） | String | default | 创建新节点时的行为。default（默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式）、notActive（不激活新创建的节点）、activeOnly（只激活新创建的节点，不进入编辑模式） |
|
||||
|
||||
### 数据结构
|
||||
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
<tr>
|
||||
<td>mousewheelAction（v0.4.3+）</td>
|
||||
<td>String</td>
|
||||
<td>zoom</td>
|
||||
<td>zoom（v0.9.1+默认改为move）</td>
|
||||
<td>鼠标滚轮的行为，<code>zoom</code>（放大缩小）、<code>move</code>（上下移动）。如果<code>customHandleMousewheel</code>传了自定义函数，这个属性不生效</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -156,8 +156,8 @@
|
||||
<tr>
|
||||
<td>mousewheelZoomActionReverse（v0.6.5+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来</td>
|
||||
<td>false（v0.9.1+默认改为true）</td>
|
||||
<td>当mousewheelAction设为zoom时，或者按住Ctrl键时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
|
||||
@ -501,6 +501,12 @@
|
||||
<td>{ stroke: 'rgb(94, 200, 248)', fill: 'transparent' }</td>
|
||||
<td>鼠标移入概要高亮所属节点时的高亮框样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>createNewNodeBehavior（v0.9.1+）</td>
|
||||
<td>String</td>
|
||||
<td>default</td>
|
||||
<td>创建新节点时的行为。default（默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式）、notActive（不激活新创建的节点）、activeOnly（只激活新创建的节点，不进入编辑模式）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>数据结构</h3>
|
||||
|
||||
@ -246,4 +246,8 @@
|
||||
<img src="../../../../assets/avatar/moom.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>moom</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/张扬.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>张扬</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -203,6 +203,10 @@
|
||||
<img src="../../../../assets/avatar/moom.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>moom</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/张扬.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>张扬</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -403,6 +403,22 @@ copyNodeTree({}, node)
|
||||
|
||||
从给定的节点实例列表里判断是否存在上下级关系。
|
||||
|
||||
#### handleSelfCloseTags(str)
|
||||
|
||||
> v0.9.1+
|
||||
|
||||
- `str`：html字符串
|
||||
|
||||
给html自闭合标签添加闭合状态，`<div><img src="xxx"></div>` -> `<div><img src="xxx" /></div>`。
|
||||
|
||||
#### checkNodeListIsEqual(list1, list2)
|
||||
|
||||
> v0.9.1+
|
||||
|
||||
- `list1/list2`：节点实例列表
|
||||
|
||||
检查两个节点实例列表包含的节点是否是一样的。
|
||||
|
||||
## 在canvas中模拟css的背景属性
|
||||
|
||||
引入：
|
||||
|
||||
@ -328,6 +328,22 @@
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>从给定的节点实例列表里判断是否存在上下级关系。</p>
|
||||
<h4>handleSelfCloseTags(str)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.1+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>str</code>：html字符串</li>
|
||||
</ul>
|
||||
<p>给html自闭合标签添加闭合状态，<code><div><img src="xxx"></div></code> -> <code><div><img src="xxx" /></div></code>。</p>
|
||||
<h4>checkNodeListIsEqual(list1, list2)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.1+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>list1/list2</code>：节点实例列表</li>
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
@ -42,11 +42,11 @@ export default {
|
||||
dataList: [
|
||||
{
|
||||
icon: 'iconstar',
|
||||
value: 'Github star数量1000+'
|
||||
value: 'Github star数量2000+'
|
||||
},
|
||||
{
|
||||
icon: 'iconfork',
|
||||
value: 'Github fork数量200+'
|
||||
value: 'Github fork数量250+'
|
||||
},
|
||||
{
|
||||
icon: 'iconxiazai',
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
},
|
||||
{
|
||||
icon: 'iconteamwork',
|
||||
value: '代码贡献者12+'
|
||||
value: '代码贡献者14+'
|
||||
}
|
||||
],
|
||||
functionList: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user