++v0.4.5+
+
This plugin is used to support the addition of associative lines.
+The plugin currently has relatively simple functions, and does not support modifying the control points of association lines or adding text to association lines.
+import MindMap from 'simple-mind-map'
+import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+
+MindMap.usePlugin(AssociativeLine)
+After registration and instantiation of MindMap, the instance can be obtained through mindMap.associativeLine.
Support for modifying the thickness and color of associated lines, divided into default and active states. The configuration is as follows:
+associativeLineWidth: The thickness of the default state of the associated line. The default value is 2
associativeLineColor: Color of the default state of associative lines. The default value is rgb(51, 51, 51)
associativeLineActiveWidth: The thickness of the active state of the associated line. The default value is 8
associativeLineActiveColor: The color of the active state of the associated line. The default value is rgba(2, 167, 240, 1)
The configuration is provided as a theme, so if you want to modify these four properties, you can modify them using the mindMap.setThemeConfig(config) method.
Currently, all connection line data, array types, and each item of the array are also an array:
+[
+ path, // Connector node
+ clickPath, // Invisible click line node
+ node, // Start node
+ toNode // Target node
+]
+The currently active connection line and array type are the same as the structure of each item in the lineList array.
Re-render all associated lines.
+Remove all associated lines.
+Create an associated line from the current active node. If there are multiple active nodes, the default is the first node.
+After calling this method, an association line will be rendered from the first active node to the current mouse real-time position. When a target node is clicked, it represents completion of creation. An association line will be rendered between the first active node and the clicked node.
+Creates an associative line starting at the specified node.
+After calling this method, an association line will be rendered from the specified node to the current mouse real-time position. When a target node is clicked, it represents completion of creation, and an association line will be rendered between the specified node and the clicked node.
+Add an associative line directly.
+Calling this method will directly create an association line from the fromNode to the toNode node.
Deletes the currently active associative line. Clicking on an associated line is considered active.
+Clears the active state of the currently active association line.
+ +New: Supports associative lines.
New: Support horizontal scrolling in response to the mouse.
RichText plugin is registered. When there is a DOM node in svg, the DOM node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently convertingsimple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework.
1.simple-mind-map
This is an online mind map built using the simple-mind-map library and based
on Vue2.x and ElementUI. Features include:
Provide document page service.
3.dist
The folder containing the packaged resources for the web folder.
4.docs
Documentation, etc.
Technical Analysis of Web Mind Map Implementation (chi)
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js index 6ec5c61b..d46c02cc 100644 --- a/web/src/pages/Doc/routerList.js +++ b/web/src/pages/Doc/routerList.js @@ -1,3 +1,3 @@ - export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}] + export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}] \ No newline at end of file diff --git a/web/src/pages/Doc/zh/associativeLine/index.md b/web/src/pages/Doc/zh/associativeLine/index.md new file mode 100644 index 00000000..c920a15c --- /dev/null +++ b/web/src/pages/Doc/zh/associativeLine/index.md @@ -0,0 +1,87 @@ +# AssociativeLine 插件 + +> v0.4.5+ + +该插件用于支持添加关联线。 + +该插件目前功能比较简陋，不支持修改关联线的控制点，不支持在关联线上添加文字。 + +## 注册 + +```js +import MindMap from 'simple-mind-map' +import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js' + +MindMap.usePlugin(AssociativeLine) +``` + +注册完且实例化`MindMap`后可通过`mindMap.associativeLine`获取到该实例。 + +## 配置 + +支持修改关联线的粗细和颜色，分为默认状态和激活状态。配置如下： + +- `associativeLineWidth`：关联线默认状态的粗细，默认值为`2` + +- `associativeLineColor`：关联线默认状态的颜色，默认值为`rgb(51, 51, 51)` + +- `associativeLineActiveWidth`：关联线激活状态的粗细，默认值为`8` + +- `associativeLineActiveColor`：关联线激活状态的颜色，默认值为`rgba(2, 167, 240, 1)` + +配置以主题的方式提供，所以如果想要修改这四个属性，可以通过`mindMap.setThemeConfig(config)`方法进行修改。 + +## 属性 + +### mindMap.associativeLine.lineList + +当前所有连接线数据，数组类型，数组的每一项也是一个数组： + +```js +[ + path, // 连接线节点 + clickPath, // 不可见的点击线节点 + node, // 起始节点 + toNode // 目标节点 +] +``` + +### mindMap.associativeLine.activeLine + +当前激活的连接线，数组类型，同`lineList`数组的每一项的结构。 + +## 方法 + +### renderAllLines() + +重新渲染所有关联线。 + +### removeAllLines() + +移除所有关联线。 + +### createLineFromActiveNode() + +从当前激活节点开始创建关联线，如果有多个激活节点，默认为第一个节点。 + +调用该方法后，会从第一个激活节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在第一个激活节点和点击节点之间渲染一条关联线。 + +### createLine(fromNode) + +从指定节点开始创建关联线。 + +调用该方法后，会从指定节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在指定节点和点击节点之间渲染一条关联线。 + +### addLine(fromNode, toNode) + +直接添加一条关联线。 + +调用该方法，会直接创建一条从`fromNode`到`toNode`节点的关联线。 + +### removeLine() + +删除当前激活的关联线。点击某条关联线则视为激活。 + +### clearActiveLine() + +清除当前激活的关联线的激活状态。 diff --git a/web/src/pages/Doc/zh/associativeLine/index.vue b/web/src/pages/Doc/zh/associativeLine/index.vue new file mode 100644 index 00000000..b40fa3c5 --- /dev/null +++ b/web/src/pages/Doc/zh/associativeLine/index.vue @@ -0,0 +1,75 @@ + +++v0.4.5+
+
该插件用于支持添加关联线。
+该插件目前功能比较简陋，不支持修改关联线的控制点，不支持在关联线上添加文字。
+import MindMap from 'simple-mind-map'
+import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+
+MindMap.usePlugin(AssociativeLine)
+注册完且实例化MindMap后可通过mindMap.associativeLine获取到该实例。
支持修改关联线的粗细和颜色，分为默认状态和激活状态。配置如下：
+associativeLineWidth：关联线默认状态的粗细，默认值为2
associativeLineColor：关联线默认状态的颜色，默认值为rgb(51, 51, 51)
associativeLineActiveWidth：关联线激活状态的粗细，默认值为8
associativeLineActiveColor：关联线激活状态的颜色，默认值为rgba(2, 167, 240, 1)
配置以主题的方式提供，所以如果想要修改这四个属性，可以通过mindMap.setThemeConfig(config)方法进行修改。
当前所有连接线数据，数组类型，数组的每一项也是一个数组：
+[
+ path, // 连接线节点
+ clickPath, // 不可见的点击线节点
+ node, // 起始节点
+ toNode // 目标节点
+]
+当前激活的连接线，数组类型，同lineList数组的每一项的结构。
重新渲染所有关联线。
+移除所有关联线。
+从当前激活节点开始创建关联线，如果有多个激活节点，默认为第一个节点。
+调用该方法后，会从第一个激活节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在第一个激活节点和点击节点之间渲染一条关联线。
+从指定节点开始创建关联线。
+调用该方法后，会从指定节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在指定节点和点击节点之间渲染一条关联线。
+直接添加一条关联线。
+调用该方法，会直接创建一条从fromNode到toNode节点的关联线。
删除当前激活的关联线。点击某条关联线则视为激活。
+清除当前激活的关联线的激活状态。
+ +新增：支持关联线。
新增：支持响应鼠标的横向滚动。
RichText插件时可用。当svg中存在DOM节点时，导出为图片时会将DOM节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点simple-mind-map是一个简单&强大的Web思维导图库，不依赖任何特定框架。
json、png、svg、pdf，支持从json、xmind导入json、png、svg、pdf，支持从json、xmind导入1.simple-mind-map
2.web
使用simple-mind-map工具库，基于vue2.x、ElementUI搭建的在线思维导图。特性：
提供文档页面服务。
3.dist
打包web后的资源文件夹。
4.docs
文档等。