+ 逆水行舟
+ 
SR
+
+
+ 逆水行舟
+
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 00fc8d09..5794e6ac 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
- "version": "0.9.8",
+ "version": "0.9.9",
"description": "一个简单的web在线思维导图",
"authors": [
{
diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js
index 56855947..8fe5f3c7 100644
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js
@@ -92,13 +92,13 @@ function createIconNode() {
}
node.size(iconSize, iconSize)
node.on('click', e => {
- this.mindMap.emit('node_icon_click', this, item, e)
+ this.mindMap.emit('node_icon_click', this, item, e, node)
})
node.on('mouseenter', e => {
- this.mindMap.emit('node_icon_mouseenter', this, item, e)
+ this.mindMap.emit('node_icon_mouseenter', this, item, e, node)
})
node.on('mouseleave', e => {
- this.mindMap.emit('node_icon_mouseleave', this, item, e)
+ this.mindMap.emit('node_icon_mouseleave', this, item, e, node)
})
return {
node,
diff --git a/web/src/assets/avatar/逆水行舟.jpg b/web/src/assets/avatar/逆水行舟.jpg
new file mode 100644
index 00000000..e8ad08da
Binary files /dev/null and b/web/src/assets/avatar/逆水行舟.jpg differ
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index e3b24d5d..0c244d17 100644
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(25).fill(0).map((_, index) => {
+let CourseList = new Array(26).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [
@@ -38,6 +38,7 @@ let APIList = [
'scrollbar',
'formula',
'cooperate',
+ 'rainbowLines',
'handDrawnLikeStyle',
'xmind',
'markdown',
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index f7ab214f..c359db7f 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,35 @@
# Changelog
+## 0.9.9
+
+New:
+
+> 1.Support inserting child nodes with the insert key;
+>
+> 2.Add the beforeShortcutRun instantiation option to intercept shortcut key operations;
+>
+> 3.The method of incrementally updating canvas data by adding root instances, updateData;
+>
+> 4.Add a rainbow line plugin;
+>
+> 5.Add mouse in and out events to icons in nodes;
+>
+> 6.Add the getAncestorNodes method to the node instance to obtain the list of ancestor nodes;
+>
+> 7.Adding mouse events to personnel avatars during collaborative editing;
+
+Demo:
+
+> 1.Support configuration of rainbow lines;
+
+Client:
+
+> 1.Double click the file to open the application without opening the workbench page;
+>
+> 2.Fix the issue of multiple editing windows opening when repeatedly opening the same file;
+>
+> 3.Prompt for modifying and deleting files being edited;
+
## 0.9.8
Fix:
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index d1372116..954c91a3 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,27 @@
New:
+++1.Support inserting child nodes with the insert key;
+2.Add the beforeShortcutRun instantiation option to intercept shortcut key operations;
+3.The method of incrementally updating canvas data by adding root instances, updateData;
+4.Add a rainbow line plugin;
+5.Add mouse in and out events to icons in nodes;
+6.Add the getAncestorNodes method to the node instance to obtain the list of ancestor nodes;
+7.Adding mouse events to personnel avatars during collaborative editing;
+
Demo:
+++1.Support configuration of rainbow lines;
+
Client:
++1.Double click the file to open the application without opening the workbench page;
+2.Fix the issue of multiple editing windows opening when repeatedly opening the same file;
+3.Prompt for modifying and deleting files being edited;
+
Fix:
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 50ba142d..bd1c5113 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -114,6 +114,8 @@ const mindMap = new MindMap({ | isOnlySearchCurrentRenderNodes（v0.9.8+） | Boolean | false | Is it necessary to only search for the current rendered node, and nodes that have been collapsed will not be searched for | | | onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | Boolean | false | During collaborative editing, the same node cannot be selected by multiple people at the same time | | | beforeCooperateUpdate（v0.9.8+） | Function、null | null | During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 } | | +| beforeShortcutRun（v0.9.9+） | Function、null | null | The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） | +| rainbowLinesConfig（v0.9.9+） | Object | { open: false, colorsList: [] } | Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } | ### Data structure @@ -314,6 +316,12 @@ Current Theme Configuration. ## Instance methods +### updateData(data) + +> v0.9.9+ + +Update canvas data. If the new data is formed by adding, deleting, modifying, and querying based on the current canvas node data, this method can be used to update the canvas data. The performance will be better, and not all nodes will be recreated, but rather reused as much as possible. + ### clearDraw() > v0.8.0+ @@ -419,7 +427,9 @@ 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） | +| 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）、node(Icon node, v0.9.9+) | +| node_icon_mouseenter（v0.9.9+） | Triggered when the mouse moves into an icon within a node | this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node) | +| node_icon_mouseleave（v0.9.9+） | Triggered when the mouse moves out of the icon within the node | this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node) | | 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） | | resize（v0.8.0+） | Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called | | @@ -428,6 +438,9 @@ Listen to an event. Event list: | body_click | Click event of document.body | e（event object） | | data_change_detail（v0.9.3+） | The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update | arr（Detail data） | | layout_change（v0.9.4+） | Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called | layout（New layout） | +| node_cooperate_avatar_click（v0.9.9+） | Triggered when the mouse clicks on a person's avatar during collaborative editing | userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) | +| node_cooperate_avatar_mouseenter（v0.9.9+） | Triggered when the mouse moves over a person's avatar during collaborative editing | userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) | +| node_cooperate_avatar_mouseleave（v0.9.9+） | Triggered when removing personnel avatars with the mouse during collaborative editing | userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) | ### emit(event, ...args) diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index ff088cea..bfaf65f5 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -658,6 +658,20 @@During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 } + + +beforeShortcutRun（v0.9.9+） +Function、null +null +The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） ++ + rainbowLinesConfig（v0.9.9+） +Object +{ open: false, colorsList: [] } +Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } ++ Data structure
@@ -872,6 +886,11 @@ mindMap.setTheme('Theme name')themeConfig
Current Theme Configuration.
Instance methods
+updateData(data)
+++v0.9.9+
+Update canvas data. If the new data is formed by adding, deleting, modifying, and querying based on the current canvas node data, this method can be used to update the canvas data. The performance will be better, and not all nodes will be recreated, but rather reused as much as possible.
clearDraw()
v0.8.0+
@@ -1119,7 +1138,17 @@ poor performance and should be used sparingly.+ 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） +this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node, v0.9.9+) ++ +node_icon_mouseenter（v0.9.9+） +Triggered when the mouse moves into an icon within a node +this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node) ++ node_icon_mouseleave（v0.9.9+） +Triggered when the mouse moves out of the icon within the node +this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node) + view_theme_change（v0.6.12+） @@ -1161,6 +1190,21 @@ poor performance and should be used sparingly.Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called layout（New layout） + +node_cooperate_avatar_click（v0.9.9+） +Triggered when the mouse clicks on a person's avatar during collaborative editing +userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) ++ +node_cooperate_avatar_mouseenter（v0.9.9+） +Triggered when the mouse moves over a person's avatar during collaborative editing +userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) ++ node_cooperate_avatar_mouseleave（v0.9.9+） +Triggered when removing personnel avatars with the mouse during collaborative editing +userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object) +emit(event, ...args)
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md index 7b9220b1..6d8af046 100644 --- a/web/src/pages/Doc/en/introduction/index.md +++ b/web/src/pages/Doc/en/introduction/index.md @@ -339,4 +339,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
SR
+ 逆水行舟
+
SR
+
+ 逆水行舟
+Whether the node is currently being dragged
++v0.9.9+
+
Obtain a list of ancestor node instances.
v0.9.8+
diff --git a/web/src/pages/Doc/en/rainbowLines/index.md b/web/src/pages/Doc/en/rainbowLines/index.md new file mode 100644 index 00000000..c9c5d0cb --- /dev/null +++ b/web/src/pages/Doc/en/rainbowLines/index.md @@ -0,0 +1,56 @@ +# RainbowLines plugin + +> v0.9.9+ + +This plugin is used to implement rainbow lines. + +Enabling rainbow lines and custom colors can be set through the instantiation option 'rainbowLinesConfig'. + +The default color list is as follows: + +``` +[ + 'rgb(255, 213, 73)', + 'rgb(255, 136, 126)', + 'rgb(107, 225, 141)', + 'rgb(151, 171, 255)', + 'rgb(129, 220, 242)', + 'rgb(255, 163, 125)', + 'rgb(152, 132, 234)' +] +``` + +## Register + +```js +import MindMap from 'simple-mind-map' +import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js' +MindMap.usePlugin(RainbowLines) +``` + +After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.rainbowLines`. + +## Method + +### updateRainLinesConfig(config = {}) + +If you want to modify the rainbow lines after setting them through the instantiation option 'rainbowLinesConfig', you can use this method, option `config` is same with `rainbowLinesConfig`。 + +```js +{ + open: false,// Is turn on rainbow lines + colorsList: []// Customize the color list for rainbow lines. If not set, the default color list will be used +} +``` + +### getColorsList() + +Get a list of currently used rainbow line colors. + +### getNodeColor(node) + +Retrieve the rainbow line color corresponding to the specified node instance. + +### getSecondLayerAncestor(node) + +Retrieve the second level ancestor node instance of a node instance. \ No newline at end of file diff --git a/web/src/pages/Doc/en/rainbowLines/index.vue b/web/src/pages/Doc/en/rainbowLines/index.vue new file mode 100644 index 00000000..1bfe0b3a --- /dev/null +++ b/web/src/pages/Doc/en/rainbowLines/index.vue @@ -0,0 +1,52 @@ + +++ + + + + \ No newline at end of file diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js index c726acfe..74bf8993 100644 --- a/web/src/pages/Doc/routerList.js +++ b/web/src/pages/Doc/routerList.js @@ -32,6 +32,7 @@ export default [ { path: 'course23', title: '如何渲染滚动条' }, { path: 'course24', title: '如何开发一个插件' }, { path: 'course25', title: '关于概要' }, + { path: 'course26', title: '如何实现AI生成节点内容' }, { path: 'doExport', title: 'Export 插件' }, { path: 'drag', title: 'Drag插件' }, { path: 'introduction', title: '简介' }, @@ -60,6 +61,7 @@ export default [ { path: 'scrollbar', title: 'Scrollbar插件' }, { path: 'formula', title: 'Formula插件' }, { path: 'cooperate', title: 'Cooperate插件' }, + { path: 'rainbowLines', title: 'RainbowLines插件' }, { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' }, { path: 'help1', title: '概要/关联线' }, { path: 'help2', title: '客户端' }, @@ -102,6 +104,7 @@ export default [ { path: 'scrollbar', title: 'Scrollbar plugin' }, { path: 'formula', title: 'Formula plugin' }, { path: 'cooperate', title: 'Cooperate plugin' }, + { path: 'rainbowLines', title: 'RainbowLines plugin' }, { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle chargeable plugin' }, { path: 'client', title: 'Client' } ] diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index 4d6cb5c5..5438ce89 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -1,5 +1,35 @@ # Changelog +## 0.9.9 + +新增： + +> 1.支持insert键插入下级节点； +> +> 2.增加beforeShortcutRun实例化选项用于拦截快捷键操作； +> +> 3.根实例增加增量更新画布数据的方法updateData； +> +> 4.新增彩虹线条插件； +> +> 5.节点中的图标添加鼠标移入和移出事件； +> +> 6.节点实例新增getAncestorNodes方法用于获取祖先节点列表； +> +> 7.协同编辑时的人员头像增加鼠标事件； + +Demo： + +> 1.支持配置彩虹线条； + +客户端: + +> 1.双击文件打开应用时不打开工作台页面； +> +> 2.修复重复打开同一个文件会打开多个编辑窗口的问题； +> +> 3.修改删除正在编辑的文件的提示； + ## 0.9.8 修复： diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 34b1bf0c..38240597 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -1,6 +1,27 @@RainbowLines plugin
+++v0.9.9+
+This plugin is used to implement rainbow lines.
+Enabling rainbow lines and custom colors can be set through the instantiation option 'rainbowLinesConfig'.
+The default color list is as follows:
++[ + 'rgb(255, 213, 73)', + 'rgb(255, 136, 126)', + 'rgb(107, 225, 141)', + 'rgb(151, 171, 255)', + 'rgb(129, 220, 242)', + 'rgb(255, 163, 125)', + 'rgb(152, 132, 234)' +] +Register
++import MindMap from 'simple-mind-map' +import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js' +MindMap.usePlugin(RainbowLines) +After registration and instantiation of
+MindMap, the instance can be obtained throughmindMap.rainbowLines.Method
+updateRainLinesConfig(config = {})
+If you want to modify the rainbow lines after setting them through the instantiation option 'rainbowLinesConfig', you can use this method, option
+configis same withrainbowLinesConfig。+{ + open: false,// Is turn on rainbow lines + colorsList: []// Customize the color list for rainbow lines. If not set, the default color list will be used +} +getColorsList()
+Get a list of currently used rainbow line colors.
+getNodeColor(node)
+Retrieve the rainbow line color corresponding to the specified node instance.
+getSecondLayerAncestor(node)
+Retrieve the second level ancestor node instance of a node instance.
+ ++Changelog
+0.9.9
+新增：
+++1.支持insert键插入下级节点；
+2.增加beforeShortcutRun实例化选项用于拦截快捷键操作；
+3.根实例增加增量更新画布数据的方法updateData；
+4.新增彩虹线条插件；
+5.节点中的图标添加鼠标移入和移出事件；
+6.节点实例新增getAncestorNodes方法用于获取祖先节点列表；
+7.协同编辑时的人员头像增加鼠标事件；
+Demo：
+++1.支持配置彩虹线条；
+客户端:
++1.双击文件打开应用时不打开工作台页面；
+2.修复重复打开同一个文件会打开多个编辑窗口的问题；
+3.修改删除正在编辑的文件的提示；
+0.9.8
修复：
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index ebc6b3fa..8d30c8cf 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -113,6 +113,9 @@ const mindMap = new MindMap({ | isOnlySearchCurrentRenderNodes（v0.9.8+） | Boolean | false | 是否仅搜索当前渲染的节点，被收起的节点不会被搜索到 | | onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | Boolean | false | 协同编辑时，同一个节点不能同时被多人选中 | | beforeCooperateUpdate（v0.9.8+） | Function、null | null | 协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 } | +| beforeShortcutRun（v0.9.9+） | Function、null | null | 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） | +| rainbowLinesConfig（v0.9.9+） | Object | { open: false, colorsList: [] } | 彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } | + ### 数据结构 @@ -313,6 +316,12 @@ mindMap.setTheme('主题名称') ## 实例方法 +### updateData(data) + +> v0.9.9+ + +更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据。性能会更好，不会重新创建所有节点，而是会尽可能的复用。 + ### clearDraw() > v0.8.0+ @@ -415,7 +424,9 @@ 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（事件对象） | +| node_icon_click（v0.6.10+） | 点击节点内的图标时触发 | this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点，v0.9.9+) | +| node_icon_mouseenter（v0.9.9+） | 鼠标移入节点内的图标时触发 | this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点) | +| node_icon_mouseleave（v0.9.9+） | 鼠标移出节点内的图标时触发 | this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点) | | view_theme_change（v0.6.12+） | 调用了setTheme方法设置主题后触发 | theme（设置的新主题名称） | | set_data（v0.7.3+） | 调用了setData方法动态设置思维导图数据时触发 | data（新的思维导图数据） | | resize（v0.8.0+） | 容器尺寸改变后触发，实际上是当思维导图实例的`resize`方法被调用后触发 | | @@ -424,6 +435,9 @@ mindMap.setTheme('主题名称') | body_click | document.body的点击事件 | e（事件对象） | | data_change_detail（v0.9.3+） | 渲染树数据变化的明细，会返回一个数组，每一项代表一个更新点，每一项都是一个对象，存在一个`type`属性，代表明细的类型，包含`create`（创建节点）、`update`（更新节点）、`delete`（删除节点），存在一个`data`属性，代表当前更新的节点数据，如果是`update`类型，还会存在一个`oldData`属性，保存了更新前该节点的数据 | arr（明细数据） | | layout_change（v0.9.4+） | 修改结构时触发，即调用了mindMap.setLayout()方法时触发 | layout（新的结构） | +| node_cooperate_avatar_click（v0.9.9+） | 协同编辑时，鼠标点击人员头像时触发 | userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) | +| node_cooperate_avatar_mouseenter（v0.9.9+） | 协同编辑时，鼠标移入人员头像时触发 | userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) | +| node_cooperate_avatar_mouseleave（v0.9.9+） | 协同编辑时，鼠标移除人员头像时触发 | userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) | ### emit(event, ...args) diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index b5829a0d..ad4a0eaf 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -561,6 +561,18 @@null 协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 } ++ +beforeShortcutRun（v0.9.9+） +Function、null +null +快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） ++ rainbowLinesConfig（v0.9.9+） +Object +{ open: false, colorsList: [] } +彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } +数据结构
@@ -775,6 +787,11 @@ mindMap.setTheme('主题名称')themeConfig
当前主题配置。
实例方法
+updateData(data)
+++v0.9.9+
+更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据。性能会更好，不会重新创建所有节点，而是会尽可能的复用。
clearDraw()
v0.8.0+
@@ -1015,7 +1032,17 @@ mindMap.setTheme('主题名称')+ node_icon_click（v0.6.10+） 点击节点内的图标时触发 -this（节点实例）、item（点击的图标名称）、e（事件对象） +this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点，v0.9.9+) ++ +node_icon_mouseenter（v0.9.9+） +鼠标移入节点内的图标时触发 +this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点) ++ node_icon_mouseleave（v0.9.9+） +鼠标移出节点内的图标时触发 +this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点) + view_theme_change（v0.6.12+） @@ -1057,6 +1084,21 @@ mindMap.setTheme('主题名称')修改结构时触发，即调用了mindMap.setLayout()方法时触发 layout（新的结构） + +node_cooperate_avatar_click（v0.9.9+） +协同编辑时，鼠标点击人员头像时触发 +userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) ++ +node_cooperate_avatar_mouseenter（v0.9.9+） +协同编辑时，鼠标移入人员头像时触发 +userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) ++ node_cooperate_avatar_mouseleave（v0.9.9+） +协同编辑时，鼠标移除人员头像时触发 +userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象) +emit(event, ...args)
diff --git a/web/src/pages/Doc/zh/course26/index.md b/web/src/pages/Doc/zh/course26/index.md new file mode 100644 index 00000000..8735dab4 --- /dev/null +++ b/web/src/pages/Doc/zh/course26/index.md @@ -0,0 +1,255 @@ +# 如何实现AI生成节点内容 + +目前AI能力非常流行，每个应用都给自己加上了AI的能力提高竞争力，那么在使用了`simple-mind-map`的情况下如何添加AI的能力呢，本教程会详细的教你如何实现。 + +首先要说明的是本教程并不会真的实现一个可用的AI能力，只是在假设你要实现该功能的前提下来教你如何调用对应的API来实现你想要的效果。 + +其次AI返回的数据结构不尽相同，你都需要自行转换成`simple-mind-map`的结构类型。 + +## 自动生成整个思维导图 + +### 一次生成 + +通过AI生成整个思维导图并且一次直接生成，这个其实就是普通的回显功能，那么你可以在实例化时通过`data`传入生成的数据： + +```js +const mindMap = new MindMap({ + el, + data: { + data: { + text: '我是自动生成的节点' + }, + children: [ + { + data: { + text: '子节点' + }, + children: [] + } + ] + } +}) +``` + +也可以在实例化之后使用`setData`方法设置： + +```js +mindMap.setData({ + data: { + text: '我是自动生成的节点' + }, + children: [ + { + data: { + text: '子节点' + }, + children: [] + } + ] +}) +``` + +### 依次生成节点 + +如果你想像ChatGPT一样依次生成节点，那么推荐使用`updateData`方法增量更新节点数据，而不是手动获取到之前插入的节点实例，再调用命令来插入下级节点，这样会复杂很多，当然，如果你能轻松的知道当前创建到哪里了，并且下一个节点在哪个节点下创建，可以忽略。 + +> updateData方法是v0.9.9+的方法，之前的版本可以使用下面的方法： + +```js +const updateData = (data) => { + mindMap.renderer.setData(data) + mindMap.render() + mindMap.command.addHistory() +} +``` + +增量更新的前提是之前生成的节点都存在`uid`，并且不会变化，这样调用`updateData`方法渲染时会根据`uid`来复用之前的节点，只创建新的节点，达到依次生成的目的。 + +比如第一次返回的数据： + +```js +const data = { + data: { + text: '根节点', + uid: '1' + }, + children: [] +} + +mindMap.setData(data) +``` + +第二次返回的数据： + +```js +const data = { + data: { + text: '根节点', + uid: '1' + }, + children: [ + { + data: { + text: '二级节点', + uid: '2' + }, + children: [] + } + ] +} + +mindMap.updateData(data) +``` + +以此类推，这样虽然是整个数据更新，但是因为复用的原因画布呈现的是依次生成新节点的效果。 + +当生成的节点多了会有个问题，就是新生成的节点在画布外看不见了，所以我们要将新生成的节点移动到画布中心，首先可以监听`data_change_detail`事件来获取到详细的更新数据，找出其中新创建的节点数据，然后使用`findNodeByUid`方法找出对应的节点实例，最后调用`moveNodeToCenter`方法将该节点移动到画布中心即可。 + +```js +mindMap.on('data_change_detail', (list) => { + // 找出新创建节点中的最后一个 + const lastCreate = list.filter((item) => { + return item.action === 'create' + })[0] + if (lastCreate) { + const uid = lastCreate.data.data.uid + const node = mindMap.renderer.findNodeByUid(uid) + if (node) { + mindMap.renderer.moveNodeToCenter(node) + } + } +}) +``` + +当节点数据多了，可能`data_change_detail`事件触发时节点树还没渲染完毕，导致获取不到节点，解决这个问题可以通过监听`node_tree_render_end`事件： + +```js +let waitUid = '' +mindMap.on('data_change_detail', (list) => { + // ... + if (lastCreate) { + // ... + if (node) { + mindMap.renderer.moveNodeToCenter(node) + } else { + waitUid = uid + } + } +}) + +mindMap.on('node_tree_render_end', () =>{ + if (waitUid) { + waitUid = '' + const node = mindMap.renderer.findNodeByUid(waitUid) + if (node) { + mindMap.renderer.moveNodeToCenter(node) + } + } +}) +``` + +当在`data_change_detail`事件中没有获取到节点实例就将该`uid`保存起来，然后在`node_tree_render_end`事件里判断是否有保存的`uid`，是的话就获取该节点实例并移动到画布中心。 + +最后，当自动生成节点中最好禁止用户操作，否则可能会产生异常。 + +### 完整示例 + + + +## 在某个节点下自动生成新节点 + +在某个节点下自动生成新节点，如果也要依次生成，那么可以使用前面的增量更新数据的方式。如果一次生成，那么可以简单的调用插入新节点的命令即可。 + +### 一次生成下级节点 + +```js +// 插入一个子节点 +mindMap.execCommand('INSERT_CHILD_NODE', + false, + node, + { + data: { + text: '三级节点' + }, + children: [] + }, + [ + { + data: { + text: '三级节点的子节点' + }, + children: [] + } + ] +) + +// 插入多个子节点 +mindMap.execCommand('INSERT_MULTI_CHILD_NODE', node, [ + { + data: { + text: '三级节点' + }, + children: [] + }, + { + data: { + text: '三级节点' + }, + children: [] + } +]) +``` + +### 一次生成兄弟节点 + +```js +// 插入一个兄弟节点 +mindMap.execCommand('INSERT_NODE', + false, + node, + { + data: { + text: '二级节点' + }, + children: [] + }, + [ + { + data: { + text: '二级节点的子节点' + }, + children: [] + } + ] +) + +// 插入多个兄弟节点 +mindMap.execCommand('INSERT_MULTI_NODE', node, [ + { + data: { + text: '二级节点' + }, + children: [] + }, + { + data: { + text: '二级节点' + }, + children: [] + } +]) +``` + +这样新创建的节点默认会被激活但不进入编辑，如果你连激活都不想要的话，那么可以通过将实例化选项`createNewNodeBehavior`设置为`notActive`。 + +当自动生成结束后你又想恢复创建新节点时自动进入编辑状态，那么可以通过`updateConfig`方法修改`createNewNodeBehavior`： + +```js +mindMap.updateConfig({ + createNewNodeBehavior: 'default' +}) +``` + +### 完整示例 + + \ No newline at end of file diff --git a/web/src/pages/Doc/zh/course26/index.vue b/web/src/pages/Doc/zh/course26/index.vue new file mode 100644 index 00000000..b4bf73af --- /dev/null +++ b/web/src/pages/Doc/zh/course26/index.vue @@ -0,0 +1,223 @@ + +++ + + + + \ No newline at end of file diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md index 8f5cde4d..f08408a8 100644 --- a/web/src/pages/Doc/zh/introduction/index.md +++ b/web/src/pages/Doc/zh/introduction/index.md @@ -332,4 +332,8 @@如何实现AI生成节点内容
+目前AI能力非常流行，每个应用都给自己加上了AI的能力提高竞争力，那么在使用了
+simple-mind-map的情况下如何添加AI的能力呢，本教程会详细的教你如何实现。首先要说明的是本教程并不会真的实现一个可用的AI能力，只是在假设你要实现该功能的前提下来教你如何调用对应的API来实现你想要的效果。
+其次AI返回的数据结构不尽相同，你都需要自行转换成
+simple-mind-map的结构类型。自动生成整个思维导图
+一次生成
+通过AI生成整个思维导图并且一次直接生成，这个其实就是普通的回显功能，那么你可以在实例化时通过
+data传入生成的数据：+const mindMap = new MindMap({ + el, + data: { + data: { + text: '我是自动生成的节点' + }, + children: [ + { + data: { + text: '子节点' + }, + children: [] + } + ] + } +}) +也可以在实例化之后使用
+setData方法设置：+mindMap.setData({ + data: { + text: '我是自动生成的节点' + }, + children: [ + { + data: { + text: '子节点' + }, + children: [] + } + ] +}) +依次生成节点
+如果你想像ChatGPT一样依次生成节点，那么推荐使用
+updateData方法增量更新节点数据，而不是手动获取到之前插入的节点实例，再调用命令来插入下级节点，这样会复杂很多，当然，如果你能轻松的知道当前创建到哪里了，并且下一个节点在哪个节点下创建，可以忽略。++updateData方法是v0.9.9+的方法，之前的版本可以使用下面的方法：
++const updateData = (data) => { + mindMap.renderer.setData(data) + mindMap.render() + mindMap.command.addHistory() +} +增量更新的前提是之前生成的节点都存在
+uid，并且不会变化，这样调用updateData方法渲染时会根据uid来复用之前的节点，只创建新的节点，达到依次生成的目的。比如第一次返回的数据：
++const data = { + data: { + text: '根节点', + uid: '1' + }, + children: [] +} + +mindMap.setData(data) +第二次返回的数据：
++const data = { + data: { + text: '根节点', + uid: '1' + }, + children: [ + { + data: { + text: '二级节点', + uid: '2' + }, + children: [] + } + ] +} + +mindMap.updateData(data) +以此类推，这样虽然是整个数据更新，但是因为复用的原因画布呈现的是依次生成新节点的效果。
+当生成的节点多了会有个问题，就是新生成的节点在画布外看不见了，所以我们要将新生成的节点移动到画布中心，首先可以监听
+data_change_detail事件来获取到详细的更新数据，找出其中新创建的节点数据，然后使用findNodeByUid方法找出对应的节点实例，最后调用moveNodeToCenter方法将该节点移动到画布中心即可。+mindMap.on('data_change_detail', (list) => { + // 找出新创建节点中的最后一个 + const lastCreate = list.filter((item) => { + return item.action === 'create' + })[0] + if (lastCreate) { + const uid = lastCreate.data.data.uid + const node = mindMap.renderer.findNodeByUid(uid) + if (node) { + mindMap.renderer.moveNodeToCenter(node) + } + } +}) +当节点数据多了，可能
+data_change_detail事件触发时节点树还没渲染完毕，导致获取不到节点，解决这个问题可以通过监听node_tree_render_end事件：+let waitUid = '' +mindMap.on('data_change_detail', (list) => { + // ... + if (lastCreate) { + // ... + if (node) { + mindMap.renderer.moveNodeToCenter(node) + } else { + waitUid = uid + } + } +}) + +mindMap.on('node_tree_render_end', () =>{ + if (waitUid) { + waitUid = '' + const node = mindMap.renderer.findNodeByUid(waitUid) + if (node) { + mindMap.renderer.moveNodeToCenter(node) + } + } +}) +当在
+data_change_detail事件中没有获取到节点实例就将该uid保存起来，然后在node_tree_render_end事件里判断是否有保存的uid，是的话就获取该节点实例并移动到画布中心。最后，当自动生成节点中最好禁止用户操作，否则可能会产生异常。
+完整示例
+ +在某个节点下自动生成新节点
+在某个节点下自动生成新节点，如果也要依次生成，那么可以使用前面的增量更新数据的方式。如果一次生成，那么可以简单的调用插入新节点的命令即可。
+一次生成下级节点
++// 插入一个子节点 +mindMap.execCommand('INSERT_CHILD_NODE', + false, + node, + { + data: { + text: '三级节点' + }, + children: [] + }, + [ + { + data: { + text: '三级节点的子节点' + }, + children: [] + } + ] +) + +// 插入多个子节点 +mindMap.execCommand('INSERT_MULTI_CHILD_NODE', node, [ + { + data: { + text: '三级节点' + }, + children: [] + }, + { + data: { + text: '三级节点' + }, + children: [] + } +]) +一次生成兄弟节点
++// 插入一个兄弟节点 +mindMap.execCommand('INSERT_NODE', + false, + node, + { + data: { + text: '二级节点' + }, + children: [] + }, + [ + { + data: { + text: '二级节点的子节点' + }, + children: [] + } + ] +) + +// 插入多个兄弟节点 +mindMap.execCommand('INSERT_MULTI_NODE', node, [ + { + data: { + text: '二级节点' + }, + children: [] + }, + { + data: { + text: '二级节点' + }, + children: [] + } +]) +这样新创建的节点默认会被激活但不进入编辑，如果你连激活都不想要的话，那么可以通过将实例化选项
+createNewNodeBehavior设置为notActive。当自动生成结束后你又想恢复创建新节点时自动进入编辑状态，那么可以通过
+updateConfig方法修改createNewNodeBehavior：+mindMap.updateConfig({ + createNewNodeBehavior: 'default' +}) +完整示例
+ +SR
+\ No newline at end of file diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue index 7adc16a9..28d20c77 100644 --- a/web/src/pages/Doc/zh/introduction/index.vue +++ b/web/src/pages/Doc/zh/introduction/index.vue @@ -287,6 +287,10 @@逆水行舟
+SR
++diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md index a20c3f01..becf8935 100644 --- a/web/src/pages/Doc/zh/node/index.md +++ b/web/src/pages/Doc/zh/node/index.md @@ -56,6 +56,12 @@ ## 方法 +### getAncestorNodes() + +> v0.9.9+ + +获取祖先节点实例列表。 + ### highlight() > v0.9.8+ diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue index db418a48..128c9451 100644 --- a/web/src/pages/Doc/zh/node/index.vue +++ b/web/src/pages/Doc/zh/node/index.vue @@ -31,6 +31,11 @@逆水行舟
+
节点是否正在拖拽中
++v0.9.9+
+
获取祖先节点实例列表。
v0.9.8+
diff --git a/web/src/pages/Doc/zh/rainbowLines/index.md b/web/src/pages/Doc/zh/rainbowLines/index.md new file mode 100644 index 00000000..b5e0ba3c --- /dev/null +++ b/web/src/pages/Doc/zh/rainbowLines/index.md @@ -0,0 +1,56 @@ +# RainbowLines插件 + +> v0.9.9+ + +该插件用于实现彩虹线条。 + +开启彩虹线条及自定义颜色可以通过实例化选项`rainbowLinesConfig`设置。 + +默认的颜色列表如下： + +``` +[ + 'rgb(255, 213, 73)', + 'rgb(255, 136, 126)', + 'rgb(107, 225, 141)', + 'rgb(151, 171, 255)', + 'rgb(129, 220, 242)', + 'rgb(255, 163, 125)', + 'rgb(152, 132, 234)' +] +``` + +## 注册 + +```js +import MindMap from 'simple-mind-map' +import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js' +MindMap.usePlugin(RainbowLines) +``` + +注册完且实例化`MindMap`后可通过`mindMap.rainbowLines`获取到该实例。 + +## 方法 + +### updateRainLinesConfig(config = {}) + +如果你在通过实例化选项`rainbowLinesConfig`设置了彩虹线条后想修改，那么可以使用该方法，参数`config`同`rainbowLinesConfig`。 + +```js +{ + open: false,// 是否开启彩虹线条 + colorsList: []// 自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表 +} +``` + +### getColorsList() + +获取当前使用的彩虹线条颜色列表。 + +### getNodeColor(node) + +获取指定的节点实例对应的彩虹线条颜色。 + +### getSecondLayerAncestor(node) + +获取一个节点实例的第二层级的祖先节点实例。 \ No newline at end of file diff --git a/web/src/pages/Doc/zh/rainbowLines/index.vue b/web/src/pages/Doc/zh/rainbowLines/index.vue new file mode 100644 index 00000000..27f757fb --- /dev/null +++ b/web/src/pages/Doc/zh/rainbowLines/index.vue @@ -0,0 +1,52 @@ + +++ + + + + \ No newline at end of fileRainbowLines插件
+++v0.9.9+
+该插件用于实现彩虹线条。
+开启彩虹线条及自定义颜色可以通过实例化选项
+rainbowLinesConfig设置。默认的颜色列表如下：
++[ + 'rgb(255, 213, 73)', + 'rgb(255, 136, 126)', + 'rgb(107, 225, 141)', + 'rgb(151, 171, 255)', + 'rgb(129, 220, 242)', + 'rgb(255, 163, 125)', + 'rgb(152, 132, 234)' +] +注册
++import MindMap from 'simple-mind-map' +import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js' +MindMap.usePlugin(RainbowLines) +注册完且实例化
+MindMap后可通过mindMap.rainbowLines获取到该实例。方法
+updateRainLinesConfig(config = {})
+如果你在通过实例化选项
+rainbowLinesConfig设置了彩虹线条后想修改，那么可以使用该方法，参数config同rainbowLinesConfig。+{ + open: false,// 是否开启彩虹线条 + colorsList: []// 自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表 +} +getColorsList()
+获取当前使用的彩虹线条颜色列表。
+getNodeColor(node)
+获取指定的节点实例对应的彩虹线条颜色。
+getSecondLayerAncestor(node)
+获取一个节点实例的第二层级的祖先节点实例。
+ +