<div id="mindMapContainer"></div>
-import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
- el: document.getElementById("mindMapContainer"),
- data: {
- "data": {
- "text": "Root Node"
- },
- "children": []
- }
-});
-| Field Name | -Type | -Default Value | -Description | -Required | -
|---|---|---|---|---|
| el | -Element | -- | Container element, must be a DOM element | -Yes | -
| data | -Object | -{} | -Mind map data, Please refer to the introduction of 【Data structure】 below | -- |
| 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: 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 | -- |
| exportPadding | -Number | -20 | -The padding for exporting images | -- |
| imgTextMargin | -Number | -5 | -The spacing between the image and text in the node | -- |
| textContentMargin | -Number | -2 | -The spacing between various text information in the node, such as the spacing between the icon and text | -- |
| selectTranslateStep | -Number | -3 | -The canvas offset when mouse moves to the edge during multi-select node | -- |
| selectTranslateLimit | -Number | -20 | -The distance from the edge when the canvas begins to offset during multi-select node | -- |
| customNoteContentShow（v0.1.6+） | -Object | -null | -Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | -- |
| readonly（v0.1.7+） | -Boolean | -false | -Whether it is read-only mode | -- |
| 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 |
-- |
| mousewheelZoomActionReverse（v0.6.5+） | -Boolean | -false | -When mousewheelAction is set to zoom, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed |
-- |
| 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', fontSize: 13, strokeColor: '#333333' } | -Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded) | -- |
| 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 | -- |
| expandBtnNumHandler（v0.7.0+） | -Function | -- | Used to customize the content of displaying the number of nodes when folding, receiving a parameter that represents the instance of the folding node, and returning a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+ | -- |
| isShowExpandNum（v0.7.0+） | -Boolean | -true | -Display the number of folded nodes when they are folded up | -- |
| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | -Boolean | -true | -Only respond to shortcut key events when the mouse is inside the canvas | -- |
| enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature） | -Boolean | -true | -Whether to enable node animation transition | -- |
| nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature） | -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 | -- |
| defaultAssociativeLineText（v0.5.11+） | -String | -关联 | -Association Line Default Text | -- |
| fitPadding（v0.6.0+） | -Number | -50 | -The padding of mind mapping when adapting to canvas size, Unit: px | -- |
| enableCtrlKeyNodeSelection（v0.6.0+） | -Boolean | -true | -Whether to enable the function of holding down the Ctrl key to select multiple nodes | -- |
| useLeftKeySelectionRightKeyDrag（v0.6.0+） | -Boolean | -false | -Setting to left click to select multiple nodes and right click to drag the canvas. | -- |
| beforeTextEdit（v0.6.0+） | -Function/null | -null | -The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance | -- |
| isUseCustomNodeContent（v0.6.3+） | -Boolean | -false | -Whether to customize node content | -- |
| customCreateNodeContent（v0.6.3+） | -Function/null | -null | -If isUseCustomNodeContent is set to true, then this option needs to be used to pass in a method that receives the node instance node as a parameter (if you want to obtain data for that node, you can use node.nodeData.data). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return null |
-- |
| mouseScaleCenterUseMousePosition（v0.6.4-fix.1+） | -Boolean | -true | -Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas | -- |
| customInnerElsAppendTo（v0.6.12+） | -null/HTMLElement | -null | -Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body | -- |
| nodeDragPlaceholderMaxSize（v0.6.12+） | -Number | -20 | -When dragging an element, the maximum height of the block indicating the new position of the element | -- |
| enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature） | -Boolean | -true | -Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state | -- |
| enableAutoEnterTextEditWhenKeydown（v0.6.13+） | -Boolean | -true | -Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node? | -- |
| richTextEditFakeInPlace（v0.6.13+） | -Boolean | -false | -Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better | -- |
| customHandleClipboardText（v0.6.14+） | -Function | -null | -Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images from the user's clipboard. By default, it will only determine whether the text is regular text and node data in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you can pass a function that takes the text from the current clipboard as a parameter and returns the processed data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' }, children: [] } }, The representative is data in simple bind map format, and the node data is in the same format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return a promise | -- |
| errorHandler（v0.6.15+） | -Function | -- | Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object | -- |
| disableMouseWheelZoom（v0.6.15+） | -Boolean | -false | -Prohibit mouse wheel scaling, you can still use the API for scaling | -- |
| resetCss（v0.6.16+） | -String | -* { margin: 0; padding: 0; box-sizing: border-box; } | -When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset | -- |
| enableDblclickReset（v0.6.17+） | -Boolean | -true(v0.7.0+changed to false) | -Turn on the mouse and double-click to reset the position and zoom of the mind map | -- |
| minExportImgCanvasScale（v0.7.0+） | -Number | -2 | -The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity | -- |
| hoverRectColor（v0.7.0+） | -String | -rgb(94, 200, 248) | -The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering | -- |
| hoverRectPadding（v0.7.0+） | -Number | -2 | -The distance between the node mouse hover and the displayed rectangular border when activated and the node content | -- |
| selectTextOnEnterEditText（v0.7.0+） | -Boolean | -true | -Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | -- |
| deleteNodeActive（v0.7.1+） | -Boolean | -true | -Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes | -- |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | -Boolean | -true | -Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes | -- |
| fit（v0.7.1-fix.2+） | -Boolean | -false | -Is the first rendering scaled to fit the canvas size | -- |
| dragMultiNodeRectConfig（v0.7.2+） | -Object | -{ width: 40, height: 20, fill: '' } | -The style configuration of the schematic rectangle that moves with the mouse when dragging multiple nodes, passing an object, and the field meanings are the width, height, and fill color of the rectangle | -- |
| dragPlaceholderRectFill（v0.7.2+） | -String | -- | The filling color of the schematic rectangle for the new position when dragging nodes. If not transmitted, the default color for the connected line is used | -- |
| dragOpacityConfig（v0.7.2+） | -Object | -{ cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | -The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node | -- |
| tagsColorMap（v0.7.2+） | -Object | -{} | -The color of a custom node label can be transferred to an object, where key is the label content to be assigned a color, and value is the color of the label content. If not transferred internally, a corresponding color will be generated based on the label content | -- |
| cooperateStyle（v0.7.3+） | -Object | -{ avatarSize: 22, fontSize: 12 } | -The configuration of personnel avatar style during node collaboration editing, with field meanings as follows: avatar size, and if it is a text avatar, the size of the text | -- |
The basic data structure is as follows:
-{
- data: {
- text: '', // The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true
- richText: false, // Is the text of the node in rich text mode
- expand: true, // Whether the node is expanded
- uid: '',// The unique ID of the node, which may not be passed, will be generated internally
- icon: [], // The format of the icon can be found in the "插入和扩展节点图标" section of the tutorial
- image: '', // URL of the image
- imageTitle: '', // The title of the image can be blank
- imageSize: { // The size of the image
- width: 100, // The width of the image, mandatory
- height: 100, // The height of the image is mandatory
- custom: false // If set to true, the display size of the image is not controlled by the theme, and is based on imageSize.width and imageSize.height
- },
- hyperlink: '', // Hyperlink address
- hyperlinkTitle: '', // Title of hyperlink
- note: '', // Content of remarks
- tag: [], // Tag list
- generalization: {// The summary of the node, if there is no summary, the generalization can be set to null
- text: ''// Summary Text
- },
- associativeLineTargets: [''],// If there are associated lines, then it is the uid list of the target node
- associativeLineText: '',// Association Line Text
- // ...For other style fields, please refer to the topic
- },
- children [// Child nodes, with consistent structure and root nodes
- {
- data: {},
- children: []
- }
- ]
-}
-If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the _ Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.
| Field Name | -Type | -Default Value | -Description | -
|---|---|---|---|
| text | -String | -'' | -Watermark text. If it is an empty string, the watermark will not be displayed | -
| lineSpacing | -Number | -100 | -Spacing between watermark lines | -
| textSpacing | -Number | -100 | -Spacing between watermarks in the same row | -
| angle | -Number | -30 | -Tilt angle of watermark, range: [0, 90] | -
| textStyle | -Object | -{color: '#999', opacity: 0.5, fontSize: 14} | -Watermark text style | -
| 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,... |
-
--v0.2.23+
-
Define new theme.
-name：New theme name
config：New theme config
Simple-mind-map Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:
import MindMap from 'simple-mind-map'
-// 注册新主题
-MindMap.defineTheme('Theme name', {})
-
-// 1.实例化时使用新注册的主题
-const mindMap = new MindMap({
- theme: 'Theme name'
-})
-
-// 2.动态切换新主题
-mindMap.setTheme('Theme name')
-For all configurations of theme, please refer to Default Topic. The defineThememethod will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to blueSky.
--v0.3.0+
-
opt：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.
-Note: The plugin needs to be registered before instantiating MindMap.
--v0.4.0+
-
Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is -1, it means that the plugin is not registered.
--v0.3.0+
-
List of all currently registered plugins.
---v0.6.0+
-
Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.
---v0.3.0+
-
paddingX: Padding x
paddingY: Padding y
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)
- svgHTML, // String, svg string, i.e. html string, can be directly rendered to the small map container you prepared
- rect: // Object, position, size, etc. of mind map graphics before zoom
- origWidth, // Number, canvas width
- origHeight, // Number, canvas height
- scaleX, // Number, horizontal zoom value of mind map graphics
- scaleY, // Number, vertical zoom value of mind map graphics
-}
-callback: v0.3.2+, Function, Called when the re-rendering is completeTriggers a full rendering, which will reuse nodes for better performance. If
-only the node positions have changed, this method can be called to reRender.
callback: v0.3.2+, Function, Called when the re-rendering is completePerforms a full re-render, clearing the canvas and creating new nodes. This has -poor performance and should be used sparingly.
-After the container size has changed, this method should be called to adjust.
---v0.1.7+
-
Switches between readonly and edit mode.
-mode：readonly、edit
Listen to an event. Event list:
-| Event Name | -Description | -Callback Parameters | -
|---|---|---|
| data_change | -Tree rendering data change, listen to this method to get the latest data | -data (current tree rendering data) | -
| view_data_change（v0.1.1+） | -View change data, such as when dragging or zooming | -data (current view state data) | -
| back_forward | -Forward or backward | -activeHistoryIndex (current index in the history data array), length (current length of the history data array) | -
| draw_click | -Canvas click event | -e (event object) | -
| svg_mousedown | -svg canvas mouse down event | -e (event object) | -
| mousedown | -el element mouse down event | -e (event object), this (Event event class instance) | -
| mousemove | -el element mouse move event | -e (event object), this (Event event class instance) | -
| drag | -If it is a drag event while holding down the left button | -e (event object), this (Event event class instance) | -
| mouseup | -el element mouse up event | -e (event object), this (Event event class instance) | -
| mousewheel | -Mouse scroll event | -e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad） | -
| contextmenu | -svg canvas right mouse button menu event | -e (event object) | -
| node_click | -Node click event | -this (node instance), e (event object) | -
| node_mousedown | -Node mouse down event | -this (node instance), e (event object) | -
| node_mouseup | -node mouseup event | -this (node instance), e (event object) | -
| node_mouseup | -Node mouseup event | -this (node instance), e (event object) | -
| node_dblclick | -Node double-click event | -this (node instance), e (event object) | -
| node_contextmenu | -Node right-click menu event | -e (event object), this (node instance) | -
| node_mouseenter（v0.4.1+） | -Node mouseenter event | -this (node instance), e (event object) | -
| node_mouseleave（v0.4.1+） | -Node mouseleave event | -this (node instance), e (event object) | -
| before_node_active | -Event before node activation | -this (node instance), activeNodeList (current list of active nodes) | -
| node_active | -Node activation event | -this (node instance), activeNodeList (current list of active nodes) | -
| expand_btn_click | -Node expand or collapse event | -this (node instance) | -
| before_show_text_edit | -Event before node text edit box opens | -- |
| hide_text_edit | -Node text edit box close event | -textEditNode (text edit box DOM node), activeNodeList (current list of active nodes) | -
| scale | -Zoom event | -scale (zoom ratio) | -
| node_img_dblclick（v0.2.15+） | -Node image double-click event | -this (node instance), e (event object) | -
| node_img_mouseenter（v0.6.5+） | -Node image mouseenter event | -this（node instance）、imgNode（img node）、e（event object） | -
| node_img_mouseleave（v0.6.5+） | -Node image mouseleave event | -this（node instance）、imgNode（img node）、e（event object） | -
| node_img_mousemove（v0.6.5+） | -Node image mousemove event | -this（node instance）、imgNode（img node）、e（event object） | -
| 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 | -{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，The node uid to which the node is moved this time, for example, if it is moved to node A, then the overlayNodeUid is the uid of node A. If it is moved to the front of node B, then the nextNodeUid is the uid of node B. You can obtain the node instance through the mindMap. extender.findNodeByUid(uid) method） | -
| associative_line_click（v0.4.5+） | -Triggered when an associated line is clicked | -path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node) | -
| svg_mouseenter（v0.5.1+） | -Triggered when the mouse moves into the SVG canvas | -e（event object） | -
| svg_mouseleave（v0.5.1+） | -Triggered when the mouse moves out of the SVG canvas | -e（event object） | -
| node_icon_click（v0.6.10+） | -Triggered when clicking on an icon within a node | -this（node instance）、item（Click on the icon name）、e（event object） | -
| view_theme_change（v0.6.12+） | -Triggered after calling the setTheme method to set the theme | -theme（theme name） | -
| set_data（v0.7.3+） | -Triggered when the setData method is called to dynamically set mind map data | -data（New Mind Map Data） | -
Trigger an event, which can be one of the events listed above or a custom event.
-Unbind an event.
-Switches the theme. Available themes can be found in the options table above.
-Gets the current theme.
-Sets the theme configuration. config is the same as the themeConfig option
-in the options table above.
Gets the custom theme configuration.
-Gets the value of a specific theme configuration property.
---0.2.24+
-
prop：Get the value of the specified configuration, and return the entire configuration if not passed
Get config, That is, opt of new MindMap (opt)
--0.2.24+
-
opt：Configuration to update
Update config，That is update opt of new MindMap(opt)，You can only update some data, such as:
mindMap.updateConfig({
- enableFreeDrag: true// 开启节点自由拖拽
-})
-This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering
-Gets the current layout structure.
-Sets the layout structure. Available values can be found in the layout field
-in the options table above.
Executes a command, which will add a record to the history stack for undo or -redo. All commands are as follows:
-| Command name | -Description | -Parameters | -
|---|---|---|
| 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 or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective（v0.7.2+Supports simultaneous insertion of sibling nodes into multiple active nodes） | -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 exampleData.js ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type） |
-
| 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 exampleData.js ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type） |
-
| 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 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 single style | -node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state) | -
| SET_NODE_STYLEs（v0.6.12+） | -Modify multiple styles of nodes | -node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, 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) | -
| CLEAR_ACTIVE_NODE | -Clear the active state of the currently active node(s), the active node will be the operation node | -- |
| SET_NODE_EXPAND | -Set whether the node is expanded | -node (the node to set), expand (boolean, whether to expand) | -
| EXPAND_ALL | -Expand all nodes | -- |
| UNEXPAND_ALL | -Collapse all nodes | -- |
| UNEXPAND_TO_LEVEL (v0.2.8+) | -Expand to a specified level | -level (the level to expand to, 1, 2, 3...) | -
| SET_NODE_DATA | -Update node data, that is, update the data in the data object of the node data object | -node (the node to set), data (object, the data to update, e.g. {expand: true}) |
-
| SET_NODE_TEXT | -Set node text | -node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to true）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset） |
-
| SET_NODE_IMAGE | -Set Node Image | -node (node to set), imgData (object, image information, structured as: {url, title, width, height}, the width and height of the image must be passed) |
-
| SET_NODE_ICON | -Set Node Icon | -node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the icons.js file, icon name is type_name, such as ['priority_1']) | -
| SET_NODE_HYPERLINK | -Set Node Hyperlink | -node (node to set), link (hyperlink address), title (hyperlink name, optional) | -
| SET_NODE_NOTE | -Set Node Note | -node (node to set), note (note text) | -
| SET_NODE_TAG | -Set Node Tag | -node (node to set), tag (string array, built-in color information can be obtained in constant.js) | -
| INSERT_AFTER (v0.1.5+) | -Move Node to After Another Node | -node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node) | -
| INSERT_BEFORE (v0.1.5+) | -Move Node to Before Another Node | -node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node) | -
| MOVE_NODE_TO (v0.1.5+) | -Move a node as a child of another node | -node (the node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), toNode (the target node) | -
| ADD_GENERALIZATION (v0.2.0+) | -Add a node summary | -data (the data for the summary, in object format, all numerical fields of the node are supported, default is {text: 'summary'}) |
-
| REMOVE_GENERALIZATION (v0.2.0+) | -Remove a node summary | -- |
| SET_NODE_CUSTOM_POSITION (v0.2.0+) | -Set a custom position for a node | -node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) | -
| RESET_LAYOUT (v0.2.0+) | -Arrange layout with one click | -- |
| SET_NODE_SHAPE (v0.2.4+) | -Set the shape of a node | -node (the node to set), shape (the shape, all shapes: Shape.js) | -
| GO_TARGET_NODE（v0.6.7+） | -Navigate to a node, and if the node is collapsed, it will automatically expand to that node | -node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion） | -
| INSERT_MULTI_NODE（v0.7.2+） | -Insert multiple sibling nodes into the specified node at the same time, with the operating node being the currently active node or the specified node | -appointNodes（Optional, specify nodes, specify multiple nodes to pass an array）, nodeList（Data list of newly inserted nodes, array type） | -
| INSERT_MULTI_CHILD_NODE（v0.7.2+） | -Insert multiple child nodes into the specified node simultaneously, with the operation node being the currently active node or the specified node | -appointNodes（Optional, specify nodes, specify multiple nodes to pass an array）, childList（Data list of newly inserted nodes, array type） | -
| INSERT_FORMULA（v0.7.2+） | -Insert mathematical formulas into nodes, operate on the currently active node or specified node | -formula（Mathematical formula to insert, LaText syntax）, appointNodes（Optional, specify the node to insert the formula into. Multiple nodes can be passed as arrays, otherwise it defaults to the currently active node） | -
Dynamic setting of mind map data, pure node data
-data: mind map structure data
--v0.2.7+
-
Dynamic setting of mind map data, including node data, layout, theme, view
-data: complete data, structure can refer to
-exportFullData
--v0.2.9+
-
Gets mind map data
-withConfig: Boolean, default is false, that is, the obtained data only
-includes the node tree, if true is passed, it will also include theme, layout,
-view, etc. data
--You need to register the
-Exportplugin first
Export
-type: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
-smm (essentially also json)
isDownload: whether to directly trigger download, Boolean value, default is
-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
--v0.1.5+
-
Convert the coordinates of the browser's visible window to coordinates relative -to the canvas.
---v0.4.0+
-
Register plugin, Use MindMap.usePlugin to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the addPlugin method of the instance.
--v0.4.0+
-
Remove registered plugin, Plugins registered through the usePlugin or addPlugin methods can be removed.
This plugin is only supported in rich text mode, so it needs to be used after registering the RichText plugin
This plugin is used to support inserting formulas into nodes.
+++注意：公式是通过KaTeX库实现的，
+KaTeX提供了一些配置，插件默认的一个配置是：
++Note: The formula is implemented through the KaTeX library, and 'KaTeX' provides some configurations. The default configuration for the plugin is:
+
{
+ output: 'mathml'
+}
++This formula may not render successfully on a few browsers. If you need to be compatible with these browsers, you can consider changing the configuration to 'HTML'. For detailed documentation, please refer to Options. Using this configuration may require the introduction of a 'KaTeX' style file, which you can test on your own.
+
import MindMap from 'simple-mind-map'
import Formula from 'simple-mind-map/src/plugins/Formula.js'
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md
index cc2c8a37..92a8ea9c 100644
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -65,11 +65,13 @@ The folder containing the packaged resources for the `web` folder.
[Explore how to export HTML and SVG as images](https://juejin.cn/post/7276712861514170409)
+[How does the dom-to-image library convert HTML into images](https://juejin.cn/post/7287913415803764747)
+
## Special Note
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.
+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. Generally speaking, within 500 nodes, it is more smooth, while over 1000 nodes have more noticeable lag.
If you have suggestions or find bugs, you can submit [issues](https://github.com/wanglin2/mind-map/issues) here.
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue
index 9368f1ad..ec007117 100644
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -51,9 +51,10 @@ full screen, support mini map
How to simulate the background image style of css in canvas
Explore how to export HTML and SVG as images
+How does the dom-to-image library convert HTML into images
Special Note
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.
+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. Generally speaking, within 500 nodes, it is more smooth, while over 1000 nodes have more noticeable lag.
If you have suggestions or find bugs, you can submit issues here.
The built-in themes and icons in the project part come from:
diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md
index 2b164f09..f5b1db5e 100644
--- a/web/src/pages/Doc/en/richText/index.md
+++ b/web/src/pages/Doc/en/richText/index.md
@@ -2,8 +2,6 @@
> v0.4.0+
-> Note: This is a testing nature and imperfect function
-
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.
@@ -20,6 +18,8 @@ The principle of this plugin is to use [Quill](https://github.com/quilljs/quill)
> The compatibility of dom to image more is relatively poor, and exported images are empty on many browsers, so you can replace them with html2canvas according to your own needs.
+After version `0.6.16+`, third-party libraries such as 'dom-to-image-more' and 'html2canvas' will no longer be used for export, Compatibility and export are no longer issues.
+
## Register
```js
diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue
index 9ad311e4..ef38081d 100644
--- a/web/src/pages/Doc/en/richText/index.vue
+++ b/web/src/pages/Doc/en/richText/index.vue
@@ -4,9 +4,6 @@
v0.4.0+
-
-Note: This is a testing nature and imperfect function
-
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 svg foreignObject tag during rendering.
@@ -21,6 +18,7 @@
The compatibility of dom to image more is relatively poor, and exported images are empty on many browsers, so you can replace them with html2canvas according to your own needs.
+After version 0.6.16+, third-party libraries such as 'dom-to-image-more' and 'html2canvas' will no longer be used for export, Compatibility and export are no longer issues.
Register
import MindMap from 'simple-mind-map'
import RichText from 'simple-mind-map/src/plugins/RichText.js'
diff --git a/web/src/pages/Doc/en/select/index.md b/web/src/pages/Doc/en/select/index.md
index 6eb7a088..add2b4cd 100644
--- a/web/src/pages/Doc/en/select/index.md
+++ b/web/src/pages/Doc/en/select/index.md
@@ -1,6 +1,6 @@
# Select plugin
-The `Select` plugin provides the function of right-clicking to select multiple nodes.
+The `Select` plugin provides the function of select multiple nodes.
## Register
diff --git a/web/src/pages/Doc/en/select/index.vue b/web/src/pages/Doc/en/select/index.vue
index aecb9235..a3a3241e 100644
--- a/web/src/pages/Doc/en/select/index.vue
+++ b/web/src/pages/Doc/en/select/index.vue
@@ -1,7 +1,7 @@
Select plugin
-The Select plugin provides the function of right-clicking to select multiple nodes.
+The Select plugin provides the function of select multiple nodes.
Register
import MindMap from 'simple-mind-map'
import Select from 'simple-mind-map/src/plugins/Select.js'
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index cbea0546..7b3080ef 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -39,7 +39,7 @@ const mindMap = new MindMap({
| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 |
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} |
| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 |
-| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽 |
+| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用） |
| watermarkConfig（v0.2.4+） | Object | | 水印配置，详细配置请参考下方表格【水印配置】 |
| textAutoWrapWidth（v0.3.4+） | Number | 500 | 节点内每行文本达到该宽度后自动换行 |
| customHandleMousewheel（v0.4.3+） | Function | null | 自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象 |
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 54123687..36dd2044 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -121,7 +121,7 @@
enableFreeDrag（v0.2.4+）
Boolean
false
-是否开启节点自由拖拽
+是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用）
watermarkConfig（v0.2.4+）
diff --git a/web/src/pages/Doc/zh/formula/index.md b/web/src/pages/Doc/zh/formula/index.md
index 39c56ba9..3f3cbaf4 100644
--- a/web/src/pages/Doc/zh/formula/index.md
+++ b/web/src/pages/Doc/zh/formula/index.md
@@ -6,6 +6,16 @@
该插件用于支持给节点插入公式。
+> 注意：公式是通过[KaTeX](https://github.com/KaTeX/KaTeX)库实现的，`KaTeX`提供了一些配置，插件默认的一个配置是：
+
+```js
+{
+ output: 'mathml'
+}
+```
+
+> 这在少数浏览器上公式可能无法成功渲染，如果你需要兼容这部分浏览器，你可以考虑把该配置改为`html`，详细文档可以参考：[Options](https://katex.org/docs/options)。使用这个配置可能还需要再引入`KaTeX`的样式文件，你可以自行测试。
+
## 注册
```js
diff --git a/web/src/pages/Doc/zh/formula/index.vue b/web/src/pages/Doc/zh/formula/index.vue
index ce3f18f9..faa53fe9 100644
--- a/web/src/pages/Doc/zh/formula/index.vue
+++ b/web/src/pages/Doc/zh/formula/index.vue
@@ -8,6 +8,16 @@
该插件仅在富文本模式下支持，所以需要在注册了RichText插件的前提下使用
该插件用于支持给节点插入公式。
+
+注意：公式是通过KaTeX库实现的，KaTeX提供了一些配置，插件默认的一个配置是：
+
+{
+ output: 'mathml'
+}
+
+
+这在少数浏览器上公式可能无法成功渲染，如果你需要兼容这部分浏览器，你可以考虑把该配置改为html，详细文档可以参考：Options。使用这个配置可能还需要再引入KaTeX的样式文件，你可以自行测试。
+
注册
import MindMap from 'simple-mind-map'
import Formula from 'simple-mind-map/src/plugins/Formula.js'
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index 940f5b30..e08e67b3 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -56,11 +56,13 @@
[探索如何将html和svg导出为图片](https://juejin.cn/post/7276712861514170409)
+[dom-to-image库是如何将html转换成图片的](https://juejin.cn/post/7287913415803764747)
+
## 特别说明
本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
-本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。
+本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。一般来说，500个节点以内比较流畅，1000个节点以上卡顿比较明显。
如果有建议或发现了bug，可以在此提交[issues](https://github.com/wanglin2/mind-map/issues)。
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index d3da6224..c27746d4 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -42,9 +42,10 @@
+
特别说明
本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
-本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。
+本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。一般来说，500个节点以内比较流畅，1000个节点以上卡顿比较明显。
如果有建议或发现了bug，可以在此提交issues。
项目内置的主题和图标部分来自于：
diff --git a/web/src/pages/Doc/zh/richText/index.md b/web/src/pages/Doc/zh/richText/index.md
index 21918196..4c59770a 100644
--- a/web/src/pages/Doc/zh/richText/index.md
+++ b/web/src/pages/Doc/zh/richText/index.md
@@ -2,8 +2,6 @@
> v0.4.0+
-> 注意：这是一个测试性质和不完善的功能
-
该插件提供节点富文本编辑的能力，注册了即可生效。
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。
@@ -20,6 +18,8 @@
> dom-to-image-more兼容性比较差，在很多浏览器上导出图片都是空的，所以可以根据你自己的需求替换成html2canvas。
+从`0.6.16+`版本后不再使用`dom-to-image-more`、`html2canvas`之类的第三方库实现导出，兼容性及导出都不再有问题。
+
## 注册
```js
diff --git a/web/src/pages/Doc/zh/richText/index.vue b/web/src/pages/Doc/zh/richText/index.vue
index e4ca2b7f..dd71a9ed 100644
--- a/web/src/pages/Doc/zh/richText/index.vue
+++ b/web/src/pages/Doc/zh/richText/index.vue
@@ -4,9 +4,6 @@
v0.4.0+
-
-注意：这是一个测试性质和不完善的功能
-
该插件提供节点富文本编辑的能力，注册了即可生效。
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。
该插件的原理是使用Quill编辑器实现富文本编辑，然后把编辑后生成的DOM节点直接作为节点的文本数据，并且在渲染的时候通过svg的foreignObject标签嵌入DOM节点。
@@ -21,6 +18,7 @@
dom-to-image-more兼容性比较差，在很多浏览器上导出图片都是空的，所以可以根据你自己的需求替换成html2canvas。
+从0.6.16+版本后不再使用dom-to-image-more、html2canvas之类的第三方库实现导出，兼容性及导出都不再有问题。
注册
import MindMap from 'simple-mind-map'
import RichText from 'simple-mind-map/src/plugins/RichText.js'
diff --git a/web/src/pages/Doc/zh/select/index.md b/web/src/pages/Doc/zh/select/index.md
index a1767936..3c3431a2 100644
--- a/web/src/pages/Doc/zh/select/index.md
+++ b/web/src/pages/Doc/zh/select/index.md
@@ -1,6 +1,6 @@
# Select 插件
-`Select`插件提供鼠标右键多选节点的功能。
+`Select`插件提供鼠标多选节点的功能。
## 注册
diff --git a/web/src/pages/Doc/zh/select/index.vue b/web/src/pages/Doc/zh/select/index.vue
index ddc0852e..0f041837 100644
--- a/web/src/pages/Doc/zh/select/index.vue
+++ b/web/src/pages/Doc/zh/select/index.vue
@@ -1,7 +1,7 @@
Select 插件
-Select插件提供鼠标右键多选节点的功能。
+Select插件提供鼠标多选节点的功能。
注册
import MindMap from 'simple-mind-map'
import Select from 'simple-mind-map/src/plugins/Select.js'