Doc: update

This commit is contained in:
街角小林
2024-05-27 18:24:44 +08:00
parent 459044beb9
commit db03e74f0d
12 changed files with 102 additions and 42 deletions

View File

@@ -365,4 +365,16 @@ 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/最多5个字.jpg" style="width: 50px;height: 50px;" />
<span>最多5个字</span>
</span>
<span>
<img src="./web/src/assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;" />
<span>雨馨</span>
</span>
<span>
<img src="./web/src/assets/avatar/ZX.jpg" style="width: 50px;height: 50px;" />
<span>ZX</span>
</span>
</p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@@ -120,8 +120,8 @@ const mindMap = new MindMap({
| addContentToFooterv0.9.9+ | Function、null | null | The basic definition is the same as addContentToHeader, adding custom content at the end | |
| demonstrateConfigv0.9.11+ | Object、null | null | Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below | |
| resetScaleOnMoveNodeToCenterv0.9.12+ | Boolean | false | Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operationsThe underlying impact is on the moveNodeToCenter method of the render class | |
| createNodePrefixContentv0.9.12+ | Function、null | null | Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null | |
| createNodePostfixContentv0.9.12+ | Function、null | null | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null | |
| createNodePrefixContentv0.9.12+ | Function、null | null | Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned | |
| createNodePostfixContentv0.9.12+ | Function、null | null | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent | |
### Data structure

View File

@@ -704,14 +704,14 @@
<td>createNodePrefixContentv0.9.12+</td>
<td>Function、null</td>
<td>null</td>
<td>Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null</td>
<td>Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned</td>
<td></td>
</tr>
<tr>
<td>createNodePostfixContentv0.9.12+</td>
<td>Function、null</td>
<td>null</td>
<td>Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, returns a DOM node, or returns null</td>
<td>Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent</td>
<td></td>
</tr>
</tbody>

View File

@@ -394,4 +394,16 @@ 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/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>最多5个字</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>ZX</p>
</div>
</div>

View File

@@ -8,18 +8,18 @@
</blockquote>
<h2>Features</h2>
<ul>
<li><input type="checkbox" id="checkbox252" checked="true" /><label for="checkbox252">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="checkbox253" checked="true" /><label for="checkbox253">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="checkbox254" checked="true" /><label for="checkbox254">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
<li><input type="checkbox" id="checkbox255" checked="true" /><label for="checkbox255">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
<li><input type="checkbox" id="checkbox256" checked="true" /><label for="checkbox256">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
<li><input type="checkbox" id="checkbox257" checked="true" /><label for="checkbox257">Support canvas dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox258" checked="true" /><label for="checkbox258">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
<li><input type="checkbox" id="checkbox259" checked="true" /><label for="checkbox259">Supoorts to export as </label><code>json</code><code>png</code><code>svg</code><code>pdf</code><code>markdown</code><code>xmind</code><code>txt</code>, support import from <code>json</code><code>xmind</code><code>markdown</code></li>
<li><input type="checkbox" id="checkbox260" checked="true" /><label for="checkbox260">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
<li><input type="checkbox" id="checkbox261" checked="true" /><label for="checkbox261">Provide rich configurations to meet various scenarios and usage habits</label></li>
<li><input type="checkbox" id="checkbox262" checked="true" /><label for="checkbox262">Support collaborative editing</label></li>
<li><input type="checkbox" id="checkbox263" checked="true" /><label for="checkbox263">Support demonstration mode</label></li>
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">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="checkbox18" checked="true" /><label for="checkbox18">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="checkbox19" checked="true" /><label for="checkbox19">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Support canvas dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Supoorts to export as </label><code>json</code><code>png</code><code>svg</code><code>pdf</code><code>markdown</code><code>xmind</code><code>txt</code>, support import from <code>json</code><code>xmind</code><code>markdown</code></li>
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Provide rich configurations to meet various scenarios and usage habits</label></li>
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Support collaborative editing</label></li>
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Support demonstration mode</label></li>
</ul>
<p>The official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:</p>
<blockquote>
@@ -39,16 +39,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="checkbox264" checked="true" /><label for="checkbox264">Toolbar, which supports inserting and deleting nodes, and editing node</label>
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Toolbar, which supports inserting and deleting nodes, and editing node</label>
images, icons, hyperlinks, notes, tags, and summaries</li>
<li><input type="checkbox" id="checkbox265" checked="true" /><label for="checkbox265">Sidebar, with panels for basic style settings, node style settings,</label>
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Sidebar, with panels for basic style settings, node style settings,</label>
outline, theme selection, and structure selection</li>
<li><input type="checkbox" id="checkbox266" checked="true" /><label for="checkbox266">Import and export functionality; data is saved in the browser's local</label>
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">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="checkbox267" checked="true" /><label for="checkbox267">Right-click menu, which supports operations such as expanding, collapsing,</label>
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Right-click menu, which supports operations such as expanding, collapsing,</label>
and organizing layout</li>
<li><input type="checkbox" id="checkbox268" checked="true" /><label for="checkbox268">Bottom bar, which supports node and word count statistics, switching</label>
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">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>
@@ -348,6 +348,18 @@ 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/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>最多5个字</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>ZX</p>
</div>
</div>
</div>
</template>

View File

@@ -119,8 +119,8 @@ const mindMap = new MindMap({
| addContentToFooterv0.9.9+ | Function、null | null | 基本释义同addContentToHeader在尾部添加自定义内容 |
| demonstrateConfigv0.9.11+ | Object、null | null | 演示插件Demonstrate的配置。不传则使用默认配置可传递一个对象如果只配置某个属性可以只设置该属性其他没有设置的同样会使用默认配置完整配置请参考下方【演示插件配置】小节 |
| resetScaleOnMoveNodeToCenterv0.9.12+ | Boolean | false | 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%底层影响的是render类的moveNodeToCenter方法 |
| createNodePrefixContentv0.9.12+ | Function、null | null | 添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容,不包括节点图片部分。可以传递一个函数,这个函数接收一个节点实例的参数,可以返回一个DOM节点也可以返回null |
| createNodePostfixContentv0.9.12+ | Function、null | null | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容,不包括节点图片部分。可以传递一个函数这个函数接收一个节点实例的参数可以返回一个DOM节点也可以返回null |
| createNodePrefixContentv0.9.12+ | Function、null | null | 添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容,不包括节点图片部分。可以传递一个函数,这个函数接收一个节点实例的参数,可以返回{el, width, height}格式的对象el为DOM节点对象width和height代表内容的宽高数字类型如果不需要自定义内容也可以返回null |
| createNodePostfixContentv0.9.12+ | Function、null | null | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容,不包括节点图片部分。用法同createNodePrefixContent |
### 数据结构

View File

@@ -601,13 +601,13 @@
<td>createNodePrefixContentv0.9.12+</td>
<td>Functionnull</td>
<td>null</td>
<td>添加附加的节点前置内容前置内容指和文本同一行的区域中的前置内容不包括节点图片部分可以传递一个函数这个函数接收一个节点实例的参数可以返回一个DOM节点也可以返回null</td>
<td>添加附加的节点前置内容前置内容指和文本同一行的区域中的前置内容不包括节点图片部分可以传递一个函数这个函数接收一个节点实例的参数可以返回{el, width, height}格式的对象el为DOM节点对象width和height代表内容的宽高数字类型如果不需要自定义内容也可以返回null</td>
</tr>
<tr>
<td>createNodePostfixContentv0.9.12+</td>
<td>Functionnull</td>
<td>null</td>
<td>添加附加的节点后置内容后置内容指和文本同一行的区域中的后置内容不包括节点图片部分可以传递一个函数这个函数接收一个节点实例的参数可以返回一个DOM节点也可以返回null</td>
<td>添加附加的节点后置内容后置内容指和文本同一行的区域中的后置内容不包括节点图片部分用法同createNodePrefixContent</td>
</tr>
</tbody>
</table>

View File

@@ -390,4 +390,16 @@
<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/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>最多5个字</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>ZX</p>
</div>
</div>

View File

@@ -8,18 +8,18 @@
</blockquote>
<h2>特性</h2>
<ul>
<li><input type="checkbox" id="checkbox235" checked="true" /><label for="checkbox235">插件化架构除核心功能外其他功能作为插件提供按需使用减小打包体积</label></li>
<li><input type="checkbox" id="checkbox236" checked="true" /><label for="checkbox236">支持逻辑结构图思维导图组织结构图目录组织图时间轴横向竖向鱼骨图等结构</label></li>
<li><input type="checkbox" id="checkbox237" checked="true" /><label for="checkbox237">内置多种主题允许高度自定义样式支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox238" checked="true" /><label for="checkbox238">节点内容支持文本普通文本富文本图片图标超链接备注标签概要数学公式</label></li>
<li><input type="checkbox" id="checkbox239" checked="true" /><label for="checkbox239">节点支持拖拽拖拽移动自由调整多种节点形状支持扩展节点内容支持使用 DDM 完全自定义节点内容</label></li>
<li><input type="checkbox" id="checkbox240" checked="true" /><label for="checkbox240">支持画布拖动缩放</label></li>
<li><input type="checkbox" id="checkbox241" checked="true" /><label for="checkbox241">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
<li><input type="checkbox" id="checkbox242" checked="true" /><label for="checkbox242">支持导出为</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="checkbox243" checked="true" /><label for="checkbox243">支持快捷键前进后退关联线搜索替换小地图水印滚动条手绘风格彩虹线条</label></li>
<li><input type="checkbox" id="checkbox244" checked="true" /><label for="checkbox244">提供丰富的配置满足各种场景各种使用习惯</label></li>
<li><input type="checkbox" id="checkbox245" checked="true" /><label for="checkbox245">支持协同编辑</label></li>
<li><input type="checkbox" id="checkbox246" checked="true" /><label for="checkbox246">支持演示模式</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="checkbox247" checked="true" /><label for="checkbox247">工具栏支持插入节点删除节点编辑节点图片图标超链接备注标签概要</label></li>
<li><input type="checkbox" id="checkbox248" checked="true" /><label for="checkbox248">侧边栏基础样式设置面板节点样式设置面板大纲面板主题选择面板结构选择面板</label></li>
<li><input type="checkbox" id="checkbox249" checked="true" /><label for="checkbox249">导入导出功能数据默认保存在浏览器本地存储也支持直接创建打开编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox250" checked="true" /><label for="checkbox250">右键菜单支持展开收起整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox251" checked="true" /><label for="checkbox251">底部栏支持节点数量字数统计支持切换编辑和只读模式支持放大缩小支持全屏切换支持小地图</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>
@@ -341,6 +341,18 @@
<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/最多5个字.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>最多5个字</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/ZX.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>ZX</p>
</div>
</div>
</div>
</template>