| exportPadding | -Number | -20 | -The padding for exporting images | -- | |||
| imgTextMargin | Number | 5 | @@ -106,20 +100,6 @@|||||
| 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 | @@ -134,20 +114,6 @@|||||
| enableFreeDrag（v0.2.4+） | -Boolean | -false | -Enable node free(Free drag means that nodes can be dragged to any position on the canvas. Please note that it is not a function of dragging nodes to become siblings of other nodes. The connection of free drag may have certain problems, so it is best not to use this feature) 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 | @@ -253,20 +219,6 @@|||||
| 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 | @@ -316,13 +268,6 @@|||||
| defaultAssociativeLineText（v0.5.11+） | -String | -关联 | -Association Line Default Text | -- | |||
| fitPadding（v0.6.0+） | Number | 50 | @@ -379,13 +324,6 @@|||||
| 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 | @@ -400,13 +338,6 @@|||||
| 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 | @@ -428,13 +359,6 @@|||||
| 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+）(v0.8.0+this attribute has been deleted) | Boolean | true(v0.7.0+changed to false) | @@ -449,13 +373,6 @@|||||
| 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) | @@ -484,13 +401,6 @@|||||
| 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 | @@ -498,27 +408,6 @@|||||
| 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 | {} | @@ -533,10 +422,10 @@|||||
| associativeLineIsAlwaysAboveNode（v0.8.0+） | +onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | Boolean | -true | -Is the associated line always displayed above the node? If set to false, it will be at the top level when creating and activating the associated line, and in other cases, it will be below the node | +false | +During collaborative editing, the same node cannot be selected by multiple people at the same time | |
| disableTouchZoom（v0.8.1+） | -Boolean | -false | -Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin | -- | |||
| highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | @@ -610,55 +492,6 @@|||||
| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+） | -Boolean | -true | -When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work | -- | |||
| associativeLineInitPointsPosition（v0.9.5+） | -null / { from, to } | -{ from: '', to: '' } | -By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values | -- | |||
| ：left、top、bottom、right | -- | - | - | - | |||
| enableAdjustAssociativeLinePoints（v0.9.5+） | -Boolean | -true | -Is it allowed to adjust the position of the two endpoints of the associated line | -- | |||
| isOnlySearchCurrentRenderNodes（v0.9.8+） | -Boolean | -false | -Is it necessary to only search for the current rendered node, and nodes that have been collapsed will not be searched for | -- | |||
| onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | -Boolean | -false | -During collaborative editing, the same node cannot be selected by multiple people at the same time | -- | |||
| beforeCooperateUpdate（v0.9.8+） | -Function、null | -null | -During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 } | -- | |||
| beforeShortcutRun（v0.9.9+） | Function、null | null | @@ -666,34 +499,6 @@|||||
| rainbowLinesConfig（v0.9.9+） | -Object | -{ open: false, colorsList: [] } | -Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } | -- | |||
| addContentToHeader（v0.9.9+） | -Function、null | -null | -Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below | -- | |||
| addContentToFooter（v0.9.9+） | -Function、null | -null | -The basic definition is the same as addContentToHeader, adding custom content at the end | -- | |||
| demonstrateConfig（v0.9.11+） | -Object、null | -null | -Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below | -- | |||
| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | @@ -716,7 +521,7 @@
The basic data structure is as follows:
{
data: {
@@ -754,7 +559,234 @@
}
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 | +
|---|---|---|---|
| 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,... |
+
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| exportPadding | +Number | +20 | +The padding for exporting images | ++ |
| 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 | ++ |
| 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 | ++ |
| 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 | ++ |
| addContentToHeader（v0.9.9+） | +Function、null | +null | +Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below | ++ |
| addContentToFooter（v0.9.9+） | +Function、null | +null | +The basic definition is the same as addContentToHeader, adding custom content at the end | ++ |
The two instantiation options addContentToHeader and addContentToFooter can be used to add custom content at the beginning and end when exporting png、svg、pdf, The default value is null, which means no configuration. A function can be passed and can return null, which means no content will be added. If you want to add content, you need to return the following structure:
{
+ el,// Custom DOM node to be added, styles can be inline
+ cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string
+ height: 50// The height of the returned DOM node must be passed
+}
+A simple example:
+new MindMap({
+ addContentToFooter: () => {
+ const el = document.createElement('div')
+ el.className = 'footer'
+ el.innerHTML = 'From: simple-mind-map'
+ const cssText = `
+ .footer {
+ width: 100%;
+ height: 30px;
+ }
+ `
+ return {
+ el,
+ cssText,
+ height: 30
+ }
+ }
+})
+| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| 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 | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| enableFreeDrag（v0.2.4+） | +Boolean | +false | +Enable node free(Free drag means that nodes can be dragged to any position on the canvas. Please note that it is not a function of dragging nodes to become siblings of other nodes. The connection of free drag may have certain problems, so it is best not to use this feature) drag | ++ |
| nodeDragPlaceholderMaxSize（v0.6.12+）（v0.10.0+ has been abolished） | +Number | +20 | +When dragging an element, the maximum height of the block indicating the new position of the element | ++ |
| 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 | ++ |
| 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 | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| watermarkConfig（v0.2.4+） | +Object | ++ | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration | ++ |
| Type | Default Value | Description | +Required | ||||
|---|---|---|---|---|---|---|---|
| name | +defaultAssociativeLineText（v0.5.11+） | String | +关联 | +Association Line Default Text | - | The name of the icon group | |
| type | -String | +associativeLineIsAlwaysAboveNode（v0.8.0+） | +Boolean | +true | +Is the associated line always displayed above the node? If set to false, it will be at the top level when creating and activating the associated line, and in other cases, it will be below the node | - | Values for icon grouping |
| list | -Array | +associativeLineInitPointsPosition（v0.9.5+） | +null / { from, to } | +{ from: '', to: '' } | +By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values | ++ | |
| ：left、top、bottom、right | ++ | + | + | + | |||
| enableAdjustAssociativeLinePoints（v0.9.5+） | +Boolean | +true | +Is it allowed to adjust the position of the two endpoints of the associated line | - | 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,... |
The two instantiation options addContentToHeader and addContentToFooter can be used to add custom content at the beginning and end when exporting png、svg、pdf, The default value is null, which means no configuration. A function can be passed and can return null, which means no content will be added. If you want to add content, you need to return the following structure:
{
- el,// Custom DOM node to be added, styles can be inline
- cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string
- height: 50// The height of the returned DOM node must be passed
-}
-A simple example:
-new MindMap({
- addContentToFooter: () => {
- const el = document.createElement('div')
- el.className = 'footer'
- el.innerHTML = 'From: simple-mind-map'
- const cssText = `
- .footer {
- width: 100%;
- height: 30px;
- }
- `
- return {
- el,
- cssText,
- height: 30
- }
- }
-})
-| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| 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 | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| disableTouchZoom（v0.8.1+） | +Boolean | +false | +Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+） | +Boolean | +true | +When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| isOnlySearchCurrentRenderNodes（v0.9.8+） | +Boolean | +false | +Is it necessary to only search for the current rendered node, and nodes that have been collapsed will not be searched for | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| beforeCooperateUpdate（v0.9.8+） | +Function、null | +null | +During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 } | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| rainbowLinesConfig（v0.9.9+） | +Object | +{ open: false, colorsList: [] } | +Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } | ++ |
| Field Name | +Type | +Default Value | +Description | +Required | +
|---|---|---|---|---|
| demonstrateConfig（v0.9.11+） | +Object、null | +null | +Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration. For complete configuration, please refer to the 【Demonstration Plugin Configuration】 section below | ++ |
| 节点里最多显示的标签数量，多余的会被丢弃 | ||||||
| exportPadding | -Number | -20 | -导出图片时的内边距 | -|||
| imgTextMargin | Number | 5 | @@ -94,18 +89,6 @@节点里各种文字信息的间距，如图标和文字的间距 | |||
| selectTranslateStep | -Number | -3 | -多选节点时鼠标移动到边缘时的画布移动偏移量 | -|||
| selectTranslateLimit | -Number | -20 | -多选节点时鼠标移动距边缘多少距离时开始偏移 | -|||
| customNoteContentShow（v0.1.6+） | Object | null | @@ -118,18 +101,6 @@是否是只读模式 | |||
| enableFreeDrag（v0.2.4+） | -Boolean | -false | -是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用） | -|||
| watermarkConfig（v0.2.4+） | -Object | -- | 水印配置，详细配置请参考下方表格【水印配置】 | -|||
| textAutoWrapWidth（v0.3.4+） | Number | 500 | @@ -220,18 +191,6 @@初始根节点的位置，可传一个数组，默认为['center', 'center']，代表根节点处于画布中心位置，除了center，关键词还可以设置left、top、right、bottom，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如['40%', '60%']，代表水平位置在画布宽度的40%的位置，垂直位置在画布高度的60%的位置 |
|||
| exportPaddingX（v0.5.5+） | -Number | -10 | -导出png、svg、pdf时的图形水平内边距 | -|||
| exportPaddingY（v0.5.5+） | -Number | -10 | -导出png、svg、pdf时的图形垂直内边距 | -|||
| nodeTextEditZIndex（v0.5.5+） | Number | 3000 | @@ -274,12 +233,6 @@节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量 | |||
| defaultAssociativeLineText（v0.5.11+） | -String | -关联 | -关联线默认文字 | -|||
| fitPadding（v0.6.0+） | Number | 50 | @@ -328,12 +281,6 @@指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 | |||
| nodeDragPlaceholderMaxSize（v0.6.12+） | -Number | -20 | -拖拽元素时，指示元素新位置的块的最大高度 | -|||
| enableCreateHiddenInput（v0.6.13+）（v0.6.14+版本已去除该特性） | Boolean | true | @@ -346,12 +293,6 @@是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式 | |||
| richTextEditFakeInPlace（v0.6.13+） | -Boolean | -false | -设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果 | -|||
| customHandleClipboardText（v0.6.14+） | Function | null | @@ -370,12 +311,6 @@禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放 | |||
| resetCss（v0.6.16+） | -String | -* { margin: 0; padding: 0; box-sizing: border-box; } | -设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移 | -|||
| enableDblclickReset（v0.6.17+）（v0.8.0+已删除该属性） | Boolean | true（v0.7.0+改为false） | @@ -388,12 +323,6 @@是否在鼠标双击时回到根节点，也就是让根节点居中显示 | |||
| minExportImgCanvasScale（v0.7.0+） | -Number | -2 | -导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 | -|||
| hoverRectColor（v0.7.0+） | String | rgb(94, 200, 248) | @@ -418,36 +347,12 @@是否开启删除节点后自动激活节点相邻节点或父节点的功能 | |||
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | -Boolean | -true | -拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 | -|||
| fit（v0.7.1-fix.2+） | Boolean | false | 首次渲染时是否缩放至适应画布大小 | |||
| dragMultiNodeRectConfig（v0.7.2+） | -Object | -{ width: 40, height: 20, fill: '' } | -拖拽多个节点时随鼠标移动的示意矩形的样式配置，传递一个对象，字段含义分别为矩形的宽、高、填充色 | -|||
| dragPlaceholderRectFill（v0.7.2+） | -String | -- | 节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色 | -|||
| dragOpacityConfig（v0.7.2+） | -Object | -{ cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | -节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 | -|||
| tagsColorMap（v0.7.2+） | Object | {} | @@ -460,10 +365,10 @@节点协作编辑时的人员头像样式配置，字段含义分别为：头像大小、如果是文字头像，那么文字的大小 | |||
| associativeLineIsAlwaysAboveNode（v0.8.0+） | +onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | Boolean | -true | -关联线是否始终显示在节点上层，如果设为false，那么创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方 | +false | +协同编辑时，同一个节点不能同时被多人选中 |
| defaultGeneralizationText（v0.8.0+） | @@ -490,12 +395,6 @@是否禁止拖动画布 | |||||
| disableTouchZoom（v0.8.1+） | -Boolean | -false | -禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效 | -|||
| highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | @@ -526,72 +425,12 @@是否将思维导图限制在画布内。比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 | |||
| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+） | -Boolean | -true | -当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用 | -|||
| associativeLineInitPointsPosition（v0.9.5+） | -null / { from, to } | -{ from: '', to: '' } | -默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个选项来配置。from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算。from和to可选值：left、top、bottom、right | -|||
| enableAdjustAssociativeLinePoints（v0.9.5+） | -Boolean | -true | -是否允许调整关联线两个端点的位置 | -|||
| isOnlySearchCurrentRenderNodes（v0.9.8+） | -Boolean | -false | -是否仅搜索当前渲染的节点，被收起的节点不会被搜索到 | -|||
| onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | -Boolean | -false | -协同编辑时，同一个节点不能同时被多人选中 | -|||
| beforeCooperateUpdate（v0.9.8+） | -Function、null | -null | -协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 } | -|||
| beforeShortcutRun（v0.9.9+） | Function、null | null | 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） | |||
| rainbowLinesConfig（v0.9.9+） | -Object | -{ open: false, colorsList: [] } | -彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } | -|||
| addContentToHeader（v0.9.9+） | -Function、null | -null | -导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 | -|||
| addContentToFooter（v0.9.9+） | -Function、null | -null | -基本释义同addContentToHeader，在尾部添加自定义内容 | -|||
| demonstrateConfig（v0.9.11+） | -Object、null | -null | -演示插件Demonstrate的配置。不传则使用默认配置，可传递一个对象，如果只配置某个属性，可以只设置该属性，其他没有设置的同样会使用默认配置，完整配置请参考下方【演示插件配置】小节 | -|||
| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | @@ -611,7 +450,7 @@
基本的数据结构如下：
{
data: {
@@ -651,7 +490,214 @@
}
如果你要添加自定义的字段，可以添加到data、children同级，如果你要添加到data对象里，那么请使用_开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| name | +String | ++ | 图标分组的名称 | +
| type | +String | ++ | 图标分组的值 | +
| list | +Array | ++ | 分组下的图标列表，数组的每一项为一个对象，{ name: '', icon: '' }，name代表图标的名称，icon代表图标，可以是svg图标，比如<svg ...><path></path></svg>，也可以是图片url，或者是base64图标，比如data:image/png;base64,... |
+
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| exportPadding（已废除） | +Number | +20 | +导出图片时的内边距 | +
| exportPaddingX（v0.5.5+） | +Number | +10 | +导出png、svg、pdf时的图形水平内边距 | +
| exportPaddingY（v0.5.5+） | +Number | +10 | +导出png、svg、pdf时的图形垂直内边距 | +
| resetCss（v0.6.16+） | +String | +* { margin: 0; padding: 0; box-sizing: border-box; } | +设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移 | +
| minExportImgCanvasScale（v0.7.0+） | +Number | +2 | +导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 | +
| addContentToHeader（v0.9.9+） | +Function、null | +null | +导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 | +
| addContentToFooter（v0.9.9+） | +Function、null | +null | +基本释义同addContentToHeader，在尾部添加自定义内容 | +
addContentToHeader和addContentToFooter两个实例化选项可以用于在导出png、svg、pdf时在头部和尾部添加自定义的内容，默认为null，代表不配置，可以传递一个函数，函数可以返回null，代表不添加内容，如果要添加内容那么需要返回如下的结构：
{
+ el,// 要追加的自定义DOM节点，样式可内联
+ cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
+ height: 50// 返回的DOM节点的高度，必须传递
+}
+一个简单的示例：
+new MindMap({
+ addContentToFooter: () => {
+ const el = document.createElement('div')
+ el.className = 'footer'
+ el.innerHTML = '来自：simple-mind-map'
+ const cssText = `
+ .footer {
+ width: 100%;
+ height: 30px;
+ }
+ `
+ return {
+ el,
+ cssText,
+ height: 30
+ }
+ }
+})
+| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| selectTranslateStep | +Number | +3 | +多选节点时鼠标移动到边缘时的画布移动偏移量 | +
| selectTranslateLimit | +Number | +20 | +多选节点时鼠标移动距边缘多少距离时开始偏移 | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| enableFreeDrag（v0.2.4+） | +Boolean | +false | +是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用） | +
| nodeDragPlaceholderMaxSize（v0.6.12+）（v0.10.0+已废除） | +Number | +20 | +拖拽元素时，指示元素新位置的块的最大高度 | +
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | +Boolean | +true | +拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 | +
| dragMultiNodeRectConfig（v0.7.2+） | +Object | +{ width: 40, height: 20, fill: '' } | +拖拽多个节点时随鼠标移动的示意矩形的样式配置，传递一个对象，字段含义分别为矩形的宽、高、填充色 | +
| dragPlaceholderRectFill（v0.7.2+） | +String | ++ | 节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色 | +
| dragOpacityConfig（v0.7.2+） | +Object | +{ cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | +节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| watermarkConfig（v0.2.4+） | +Object | ++ | 水印配置，详细配置请参考下方表格【水印配置】 | +
| name | +defaultAssociativeLineText（v0.5.11+） | String | -- | 图标分组的名称 | +关联 | +关联线默认文字 | |
| type | -String | -- | 图标分组的值 | +associativeLineIsAlwaysAboveNode（v0.8.0+） | +Boolean | +true | +关联线是否始终显示在节点上层，如果设为false，那么创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方 |
| list | -Array | -- | 分组下的图标列表，数组的每一项为一个对象，{ name: '', icon: '' }，name代表图标的名称，icon代表图标，可以是svg图标，比如<svg ...><path></path></svg>，也可以是图片url，或者是base64图标，比如data:image/png;base64,... |
+associativeLineInitPointsPosition（v0.9.5+） | +null / { from, to } | +{ from: '', to: '' } | +默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个选项来配置。from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算。from和to可选值：left、top、bottom、right | +
| enableAdjustAssociativeLinePoints（v0.9.5+） | +Boolean | +true | +是否允许调整关联线两个端点的位置 |
addContentToHeader和addContentToFooter两个实例化选项可以用于在导出png、svg、pdf时在头部和尾部添加自定义的内容，默认为null，代表不配置，可以传递一个函数，函数可以返回null，代表不添加内容，如果要添加内容那么需要返回如下的结构：
{
- el,// 要追加的自定义DOM节点，样式可内联
- cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
- height: 50// 返回的DOM节点的高度，必须传递
-}
-一个简单的示例：
-new MindMap({
- addContentToFooter: () => {
- const el = document.createElement('div')
- el.className = 'footer'
- el.innerHTML = '来自：simple-mind-map'
- const cssText = `
- .footer {
- width: 100%;
- height: 30px;
- }
- `
- return {
- el,
- cssText,
- height: 30
- }
- }
-})
-| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| richTextEditFakeInPlace（v0.6.13+） | +Boolean | +false | +设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果 | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| disableTouchZoom（v0.8.1+） | +Boolean | +false | +禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效 | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+） | +Boolean | +true | +当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用 | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| isOnlySearchCurrentRenderNodes（v0.9.8+） | +Boolean | +false | +是否仅搜索当前渲染的节点，被收起的节点不会被搜索到 | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| beforeCooperateUpdate（v0.9.8+） | +Function、null | +null | +协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 } | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| rainbowLinesConfig（v0.9.9+） | +Object | +{ open: false, colorsList: [] } | +彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } | +
| 字段名称 | +类型 | +默认值 | +描述 | +
|---|---|---|---|
| demonstrateConfig（v0.9.11+） | +Object、null | +null | +演示插件Demonstrate的配置。不传则使用默认配置，可传递一个对象，如果只配置某个属性，可以只设置该属性，其他没有设置的同样会使用默认配置，完整配置请参考下方【演示插件配置】小节 | +