Changelog
+
0.6.6
+
New: 1.Support exporting to Xmind new version files. 2.Importing the new version of Xmind file supports importing images from nodes. 3.Add a vertical timeline structure.
+
Fix: 1.The TouchEvent plugin no longer sends click events, solving the problem of two windows opening when clicking on a hyperlink on the mobile end. 2.Fix the issue of dragging and moving a node to become a child node of another node, where the parent node of that node points to not being updated. 3.Fixed an issue where the node border style was not updated when dragging a second level node into a third level node. 4.Fix the issue where the mouse will not trigger the button display when moving into the unfolded or retracted button position, except for the structure growing to the right.
+
optimization: 1.The issue of excessive amplitude when optimizing the touchpad to scale the canvas. 2.The newly created node defaults to selecting all for easy deletion of default text.
+
0.6.5-fix.1
+
Fix: 1.Fix the issue of adjusting the image size incorrectly while zooming.
+
0.6.5
+
Fix: 1.Fix the issue of xmind file import errors. 2.Fixed a rare issue where line breaks occur when the width of the node text is decimal.
+
New: 1.The packaged library supports obtaining built-in constants, themes, and other data. 2.Supports configuring the zoom behavior corresponding to the direction of the mouse wheel. 3.Node images support dragging and resizing.
+
0.6.4-fix.1
+
New: 1.When zooming with the mouse wheel, the default zoom is centered around the current position of the mouse, which can be turned off by configuring.
+
Fix: 1.Fixed an issue where the default value of the zoom center point was not updated after changing the canvas size.
+
0.6.4
+
New: 1.The default is to scale at the center point of the canvas. 2.Optimize the scaling of both fingers on the mobile end, with the center position of the two fingers as the center point for scaling.
+
0.6.3
+
Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.
+
New: 1.Support custom node content.
0.6.2
Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.
0.6.1
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index b2298eca..aee2e43b 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -45,6 +45,7 @@ const mindMap = new MindMap({
| 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' } | Expand the color of the stow button | |
@@ -67,6 +68,9 @@ const mindMap = new MindMap({
| 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 | |
### Watermark config
@@ -231,6 +235,9 @@ Listen to an event. Event list:
| 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） |
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 487b7608..c824c0ef 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -176,6 +176,13 @@
|
+| 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 |
二级节点 |
@@ -329,6 +336,27 @@
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 |
+ |
+
Watermark config
@@ -632,6 +660,21 @@ poor performance and should be used sparingly.
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 |
|
diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md
index 3d2c83b0..1e5670af 100644
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -104,4 +104,15 @@ Gets `svg` data, an async method that returns an object:
node // svg node
str // svg string
}
-```
\ No newline at end of file
+```
+
+### xmind(name)
+
+> v0.6.6+, an additional ExportXMind plugin needs to be registered
+
+```js
+import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
+MindMap.usePlugin(ExportXMind)
+```
+
+Export as an `xmind` file type, asynchronous method, returns a `Promise` instance, and the returned data is the `data:url` data of a `zip` compressed package, which can be directly downloaded.
\ 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 a2d71e28..421cd5d3 100644
--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -85,6 +85,14 @@ MindMap.usePlugin(ExportPDF)
str
}
+xmind(name)
+
+v0.6.6+, an additional ExportXMind plugin needs to be registered
+
+import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
+MindMap.usePlugin(ExportXMind)
+
+Export as an xmind file type, asynchronous method, returns a Promise instance, and the returned data is the data:url data of a zip compressed package, which can be directly downloaded.
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md
index eff42176..b7160cbc 100644
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -136,4 +136,16 @@ Open source is not easy. If this project is helpful to you, you can invite the a
志斌
+
+
+
小土渣的宇宙
+
+
+
qp
+
+
+
ZXR
+
志斌
+
+
+
小土渣的宇宙
+
+
+
qp
+
+
+
ZXR
+
+
NodeImgAdjust plugin
+
+v0.6.5+
+
+
This plugin provides the function of dragging and adjusting the size of images within nodes.
+
Register
+
import MindMap from 'simple-mind-map'
+import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
+
+MindMap.usePlugin(NodeImgAdjust)
+
+
After registration and instantiation of MindMap, the instance can be obtained through mindMap.nodeImgAdjust.
+
+
<link rel="stylesheet" href="simpleMindMap.css">
<script scr="simpleMindMap.umd.min.js"></script>
-A global variable window.simpleMindMap will be created.
+A global variable window.simpleMindMap will be created. you can get MindMap constructor by window.simpleMindMap.default, for more detail info you can log window.simpleMindMap.
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
@@ -80,6 +80,7 @@ simple-mind-map. This uses the same packaging tool as the sample project web.cd web
npm run buildLibrary
+The packaging entry is simple-mind-map/full.js, which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.
The package.json file in the simple-mind-map library provides two export
fields:
{
diff --git a/web/src/pages/Doc/en/utils/index.md b/web/src/pages/Doc/en/utils/index.md
index dc7db33a..b6dd1037 100644
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -10,6 +10,20 @@ import {walk, ...} from 'simple-mind-map/src/utils'
### Methods
+#### resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
+
+> v0.6.5+
+
+`width`: The original width of the image
+
+`height`：The original height of the image
+
+`newWidth`：Width to zoom in to
+
+`newHeight`：Height to zoom in to
+
+Scale the image proportionally. Zoom to the specified size of `newWidth` and `newHeight` while maintaining the original aspect ratio of the image.
+
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
Depth-first traversal of a tree
@@ -139,6 +153,34 @@ Extract plain text content from an HTML string.
Convert `blob` data to `data:url` data.
+#### parseDataUrl(data)
+
+> v0.6.6+
+
+Parse `data:url` data, return:
+
+```js
+{
+ type,// file type of data
+ base64// base64 data
+}
+```
+
+#### getImageSize(src)
+
+> v0.6.6+
+
+- `src`: The url of img
+
+Get the size of image, return:
+
+```js
+{
+ width,
+ height
+}
+```
+
## Simulate CSS background in Canvas
Import:
diff --git a/web/src/pages/Doc/en/utils/index.vue b/web/src/pages/Doc/en/utils/index.vue
index be49919e..e09a2070 100644
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -6,6 +6,15 @@
import {walk, ...} from 'simple-mind-map/src/utils'
Methods
+resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
+
+v0.6.5+
+
+width: The original width of the image
+height：The original height of the image
+newWidth：Width to zoom in to
+newHeight：Height to zoom in to
+Scale the image proportionally. Zoom to the specified size of newWidth and newHeight while maintaining the original aspect ratio of the image.
walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
Depth-first traversal of a tree
root: the root node of the tree to be traversed
@@ -89,6 +98,29 @@ and copying the data of the data object, example:
v0.5.9+
Convert blob data to data:url data.
+parseDataUrl(data)
+
+v0.6.6+
+
+Parse data:url data, return:
+{
+ type,
+ base64
+}
+
+getImageSize(src)
+
+v0.6.6+
+
+
+Get the size of image, return:
+{
+ width,
+ height
+}
+
Simulate CSS background in Canvas
Import:
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'
diff --git a/web/src/pages/Doc/en/view/index.md b/web/src/pages/Doc/en/view/index.md
index f11130be..8384862d 100644
--- a/web/src/pages/Doc/en/view/index.md
+++ b/web/src/pages/Doc/en/view/index.md
@@ -35,11 +35,19 @@ Translate the `y` direction to a specific position
Revert to the default transformation
-### narrow()
+### narrow(cx, cy)
+
+- `cx`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+- `cy`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
Zoom out
-### enlarge()
+### enlarge(cx, cy)
+
+- `cx`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+- `cy`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
Zoom in
@@ -56,8 +64,12 @@ Get the current transform data, can be used for display
Dynamically set transform data, transform data can be obtained through the
getTransformData method"
-### setScale(scale)
+### setScale(scale, cx, cy)
> v0.2.17+
+- `cx`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+- `cy`:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
Setting Zoom
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/view/index.vue b/web/src/pages/Doc/en/view/index.vue
index 085f4f1e..8697288c 100644
--- a/web/src/pages/Doc/en/view/index.vue
+++ b/web/src/pages/Doc/en/view/index.vue
@@ -25,9 +25,25 @@ through mindMap.view
Translate the y direction to a specific position
reset()
Revert to the default transformation
-narrow()
+narrow(cx, cy)
+
+-
+
cx:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+-
+
cy:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+
Zoom out
-enlarge()
+enlarge(cx, cy)
+
+-
+
cx:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+-
+
cy:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+
Zoom in
getTransformData()
@@ -40,10 +56,18 @@ through mindMap.view
Dynamically set transform data, transform data can be obtained through the
getTransformData method"
-setScale(scale)
+setScale(scale, cx, cy)
v0.2.17+
+
+-
+
cx:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+-
+
cy:（v0.6.4+）Zoom to the specified position on the canvas, default to the center point of the canvas
+
+
Setting Zoom
diff --git a/web/src/pages/Doc/en/xmind/index.md b/web/src/pages/Doc/en/xmind/index.md
index 28556fb4..63181372 100644
--- a/web/src/pages/Doc/en/xmind/index.md
+++ b/web/src/pages/Doc/en/xmind/index.md
@@ -2,7 +2,7 @@
> v0.2.7+
-Provides methods for importing `XMind` files.
+Provides methods for importing and export `XMind` files.
## Import
@@ -31,6 +31,8 @@ Parsing the `.xmind` file and returning the parsed data. You can use
### xmind.transformXmind(content)
+> V0.6.6+version changes the method to asynchronous and returns a Promise instance
+
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
@@ -48,4 +50,14 @@ For data parsing of the `xmind8` version, because the `.xmind` file in this
version does not have a `content.json`, it corresponds to `content.xml`.
`content`: the contents of the `content.xml` file within the `.xmind` zip
-package
\ No newline at end of file
+package
+
+### transformToXmind(data, name)
+
+> v0.6.6+
+
+- `data`: `simple-mind-map` data, you can get it by `mindMap.getData()` method.
+
+- `name`: The file name to export.
+
+Convert the `simple mind map` data to an `xmind` file. This method is asynchronous and returns an instance of `Promise`. The returned data is a `blob` type `zip` compressed package data, which you can download as a file yourself.
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/xmind/index.vue b/web/src/pages/Doc/en/xmind/index.vue
index c8bc7f05..713a5782 100644
--- a/web/src/pages/Doc/en/xmind/index.vue
+++ b/web/src/pages/Doc/en/xmind/index.vue
@@ -4,7 +4,7 @@
v0.2.7+
-Provides methods for importing XMind files.
+Provides methods for importing and export XMind files.
Import
import xmind from 'simple-mind-map/src/parse/xmind.js'
@@ -19,6 +19,9 @@
mindMap.setData(data) to render the returned data to the canvas.
file: File object
xmind.transformXmind(content)
+
+V0.6.6+version changes the method to asynchronous and returns a Promise instance
+
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
@@ -34,6 +37,19 @@ package
version does not have a content.json, it corresponds to content.xml.
content: the contents of the content.xml file within the .xmind zip
package
+transformToXmind(data, name)
+
+v0.6.6+
+
+
+-
+
data: simple-mind-map data, you can get it by mindMap.getData() method.
+
+-
+
name: The file name to export.
+
+
+Convert the simple mind map data to an xmind file. This method is asynchronous and returns an instance of Promise. The returned data is a blob type zip compressed package data, which you can download as a file yourself.
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index d024d5e5..1f08e498 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -26,6 +26,7 @@ export default [
{ path: 'course17', title: '导入和导出' },
{ path: 'course18', title: '如何持久化数据' },
{ path: 'course19', title: '插入和扩展节点图标' },
+ { path: 'course20', title: '如何自定义节点内容' },
{ path: 'doExport', title: 'Export 插件' },
{ path: 'drag', title: 'Drag插件' },
{ path: 'introduction', title: '简介' },
@@ -45,7 +46,8 @@ export default [
{ path: 'xmind', title: 'XMind解析' },
{ path: 'deploy', title: '部署' },
{ path: 'client', title: '客户端' },
- { path: 'touchEvent', title: 'TouchEvent插件' }
+ { path: 'touchEvent', title: 'TouchEvent插件' },
+ { path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' }
]
},
{
@@ -74,7 +76,8 @@ export default [
{ path: 'watermark', title: 'Watermark plugin' },
{ path: 'xmind', title: 'XMind parse' },
{ path: 'deploy', title: 'Deploy' },
- { path: 'touchEvent', title: 'TouchEvent plugin' }
+ { path: 'touchEvent', title: 'TouchEvent plugin' },
+ { path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' }
]
}
]
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index 40ce409c..1318fbf1 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,39 @@
# Changelog
+## 0.6.6
+
+新增：1.支持导出为Xmind新版文件。2.导入Xmind新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。
+
+修复：1.TouchEvent插件不再派发click事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。
+
+优化：1.优化触控板缩放画布时幅度过大的问题。2.刚创建的节点默认全选方便删除默认文本。
+
+## 0.6.5-fix.1
+
+修复：1.修复在缩放情况下调整图片大小不正确的问题。
+
+## 0.6.5
+
+修复：1.修复xmind文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。
+
+新增：1.打包后的库支持获取内置常量、主题等数据。 2.支持配置鼠标滚轮方向对应的缩放行为。 3.节点图片支持拖拽调整大小。
+
+## 0.6.4-fix.1
+
+新增：1.鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放，可以通过配置关闭该特性。
+
+修复：1.修复改变了画布大小后缩放中心点默认值不随之更新的问题。
+
+## 0.6.4
+
+新增：1.默认以画布中心点进行缩放。 2.优化移动端双指缩放，以双指中心位置为中心点进行缩放。
+
+## 0.6.3
+
+修复：1.修复概要节点会响应插入节点快捷键的问题。
+
+新增：1.支持自定义节点内容。
+
## 0.6.2
修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 8ae12e9c..3e43e1d5 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,23 @@
Changelog
+
0.6.6
+
新增：1.支持导出为Xmind新版文件。2.导入Xmind新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。
+
修复：1.TouchEvent插件不再派发click事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。
+
优化：1.优化触控板缩放画布时幅度过大的问题。2.刚创建的节点默认全选方便删除默认文本。
+
0.6.5-fix.1
+
修复：1.修复在缩放情况下调整图片大小不正确的问题。
+
0.6.5
+
修复：1.修复xmind文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。
+
新增：1.打包后的库支持获取内置常量、主题等数据。 2.支持配置鼠标滚轮方向对应的缩放行为。 3.节点图片支持拖拽调整大小。
+
0.6.4-fix.1
+
新增：1.鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放，可以通过配置关闭该特性。
+
修复：1.修复改变了画布大小后缩放中心点默认值不随之更新的问题。
+
0.6.4
+
新增：1.默认以画布中心点进行缩放。 2.优化移动端双指缩放，以双指中心位置为中心点进行缩放。
+
0.6.3
+
修复：1.修复概要节点会响应插入节点快捷键的问题。
+
新增：1.支持自定义节点内容。
0.6.2
修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
0.6.1
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index b84b65b9..8d9e7b1b 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -45,6 +45,7 @@ const mindMap = new MindMap({
| customHandleMousewheel（v0.4.3+） | Function | null | 自定义鼠标滚轮事件处理，可以传一个函数，回调参数为事件对象 | |
| mousewheelAction（v0.4.3+） | String | zoom | 鼠标滚轮的行为，`zoom`（放大缩小）、`move`（上下移动）。如果`customHandleMousewheel`传了自定义函数，这个属性不生效 | |
| mousewheelMoveStep（v0.4.3+） | Number | 100 | 当`mousewheelAction`设为`move`时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位`px` | |
+| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false | 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来 | |
| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | 默认插入的二级节点的文字 | |
| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | 默认插入的二级以下节点的文字 | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色 | |
@@ -67,6 +68,9 @@ const mindMap = new MindMap({
| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | 是否开启按住ctrl键多选节点的功能 | |
| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | 设置为左键多选节点，右键拖动画布 | |
| beforeTextEdit（v0.6.0+） | Function/null | null | 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例 | |
+| isUseCustomNodeContent（v0.6.3+） | Boolean | false | 是否自定义节点内容 | |
+| customCreateNodeContent（v0.6.3+） | Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 | |
+| mouseScaleCenterUseMousePosition（v0.6.4-fix.1+） | Boolean | true | 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点 | |
### 水印配置
@@ -226,6 +230,9 @@ mindMap.setTheme('主题名称')
| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
| scale | 放大缩小事件 | scale（缩放比例） |
| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
+| node_img_mouseenter（v0.6.5+） | 节点内图片的鼠标移入事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
+| node_img_mouseleave（v0.6.5+） | 节点内图片的鼠标移出事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
+| node_img_mousemove（v0.6.5+） | 节点内图片的鼠标移动事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
| rich_text_selection_change（v0.4.0+） | 当注册了`RichText`插件时可用。当节点编辑时，文本选区发生改变时触发 | hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息） |
| transforming-dom-to-images（v0.4.0+） | 当注册了`RichText`插件时可用。当`svg`中存在`DOM`节点时，导出为图片时会将`DOM`节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点 | index（当前转换到的节点索引）、len（一共需要转换的节点数量） |
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 21986e0e..47cd694f 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -176,6 +176,13 @@
|
+| mousewheelZoomActionReverse（v0.6.5+） |
+Boolean |
+false |
+当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来 |
+ |
+
+
| defaultInsertSecondLevelNodeText（v0.4.7+） |
String |
二级节点 |
@@ -329,6 +336,27 @@
节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例 |
|
+
+| isUseCustomNodeContent（v0.6.3+） |
+Boolean |
+false |
+是否自定义节点内容 |
+ |
+
+
+| customCreateNodeContent（v0.6.3+） |
+Function/null |
+null |
+如果isUseCustomNodeContent设为true，那么需要使用该选项传入一个方法，接收节点实例node为参数（如果要获取该节点的数据，可以通过node.nodeData.data），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回null即可 |
+ |
+
+
+| mouseScaleCenterUseMousePosition（v0.6.4-fix.1+） |
+Boolean |
+true |
+鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点 |
+ |
+
水印配置
@@ -625,6 +653,21 @@ mindMap.setTheme(
'主题名称')
this（节点实例）、e（事件对象） |
+| node_img_mouseenter（v0.6.5+） |
+节点内图片的鼠标移入事件 |
+this（节点实例）、imgNode（图片节点）、e（事件对象） |
+
+
+| node_img_mouseleave（v0.6.5+） |
+节点内图片的鼠标移出事件 |
+this（节点实例）、imgNode（图片节点）、e（事件对象） |
+
+
+| node_img_mousemove（v0.6.5+） |
+节点内图片的鼠标移动事件 |
+this（节点实例）、imgNode（图片节点）、e（事件对象） |
+
+
| node_tree_render_end（v0.2.16+） |
节点树渲染完毕事件 |
|
diff --git a/web/src/pages/Doc/zh/course11/index.md b/web/src/pages/Doc/zh/course11/index.md
index 462f19de..c96dea81 100644
--- a/web/src/pages/Doc/zh/course11/index.md
+++ b/web/src/pages/Doc/zh/course11/index.md
@@ -1,6 +1,6 @@
# 结构
-`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）。
+`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。
可以在实例化`simple-mind-map`时通过选项指定使用的结构：
diff --git a/web/src/pages/Doc/zh/course11/index.vue b/web/src/pages/Doc/zh/course11/index.vue
index 94b1db73..a7705939 100644
--- a/web/src/pages/Doc/zh/course11/index.vue
+++ b/web/src/pages/Doc/zh/course11/index.vue
@@ -1,7 +1,7 @@
结构
-
simple-mind-map目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）。
+
simple-mind-map目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。
可以在实例化simple-mind-map时通过选项指定使用的结构：
new MindMap({
diff --git a/web/src/pages/Doc/zh/course17/index.md b/web/src/pages/Doc/zh/course17/index.md
index ffbfba7e..4a1a881f 100644
--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -4,7 +4,7 @@
> 要使用导出功能需要使用导出插件。
-目前支持导出为`.smm`、`.json`、`.svg`、`.png`、`.pdf`、`.md`文件。
+目前支持导出为`.smm`、`.json`、`.svg`、`.png`、`.pdf`、`.md`、`.xmind`文件。
`.smm`是`simple-mind-map`自己定义的一种文件，其实就是`json`文件，换了一个扩展名而已。
@@ -94,6 +94,18 @@ mindMap.export(
mindMap.export('md', true, '文件名')
```
+### 导出为xmind
+
+> v0.6.6+
+
+> 需要注册`ExportXMind`插件
+
+导出为`Xmind`新版文件。
+
+```js
+mindMap.export('xmind', '文件名')
+```
+
## 导入
目前支持从`.smm`、`.json`、`.xmind`、`.xlsx`、`.md`格式的文件导入。
diff --git a/web/src/pages/Doc/zh/course17/index.vue b/web/src/pages/Doc/zh/course17/index.vue
index 92520b32..90eef0f0 100644
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -5,7 +5,7 @@
要使用导出功能需要使用导出插件。
-目前支持导出为.smm、.json、.svg、.png、.pdf、.md文件。
+目前支持导出为.smm、.json、.svg、.png、.pdf、.md、.xmind文件。
.smm是simple-mind-map自己定义的一种文件，其实就是json文件，换了一个扩展名而已。
导出直接调用export方法即可：
mindMap.export(type, isDownload, fileName, ...)
@@ -62,6 +62,16 @@ mindMap.export('pdf', mindMap.export('md', true, '文件名')
+导出为xmind
+
+v0.6.6+
+
+
+需要注册ExportXMind插件
+
+导出为Xmind新版文件。
+mindMap.export('xmind', '文件名')
+
导入
目前支持从.smm、.json、.xmind、.xlsx、.md格式的文件导入。
导入smm、json
diff --git a/web/src/pages/Doc/zh/course20/index.md b/web/src/pages/Doc/zh/course20/index.md
new file mode 100644
index 00000000..19851e13
--- /dev/null
+++ b/web/src/pages/Doc/zh/course20/index.md
@@ -0,0 +1,119 @@
+# 如何自定义节点内容
+
+> 该特性v0.6.3+版本支持
+
+如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入以下选项：
+
+```js
+new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: (node) => {
+ // return你的自定义DOM节点
+ }
+})
+```
+
+`customCreateNodeContent`方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
+
+```js
+node.nodeData.data
+```
+
+其他节点实例属性你可以自行打印出来看看。
+
+`customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
+
+返回的`DOM`节点的宽高需要是确定的，如果是动态的那么会导致宽高获取错误，最终导致节点定位错误和发生重叠等问题。
+
+如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
+
+## 示例1：渲染自定义DOM节点
+
+```js
+{
+ customCreateNodeContent: (node) => {
+ let div = document.createElement('div')
+ div.className = 'xxx'
+ div.style.cssText = `xxx`
+ div.innerHTML = `
+ 我是自定义节点
+ ${ node.nodeData.text }
+ `
+ return div
+ }
+}
+```
+
+## 示例2：渲染Vue2组件
+
+如果想要使用一个相对简单的`Vue`组件，那么可以通过如下方式：
+
+```js
+import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ let Comp = Vue.extend(CustomNodeContent)
+ let comp = new Comp({
+ // props
+ propsData: {
+ html: node.nodeData.data.text
+ }
+ })
+ comp.$mount(el)
+ return comp.$el
+ }
+}
+```
+
+如果你的`Vue`组件比较复杂，里面用到了`vueRouter`、`vuex`、`i18n`等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
+
+```js
+import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+import router from './router'
+import store from './store'
+import i18n from './i18n'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ let Comp = Vue.extend(CustomNodeContent)
+ let comp = new Comp({
+ // props
+ propsData: {
+ html: node.nodeData.data.text
+ },
+ router,
+ store,
+ i18n
+ })
+ comp.$mount(el)
+ return comp.$el
+ }
+}
+```
+
+## 示例3：渲染Vue3组件
+
+```js
+import { createApp } from "vue"
+import CustomNodeContent from './CustomNodeContent.vue'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ const app = createApp(CustomNodeContent, {// props
+ html: node.nodeData.data.text
+ })
+ app.mount(el)
+ return el
+ }
+}
+```
+
+## 示例4：渲染react组件
+
+如果你成功渲染了`react`组件，欢迎[提交](https://github.com/wanglin2/mind-map/issues/new)示例代码给我~
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course20/index.vue b/web/src/pages/Doc/zh/course20/index.vue
new file mode 100644
index 00000000..e57bc24a
--- /dev/null
+++ b/web/src/pages/Doc/zh/course20/index.vue
@@ -0,0 +1,110 @@
+
+
+
如何自定义节点内容
+
+该特性v0.6.3+版本支持
+
+
如果你想自定义节点的内容，那么可以在实例化simple-mind-map时传入以下选项：
+
new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: (node) => {
+
+ }
+})
+
+
customCreateNodeContent方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
+
node.nodeData.data
+
+
其他节点实例属性你可以自行打印出来看看。
+
customCreateNodeContent方法需要返回DOM节点，如果某个节点你不想自定义，那么可以返回null，那么还是会走内置的节点渲染逻辑。
+
返回的DOM节点的宽高需要是确定的，如果是动态的那么会导致宽高获取错误，最终导致节点定位错误和发生重叠等问题。
+
如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
+
示例1：渲染自定义DOM节点
+
{
+ customCreateNodeContent: (node) => {
+ let div = document.createElement('div')
+ div.className = 'xxx'
+ div.style.cssText = `xxx`
+ div.innerHTML = `
+ <h1>我是自定义节点</h1>
+ ${ node.nodeData.text }
+ `
+ return div
+ }
+}
+
+
示例2：渲染Vue2组件
+
如果想要使用一个相对简单的Vue组件，那么可以通过如下方式：
+
import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ let Comp = Vue.extend(CustomNodeContent)
+ let comp = new Comp({
+
+ propsData: {
+ html: node.nodeData.data.text
+ }
+ })
+ comp.$mount(el)
+ return comp.$el
+ }
+}
+
+
如果你的Vue组件比较复杂，里面用到了vueRouter、vuex、i18n等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
+
import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+import router from './router'
+import store from './store'
+import i18n from './i18n'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ let Comp = Vue.extend(CustomNodeContent)
+ let comp = new Comp({
+
+ propsData: {
+ html: node.nodeData.data.text
+ },
+ router,
+ store,
+ i18n
+ })
+ comp.$mount(el)
+ return comp.$el
+ }
+}
+
+
示例3：渲染Vue3组件
+
import { createApp } from "vue"
+import CustomNodeContent from './CustomNodeContent.vue'
+
+{
+ customCreateNodeContent: (node) => {
+ let el = document.createElement('div')
+ const app = createApp(CustomNodeContent, {
+ html: node.nodeData.data.text
+ })
+ app.mount(el)
+ return el
+ }
+}
+
+
示例4：渲染react组件
+
如果你成功渲染了react组件，欢迎提交示例代码给我~
+
+
+
xmind(name)
+
+v0.6.6+，需要额外注册一个ExportXMind插件
+
+
import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
+MindMap.usePlugin(ExportXMind)
+
+
导出为xmind文件类型，异步方法，返回一个Promise实例，返回的数据为一个zip压缩包的data:url数据，可以直接下载。
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index ea1a5f09..1a523a66 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -125,4 +125,16 @@
志斌
+
+
+
小土渣的宇宙
+
+
+
qp
+
+
+
ZXR
+
特性
仓库目录介绍
1.simple-mind-map
@@ -28,11 +28,11 @@
2.web
使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：
提供文档页面服务。
3.dist
@@ -84,6 +84,18 @@
志斌
+
+
+
小土渣的宇宙
+
+
+
qp
+
+
+
ZXR
+
+
NodeImgAdjust插件
+
+v0.6.5+
+
+
该插件提供拖拽调整节点内图片大小的功能。
+
注册
+
import MindMap from 'simple-mind-map'
+import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
+
+MindMap.usePlugin(NodeImgAdjust)
+
+
注册完且实例化MindMap后可通过mindMap.nodeImgAdjust获取到该实例。
+
+
<link rel="stylesheet" href="simpleMindMap.css">
<script scr="simpleMindMap.umd.min.js"></script>
-会创建一个全局变量window.simpleMindMap。
+会创建一个全局变量window.simpleMindMap，可以通过window.simpleMindMap.default获取到MindMap构造函数，详细信息可以把window.simpleMindMap打印出来看一下。
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
（v0.5.4+）如果你想直接在浏览器端通过ES模块的方式来使用，你可以在/simple-mind-map/dist/目录中找到simpleMindMap.esm.js和simpleMindMap.esm.css文件。
开发
@@ -73,6 +73,7 @@ npm run serve
cd web
npm run buildLibrary
+打包入口为simple-mind-map/full.js，默认会引入所有插件，如果你不需要所有插件的话，那么可以修改该文件，只引入你需要的插件，这样可以减少打包后的文件体积。
simple-mind-map库的package.json文件提供了两个导出字段：
{
"module": "index.js",
diff --git a/web/src/pages/Doc/zh/utils/index.md b/web/src/pages/Doc/zh/utils/index.md
index 308acda2..6266c589 100644
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -10,6 +10,20 @@ import {walk, ...} from 'simple-mind-map/src/utils'
### 方法
+#### resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
+
+> v0.6.5+
+
+`width`: 图片原始的宽度
+
+`height`：图片原始的高度
+
+`newWidth`：要缩放到的宽度
+
+`newHeight`：要缩放到的高度
+
+按比例缩放图片。在保持图片原始宽高比的情况下缩放到指定的`newWidth`、`newHeight`大小。
+
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
深度优先遍历树
@@ -134,6 +148,34 @@ copyNodeTree({}, node)
将`blob`数据转成`data:url`数据。
+#### parseDataUrl(data)
+
+> v0.6.6+
+
+解析`data:url`数据，返回：
+
+```js
+{
+ type,// 数据的文件类型
+ base64// base64数据
+}
+```
+
+#### getImageSize(src)
+
+> v0.6.6+
+
+- `src`：图片的url
+
+获取图片的大小。返回：
+
+```js
+{
+ width,
+ height
+}
+```
+
## 在canvas中模拟css的背景属性
引入：
diff --git a/web/src/pages/Doc/zh/utils/index.vue b/web/src/pages/Doc/zh/utils/index.vue
index 85446ffd..5c2b8244 100644
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -6,6 +6,15 @@
import {walk, ...} from 'simple-mind-map/src/utils'
方法
+resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
+
+v0.6.5+
+
+width: 图片原始的宽度
+height：图片原始的高度
+newWidth：要缩放到的宽度
+newHeight：要缩放到的高度
+按比例缩放图片。在保持图片原始宽高比的情况下缩放到指定的newWidth、newHeight大小。
walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
深度优先遍历树
root：要遍历的树的根节点
@@ -84,6 +93,29 @@
v0.5.9+
将blob数据转成data:url数据。
+parseDataUrl(data)
+
+v0.6.6+
+
+解析data:url数据，返回：
+{
+ type,
+ base64
+}
+
+getImageSize(src)
+
+v0.6.6+
+
+
+获取图片的大小。返回：
+{
+ width,
+ height
+}
+
在canvas中模拟css的背景属性
引入：
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'
diff --git a/web/src/pages/Doc/zh/view/index.md b/web/src/pages/Doc/zh/view/index.md
index 218b318c..d583bfdf 100644
--- a/web/src/pages/Doc/zh/view/index.md
+++ b/web/src/pages/Doc/zh/view/index.md
@@ -34,11 +34,19 @@
恢复到默认的变换
-### narrow()
+### narrow(cx, cy)
+
+- `cx`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+- `cy`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
缩小
-### enlarge()
+### enlarge(cx, cy)
+
+- `cx`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+- `cy`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
放大
@@ -54,8 +62,13 @@
动态设置变换数据，可以通过getTransformData方法获取变换数据
-### setScale(scale)
+### setScale(scale, cx, cy)
> v0.2.17+
-设置缩放
\ No newline at end of file
+- `cx`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+- `cy`：（v0.6.4+）以画布指定位置进行缩放，默认为画布中心点
+
+设置缩放
+
diff --git a/web/src/pages/Doc/zh/view/index.vue b/web/src/pages/Doc/zh/view/index.vue
index d994036a..00eff542 100644
--- a/web/src/pages/Doc/zh/view/index.vue
+++ b/web/src/pages/Doc/zh/view/index.vue
@@ -24,9 +24,25 @@
平移y方向到指定位置
reset()
恢复到默认的变换
-narrow()
+narrow(cx, cy)
+
缩小
-enlarge()
+enlarge(cx, cy)
+
放大
getTransformData()
@@ -38,10 +54,18 @@
v0.1.1+
动态设置变换数据，可以通过getTransformData方法获取变换数据
-setScale(scale)
+setScale(scale, cx, cy)
v0.2.17+
+
设置缩放
diff --git a/web/src/pages/Doc/zh/xmind/index.md b/web/src/pages/Doc/zh/xmind/index.md
index 3cddc765..10f25302 100644
--- a/web/src/pages/Doc/zh/xmind/index.md
+++ b/web/src/pages/Doc/zh/xmind/index.md
@@ -2,7 +2,7 @@
> v0.2.7+
-提供导入`XMind`文件的方法。
+提供导入和导出`XMind`文件的方法。
## 引入
@@ -30,6 +30,8 @@ simpleMindMap.xmind
### xmind.transformXmind(content)
+> v0.6.6+版本该方法改为异步方法，返回一个Promise实例
+
转换`xmind`数据，`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，可以使用`mindMap.setData(data)`来将返回的数据渲染到画布上
`content`：`.xmind`压缩包内的`content.json`文件内容
@@ -40,4 +42,14 @@ simpleMindMap.xmind
针对`xmind8`版本的数据解析，因为该版本的`.xmind`文件内没有`content.json`，对应的是`content.xml`。
-`content`：`.xmind`压缩包内的`content.xml`文件内容
\ No newline at end of file
+`content`：`.xmind`压缩包内的`content.xml`文件内容
+
+### transformToXmind(data, name)
+
+> v0.6.6+
+
+- `data`：`simple-mind-map`思维导图数据，可以通过`mindMap.getData()`方法获取。
+
+- `name`：要导出的文件名。
+
+将`simple-mind-map`数据转为`xmind`文件。该方法为异步方法，返回一个`Promise`实例，返回的数据是一个`blob`类型的`zip`压缩包数据，你可以自行下载为文件。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/xmind/index.vue b/web/src/pages/Doc/zh/xmind/index.vue
index 31bba7a9..d5b58a3a 100644
--- a/web/src/pages/Doc/zh/xmind/index.vue
+++ b/web/src/pages/Doc/zh/xmind/index.vue
@@ -4,7 +4,7 @@
v0.2.7+
-提供导入XMind文件的方法。
+提供导入和导出XMind文件的方法。
引入
import xmind from 'simple-mind-map/src/parse/xmind.js'
@@ -18,6 +18,9 @@
解析.xmind文件，返回解析后的数据，可以使用mindMap.setData(data)来将返回的数据渲染到画布上
file：File对象
xmind.transformXmind(content)
+
+v0.6.6+版本该方法改为异步方法，返回一个Promise实例
+
转换xmind数据，.xmind文件本质上是一个压缩包，改成zip后缀可以解压缩，里面存在一个content.json文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，可以使用mindMap.setData(data)来将返回的数据渲染到画布上
content：.xmind压缩包内的content.json文件内容
xmind.transformOldXmind(content)
@@ -26,6 +29,19 @@
针对xmind8版本的数据解析，因为该版本的.xmind文件内没有content.json，对应的是content.xml。
content：.xmind压缩包内的content.xml文件内容
+transformToXmind(data, name)
+
+v0.6.6+
+
+
+将simple-mind-map数据转为xmind文件。该方法为异步方法，返回一个Promise实例，返回的数据是一个blob类型的zip压缩包数据，你可以自行下载为文件。
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index c373e69d..0c1e8636 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -567,6 +567,7 @@
{{ $t('baseStyle.otherConfig') }}
+
{{ $t('baseStyle.enableFreeDrag') }}
+
{{ $t('baseStyle.isEnableNodeRichText') }}
+
{{ $t('baseStyle.mousewheelAction') }}
@@ -600,6 +603,26 @@
+
+
+
+ {{ $t('baseStyle.mousewheelZoomActionReverse') }}
+
+
+
+
+
+
+
{{ title }}
+
+
点击我会变色
+
+如果已过期，可以微信添加`wanglinguanfang`拉你入群。
+
# 请作者喝杯咖啡
> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
diff --git a/index.html b/index.html
index ffed24e8..728adb78 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-