After registration and instantiation of MindMap, the instance can be obtained through mindMap.associativeLine.
+
Config
+
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.
+
Props
+
mindMap.associativeLine.lineList
+
Currently, all connection line data, array types, and each item of the array are also an array:
The currently active connection line and array type are the same as the structure of each item in the lineList array.
+
Methods
+
renderAllLines()
+
Re-render all associated lines.
+
removeAllLines()
+
Remove all associated lines.
+
createLineFromActiveNode()
+
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.
+
createLine(fromNode)
+
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.
+
addLine(fromNode, toNode)
+
Add an associative line directly.
+
Calling this method will directly create an association line from the fromNode to the toNode node.
+
removeLine()
+
Deletes the currently active associative line. Clicking on an associated line is considered active.
+
clearActiveLine()
+
Clears the active state of the currently active association line.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index ce47c0c0..42236e0b 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,157 @@
# Changelog
+## 0.5.11
+
+New: Supports associative text editing.
+
+optimization: Optimizing theme configuration updates, changing configurations that do not involve node size does not trigger node recalculation.
+
+## 0.5.10
+
+New: Optimize node reuse logic using LRU caching algorithm.
+
+## 0.5.10-fix.1
+
+Fix: Fix the issue of import errors.
+
+## 0.5.10-fix.2
+
+Fix: Fixed the issue of switching themes and importing data without triggering data changes in rich text mode.
+
+New: Add three new themes.
+
+## 0.5.9
+
+Change: Unified export method format, using `FileReader` instead of `URL.createObjectURL` to convert `blob` data.
+
+## 0.5.8
+
+optimization: 1.The position setting is not triggered when the node position does not change. 2.The unfolding and folding status does not change and does not trigger button updates.
+
+New: 1.The default setting is to move the mouse over the node to display the expand and collapse buttons. 2.Support the list of icons that can be inserted into extended nodes.
+
+## 0.5.7
+
+Breaking change：In rich text mode, exporting png has been changed to using html2canvas to convert the entire svg, greatly improving the export speed. However, html2canvas has a bug where the text color inline with the dom node in the foreignObject element cannot be recognized. Therefore, the text color of the exported node is fixed. However, compared to the previously unavailable state of the export, it can at least be exported quickly and smoothly.
+
+optimization: Optimize the rich text node editing experience.
+
+New: In rich text mode, importing data, initializing data, and switching theme scene node styles support following theme changes.
+
+## 0.5.6
+
+Fix: 1.Fix the issue of node position disorder during fast and multiple renderings in a short period of time. 2.Fix the issue of dragging the canvas while the node is being edited, causing the edit box and node to separate.
+
+New: 1.Add a maximum history limit.
+
+## 0.5.5-fix.1
+
+Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.
+
+optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.
+
+## 0.5.5-fix.2
+
+Fix: 1.Fix mini map error.
+
+## 0.5.5
+
+New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.
+
+## 0.5.4
+
+New: 1.Add new themes. 2.Added timeline and fishbone structure.
+
+Fix: 1.Fix the conflict issue between node right-click and canvas right-click. 2.Fix the bug that the line segment is not hidden when dragging nodes such as organizational chart and directory organization chart.
+
+optimization: 1.Optimize the layout of organizational chart. 2.Optimize the layout of the directory organization chart.
+
+## 0.5.4-fix.1
+
+optimization: 1.Optimize fishbone layout.
+
+## 0.5.3
+
+Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.
+
+New: 1.Support setting the position of the initial central node.
+
+### 0.5.3-fix.1
+
+Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.
+
+### 0.5.3-fix.2
+
+Fix: 1.Fix the issue of not displaying images in nodes when exporting as images.
+
+## 0.5.2
+
+Fix: 1.Remove `uid` from exported `JSON` data; 2.Clear the node cache pool when re rendering.
+
+## 0.5.1
+
+optimization: 1.Only respond to shortcut key events when the mouse is inside the canvas
+
+Fix: 1.Fix the issue of incorrect node position during fast operation
+
+## 0.5.0
+
+This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.
+
+New: 1.Support custom expansion and collapse node icons and colors;
+
+optimization: 1.Optimize rendering logic, set the theme, move forward and backward, and other operations no longer require full rendering;
+
+ 2.Optimize node drag logic, and fix the problem of being unable to drag between two nodes;
+
+ 3.Collapse all nodes adds logic to return to the center point;
+
+ 4.Fix the problem of nodes flying and scrambling caused by triggering rendering multiple times in a short time;
+
+ 5.Optimize the experience of node editing;
+
+Fix: 1.Fix the issue where the setData method does not trigger history;
+
+modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:
+
+```js
+[
+ 'fillColor',
+ 'borderColor',
+ 'borderWidth',
+ 'borderDasharray',
+ 'borderRadius'
+]
+```
+
+## 0.4.7
+
+optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white. 3.Node activation state switching no longer triggers history. 4.Triggering history multiple times in a short time will only add the last data. 5.Optimize the addition of historical records. When there is a rollback, delete the historical data after the current pointer when adding a new record again.
+
+New: 1.Support for importing and exporting Markdown format files. 2.Support for configuring initial text when inserting nodes. 3.Expand the commands for inserting and deleting nodes to support specifying nodes.
+
+## 0.4.6
+
+New: 1.Associated lines support adjusting control points.
+
+optimization: 1.When adding historical data, filter data that has not changed compared to the previous time.
+
+Fix: 1.Fixed a conflict between the direction keys and the navigation function of the direction keys during node editing. 2.Fixed the issue of node id loss when dragging a mobile node, which can cause associated lines to be lost.
+
+## 0.4.5
+
+New: 1.Supports associative lines. 2.You can also drag the canvas by holding down the root node. 3. Hold down the ctrl key to adjust multiple selected nodes.
+
+## 0.4.4
+
+New: Support horizontal scrolling in response to the mouse.
+
+## 0.4.3
+
+Fix: No trigger after forward and backward `data_ Change` event.
+
+New: Support user-defined mouse wheel events; The mouse wheel is adjusted to support zooming and moving the view up and down.
+
## 0.4.2
New: The `setText` method of the Node class adds a second parameter to support setting rich text content.
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index 23f48957..6ae87866 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,89 @@
Changelog
+
0.5.11
+
New: Supports associative text editing.
+
optimization: Optimizing theme configuration updates, changing configurations that do not involve node size does not trigger node recalculation.
+
0.5.10
+
New: Optimize node reuse logic using LRU caching algorithm.
+
0.5.10-fix.1
+
Fix: Fix the issue of import errors.
+
0.5.10-fix.2
+
Fix: Fixed the issue of switching themes and importing data without triggering data changes in rich text mode.
+
New: Add three new themes.
+
0.5.9
+
Change: Unified export method format, using FileReader instead of URL.createObjectURL to convert blob data.
+
0.5.8
+
optimization: 1.The position setting is not triggered when the node position does not change. 2.The unfolding and folding status does not change and does not trigger button updates.
+
New: 1.The default setting is to move the mouse over the node to display the expand and collapse buttons. 2.Support the list of icons that can be inserted into extended nodes.
+
0.5.7
+
Breaking change：In rich text mode, exporting png has been changed to using html2canvas to convert the entire svg, greatly improving the export speed. However, html2canvas has a bug where the text color inline with the dom node in the foreignObject element cannot be recognized. Therefore, the text color of the exported node is fixed. However, compared to the previously unavailable state of the export, it can at least be exported quickly and smoothly.
+
optimization: Optimize the rich text node editing experience.
+
New: In rich text mode, importing data, initializing data, and switching theme scene node styles support following theme changes.
+
0.5.6
+
Fix: 1.Fix the issue of node position disorder during fast and multiple renderings in a short period of time. 2.Fix the issue of dragging the canvas while the node is being edited, causing the edit box and node to separate.
+
New: 1.Add a maximum history limit.
+
0.5.5-fix.1
+
Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.
+
optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.
+
0.5.5-fix.2
+
Fix: 1.Fix mini map error.
+
0.5.5
+
New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.
+
0.5.4
+
New: 1.Add new themes. 2.Added timeline and fishbone structure.
+
Fix: 1.Fix the conflict issue between node right-click and canvas right-click. 2.Fix the bug that the line segment is not hidden when dragging nodes such as organizational chart and directory organization chart.
+
optimization: 1.Optimize the layout of organizational chart. 2.Optimize the layout of the directory organization chart.
+
0.5.4-fix.1
+
optimization: 1.Optimize fishbone layout.
+
0.5.3
+
Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.
+
New: 1.Support setting the position of the initial central node.
+
0.5.3-fix.1
+
Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.
+
0.5.3-fix.2
+
Fix: 1.Fix the issue of not displaying images in nodes when exporting as images.
+
0.5.2
+
Fix: 1.Remove uid from exported JSON data; 2.Clear the node cache pool when re rendering.
+
0.5.1
+
optimization: 1.Only respond to shortcut key events when the mouse is inside the canvas
+
Fix: 1.Fix the issue of incorrect node position during fast operation
+
0.5.0
+
This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.
+
New: 1.Support custom expansion and collapse node icons and colors;
+
optimization: 1.Optimize rendering logic, set the theme, move forward and backward, and other operations no longer require full rendering;
+
2.Optimize node drag logic, and fix the problem of being unable to drag between two nodes;
+
+ 3.Collapse all nodes adds logic to return to the center point;
+
+ 4.Fix the problem of nodes flying and scrambling caused by triggering rendering multiple times in a short time;
+
+ 5.Optimize the experience of node editing;
+
+
Fix: 1.Fix the issue where the setData method does not trigger history;
+
modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:
optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white. 3.Node activation state switching no longer triggers history. 4.Triggering history multiple times in a short time will only add the last data. 5.Optimize the addition of historical records. When there is a rollback, delete the historical data after the current pointer when adding a new record again.
+
New: 1.Support for importing and exporting Markdown format files. 2.Support for configuring initial text when inserting nodes. 3.Expand the commands for inserting and deleting nodes to support specifying nodes.
+
0.4.6
+
New: 1.Associated lines support adjusting control points.
+
optimization: 1.When adding historical data, filter data that has not changed compared to the previous time.
+
Fix: 1.Fixed a conflict between the direction keys and the navigation function of the direction keys during node editing. 2.Fixed the issue of node id loss when dragging a mobile node, which can cause associated lines to be lost.
+
0.4.5
+
New: 1.Supports associative lines. 2.You can also drag the canvas by holding down the root node. 3. Hold down the ctrl key to adjust multiple selected nodes.
+
0.4.4
+
New: Support horizontal scrolling in response to the mouse.
+
0.4.3
+
Fix: No trigger after forward and backward data_ Change event.
+
New: Support user-defined mouse wheel events; The mouse wheel is adjusted to support zooming and moving the view up and down.
0.4.2
New: The setText method of the Node class adds a second parameter to support setting rich text content.
0.4.1
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index 60621e58..8d4da242 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -26,8 +26,9 @@ const mindMap = new MindMap({
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
| el | Element | | Container element, must be a DOM element | Yes |
| data | Object | {} | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js | |
-| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) | |
-| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple | |
+| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） | |
+| fishboneDeg（v0.5.4+） | Number | 45 | Set the diagonal angle of the fishbone structure diagram | |
+| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+) | |
| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js | |
| scaleRatio | Number | 0.1 | The incremental scaling ratio | |
| maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | |
@@ -41,6 +42,26 @@ const mindMap = new MindMap({
| enableFreeDrag（v0.2.4+） | Boolean | false | Enable node free drag | |
| watermarkConfig（v0.2.4+） | Object | | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration | |
| textAutoWrapWidth（v0.3.4+） | Number | 500 | Each line of text in the node will wrap automatically when it reaches the width | |
+| customHandleMousewheel（v0.4.3+） | Function | null | User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object | |
+| mousewheelAction（v0.4.3+） | String | zoom | The behavior of the mouse wheel, `zoom`(Zoom in and out)、`move`(Move up and down). If `customHandleMousewheel` passes a custom function, this property will not take effect | |
+| mousewheelMoveStep（v0.4.3+） | Number | 100 | When the `mousewheelAction` is set to `move`, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is `px` | |
+| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | Text of the default inserted secondary node | |
+| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | Text for nodes below the second level inserted by default | |
+| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff' } | Expand the color of the stow button | |
+| expandBtnIcon（v0.5.0+） | Object | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon | |
+| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | Boolean | true | Only respond to shortcut key events when the mouse is inside the canvas | |
+| enableNodeTransitionMove（v0.5.1+） | Boolean | true | Whether to enable node animation transition | |
+| nodeTransitionMoveDuration（v0.5.1+） | Number | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds | |
+| initRootNodePosition（v0.5.3+） | Array | null | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height | |
+| exportPaddingX（v0.5.5+） | Number | 10 | Horizontal padding of graphics when exporting PNG, SVG, and PDF | |
+| exportPaddingY（v0.5.5+） | Number | 10 | Vertical padding of graphics when exporting PNG, SVG, and PDF | |
+| nodeTextEditZIndex（v0.5.5+） | Number | 3000 | | z-index of node text edit box elements |
+| nodeNoteTooltipZIndex（v0.5.5+） | Number | 3000 | z-index of floating layer elements in node comments | |
+| isEndNodeTextEditOnClickOuter（v0.5.5+） | Boolean | true | Whether to end the editing status of node text when clicking on an area outside the canvas | |
+| maxHistoryCount（v0.5.6+） | Number | 1000 | | Maximum number of history records |
+| alwaysShowExpandBtn（v0.5.8+） | Boolean | false | Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default | |
+| iconList（v0.5.8+） | Array | [] | The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the "Icon Configuration" table below for the detailed structure of the object | |
+| maxNodeCacheCount（v0.5.10+） | Number | 1000 | The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool | |
### Watermark config
@@ -52,6 +73,14 @@ const mindMap = new MindMap({
| angle | Number | 30 | Tilt angle of watermark, range: [0, 90] |
| textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | Watermark text style |
+### Icon Configuration
+
+| Field Name | Type | Default Value | Description |
+| ----------- | ------ | ------------------------------------------- | ------------------------------------------------------------ |
+| name | String | | The name of the icon group |
+| type | String | | Values for icon grouping |
+| list | Array | | A list of icons under grouping, with each item in the array being an object, `{ name: '', icon: '' }`，`name`represents the name of the icon, `icon`represents the icon, Can be an `svg` icon, such as ``, also can be a image `url`, or `base64` icon, such as `data:image/png;base64,...` |
+
## Static methods
### defineTheme(name, config)
@@ -111,10 +140,14 @@ List of all currently registered plugins.
## Instance methods
-### getSvgData()
+### getSvgData({ paddingX = 0, paddingY = 0 })
> v0.3.0+
+`paddingX`: Padding x
+
+`paddingY`: Padding y
+
Get the `svg` data and return an object. The detailed structure is as follows:
```js
@@ -190,6 +223,11 @@ Listen to an event. Event list:
| node_tree_render_end（v0.2.16+） | Node tree render end event | |
| rich_text_selection_change（v0.4.0+） | Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited | hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area） |
| transforming-dom-to-images（v0.4.0+） | Available when the `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 converting | index（Index of the node currently converted to）、len（Total number of nodes to be converted） |
+| node_dragging（v0.4.5+） | Triggered when a node is dragged | node(The currently dragged node) |
+| node_dragend（v0.4.5+） | Triggered when the node is dragged and ends | |
+| 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） |
### emit(event, ...args)
@@ -263,11 +301,11 @@ redo. All commands are as follows:
| SELECT_ALL | Select all | |
| BACK | Go back a specified number of steps | step (the number of steps to go back, default is 1) |
| FORWARD | Go forward a specified number of steps | step (the number of steps to go forward, default is 1) |
-| INSERT_NODE | Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective | |
-| INSERT_CHILD_NODE | Insert a child node, the active node will be the operation node | |
+| INSERT_NODE | Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) ） |
+| INSERT_CHILD_NODE | Insert a child node, the active node or appoint node will be the operation node | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) ） |
| UP_NODE | Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid | |
| DOWN_NODE | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid | |
-| REMOVE_NODE | Remove node, the active node will be the operation node | |
+| REMOVE_NODE | Remove node, the active node or appoint node will be the operation node | appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array） |
| PASTE_NODE | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
| SET_NODE_STYLE | Modify node style | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
| SET_NODE_ACTIVE | Set whether the node is active | node (the node to set), active (boolean, whether to activate) |
@@ -332,6 +370,18 @@ smm (essentially also json)
`fileName`: (v0.1.6+) the name of the exported file, default is `思维导图` (mind
map).
+If it is exported as `png`, the fourth parameter can be passed:
+
+`transparent`: v0.5.7+, `Boolean`, default is `false`, Specify whether the background of the exported image is transparent
+
+If it is exported as `svg`, the fourth parameter can be passed:
+
+`plusCssText`: Additional `CSS` style. If there is a `dom` node in `svg`, you can pass in some styles specific to the node through this parameter
+
+If it is exported as `json` or `smm`, the fourth parameter can be passed:
+
+`withConfig`: `Boolean`, default is `true`, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported
+
### toPos(x, y)
> v0.1.5+
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 14df481d..2edbc9f4 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -46,14 +46,21 @@
Each line of text in the node will wrap automatically when it reaches the width
+
+
customHandleMousewheel（v0.4.3+）
+
Function
+
null
+
User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object
+
+
+
+
mousewheelAction（v0.4.3+）
+
String
+
zoom
+
The behavior of the mouse wheel, zoom(Zoom in and out)、move(Move up and down). If customHandleMousewheel passes a custom function, this property will not take effect
+
+
+
+
mousewheelMoveStep（v0.4.3+）
+
Number
+
100
+
When the mousewheelAction is set to move, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is px
+
+
+
+
defaultInsertSecondLevelNodeText（v0.4.7+）
+
String
+
二级节点
+
Text of the default inserted secondary node
+
+
+
+
defaultInsertBelowSecondLevelNodeText（v0.4.7+）
+
String
+
分支主题
+
Text for nodes below the second level inserted by default
+
+
+
+
expandBtnStyle（v0.5.0+）
+
Object
+
{ color: '#808080', fill: '#fff' }
+
Expand the color of the stow button
+
+
+
+
expandBtnIcon（v0.5.0+）
+
Object
+
{ open: '', close: '' }
+
Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon
+
+
+
+
enableShortcutOnlyWhenMouseInSvg（v0.5.1+）
+
Boolean
+
true
+
Only respond to shortcut key events when the mouse is inside the canvas
+
+
+
+
enableNodeTransitionMove（v0.5.1+）
+
Boolean
+
true
+
Whether to enable node animation transition
+
+
+
+
nodeTransitionMoveDuration（v0.5.1+）
+
Number
+
300
+
If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds
+
+
+
+
initRootNodePosition（v0.5.3+）
+
Array
+
null
+
The position of the initial root node can be passed as an array, default is ['center', 'center'], Represents the root node at the center of the canvas, In addition to center, keywords can also be set to left, top, right, and bottom, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as ['40%', '60%'], Represents a horizontal position at 40% of the canvas width, and a vertical position at 60% of the canvas height
+
+
+
+
exportPaddingX（v0.5.5+）
+
Number
+
10
+
Horizontal padding of graphics when exporting PNG, SVG, and PDF
+
+
+
+
exportPaddingY（v0.5.5+）
+
Number
+
10
+
Vertical padding of graphics when exporting PNG, SVG, and PDF
+
+
+
+
nodeTextEditZIndex（v0.5.5+）
+
Number
+
3000
+
+
z-index of node text edit box elements
+
+
+
nodeNoteTooltipZIndex（v0.5.5+）
+
Number
+
3000
+
z-index of floating layer elements in node comments
+
+
+
+
isEndNodeTextEditOnClickOuter（v0.5.5+）
+
Boolean
+
true
+
Whether to end the editing status of node text when clicking on an area outside the canvas
+
+
+
+
maxHistoryCount（v0.5.6+）
+
Number
+
1000
+
+
Maximum number of history records
+
+
+
alwaysShowExpandBtn（v0.5.8+）
+
Boolean
+
false
+
Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default
+
+
+
+
iconList（v0.5.8+）
+
Array
+
[]
+
The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the "Icon Configuration" table below for the detailed structure of the object
+
+
+
+
maxNodeCacheCount（v0.5.10+）
+
Number
+
1000
+
The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool
+
+
Watermark config
@@ -192,6 +339,37 @@
+
Icon Configuration
+
+
+
+
Field Name
+
Type
+
Default Value
+
Description
+
+
+
+
+
name
+
String
+
+
The name of the icon group
+
+
+
type
+
String
+
+
Values for icon grouping
+
+
+
list
+
Array
+
+
A list of icons under grouping, with each item in the array being an object, { name: '', icon: '' }，namerepresents the name of the icon, iconrepresents the icon, Can be an svg icon, such as <svg ...><path></path></svg>, also can be a image url, or base64 icon, such as data:image/png;base64,...
Get the svg data and return an object. The detailed structure is as follows:
{
svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
@@ -426,6 +606,31 @@ poor performance and should be used sparingly.
Available when the 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 converting
index（Index of the node currently converted to）、len（Total number of nodes to be converted）
+
+
node_dragging（v0.4.5+）
+
Triggered when a node is dragged
+
node(The currently dragged node)
+
+
+
node_dragend（v0.4.5+）
+
Triggered when the node is dragged and ends
+
+
+
+
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）
+
emit(event, ...args)
@@ -494,13 +699,13 @@ redo. All commands are as follows:
INSERT_NODE
-
Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective
-
+
Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective
+
openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is true） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js ）
INSERT_CHILD_NODE
-
Insert a child node, the active node will be the operation node
-
+
Insert a child node, the active node or appoint node will be the operation node
+
openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is true）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js ）
UP_NODE
@@ -514,8 +719,8 @@ redo. All commands are as follows:
REMOVE_NODE
-
Remove node, the active node will be the operation node
-
+
Remove node, the active node or appoint node will be the operation node
+
appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）
PASTE_NODE
@@ -663,6 +868,12 @@ smm (essentially also json)
false
fileName: (v0.1.6+) the name of the exported file, default is 思维导图 (mind
map).
+
If it is exported as png, the fourth parameter can be passed:
+
transparent: v0.5.7+, Boolean, default is false, Specify whether the background of the exported image is transparent
+
If it is exported as svg, the fourth parameter can be passed:
+
plusCssText: Additional CSS style. If there is a dom node in svg, you can pass in some styles specific to the node through this parameter
+
If it is exported as json or smm, the fourth parameter can be passed:
+
withConfig: Boolean, default is true, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported
toPos(x, y)
v0.1.5+
diff --git a/web/src/pages/Doc/en/deploy/index.md b/web/src/pages/Doc/en/deploy/index.md
new file mode 100644
index 00000000..4a8d593f
--- /dev/null
+++ b/web/src/pages/Doc/en/deploy/index.md
@@ -0,0 +1 @@
+# Deploy
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md
index c7bd5fec..a1226829 100644
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -15,17 +15,40 @@ After registration and instantiation of `MindMap`, the instance can be obtained
## Methods
-### png()
+All exported methods are asynchronous and return an instance of `Promise`. You can use the `then` method to obtain data, or use the `async await` function to obtain:
-Exports as `png`, an async method that returns image data, `data:url` data which
-can be downloaded or displayed.
+```js
+mindMap.doExport.png().then((data) => {
+ // ...
+})
-### svg(name, domToImage = false, plusCssText)
+const export = async () => {
+ let data = await mindMap.doExport.png()
+ // ...
+}
+```
+
+The returned data is in the format of `data:URL`. You can create an `a` tag to trigger the download:
+
+```js
+let a = document.createElement('a')
+a.href = 'xxx.png'// .png、.svg、.pdf、.md、.json、.smm
+a.download = 'xxx'
+a.click()
+```
+
+### png(name, transparent = false)
+
+- `name`: Name, optional
+
+- `transparent`: v0.5.7+, Specify whether the background of the exported image is transparent
+
+Exports as `png`.
+
+### svg(name, plusCssText)
- `name`：`svg` title
-- `domToImage`：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the `dom` node in the `svg` into a picture
-
- `plusCssText`：v0.4.0+, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as:
```js
@@ -40,22 +63,7 @@ svg(
)
```
-Exports as `svg`, an async method that returns `svg` data, `data:url` data which
-can be downloaded or displayed.
-
-### getSvgData(domToImage)
-
-- `domToImage`：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the `DOM` node embedded in `svg` into a picture.
-
-Gets `svg` data, an async method that returns an object:
-
-```js
-{
- node; // svg object
- str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
- nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
-}
-```
+Exports as `svg`.
### pdf(name)
@@ -63,7 +71,7 @@ Gets `svg` data, an async method that returns an object:
`name`：File name
-Export as `pdf`
+Export as `pdf`. Unlike other export methods, this method does not return data and directly triggers the download.
### json(name, withConfig)
@@ -71,4 +79,21 @@ Export as `pdf`
`withConfig``：Boolean`, default `true`, Whether the data contains configuration, otherwise it is pure mind map node data
-Return `json` data, `data:url` type, you can download it yourself
\ No newline at end of file
+Return `json` data.
+
+### md()
+
+> v0.4.7+
+
+Export as `markdown` file.
+
+### getSvgData()
+
+Gets `svg` data, an async method that returns an object:
+
+```js
+{
+ node // svg node
+ str // svg string
+}
+```
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/doExport/index.vue b/web/src/pages/Doc/en/doExport/index.vue
index 708023ea..785e0525 100644
--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -10,18 +10,38 @@ MindMap.usePlugin(Export)
After registration and instantiation of MindMap, the instance can be obtained through mindMap.doExport.
Methods
-
png()
-
Exports as png, an async method that returns image data, data:url data which
-can be downloaded or displayed.
-
svg(name, domToImage = false, plusCssText)
+
All exported methods are asynchronous and return an instance of Promise. You can use the then method to obtain data, or use the async await function to obtain:
The returned data is in the format of data:URL. You can create an a tag to trigger the download:
+
let a = document.createElement('a')
+a.href = 'xxx.png'// .png、.svg、.pdf、.md、.json、.smm
+a.download = 'xxx'
+a.click()
+
+
png(name, transparent = false)
+
+
+
name: Name, optional
+
+
+
transparent: v0.5.7+, Specify whether the background of the exported image is transparent
+
+
+
Exports as png.
+
svg(name, plusCssText)
name：svg title
-
domToImage：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the dom node in the svg into a picture
-
-
plusCssText：v0.4.0+, When node rich text editing is enabled and domToImage passes false, additional css styles can be added. If there is a dom node in svg, you can set some styles for the node through this parameter, such as:
@@ -35,29 +55,29 @@ can be downloaded or displayed.
}`
)
-
Exports as svg, an async method that returns svg data, data:url data which
-can be downloaded or displayed.
-
getSvgData(domToImage)
-
-
domToImage：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the DOM node embedded in svg into a picture.
-
-
Gets svg data, an async method that returns an object:
-
{
- node; // svg object
- str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
- nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
-}
-
+
Exports as svg.
pdf(name)
v0.2.1+
name：File name
-
Export as pdf
+
Export as pdf. Unlike other export methods, this method does not return data and directly triggers the download.
json(name, withConfig)
name：It is temporarily useless, just pass an empty string
withConfig``：Boolean, default true, Whether the data contains configuration, otherwise it is pure mind map node data
-
Return json data, data:url type, you can download it yourself
+
Return json data.
+
md()
+
+
v0.4.7+
+
+
Export as markdown file.
+
getSvgData()
+
Gets svg data, an async method that returns an object:
+
{
+ node // svg node
+ str // svg string
+}
+
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md
index 8417e610..672fa1be 100644
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -1,12 +1,14 @@
# Introduction
-`simple-mind-map` is a simple and powerful web mind map library, not dependent on any specific framework.
+`simple-mind-map` is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.
+
+> If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.
## Features
- [x] Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume
-- [x] Supports four types of structures: logical structure diagrams, mind maps,
- organizational structure diagrams, and directory organization diagrams
+- [x] Supports six types of structures: logical structure diagrams, mind maps,
+ organizational structure diagrams, directory organization diagrams, timeline, and fishbone diagrams
- [x] Built-in multiple themes and allows for highly customized styles, and support register new themes
- [x] Supports shortcuts
- [x] Node content supports images, icons, hyperlinks, notes, tags, and
@@ -16,14 +18,15 @@
- [x] Supports right-click and Ctrl + left-click to select multiple items
- [x] Supports free dragging and dragging to adjust nodes
- [x] Supports various node shapes
-- [x] Supports export to json, png, svg, pdf, and import from json, xmind
+- [x] Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown
- [x] Supports mini map、support watermark
+- [x] Supports associative lines
-## Table of Contents
+## Repository Catalog Introduction
1.`simple-mind-map`
-This is a mind map tool library that is framework-agnostic and can be used with
+This is a mind map library that is framework-agnostic and can be used with
frameworks such as Vue and React, or without a framework.
2.`web`
@@ -50,10 +53,6 @@ Provide document page service.
The folder containing the packaged resources for the `web` folder.
-4.`docs`
-
-Documentation, etc.
-
## Related Articles
[Technical Analysis of Web Mind Map Implementation (chi)](https://juejin.cn/post/6987711560521089061)
@@ -66,9 +65,11 @@ Documentation, etc.
## Special Note
-This project is rough and has not been thoroughly tested, its features are not
-yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
-learning and reference purposes and please use it carefully for actual projects.
+This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.
+
+This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.
+
+If you have suggestions or find bugs, you can submit [issues](https://github.com/wanglin2/mind-map/issues) here.
The built-in themes and icons in the project come from:
@@ -78,6 +79,46 @@ The built-in themes and icons in the project come from:
Respect the copyright, and do not use the theme and icons directly for commercial projects.
+## Why not？
+
+1.[Zhixi](https://www.zhixi.com/)
+
+Zhixi is a free mind mapping product that supports multi end synchronization. The UI design is beautiful and the features are complete, but it is not open source, so it can only be used as a user and cannot be used in your project.
+
+There are many other online mind mapping products similar to Zhixi, such as [GitMind](https://gitmind.cn/)、[MindLine](http://www.mindline.cn/)、[MinMeister](https://www.mindmeister.com/zh)、[Mubu](https://mubu.com/) and so on, There are many searches on search engines, but these products either require fees or are developed by small companies, and their stability and sustainability cannot be guaranteed. Of course, the most crucial thing is that they are not open-source.
+
+2.[kityminder-core](https://github.com/fex-team/kityminder-core)
+
+`kityminder-core` is an open source brain mapping tool developed by Baidu. It has powerful functions and good performance, but it is no longer maintained. Therefore, the code is relatively old, and the interface beauty is relatively ordinary. In addition, bugs can only be fixed by yourself, and the functions can only be developed by yourself. It has high requirements for front-end development capabilities.
+
+3.[jsmind](https://github.com/hizzgdev/jsmind)、[Mind-elixir](https://github.com/ssshooter/mind-elixir-core)、[my-mind](https://github.com/ondras/my-mind)、[blink-mind](https://github.com/awehook/blink-mind)、[remind](https://github.com/luvsic3/remind)、[vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)、[ZMindMap](https://github.com/zyascend/ZMindMap)...
+
+These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on.
+
+In summary, in open-source mind maps, it is difficult to find a better choice than `simple-mind-map`. Of course, `simple-mind-map` is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, `simple-mind-map` has always been in a fast iteration process, and we welcome you to join and improve it together.
+
+## Browser Compatibility
+
+We recommend using the latest version of the `Chrome` browser.
+
+Limited testing situation:
+
+Normal operation: `360` extreme speed browser（v13.5.2036.0）、`opera` browser（v71.0.3770.284）。
+
+Abnormal operation: `Firefox`（v98.0.2）, Node content cannot be displayed in rich text mode. If you want to support the `Firefox` browser, please use non rich text mode.
+
+Unsupported: `IE` browser.
+
## License
-[MIT](https://opensource.org/licenses/MIT)
\ No newline at end of file
+[MIT](https://opensource.org/licenses/MIT)
+
+## Invite the author to a cup of coffee
+
+Open source is not easy. If this project is helpful to you, you can invite the author to have a cup of coffee~
+
+> Please note the 【mind map】 for transfer. Your avatar and name will appear below.
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue
index 2551127b..0cae4e91 100644
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -1,66 +1,89 @@
Introduction
-
simple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework.
+
simple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.
+
+
If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.
+
Features
-
-
-organizational structure diagrams, and directory organization diagrams
-
-
-
+
+
+organizational structure diagrams, directory organization diagrams, timeline, and fishbone diagrams
+
+
+
summaries
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
Table of Contents
+
Repository Catalog Introduction
1.simple-mind-map
-
This is a mind map tool library that is framework-agnostic and can be used with
+
This is a mind map library that is framework-agnostic and can be used with
frameworks such as Vue and React, or without a framework.
2.web
This is an online mind map built using the simple-mind-map library and based
on Vue2.x and ElementUI. Features include:
-
+
images, icons, hyperlinks, notes, tags, and summaries
-
+
outline, theme selection, and structure selection
-
+
storage by default, but it also supports creating, opening, and editing
local files on the computer directly
-
+
and organizing layout
-
+
between edit and read-only modes, zooming in and out, and switching to
full screen, support mini map
Provide document page service.
3.dist
The folder containing the packaged resources for the web folder.
This project is rough and has not been thoroughly tested, its features are not
-yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
-learning and reference purposes and please use it carefully for actual projects.
+
This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.
+
This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.
+
If you have suggestions or find bugs, you can submit issues here.
The built-in themes and icons in the project come from:
Zhixi is a free mind mapping product that supports multi end synchronization. The UI design is beautiful and the features are complete, but it is not open source, so it can only be used as a user and cannot be used in your project.
+
There are many other online mind mapping products similar to Zhixi, such as GitMind、MindLine、MinMeister、Mubu and so on, There are many searches on search engines, but these products either require fees or are developed by small companies, and their stability and sustainability cannot be guaranteed. Of course, the most crucial thing is that they are not open-source.
kityminder-core is an open source brain mapping tool developed by Baidu. It has powerful functions and good performance, but it is no longer maintained. Therefore, the code is relatively old, and the interface beauty is relatively ordinary. In addition, bugs can only be fixed by yourself, and the functions can only be developed by yourself. It has high requirements for front-end development capabilities.
These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on.
+
In summary, in open-source mind maps, it is difficult to find a better choice than simple-mind-map. Of course, simple-mind-map is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, simple-mind-map has always been in a fast iteration process, and we welcome you to join and improve it together.
+
Browser Compatibility
+
We recommend using the latest version of the Chrome browser.
+
Limited testing situation:
+
Normal operation: 360 extreme speed browser（v13.5.2036.0）、opera browser（v71.0.3770.284）。
+
Abnormal operation: Firefox（v98.0.2）, Node content cannot be displayed in rich text mode. If you want to support the Firefox browser, please use non rich text mode.
Open source is not easy. If this project is helpful to you, you can invite the author to have a cup of coffee~
+
+
Please note the 【mind map】 for transfer. Your avatar and name will appear below.
+
+
+
diff --git a/web/src/pages/Doc/en/markdown/index.md b/web/src/pages/Doc/en/markdown/index.md
new file mode 100644
index 00000000..bdb75890
--- /dev/null
+++ b/web/src/pages/Doc/en/markdown/index.md
@@ -0,0 +1,35 @@
+# Markdown parse
+
+> v0.4.7+
+
+Provides methods for importing and exporting `Markdown` files.
+
+## Import
+
+```js
+import markdown from 'simple-mind-map/src/parse/markdown.js'
+```
+
+If you are using the file in the format of `umd`, you can obtain it in the following way:
+
+```html
+
+```
+
+```js
+simpleMindMap.markdown
+```
+
+## Methods
+
+### transformToMarkdown(data)
+
+- `data`: Mind map data can be obtained using the `mindMap.getData()` method.
+
+Convert mind map data into `Markdown` format data, and the returned data is a string.
+
+### transformMarkdownTo(mdContent)
+
+- `mdContent`: The `Markdown` data to convert, string type.
+
+Convert the `Markdown` string into node tree data and return a `Promise` instance. You can use the `mindMap.setData()` method to render the converted data onto the canvas.
diff --git a/web/src/pages/Doc/en/markdown/index.vue b/web/src/pages/Doc/en/markdown/index.vue
new file mode 100644
index 00000000..d0a53504
--- /dev/null
+++ b/web/src/pages/Doc/en/markdown/index.vue
@@ -0,0 +1,39 @@
+
+
+
Markdown parse
+
+
v0.4.7+
+
+
Provides methods for importing and exporting Markdown files.
data: Mind map data can be obtained using the mindMap.getData() method.
+
+
Convert mind map data into Markdown format data, and the returned data is a string.
+
transformMarkdownTo(mdContent)
+
+
mdContent: The Markdown data to convert, string type.
+
+
Convert the Markdown string into node tree data and return a Promise instance. You can use the mindMap.setData() method to render the converted data onto the canvas.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/miniMap/index.md b/web/src/pages/Doc/en/miniMap/index.md
index 0e82ce40..495ab5f8 100644
--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@@ -54,13 +54,13 @@ positioning, set border style, transition property (optional)
4.Listen for `data_change` and `view_data_change` events, and in this event call
the `calculationMiniMap` method to get calculation data, then render `svgHTML`
-to the `miniMapContainer` element and set its style:
+to the `miniMapContainer` element and set `miniMapContainer` element style:
```js
:style="{
- transform: `scale(${svgBoxScale})`,
- left: svgBoxLeft + 'px',
- top: svgBoxTop + 'px',
+ transform: `scale(${miniMapBoxScale})`,
+ left: miniMapBoxLeft + 'px',
+ top: miniMapBoxTop + 'px',
}"
```
diff --git a/web/src/pages/Doc/en/miniMap/index.vue b/web/src/pages/Doc/en/miniMap/index.vue
index d8be49ff..75b18097 100644
--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@@ -39,11 +39,11 @@ absolute positioning
positioning, set border style, transition property (optional)
4.Listen for data_change and view_data_change events, and in this event call
the calculationMiniMap method to get calculation data, then render svgHTML
-to the miniMapContainer element and set its style:
+to the miniMapContainer element and set miniMapContainer element style:
5.Set the viewBoxStyle object as the style of the viewBoxContainer element
diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md
index 2562df9d..9fb7aa24 100644
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -56,29 +56,29 @@ Whether the node is currently being dragged
## Methods
-### addChildren(node)
-
-Add a child node
-
### getSize()
-Calculate the width and height of the node, return a boolean indicating whether
-the width and height have changed
-
-### renderNode()
-
-Render the node to the canvas, will remove the old content node and create a new
-one
+Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed
### render()
-Recursively render this node and all its child nodes. The first call will create
-the node content, subsequent calls will only update the node position. To
-re-render the content, set the `initRender` attribute to `true` first.
+Recursively render this node and all its child nodes
+
+### updateNodeShape()
+
+> v0.5.0+
+
+Update node shape nodes. For example, when the node status changes, call this method to display or deactivate the style.
### remove()
-Recursively delete this node and all its child nodes
+Recursive deletion, which is only deleted from the canvas. The node container is still present, and can be reinserted back into the canvas in the future
+
+### destroy()
+
+> v0.5.0+
+
+Destroying a node will not only delete it from the canvas, but also directly empty the original node, which cannot be inserted back into the canvas in the future
### renderLine()
diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue
index 59125afe..eaf4611d 100644
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -31,20 +31,22 @@
Whether the node is currently being dragged
Methods
-
addChildren(node)
-
Add a child node
getSize()
-
Calculate the width and height of the node, return a boolean indicating whether
-the width and height have changed
-
renderNode()
-
Render the node to the canvas, will remove the old content node and create a new
-one
+
Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed
render()
-
Recursively render this node and all its child nodes. The first call will create
-the node content, subsequent calls will only update the node position. To
-re-render the content, set the initRender attribute to true first.
+
Recursively render this node and all its child nodes
+
updateNodeShape()
+
+
v0.5.0+
+
+
Update node shape nodes. For example, when the node status changes, call this method to display or deactivate the style.
remove()
-
Recursively delete this node and all its child nodes
+
Recursive deletion, which is only deleted from the canvas. The node container is still present, and can be reinserted back into the canvas in the future
+
destroy()
+
+
v0.5.0+
+
+
Destroying a node will not only delete it from the canvas, but also directly empty the original node, which cannot be inserted back into the canvas in the future
renderLine()
Re-render the line from this node to its child nodes
removeLine()
diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md
index 72bddcdd..e4f09294 100644
--- a/web/src/pages/Doc/en/richText/index.md
+++ b/web/src/pages/Doc/en/richText/index.md
@@ -10,9 +10,11 @@ By default, node editing can only uniformly apply styles to all text in the node
The principle of this plugin is to use [Quill](https://github.com/quilljs/quill) editor implements rich text editing, and then uses the edited `DOM` node directly as the text data of the node, and embeds the `DOM` node through the `svg` `foreignObject` tag during rendering.
-This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting `svg` as an image is very simple, Get the `svg` string, and then create the `blob` data of the `type=image/svg+xml` type. Then use the `URL.createObjectURL` method to generate the `data:url` data. Then create a `Image` tag, use the `data:url` as the `src` of the image, and finally draw the image on the `canvas` object for export, However, after testing, when the `DOM` node is embedded in the `svg`, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the `foreignObject` node in `svg`, using [html2canvas](https://github.com/niklasvh/html2canvas) Convert the `DOM` node in the `foreignObject` node into an image and then replace the `foreignObject` node. This method can work, but it is very time-consuming. Because the `html2canvas` conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.
+> The following prompts exist in versions prior to v0.5.6:
+>
+> This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting `svg` as an image is very simple, Get the `svg` string, and then create the `blob` data of the `type=image/svg+xml` type. Then use the `URL.createObjectURL` method to generate the `data:url` data. Then create a `Image` tag, use the `data:url` as the `src` of the image, and finally draw the image on the `canvas` object for export, However, after testing, when the `DOM` node is embedded in the `svg`, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the `foreignObject` node in `svg`, using [html2canvas](https://github.com/niklasvh/html2canvas) Convert the `DOM` node in the `foreignObject` node into an image and then replace the `foreignObject` node. This method can work, but it is very time-consuming. Because the `html2canvas` conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.
-If you have a better way, please leave a message.
+The version of `v0.5.7+` directly uses `html2canvas` to convert the entire `svg`, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.
## Register
@@ -65,6 +67,12 @@ Replace the built-in font size list during rich text editing. The built-in list
Select All. When the node is being edited, you can select all the text in the node through this method.
+### focus()
+
+> v0.4.7+
+
+Focus.
+
### formatText(config = {})
- `config`：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:
diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue
index 742933c7..43db5c80 100644
--- a/web/src/pages/Doc/en/richText/index.vue
+++ b/web/src/pages/Doc/en/richText/index.vue
@@ -10,8 +10,11 @@
This plugin provides the ability to edit rich text of nodes, and takes effect after registration.
By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.
The principle of this plugin is to use Quill editor implements rich text editing, and then uses the edited DOM node directly as the text data of the node, and embeds the DOM node through the svgforeignObject tag during rendering.
+
+
The following prompts exist in versions prior to v0.5.6:
This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting svg as an image is very simple, Get the svg string, and then create the blob data of the type=image/svg+xml type. Then use the URL.createObjectURL method to generate the data:url data. Then create a Image tag, use the data:url as the src of the image, and finally draw the image on the canvas object for export, However, after testing, when the DOM node is embedded in the svg, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the foreignObject node in svg, using html2canvas Convert the DOM node in the foreignObject node into an image and then replace the foreignObject node. This method can work, but it is very time-consuming. Because the html2canvas conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.
-
If you have a better way, please leave a message.
+
+
The version of v0.5.7+ directly uses html2canvas to convert the entire svg, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.
Select All. When the node is being edited, you can select all the text in the node through this method.
+
focus()
+
+
v0.4.7+
+
+
Focus.
formatText(config = {})
config：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:
diff --git a/web/src/pages/Doc/en/start/index.md b/web/src/pages/Doc/en/start/index.md
index e89692c1..b89c6a41 100644
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@@ -1,7 +1,92 @@
# Start
+## Installation
+
+> Things to note before version 0.2.0:
+
+```bash
+npm i simple-mind-map
+```
+
+`0.2.0` Notes for previous versions:
+
+> Note: This project is directly published in source code form and has not been
+> packaged. If compilation fails, a Vue CLI-created project can add the
+> following configuration to the vue.config.js file to allow babel-loader to
+> compile this dependency:
+>
+> ```js
+> module.exports = {
+> transpileDependencies: ["simple-mind-map"],
+> };
+> ```
+>
+> Other projects should modify the packaging configuration as needed.
+
+## Usage
+
+> The `web` directory of this repository provides a complete project based on `Vue2`. If you encounter any doubts about using it, you can refer to the implementation of this project.
+
+> To learn about its use in other frameworks, you can refer to the following unofficial implementations:
+>
+> 1.[https://github.com/huangyuanyin/hyy-vue3-mindMap](https://github.com/huangyuanyin/hyy-vue3-mindMap): A mind map based on Vue3.2+ElementPlus.
+
+Firstly, provide a container element with a width and height not equal to 0:
+
+```html
+
+```
+
+Also, set the `CSS` style again:
+
+```css
+#mindMapContainer * {
+ margin: 0;
+ padding: 0;
+}
+```
+
+Then introduce the `simple-mind-map` library and create an instance:
+
+```js
+import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+ el: document.getElementById('mindMapContainer'),
+ data: {
+ "data": {
+ "text": "Root Node"
+ },
+ "children": []
+ }
+});
+```
+
+This will result in a mind map.
+
+If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the `simple-mind-map` library.
+
+`simple-mind-map` supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.
+
+The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
+
+If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file and `simpleMindMap.css` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page:
+
+```html
+
+
+```
+
+A global variable `window.simpleMindMap` will be created.
+
+The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
+
+（v0.5.4+）If you want to use the `ES` module directly on the browser side, you can find the `simpleMindMap.esm.js` and `simpleMindMap.esm.css` files in the `/simple-mind-map/dist/` directory.
+
## Development
+If you only use library, you don't need to read this section.
+
### Local Development
```bash
@@ -56,59 +141,6 @@ npm run build
The `index.html` file will be automatically moved to the root directory.
-## Installation
-
-> Things to note before version 0.2.0:
-
-```bash
-npm i simple-mind-map
-```
-
-`0.2.0` Notes for previous versions:
-
-> Note: This project is directly published in source code form and has not been
-> packaged. If compilation fails, a Vue CLI-created project can add the
-> following configuration to the vue.config.js file to allow babel-loader to
-> compile this dependency:
->
-> ```js
-> module.exports = {
-> transpileDependencies: ["simple-mind-map"],
-> };
-> ```
->
-> Other projects should modify the packaging configuration as needed.
-
-## Usage
-
-```html
-
-```
-
-```js
-import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
- el: document.getElementById('mindMapContainer'),
- data: {
- "data": {
- "text": "Root Node"
- },
- "children": []
- }
-});
-```
-
-The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
-
-If you need a file in the format of `umd` module, such as `CDN` in the browser, you can import it in the following way:
-
-```js
-import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min.js";
-```
-
-The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
-
## Problems
### Error when using in Vite, indicating xml-js dependency error
diff --git a/web/src/pages/Doc/en/start/index.vue b/web/src/pages/Doc/en/start/index.vue
index 2269c052..e91ada19 100644
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@@ -1,7 +1,67 @@
Start
+
Installation
+
+
Things to note before version 0.2.0:
+
+
npm i simple-mind-map
+
+
0.2.0 Notes for previous versions:
+
+
Note: This project is directly published in source code form and has not been
+packaged. If compilation fails, a Vue CLI-created project can add the
+following configuration to the vue.config.js file to allow babel-loader to
+compile this dependency:
Other projects should modify the packaging configuration as needed.
+
+
Usage
+
+
The web directory of this repository provides a complete project based on Vue2. If you encounter any doubts about using it, you can refer to the implementation of this project.
+
+
+
To learn about its use in other frameworks, you can refer to the following unofficial implementations:
If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the simple-mind-map library.
+
simple-mind-map supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.
+
The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the babel compilation simple mind-map in your project to prevent some newer js syntax some browsers not supporting it.
+
If you need a file in the format of umd module, such as CDN in the browser, Then you can find the simpleMindMap.umd.min.js file and simpleMindMap.css file in the /simple-mind-map/dist/ directory, copy it to your project, and then import it into the page:
A global variable window.simpleMindMap will be created.
+
The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
+
（v0.5.4+）If you want to use the ES module directly on the browser side, you can find the simpleMindMap.esm.js and simpleMindMap.esm.css files in the /simple-mind-map/dist/ directory.
Development
+
If you only use library, you don't need to read this section.
Local Development
git clone https://github.com/wanglin2/mind-map.git
cd simple-mind-map
@@ -38,44 +98,6 @@ npm run buildDoc
npm run build
The index.html file will be automatically moved to the root directory.
-
Installation
-
-
Things to note before version 0.2.0:
-
-
npm i simple-mind-map
-
-
0.2.0 Notes for previous versions:
-
-
Note: This project is directly published in source code form and has not been
-packaged. If compilation fails, a Vue CLI-created project can add the
-following configuration to the vue.config.js file to allow babel-loader to
-compile this dependency:
The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the babel compilation simple mind-map in your project to prevent some newer js syntax some browsers not supporting it.
-
If you need a file in the format of umd module, such as CDN in the browser, you can import it in the following way:
The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
Problems
Error when using in Vite, indicating xml-js dependency error
Solution: use the following import method:
diff --git a/web/src/pages/Doc/en/translate/index.md b/web/src/pages/Doc/en/translate/index.md
index 27e08501..3255000e 100644
--- a/web/src/pages/Doc/en/translate/index.md
+++ b/web/src/pages/Doc/en/translate/index.md
@@ -1,6 +1,10 @@
# Participate in translation
-Thanks for the English translation provided by [Emircan ERKUL](https://github.com/emircanerkul).
+> Thanks for the first version English translation provided by [Emircan ERKUL](https://github.com/emircanerkul).
+>
+> Due to limited energy, most translations currently use machine translation, so accuracy is inevitably problematic.
+>
+> At present, the 【Course】 section is not translated. If you are interested, please join us.
If you want to participate in the translation of this document, you can clone this repository first.
diff --git a/web/src/pages/Doc/en/translate/index.vue b/web/src/pages/Doc/en/translate/index.vue
index 84db2194..8c07be6b 100644
--- a/web/src/pages/Doc/en/translate/index.vue
+++ b/web/src/pages/Doc/en/translate/index.vue
@@ -1,7 +1,11 @@
Participate in translation
-
Thanks for the English translation provided by Emircan ERKUL.
+
+
Thanks for the first version English translation provided by Emircan ERKUL.
+
Due to limited energy, most translations currently use machine translation, so accuracy is inevitably problematic.
+
At present, the 【Course】 section is not translated. If you are interested, please join us.
+
If you want to participate in the translation of this document, you can clone this repository first.
The translated documents are in the /web/src/pages/Doc/ directory, and currently support English(en) and Simplified Chinese(zh).
If you are adding a new language type, you can create a new directory under the /web/src/pages/Doc/ directory, Then create a folder for each chapter, You can also directly copy all chapter directories under the existing language directory for translation, Note that you only need to write the index.md file, The index.vue file under the chapter directory is automatically generated by the script according to index.md.
diff --git a/web/src/pages/Doc/en/utils/index.md b/web/src/pages/Doc/en/utils/index.md
index 24158fec..dc7db33a 100644
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -72,7 +72,11 @@ Copy render tree data, example:
copyRenderTree({}, this.mindMap.renderer.renderTree);
```
-#### copyNodeTree(tree, root)
+#### copyNodeTree(tree, root, removeActiveState, keepId)
+
+- `removeActiveState`: `Boolean`, default is `false`, Whether to remove the active state of the node
+
+- `keepId`: v0.4.6+, `Boolean`, default is `false`, Whether to retain the `id` of the replicated node will be deleted by default to prevent duplicate node `id`. However, for mobile node scenarios, the original `id` of the node needs to be retained
Copy node tree data, mainly eliminating the reference `node` instance `_node`
and copying the `data` of the data object, example:
@@ -125,6 +129,16 @@ Measure the width and height of the text, return value:
{ width, height }
```
+#### getTextFromHtml(html)
+
+Extract plain text content from an HTML string.
+
+#### readBlob(blob)
+
+> v0.5.9+
+
+Convert `blob` data to `data:url` data.
+
## Simulate CSS background in Canvas
Import:
@@ -153,4 +167,50 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
// success
}
})
-```
\ No newline at end of file
+```
+
+## LRU cache class
+
+> v0.5.10+
+
+Import:
+
+```js
+import Lru from 'simple-mind-map/src/utils/Lru.js'
+```
+
+### Constructor
+
+```js
+let lru = new Lru(max)
+```
+
+`max`: Specify the maximum number of caches.
+
+### Instance properties
+
+#### size
+
+The current number of caches.
+
+#### pool
+
+Get cache pool.
+
+### Instance methods
+
+#### add(key, value)
+
+Add cache.
+
+#### delete(key)
+
+Delete cache.
+
+#### has(key)
+
+Check if a cache exists.
+
+#### get(key)
+
+Gets the value of a cache.
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/utils/index.vue b/web/src/pages/Doc/en/utils/index.vue
index 13b61bc4..be49919e 100644
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -39,7 +39,15 @@ basic data, otherwise it will throw an error
removeActiveState: Boolean, default is false, Whether to remove the active state of the node
+
+
+
keepId: v0.4.6+, Boolean, default is false, Whether to retain the id of the replicated node will be deleted by default to prevent duplicate node id. However, for mobile node scenarios, the original id of the node needs to be retained
+
+
Copy node tree data, mainly eliminating the reference node instance _node
and copying the data of the data object, example:
copyNodeTree({}, node);
@@ -74,6 +82,13 @@ and copying the data of the data object, example:
Measure the width and height of the text, return value:
diff --git a/web/src/pages/Doc/en/xmind/index.md b/web/src/pages/Doc/en/xmind/index.md
index 7d1fca87..28556fb4 100644
--- a/web/src/pages/Doc/en/xmind/index.md
+++ b/web/src/pages/Doc/en/xmind/index.md
@@ -12,19 +12,20 @@ import xmind from 'simple-mind-map/src/parse/xmind.js'
If you are using the file in the format of `umd`, you can obtain it in the following way:
-```js
-import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min"
+```html
+
+```
-MindMap.xmind
+```js
+simpleMindMap.xmind
```
## Methods
### xmind.parseXmindFile(file)
-Parsing the `.xmind` file and returning the parsed data. Note that this is
-complete data, including the node tree, theme, and structure. You can use
-`mindMap.setFullData(data)` to render the returned data to the canvas.
+Parsing the `.xmind` file and returning the parsed data. You can use
+`mindMap.setData(data)` to render the returned data to the canvas.
`file`: `File` object
@@ -33,9 +34,8 @@ complete data, including the node tree, theme, and structure. You can use
Convert `xmind` data. The `.xmind` file is essentially a `zip` file that can be
decompressed by changing the suffix to zip. Inside, there is a `content.json`
file. If you have parsed this file yourself, you can pass the contents of this
-file to this method for conversion. The converted data is the complete data,
-including the node tree, theme, structure, etc. You can use
-`mindMap.setFullData(data)` to render the returned data to the canvas.
+file to this method for conversion. You can use
+`mindMap.setData(data)` to render the returned data to the canvas.
`content`: the contents of the `content.json` file within the `.xmind` zip
package
diff --git a/web/src/pages/Doc/en/xmind/index.vue b/web/src/pages/Doc/en/xmind/index.vue
index a2fbbdef..c8bc7f05 100644
--- a/web/src/pages/Doc/en/xmind/index.vue
+++ b/web/src/pages/Doc/en/xmind/index.vue
@@ -9,23 +9,21 @@
Parsing the .xmind file and returning the parsed data. Note that this is
-complete data, including the node tree, theme, and structure. You can use
-mindMap.setFullData(data) to render the returned data to the canvas.
+
Parsing the .xmind file and returning the parsed data. You can use
+mindMap.setData(data) to render the returned data to the canvas.
file: File object
xmind.transformXmind(content)
Convert xmind data. The .xmind file is essentially a zip file that can be
decompressed by changing the suffix to zip. Inside, there is a content.json
file. If you have parsed this file yourself, you can pass the contents of this
-file to this method for conversion. The converted data is the complete data,
-including the node tree, theme, structure, etc. You can use
-mindMap.setFullData(data) to render the returned data to the canvas.
+file to this method for conversion. You can use
+mindMap.setData(data) to render the returned data to the canvas.
content: the contents of the content.json file within the .xmind zip
package
\ 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 59f1f4e1..47ae9f16 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -1,53 +1,84 @@
-
- 
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue
index 2551127b..0cae4e91 100644
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -1,66 +1,89 @@
+
+你可以通过如下方式获取：
+
+```js
+import { nodeIconList } from 'simple-mind-map/src/svg/icons'
+```
+
+如果你使用的是`umd`格式的文件，可以通过如下方式获取（v0.5.8+）：
+
+```js
+simpleMindMap.iconList
+```
+
+结构如下：
+
+```js
+[
+ {
+ name: '优先级图标',
+ type: 'priority',
+ list: [
+ {
+ name: '1',
+ icon: ``
+ }
+ ]
+ }
+]
+```
+
+你可以通过UI界面展示出来，要给一个节点设置图标，可以使用`node.setIcon([])`方法，要获取节点当前的图标，可以使用`node.getData('icon')`方法。
+
+一个图标由`type_name`构成，比如前面的图标要插入节点，那么图标的值为`priority_1`。
+
+通常一个分组的图标只允许插入一个，所以存在一个替换的逻辑，完整示例如下：
+
+
+
+## 扩展图标
+
+> v0.5.8+
+
+除了使用内置的图标外，你也可以扩展图标，实例化`simple-mind-map`时传入你要扩展的图标列表即可：
+
+```js
+new MindMap({
+ // ...
+ iconList: [
+ {
+ name: '',// 分组名称
+ type: '',// 分组的值
+ list: [// 分组下的图标列表
+ {
+ name: '',// 图标名称
+ icon:''// 图标，可以传svg或图片
+ }
+ ]
+ }
+ ]
+})
+```
+
+然后和插入内置图标一样，通过`setIcon`方法插入图标的`key`即可。
+
+完整示例：
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course19/index.vue b/web/src/pages/Doc/zh/course19/index.vue
new file mode 100644
index 00000000..ce0d89c2
--- /dev/null
+++ b/web/src/pages/Doc/zh/course19/index.vue
@@ -0,0 +1,66 @@
+
+ 
+