Doc: update

2026-02-17 14:04:47 +08:00 · 2023-10-05 10:27:24 +08:00
parent b6440eba1a
commit 99dc443142
31 changed files with 597 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -189,4 +189,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/有希.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>
+    <span>
+        <img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
+        <span>达仁科技</span>
+    </span>
 </p>
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.7.2",
+  "version": "0.7.3",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/web/src/assets/avatar/有希.jpg
+++ b/web/src/assets/avatar/有希.jpg
--- a/web/src/assets/avatar/樊笼.jpg
+++ b/web/src/assets/avatar/樊笼.jpg
--- a/web/src/assets/avatar/达仁科技.jpg
+++ b/web/src/assets/avatar/达仁科技.jpg
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -36,6 +36,7 @@ let APIList = [
  'painter',
  'scrollbar',
  'formula',
+  'cooperate',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,11 @@
 # Changelog

+## 0.7.3
+
+New: 1.Add a Cooperate editing plugin.
+
+Demo: 1.Fix the automatic closing of the sidebar caused by the formula sidebar component.
+
 ## 0.7.2

 Fix:
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,9 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.7.3</h2>
+<p>New: 1.Add a Cooperate editing plugin.</p>
+<p>Demo: 1.Fix the automatic closing of the sidebar caused by the formula sidebar component.</p>
 <h2>0.7.2</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -94,6 +94,7 @@ const mindMap = new MindMap({
 | dragPlaceholderRectFill（v0.7.2+）     |  String |   | The filling color of the schematic rectangle for the new position when dragging nodes. If not transmitted, the default color for the connected line is used |          |
 | dragOpacityConfig（v0.7.2+）     | Object  | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 }  | The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node |          |
 | tagsColorMap（v0.7.2+）     | Object  | {}  | The color of a custom node label can be transferred to an object, where key is the label content to be assigned a color, and value is the color of the label content. If not transferred internally, a corresponding color will be generated based on the label content |         |
+| cooperateStyle（v0.7.3+）     | Object  | { avatarSize: 22, fontSize: 12 }  | The configuration of personnel avatar style during node collaboration editing, with field meanings as follows: avatar size, and if it is a text avatar, the size of the text |         |

 ### Data structure

@@ -312,6 +313,7 @@ Listen to an event. Event list:
 | 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）  |
 | view_theme_change（v0.6.12+）    | Triggered after calling the setTheme method to set the theme   | theme（theme name）  |
+| set_data（v0.7.3+）    |  Triggered when the setData method is called to dynamically set mind map data  | data（New Mind Map Data）  |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -518,6 +518,13 @@
 <td>The color of a custom node label can be transferred to an object, where key is the label content to be assigned a color, and value is the color of the label content. If not transferred internally, a corresponding color will be generated based on the label content</td>
 <td></td>
 </tr>
+<tr>
+<td>cooperateStyle（v0.7.3+）</td>
+<td>Object</td>
+<td>{ avatarSize: 22, fontSize: 12 }</td>
+<td>The configuration of personnel avatar style during node collaboration editing, with field meanings as follows: avatar size, and if it is a text avatar, the size of the text</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Data structure</h3>
@@ -921,6 +928,11 @@ poor performance and should be used sparingly.</p>
 <td>Triggered after calling the setTheme method to set the theme</td>
 <td>theme（theme name）</td>
 </tr>
+<tr>
+<td>set_data（v0.7.3+）</td>
+<td>Triggered when the setData method is called to dynamically set mind map data</td>
+<td>data（New Mind Map Data）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/en/cooperate/index.md
+++ b/web/src/pages/Doc/en/cooperate/index.md
@@ -0,0 +1,114 @@
+# Cooperate plugin beta
+
+> v0.7.3+
+
+This plugin is used to achieve collaborative editing.
+
+## Introduce
+
+This plugin implements collaborative editing through [Yjs](https://github.com/yjs/yjs). The basic principle is to convert the tree data of the mind map into flat object data, and then collaborate through shared data of type [Y.Map](https://docs.yjs.dev/api/shared-types/y.map). That is, when certain operations are performed on the canvas, the 'y.map' object will be updated, and other collaborative clients will receive the updated data, convert it back to tree structure data, and update the canvas to achieve real-time updates.
+
+To achieve collaboration, the backend is indispensable, and 'Yjs' provides some [Connection Providers](https://docs.yjs.dev/ecosystem/connection-provider). At the same time, it also provides examples of the backend, but it is only the simplest implementation. In actual projects, you should need to rewrite or improve it.
+
+You can choose the 'Provider' that suits you, and the default is [y-webrtc](https://github.com/yjs/y-webrtc).
+
+## demo
+
+If you want to try it through demo, you can do the following steps:
+
+1. Clone project and installation dependencies:
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+```
+
+2. Modify `web/src/pages/Edit/components/Edit.vue` file, To register Cooperate plugin, uncomment the line:
+
+```js
+// .usePlugin(Cooperate)// Cooperate plugin
+```
+
+3. To register a collaborative plugin, uncomment the line:
+
+```bash
+// Execute under web path
+npm run serve
+```
+
+4. Start signaling server:
+
+```bash
+// Execute under simple-mind-map path
+npm run wsServe
+```
+
+The command executes the 'simple mind map/bin/wsServer.mjs' file, which is directly copied from the [y webrtc](https://github.com/yjs/y-webrtc) repository and may not be complete. Please be cautious when using it for actual projects.
+
+5. Access the service address in two browsers:
+
+```
+http://【your ip】:8080/#/?userName=userName
+```
+
+You can set different userNames on different browsers. Then you can edit in one browser and see the automatic update in another browser.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
+MindMap.usePlugin(Cooperate)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.cooperate`.
+
+## Methods
+
+### getDoc()
+
+Obtain Yjs doc instance.
+
+### setProvider(provider, webrtcProviderConfig)
+
+- `provider`: The connection provider for Yjs can refer to the [Connection Provider](https://docs.yjs.dev/ecosystem/connection-provider), default is `null`
+
+- `webrtcProviderConfig`: the options of webrtc provider, An object needs to be passed in the following format:
+
+```js
+{ 
+    roomName: '', // Mandatory, room name
+    signalingList: [''],// Mandatory, specify signaling server
+    ...// The other config of webrtc provider
+}
+```
+
+For detailed configuration, please refer to [y-webrtc](https://github.com/yjs/y-webrtc)。
+
+Set the connection provider for Yjs. If 'provider' is not transmitted, 'y webrtc' will be used by default. You can also use other 'providers'.
+
+If the default 'y webrtc' is used, the necessary configuration needs to be passed in through the second parameter.
+
+`simple-mind-map/bin/wsServer.mjs` file provides a simple signaling server code for testing and reference.
+
+### setUserInfo(userInfo)
+
+- `userInfo`: User information. The format is as follows:
+
+```js
+{
+   id: '',     // Mandatory, user's unique ID
+   name: '',   // User name. Only one name and avatar can be transmitted. If both are transmitted, avatar will be displayed
+   avatar: '', // User profile
+   color: ''   // If there is no avatar, the first character of the name will be displayed as a circle, and the color of the text will be white. The color of the circle can be set through this field
+}
+```
+
+Set the current user's information for synchronization and display of perceptual data. If other collaborators activate a node, their avatar will be displayed above that node in your current canvas.
--- a/web/src/pages/Doc/en/cooperate/index.vue
+++ b/web/src/pages/Doc/en/cooperate/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <h1>Cooperate plugin beta</h1>
+<blockquote>
+<p>v0.7.3+</p>
+</blockquote>
+<p>This plugin is used to achieve collaborative editing.</p>
+<h2>Introduce</h2>
+<p>This plugin implements collaborative editing through <a href="https://github.com/yjs/yjs">Yjs</a>. The basic principle is to convert the tree data of the mind map into flat object data, and then collaborate through shared data of type <a href="https://docs.yjs.dev/api/shared-types/y.map">Y.Map</a>. That is, when certain operations are performed on the canvas, the 'y.map' object will be updated, and other collaborative clients will receive the updated data, convert it back to tree structure data, and update the canvas to achieve real-time updates.</p>
+<p>To achieve collaboration, the backend is indispensable, and 'Yjs' provides some <a href="https://docs.yjs.dev/ecosystem/connection-provider">Connection Providers</a>. At the same time, it also provides examples of the backend, but it is only the simplest implementation. In actual projects, you should need to rewrite or improve it.</p>
+<p>You can choose the 'Provider' that suits you, and the default is <a href="https://github.com/yjs/y-webrtc">y-webrtc</a>.</p>
+<h2>demo</h2>
+<p>If you want to try it through demo, you can do the following steps:</p>
+<ol>
+<li>Clone project and installation dependencies:</li>
+</ol>
+<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
+<span class="hljs-built_in">cd</span> mind-map
+<span class="hljs-built_in">cd</span> simple-mind-map
+npm i
+npm link
+<span class="hljs-built_in">cd</span> ..
+<span class="hljs-built_in">cd</span> web
+npm i
+npm link simple-mind-map
+</code></pre>
+<ol start="2">
+<li>Modify <code>web/src/pages/Edit/components/Edit.vue</code> file, To register Cooperate plugin, uncomment the line:</li>
+</ol>
+<pre class="hljs"><code><span class="hljs-comment">// .usePlugin(Cooperate)// Cooperate plugin</span>
+</code></pre>
+<ol start="3">
+<li>To register a collaborative plugin, uncomment the line:</li>
+</ol>
+<pre class="hljs"><code>// Execute under web path
+npm run serve
+</code></pre>
+<ol start="4">
+<li>Start signaling server:</li>
+</ol>
+<pre class="hljs"><code>// Execute under simple-mind-map path
+npm run wsServe
+</code></pre>
+<p>The command executes the 'simple mind map/bin/wsServer.mjs' file, which is directly copied from the <a href="https://github.com/yjs/y-webrtc">y webrtc</a> repository and may not be complete. Please be cautious when using it for actual projects.</p>
+<ol start="5">
+<li>Access the service address in two browsers:</li>
+</ol>
+<pre class="hljs"><code>http://【your ip】:8080/#/?userName=userName
+</code></pre>
+<p>You can set different userNames on different browsers. Then you can edit in one browser and see the automatic update in another browser.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Cooperate <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Cooperate.js&#x27;</span>
+MindMap.usePlugin(Cooperate)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.cooperate</code>.</p>
+<h2>Methods</h2>
+<h3>getDoc()</h3>
+<p>Obtain Yjs doc instance.</p>
+<h3>setProvider(provider, webrtcProviderConfig)</h3>
+<ul>
+<li>
+<p><code>provider</code>: The connection provider for Yjs can refer to the <a href="https://docs.yjs.dev/ecosystem/connection-provider">Connection Provider</a>, default is <code>null</code></p>
+</li>
+<li>
+<p><code>webrtcProviderConfig</code>: the options of webrtc provider, An object needs to be passed in the following format:</p>
+</li>
+</ul>
+<pre class="hljs"><code>{ 
+    <span class="hljs-attr">roomName</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// Mandatory, room name</span>
+    <span class="hljs-attr">signalingList</span>: [<span class="hljs-string">&#x27;&#x27;</span>],<span class="hljs-comment">// Mandatory, specify signaling server</span>
+    ...<span class="hljs-comment">// The other config of webrtc provider</span>
+}
+</code></pre>
+<p>For detailed configuration, please refer to <a href="https://github.com/yjs/y-webrtc">y-webrtc</a>。</p>
+<p>Set the connection provider for Yjs. If 'provider' is not transmitted, 'y webrtc' will be used by default. You can also use other 'providers'.</p>
+<p>If the default 'y webrtc' is used, the necessary configuration needs to be passed in through the second parameter.</p>
+<p><code>simple-mind-map/bin/wsServer.mjs</code> file provides a simple signaling server code for testing and reference.</p>
+<h3>setUserInfo(userInfo)</h3>
+<ul>
+<li><code>userInfo</code>: User information. The format is as follows:</li>
+</ul>
+<pre class="hljs"><code>{
+   <span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;&#x27;</span>,     <span class="hljs-comment">// Mandatory, user&#x27;s unique ID</span>
+   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;&#x27;</span>,   <span class="hljs-comment">// User name. Only one name and avatar can be transmitted. If both are transmitted, avatar will be displayed</span>
+   <span class="hljs-attr">avatar</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// User profile</span>
+   <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;&#x27;</span>   <span class="hljs-comment">// If there is no avatar, the first character of the name will be displayed as a circle, and the color of the text will be white. The color of the circle can be set through this field</span>
+}
+</code></pre>
+<p>Set the current user's information for synchronization and display of perceptual data. If other collaborators activate a node, their avatar will be displayed above that node in your current canvas.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -210,4 +210,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/有希.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 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>
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -168,6 +168,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/有希.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 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>
--- a/web/src/pages/Doc/en/render/index.md
+++ b/web/src/pages/Doc/en/render/index.md
@@ -15,6 +15,12 @@ Gets the root node of the node tree

 ## Methods

+### setData(data)
+
+> v0.7.3+
+
+Dynamically set mind map data.
+
 ### clearActive()

 Clears the currently active node
--- a/web/src/pages/Doc/en/render/index.vue
+++ b/web/src/pages/Doc/en/render/index.vue
@@ -9,6 +9,11 @@ accessed through <code>mindMap.renderer</code>.</p>
 <h3>root</h3>
 <p>Gets the root node of the node tree</p>
 <h2>Methods</h2>
+<h3>setData(data)</h3>
+<blockquote>
+<p>v0.7.3+</p>
+</blockquote>
+<p>Dynamically set mind map data.</p>
 <h3>clearActive()</h3>
 <p>Clears the currently active node</p>
 <h3>clearAllActive()</h3>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -351,6 +351,14 @@ Escape the incoming string, currently escaping the following three characters:

 Generate colors based on incoming content, and the same content will generate the same color.

+#### isSameObject(a, b)
+
+> v0.7.3+
+
+- `a`、`b`: Object | Array, Two objects to compare
+
+Determine whether two objects are the same, only handling objects or arrays.
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -277,6 +277,14 @@ and copying the <code>data</code> of the data object, example:</p>
 <li><code>str</code>：String.</li>
 </ul>
 <p>Generate colors based on incoming content, and the same content will generate the same color.</p>
+<h4>isSameObject(a, b)</h4>
+<blockquote>
+<p>v0.7.3+</p>
+</blockquote>
+<ul>
+<li><code>a</code>、<code>b</code>: Object | Array, Two objects to compare</li>
+</ul>
+<p>Determine whether two objects are the same, only handling objects or arrays.</p>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -57,6 +57,7 @@ export default [
      { path: 'painter', title: 'Painter插件' },
      { path: 'scrollbar', title: 'Scrollbar插件' },
      { path: 'formula', title: 'Formula插件' },
+      { path: 'cooperate', title: 'Cooperate插件' },
      { path: 'help1', title: '概要/关联线' },
      { path: 'help2', title: '客户端' },
      { path: 'help3', title: '打开预览在线文件' },
@@ -96,6 +97,7 @@ export default [
      { path: 'painter', title: 'Painter plugin' },
      { path: 'scrollbar', title: 'Scrollbar plugin' },
      { path: 'formula', title: 'Formula plugin' },
+      { path: 'cooperate', title: 'Cooperate plugin' },
      { path: 'client', title: 'Client' }
    ]
  }
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,11 @@
 # Changelog

+## 0.7.3
+
+新增：1.新增协同编辑插件。
+
+Demo：1.修复公式侧边栏组件导致的侧边栏自动关闭问题。
+
 ## 0.7.2

 修复：
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,9 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.7.3</h2>
+<p>新增：1.新增协同编辑插件。</p>
+<p>Demo：1.修复公式侧边栏组件导致的侧边栏自动关闭问题。</p>
 <h2>0.7.2</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -94,6 +94,7 @@ const mindMap = new MindMap({
 | dragPlaceholderRectFill（v0.7.2+）     |  String |   | 节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色 |
 | dragOpacityConfig（v0.7.2+）     | Object  | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 }  | 节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 |
 | tagsColorMap（v0.7.2+）     | Object  | {}  | 自定义节点标签的颜色，可传一个对象，key为要指定颜色的标签内容，value为该标签内容的颜色，如果不传内部会根据标签内容生成对应的颜色 |
+| cooperateStyle（v0.7.3+）     | Object  | { avatarSize: 22, fontSize: 12 }  | 节点协作编辑时的人员头像样式配置，字段含义分别为：头像大小、如果是文字头像，那么文字的大小 |

 ### 数据结构

@@ -307,6 +308,7 @@ mindMap.setTheme('主题名称')
 | svg_mouseleave（v0.5.1+）    | 鼠标移出svg画布时触发   | e（事件对象）  |
 | node_icon_click（v0.6.10+）    | 点击节点内的图标时触发   | this（节点实例）、item（点击的图标名称）、e（事件对象）  |
 | view_theme_change（v0.6.12+）    | 调用了setTheme方法设置主题后触发   | theme（设置的新主题名称）  |
+| set_data（v0.7.3+）    | 调用了setData方法动态设置思维导图数据时触发   | data（新的思维导图数据）  |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -447,6 +447,12 @@
 <td>{}</td>
 <td>自定义节点标签的颜色，可传一个对象，key为要指定颜色的标签内容，value为该标签内容的颜色，如果不传内部会根据标签内容生成对应的颜色</td>
 </tr>
+<tr>
+<td>cooperateStyle（v0.7.3+）</td>
+<td>Object</td>
+<td>{ avatarSize: 22, fontSize: 12 }</td>
+<td>节点协作编辑时的人员头像样式配置，字段含义分别为：头像大小、如果是文字头像，那么文字的大小</td>
+</tr>
 </tbody>
 </table>
 <h3>数据结构</h3>
@@ -843,6 +849,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>调用了setTheme方法设置主题后触发</td>
 <td>theme（设置的新主题名称）</td>
 </tr>
+<tr>
+<td>set_data（v0.7.3+）</td>
+<td>调用了setData方法动态设置思维导图数据时触发</td>
+<td>data（新的思维导图数据）</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/zh/cooperate/index.md
+++ b/web/src/pages/Doc/zh/cooperate/index.md
@@ -0,0 +1,114 @@
+# Cooperate 插件 beta
+
+> v0.7.3+
+
+该插件用于实现协同编辑。
+
+## 介绍
+
+该插件通过[Yjs](https://github.com/yjs/yjs)实现协同编辑，基本原理是将思维导图的树数据转成平级的对象数据，然后通过[Y.Map](https://docs.yjs.dev/api/shared-types/y.map)类型的共享数据进行协同，即当画布上进行了某些操作后会更新`y.map`对象，然后其他协同的客户端会接收到更新后的数据，再转换回树结构数据，更新画布即可实现实时更新。
+
+要实现协同，后端是少不了的，`Yjs`提供了一些[Connection Provider](https://docs.yjs.dev/ecosystem/connection-provider)。同时也提供了后端的示例，但只是最简单的实现，实际项目中你应该需要重写或完善。
+
+你可以选择适合自己的`Provider`，默认使用的是[y-webrtc](https://github.com/yjs/y-webrtc)。
+
+## demo
+
+如果你想通过demo来尝试一下可以通过以下步骤：
+
+1. 克隆项目及安装依赖：
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+```
+
+2. 修改`web/src/pages/Edit/components/Edit.vue`文件，注册协同插件，即取消该行注释：
+
+```js
+// .usePlugin(Cooperate)// 协同插件
+```
+
+3. 启动demo项目的本地服务：
+
+```bash
+// web路径下执行
+npm run serve
+```
+
+4. 启动信令服务器：
+
+```bash
+// simple-mind-map路径下执行
+npm run wsServe
+```
+
+该命令执行的是`simple-mind-map/bin/wsServer.mjs`文件，该文件的内容是从[y-webrtc](https://github.com/yjs/y-webrtc)仓库直接复制的，可能并不完善，请谨慎用于实际项目。
+
+5. 在两个浏览器中访问服务地址：
+
+```
+http://【你的ip】:8080/#/?userName=用户名
+```
+
+你可以在不同的浏览器上设置不同的userName。然后就可以在一个浏览器中编辑，在另一个浏览器上看到自动更新了。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
+MindMap.usePlugin(Cooperate)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.cooperate`获取到该实例。
+
+## 方法
+
+### getDoc()
+
+获取Yjs doc实例。
+
+### setProvider(provider, webrtcProviderConfig)
+
+- `provider`：Yjs的连接提供者，可参考[Connection Provider](https://docs.yjs.dev/ecosystem/connection-provider)，默认为`null`
+
+- `webrtcProviderConfig`：webrtc provider的配置参数，需要传递一个对象，格式如下：
+
+```js
+{ 
+    roomName: '', // 必传，房间名称 
+    signalingList: [''],// 必传，指定信令服务器
+    ...// webrtc provider的其他配置
+}
+```
+
+详细配置可参考[y-webrtc](https://github.com/yjs/y-webrtc)。
+
+设置Yjs的连接提供者，`provider`如果不传，那么默认会使用`y-webrtc`，你也可以使用其他的`provider`。
+
+如果使用默认的`y-webrtc`，那么需要通过第二个参数传入必要的配置。
+
+`simple-mind-map/bin/wsServer.mjs`文件提供了一个简单的信令服务器代码，可供测试和参考。
+
+### setUserInfo(userInfo)
+
+- `userInfo`：用户信息。格式如下：
+
+```js
+{
+   id: '',     // 必传，用户唯一的id
+   name: '',   // 用户名称。name和avatar两个只传一个即可，如果都传了，会显示avatar
+   avatar: '', // 用户头像
+   color: ''   // 如果没有传头像，那么会以一个圆形来显示名称的第一个字，文字的颜色为白色，圆的颜色可以通过该字段设置
+}
+```
+
+设置当前用户的信息，用于感知数据的同步和显示。即如果其他协同人员激活了某个节点时，会在你当前画布中的该节点上方显示他的头像。
--- a/web/src/pages/Doc/zh/cooperate/index.vue
+++ b/web/src/pages/Doc/zh/cooperate/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <h1>Cooperate 插件 beta</h1>
+<blockquote>
+<p>v0.7.3+</p>
+</blockquote>
+<p>该插件用于实现协同编辑。</p>
+<h2>介绍</h2>
+<p>该插件通过<a href="https://github.com/yjs/yjs">Yjs</a>实现协同编辑，基本原理是将思维导图的树数据转成平级的对象数据，然后通过<a href="https://docs.yjs.dev/api/shared-types/y.map">Y.Map</a>类型的共享数据进行协同，即当画布上进行了某些操作后会更新<code>y.map</code>对象，然后其他协同的客户端会接收到更新后的数据，再转换回树结构数据，更新画布即可实现实时更新。</p>
+<p>要实现协同，后端是少不了的，<code>Yjs</code>提供了一些<a href="https://docs.yjs.dev/ecosystem/connection-provider">Connection Provider</a>。同时也提供了后端的示例，但只是最简单的实现，实际项目中你应该需要重写或完善。</p>
+<p>你可以选择适合自己的<code>Provider</code>，默认使用的是<a href="https://github.com/yjs/y-webrtc">y-webrtc</a>。</p>
+<h2>demo</h2>
+<p>如果你想通过demo来尝试一下可以通过以下步骤：</p>
+<ol>
+<li>克隆项目及安装依赖：</li>
+</ol>
+<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
+<span class="hljs-built_in">cd</span> mind-map
+<span class="hljs-built_in">cd</span> simple-mind-map
+npm i
+npm link
+<span class="hljs-built_in">cd</span> ..
+<span class="hljs-built_in">cd</span> web
+npm i
+npm link simple-mind-map
+</code></pre>
+<ol start="2">
+<li>修改<code>web/src/pages/Edit/components/Edit.vue</code>文件，注册协同插件，即取消该行注释：</li>
+</ol>
+<pre class="hljs"><code><span class="hljs-comment">// .usePlugin(Cooperate)// 协同插件</span>
+</code></pre>
+<ol start="3">
+<li>启动demo项目的本地服务：</li>
+</ol>
+<pre class="hljs"><code>// web路径下执行
+npm run serve
+</code></pre>
+<ol start="4">
+<li>启动信令服务器：</li>
+</ol>
+<pre class="hljs"><code>// simple-mind-map路径下执行
+npm run wsServe
+</code></pre>
+<p>该命令执行的是<code>simple-mind-map/bin/wsServer.mjs</code>文件，该文件的内容是从<a href="https://github.com/yjs/y-webrtc">y-webrtc</a>仓库直接复制的，可能并不完善，请谨慎用于实际项目。</p>
+<ol start="5">
+<li>在两个浏览器中访问服务地址：</li>
+</ol>
+<pre class="hljs"><code>http://【你的ip】:8080/#/?userName=用户名
+</code></pre>
+<p>你可以在不同的浏览器上设置不同的userName。然后就可以在一个浏览器中编辑，在另一个浏览器上看到自动更新了。</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Cooperate <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Cooperate.js&#x27;</span>
+MindMap.usePlugin(Cooperate)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.cooperate</code>获取到该实例。</p>
+<h2>方法</h2>
+<h3>getDoc()</h3>
+<p>获取Yjs doc实例。</p>
+<h3>setProvider(provider, webrtcProviderConfig)</h3>
+<ul>
+<li>
+<p><code>provider</code>：Yjs的连接提供者，可参考<a href="https://docs.yjs.dev/ecosystem/connection-provider">Connection Provider</a>，默认为<code>null</code></p>
+</li>
+<li>
+<p><code>webrtcProviderConfig</code>：webrtc provider的配置参数，需要传递一个对象，格式如下：</p>
+</li>
+</ul>
+<pre class="hljs"><code>{ 
+    <span class="hljs-attr">roomName</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 必传，房间名称 </span>
+    <span class="hljs-attr">signalingList</span>: [<span class="hljs-string">&#x27;&#x27;</span>],<span class="hljs-comment">// 必传，指定信令服务器</span>
+    ...<span class="hljs-comment">// webrtc provider的其他配置</span>
+}
+</code></pre>
+<p>详细配置可参考<a href="https://github.com/yjs/y-webrtc">y-webrtc</a>。</p>
+<p>设置Yjs的连接提供者，<code>provider</code>如果不传，那么默认会使用<code>y-webrtc</code>，你也可以使用其他的<code>provider</code>。</p>
+<p>如果使用默认的<code>y-webrtc</code>，那么需要通过第二个参数传入必要的配置。</p>
+<p><code>simple-mind-map/bin/wsServer.mjs</code>文件提供了一个简单的信令服务器代码，可供测试和参考。</p>
+<h3>setUserInfo(userInfo)</h3>
+<ul>
+<li><code>userInfo</code>：用户信息。格式如下：</li>
+</ul>
+<pre class="hljs"><code>{
+   <span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;&#x27;</span>,     <span class="hljs-comment">// 必传，用户唯一的id</span>
+   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;&#x27;</span>,   <span class="hljs-comment">// 用户名称。name和avatar两个只传一个即可，如果都传了，会显示avatar</span>
+   <span class="hljs-attr">avatar</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 用户头像</span>
+   <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;&#x27;</span>   <span class="hljs-comment">// 如果没有传头像，那么会以一个圆形来显示名称的第一个字，文字的颜色为白色，圆的颜色可以通过该字段设置</span>
+}
+</code></pre>
+<p>设置当前用户的信息，用于感知数据的同步和显示。即如果其他协同人员激活了某个节点时，会在你当前画布中的该节点上方显示他的头像。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -203,4 +203,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/有希.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 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>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -162,6 +162,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/有希.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 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>
--- a/web/src/pages/Doc/zh/render/index.md
+++ b/web/src/pages/Doc/zh/render/index.md
@@ -14,6 +14,12 @@

 ## 方法

+### setData(data)
+
+> v0.7.3+
+
+动态设置思维导图数据。
+
 ### clearActive()

 清除当前激活的节点
--- a/web/src/pages/Doc/zh/render/index.vue
+++ b/web/src/pages/Doc/zh/render/index.vue
@@ -8,6 +8,11 @@
 <h3>root</h3>
 <p>获取节点树的根节点</p>
 <h2>方法</h2>
+<h3>setData(data)</h3>
+<blockquote>
+<p>v0.7.3+</p>
+</blockquote>
+<p>动态设置思维导图数据。</p>
 <h3>clearActive()</h3>
 <p>清除当前激活的节点</p>
 <h3>clearAllActive()</h3>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -346,6 +346,14 @@ copyNodeTree({}, node)
 > -> &gt;
 ```

+#### isSameObject(a, b)
+
+> v0.7.3+
+
+- `a`、`b`：Object | Array, 要进行对比的两个对象
+
+判断两个对象是否相同，只处理对象或数组。
+
 ## 在canvas中模拟css的背景属性

 引入：
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -272,6 +272,14 @@
 &lt; -&gt; &amp;lt;
 &gt; -&gt; &amp;gt;
 </code></pre>
+<h4>isSameObject(a, b)</h4>
+<blockquote>
+<p>v0.7.3+</p>
+</blockquote>
+<ul>
+<li><code>a</code>、<code>b</code>：Object | Array, 要进行对比的两个对象</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">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>