Major updates: Upgrade the interaction effect when dragging nodes;
+Fix:
+++1.Fix the issue where read-only mode can still activate nodes by Ctrl+clicking on them;
+2.Fix the issue of page scaling when setting up scaling in some mobile browsers;
+3.Fix the issue of selecting text when dragging the canvas and adjusting images;
+4.Fix the issue of multiple line breaks when copying node text with line breaks and pasting it;
+5.Fix the issue of displaying blank space when exporting images with custom content before and after nodes;
+
New:
+++1.Add a new rendering start event node.treeRender_start;
+2.Support displaying watermarks below nodes;
+3.Importing xmind files with multiple canvases supports selecting the specified canvas for import;
+4.Canceling the call to the defenseXSS function has a significant impact on performance; The defenseXSS method is provided as a tool method;
+5.Remove the logic of removing nodes with ql cursor class names from rich text content, and fix the issue of ineffective addition of empty lines when text breaks;
+6.Remove the logic of delayed node editing when inserting new nodes;
+7.Support direct editing of mathematical formulas in rich text editing boxes;
+8.Add demonstration plugins to the packaged file;
+
Demo:
++1.支持配置水印显示在节点下方;
+2.导入存在多个画布的xmind文件支持选择指定的画布进行导入;
+3.优化富文本工具条下拉选项列表高度问题;
+4.新建和打开按钮增加导出的提示,防止内容丢失;
+5.快捷键提示支持区分windows和mac;
+
Fix:
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index ed628779..181f1fc1 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -209,8 +209,9 @@ new MindMap({ | 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 | | +| dragMultiNodeRectConfig(v0.7.2+) | Object | { width: 40, height: 20, fill: 'rgb(94, 200, 248)' } | 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 | rgb(94, 200, 248) | The filling color of the schematic rectangle for the new position when dragging nodes. | | +| dragPlaceholderLineConfig(v0.10.0+) | Object | { color: 'rgb(94, 200, 248)', width: 2 } | Style configuration of schematic lines for new positions when dragging nodes | | | 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 | | ### 5.Watermark plugin @@ -229,6 +230,7 @@ new MindMap({ | angle | Number | 30 | Tilt angle of watermark, range: [0, 90] | | textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | Watermark text style | | onlyExport(v0.9.2+) | Boolean | false | Is only add watermarks during export | +| belowNode(v0.10.0+) | Boolean | false | Is the watermark displayed below the node | ### 6.AssociativeLine plugin @@ -245,6 +247,9 @@ new MindMap({ | 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 | | +| enableEditFormulaInRichTextEdit(v0.10.0+) | Boolean | true | | Whether to enable direct editing of mathematical formulas in rich text editing boxes | +| transformRichTextOnEnterEdit(v0.10.0+) | null、Function | null | To convert rich text content, you can pass a function that will be called when entering rich text editing. The function receives the rich text content that is about to be edited and needs to return the processed rich text content | | +| beforeHideRichTextEdit(v0.10.0+) | null、Function | null | You can pass a function that will be executed before the end of rich text editing. The function receives a richText instance, so you can update the kill document data at this time | | ### 8.TouchEvent plugin @@ -548,7 +553,8 @@ Listen to an event. Event list: | 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 | | +| node_tree_render_end(v0.2.16+) | Node tree render end event | | +| node_tree_render_start(v0.10.0+) | Node tree start rendering 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) | diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 201bd207..d572773e 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -745,15 +745,22 @@dragMultiNodeRectConfig(v0.7.2+) Object -{ width: 40, height: 20, fill: '' } +{ width: 40, height: 20, fill: 'rgb(94, 200, 248)' } 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 +rgb(94, 200, 248) +The filling color of the schematic rectangle for the new position when dragging nodes. - 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 ++ dragPlaceholderLineConfig(v0.10.0+) +Object +{ color: 'rgb(94, 200, 248)', width: 2 } +Style configuration of schematic lines for new positions when dragging nodes @@ -833,6 +840,12 @@ +false Is only add watermarks during export + belowNode(v0.10.0+) +Boolean +false +Is the watermark displayed below the node +6.AssociativeLine plugin
@@ -903,6 +916,27 @@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 + + +enableEditFormulaInRichTextEdit(v0.10.0+) +Boolean +true ++ Whether to enable direct editing of mathematical formulas in rich text editing boxes ++ +transformRichTextOnEnterEdit(v0.10.0+) +null、Function +null +To convert rich text content, you can pass a function that will be called when entering rich text editing. The function receives the rich text content that is about to be edited and needs to return the processed rich text content ++ + beforeHideRichTextEdit(v0.10.0+) +null、Function +null +You can pass a function that will be executed before the end of rich text editing. The function receives a richText instance, so you can update the kill document data at this time ++ 8.TouchEvent plugin
@@ -1408,6 +1442,11 @@ poor performance and should be used sparingly.+ +node_tree_render_start(v0.10.0+) +Node tree start rendering event ++ + rich_text_selection_change(v0.4.0+) Available when the RichTextplugin is registered. Triggered when the text selection area changes when the node is editedhasRange(Whether there is a selection)、rectInfo(Size and location information of the selected area)、formatInfo(Text formatting information of the selected area) diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md index 11017448..0153fc8c 100644 --- a/web/src/pages/Doc/en/introduction/index.md +++ b/web/src/pages/Doc/en/introduction/index.md @@ -384,7 +384,7 @@ Open source is not easy. If this project is helpful to you, you can invite the a-
孟照星
+Alex
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue index 501f32e8..968717a0 100644 --- a/web/src/pages/Doc/en/introduction/index.vue +++ b/web/src/pages/Doc/en/introduction/index.vue @@ -8,18 +8,18 @@
Features
- - - - - - - -
- - - - - + + + + + + + +
json、png、svg、markdown、xmind、txt, support import fromjson、xmind、markdown- + + + +
json、png、svg、markdown、xmind、txt, support import fromjson、xmind、markdownThe official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:
@@ -39,16 +39,16 @@ frameworks such as Vue and React, or without a framework.This is an online mind map built using the
simple-mind-maplibrary and based onVue2.xandElementUI. Features include:-
@@ -338,7 +338,7 @@ full screen, support mini map- +
- images, icons, hyperlinks, notes, tags, and summaries
-- +
- outline, theme selection, and structure selection
-- +
- storage by default, but it also supports creating, opening, and editing local files on the computer directly
-- +
- and organizing layout
-- +
- between edit and read-only modes, zooming in and out, and switching to full screen, support mini map
-
孟照星
+Alex
diff --git a/web/src/pages/Doc/en/utils/index.md b/web/src/pages/Doc/en/utils/index.md index c45ea2b6..3f629c59 100644 --- a/web/src/pages/Doc/en/utils/index.md +++ b/web/src/pages/Doc/en/utils/index.md @@ -506,6 +506,16 @@ Put the specified DOM element into full screen mode. Exit full screen mode. +#### defenseXSS(htmlStr) + +> v0.10.0+ + +- `htmlStr`:HTML strings that need to be filtered + +Return:Filtered HTML string + +Defend against XSS attacks, filter malicious HTML tags and attributes. You can recursively traverse the tree data before passing the node data to SimpleMindMap, using this method to process the rich text content of nodes and avoid XSS attacks. + ## 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 bbcee800..91443fdb 100644 --- a/web/src/pages/Doc/en/utils/index.vue +++ b/web/src/pages/Doc/en/utils/index.vue @@ -424,6 +424,15 @@ and copying the
dataof the data object, example:v0.9.11+
Exit full screen mode.
+defenseXSS(htmlStr)
+++v0.10.0+
++
+- +
htmlStr:HTML strings that need to be filteredReturn:Filtered HTML string
+Defend against XSS attacks, filter malicious HTML tags and attributes. You can recursively traverse the tree data before passing the node data to SimpleMindMap, using this method to process the rich text content of nodes and avoid XSS attacks.
Simulate CSS background in Canvas
Import:
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas' diff --git a/web/src/pages/Doc/en/xmind/index.md b/web/src/pages/Doc/en/xmind/index.md index 63181372..f17b0160 100644 --- a/web/src/pages/Doc/en/xmind/index.md +++ b/web/src/pages/Doc/en/xmind/index.md @@ -22,13 +22,15 @@ simpleMindMap.xmind ## Methods -### xmind.parseXmindFile(file) +### xmind.parseXmindFile(file, handleMultiCanvas) Parsing the `.xmind` file and returning the parsed data. You can use `mindMap.setData(data)` to render the returned data to the canvas. `file`: `File` object +`handleMultiCanvas`:v0.10.0+,Optional, a function can be passed. If there are multiple canvases in the imported xmind file, this function will be called. The function takes the xmind canvas list data as a parameter and needs to return the data of one of the canvases, For example, if the received parameter is 'content', if you want to import data from the second canvas, you will return 'content[1]'. A function can be an asynchronous function that returns a Promise instance. + ### xmind.transformXmind(content) > V0.6.6+version changes the method to asynchronous and returns a Promise instance diff --git a/web/src/pages/Doc/en/xmind/index.vue b/web/src/pages/Doc/en/xmind/index.vue index 713a5782..d7446033 100644 --- a/web/src/pages/Doc/en/xmind/index.vue +++ b/web/src/pages/Doc/en/xmind/index.vue @@ -14,10 +14,11 @@simpleMindMap.xmindMethods
-xmind.parseXmindFile(file)
+xmind.parseXmindFile(file, handleMultiCanvas)
Parsing the
.xmindfile and returning the parsed data. You can usemindMap.setData(data)to render the returned data to the canvas.+
file:Fileobject
handleMultiCanvas:v0.10.0+,Optional, a function can be passed. If there are multiple canvases in the imported xmind file, this function will be called. The function takes the xmind canvas list data as a parameter and needs to return the data of one of the canvases, For example, if the received parameter is 'content', if you want to import data from the second canvas, you will return 'content[1]'. A function can be an asynchronous function that returns a Promise instance.xmind.transformXmind(content)
V0.6.6+version changes the method to asynchronous and returns a Promise instance
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js index 49034419..6cd69cf4 100644 --- a/web/src/pages/Doc/routerList.js +++ b/web/src/pages/Doc/routerList.js @@ -70,7 +70,8 @@ export default [ { path: 'help2', title: '客户端' }, { path: 'help3', title: '打开预览在线文件' }, { path: 'help4', title: '复制粘贴' }, - { path: 'help5', title: '导出' } + { path: 'help5', title: '导出' }, + { path: 'help6', title: '如何编辑数学公式' } ] }, { diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index 7f0ce95d..e0ca685b 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -1,5 +1,51 @@ # Changelog +## 0.10.0 + +较大更新:升级节点拖拽时的交互效果; + +修复: + +> 1.修复只读模式仍可通过Ctrl+点击节点方式激活节点的问题; +> +> 2.修复移动端部分浏览器设置缩放时会进行页面缩放的问题; +> +> 3.修复拖拽画布和拖拽调整图片时会选中文字的问题; +> +> 4.修复复制带换行符的节点文本粘贴后会出现多行换行的问题; +> +> 5.修复节点前后自定义内容导出图片时显示空白的问题; + +新增: + +> 1.新增渲染开始事件node_tree_render_start; +> +> 2.支持设置水印显示在节点下方; +> +> 3.导入存在多个画布的xmind文件支持选择指定的画布进行导入; +> +> 4.取消调用defenseXSS函数,对性能影响太大;defenseXSS方法作为工具方法提供; +> +> 5.去除移除富文本内容中ql-cursor类名的节点的逻辑,修复文本换行时新增空行不生效的问题; +> +> 6.插入新节点时去除延时开启节点编辑的逻辑; +> +> 7.支持直接在富文本编辑框中编辑数学公式; +> +> 8.打包后的文件中增加演示插件; + +Demo: + +> 1.支持配置水印显示在节点下方; +> +> 2.导入存在多个画布的xmind文件支持选择指定的画布进行导入; +> +> 3.优化富文本工具条下拉选项列表高度问题; +> +> 4.新建和打开按钮增加导出的提示,防止内容丢失; +> +> 5.快捷键提示支持区分windows和mac; + ## 0.9.12 修复: diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 0236ae3f..5558bd26 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -1,6 +1,35 @@Changelog
+0.10.0
+较大更新:升级节点拖拽时的交互效果;
+修复:
+++1.修复只读模式仍可通过Ctrl+点击节点方式激活节点的问题;
+2.修复移动端部分浏览器设置缩放时会进行页面缩放的问题;
+3.修复拖拽画布和拖拽调整图片时会选中文字的问题;
+4.修复复制带换行符的节点文本粘贴后会出现多行换行的问题;
+5.修复节点前后自定义内容导出图片时显示空白的问题;
+新增:
+++1.新增渲染开始事件node_tree_render_start;
+2.支持设置水印显示在节点下方;
+3.导入存在多个画布的xmind文件支持选择指定的画布进行导入;
+4.取消调用defenseXSS函数,对性能影响太大;defenseXSS方法作为工具方法提供;
+5.去除移除富文本内容中ql-cursor类名的节点的逻辑,修复文本换行时新增空行不生效的问题;
+6.插入新节点时去除延时开启节点编辑的逻辑;
+7.支持直接在富文本编辑框中编辑数学公式;
+8.打包后的文件中增加演示插件;
+Demo:
++1.支持配置水印显示在节点下方;
+2.导入存在多个画布的xmind文件支持选择指定的画布进行导入;
+3.优化富文本工具条下拉选项列表高度问题;
+4.新建和打开按钮增加导出的提示,防止内容丢失;
+5.快捷键提示支持区分windows和mac;
+0.9.12
修复:
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 681b7a56..1770535e 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -212,8 +212,9 @@ new MindMap({ | 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 | | 节点拖拽时新位置的示意矩形的填充颜色,如果不传默认使用连线的颜色 | +| dragMultiNodeRectConfig(v0.7.2+) | Object | { width: 40, height: 20, fill: 'rgb(94, 200, 248)' } | 拖拽多个节点时随鼠标移动的示意矩形的样式配置,传递一个对象,字段含义分别为矩形的宽、高、填充色 | +| dragPlaceholderRectFill(v0.7.2+) | String | rgb(94, 200, 248) | 节点拖拽时新位置的示意矩形的填充颜色 | +| dragPlaceholderLineConfig(v0.10.0+) | Object | { color: 'rgb(94, 200, 248)', width: 2 } | 节点拖拽时新位置的示意连线的样式配置 | | dragOpacityConfig(v0.7.2+) | Object | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | 节点拖拽时的透明度配置,传递一个对象,字段含义分别为:跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 | ### 5.Watermark插件 @@ -232,6 +233,7 @@ new MindMap({ | angle | Number | 30 | 水印的倾斜角度,范围:[0, 90] | | textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | 水印文字样式 | | onlyExport(v0.9.2+) | Boolean | false | 是否仅在导出时添加水印 | +| belowNode(v0.10.0+) | Boolean | false | 水印是否显示在节点下方 | ### 6.AssociativeLine插件 @@ -247,6 +249,9 @@ new MindMap({ | 字段名称 | 类型 | 默认值 | 描述 | | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | | richTextEditFakeInPlace(v0.6.13+) | Boolean | false | 设置富文本节点编辑框和节点大小一致,形成伪原地编辑的效果,需要注意的是,只有当节点内只有文本、且形状是矩形才会有比较好的效果 | +| enableEditFormulaInRichTextEdit(v0.10.0+) | Boolean | true | 是否开启在富文本编辑框中直接编辑数学公式 | +| transformRichTextOnEnterEdit(v0.10.0+) | null、Function | null | 转换富文本内容,可以传递一个函数,当进入富文本编辑时会调用该函数,函数接收即将被编辑的富文本内容,需要返回你处理后的富文本内容 | +| beforeHideRichTextEdit(v0.10.0+) | null、Function | null | 可以传递一个函数,即将结束富文本编辑前会执行该函数,函数接收richText实例,所以你可以在此时机更新quill文档数据 | ### 8.TouchEvent插件 @@ -547,7 +552,8 @@ mindMap.setTheme('主题名称') | 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+) | 节点树渲染完毕事件 | | +| node_tree_render_end(v0.2.16+) | 节点树渲染完毕事件 | | +| node_tree_render_start(v0.10.0+) | 节点树开始渲染事件 | | | rich_text_selection_change(v0.4.0+) | 当注册了`RichText`插件时可用。当节点编辑时,文本选区发生改变时触发 | hasRange(是否存在选区)、rectInfo(选区的尺寸和位置信息)、formatInfo(选区的文本格式化信息) | | transforming-dom-to-images(v0.4.0+) | 当注册了`RichText`插件时可用。当`svg`中存在`DOM`节点时,导出为图片时会将`DOM`节点转换为图片,转换过程中会触发该事件,可用通过该事件给用户提示,告知目前转换到的节点 | index(当前转换到的节点索引)、len(一共需要转换的节点数量) | | node_dragging(v0.4.5+) | 当某个节点被拖拽时触发 | node(当前被拖拽的节点) | diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index d7fdbc35..80c97c06 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -661,14 +661,20 @@dragMultiNodeRectConfig(v0.7.2+) Object -{ width: 40, height: 20, fill: '' } +{ width: 40, height: 20, fill: 'rgb(94, 200, 248)' } 拖拽多个节点时随鼠标移动的示意矩形的样式配置,传递一个对象,字段含义分别为矩形的宽、高、填充色 + dragPlaceholderRectFill(v0.7.2+) String -- 节点拖拽时新位置的示意矩形的填充颜色,如果不传默认使用连线的颜色 +rgb(94, 200, 248) +节点拖拽时新位置的示意矩形的填充颜色 ++ dragPlaceholderLineConfig(v0.10.0+) +Object +{ color: 'rgb(94, 200, 248)', width: 2 } +节点拖拽时新位置的示意连线的样式配置 + dragOpacityConfig(v0.7.2+) @@ -744,6 +750,12 @@false 是否仅在导出时添加水印 + belowNode(v0.10.0+) +Boolean +false +水印是否显示在节点下方 +6.AssociativeLine插件
@@ -800,6 +812,24 @@false 设置富文本节点编辑框和节点大小一致,形成伪原地编辑的效果,需要注意的是,只有当节点内只有文本、且形状是矩形才会有比较好的效果 + +enableEditFormulaInRichTextEdit(v0.10.0+) +Boolean +true +是否开启在富文本编辑框中直接编辑数学公式 ++ +transformRichTextOnEnterEdit(v0.10.0+) +null、Function +null +转换富文本内容,可以传递一个函数,当进入富文本编辑时会调用该函数,函数接收即将被编辑的富文本内容,需要返回你处理后的富文本内容 ++ beforeHideRichTextEdit(v0.10.0+) +null、Function +null +可以传递一个函数,即将结束富文本编辑前会执行该函数,函数接收richText实例,所以你可以在此时机更新quill文档数据 +8.TouchEvent插件
@@ -1286,6 +1316,11 @@ mindMap.setTheme('主题名称')+ +node_tree_render_start(v0.10.0+) +节点树开始渲染事件 ++ rich_text_selection_change(v0.4.0+) 当注册了 RichText插件时可用。当节点编辑时,文本选区发生改变时触发hasRange(是否存在选区)、rectInfo(选区的尺寸和位置信息)、formatInfo(选区的文本格式化信息) diff --git a/web/src/pages/Doc/zh/help6/index.md b/web/src/pages/Doc/zh/help6/index.md new file mode 100644 index 00000000..a9c2b45f --- /dev/null +++ b/web/src/pages/Doc/zh/help6/index.md @@ -0,0 +1,9 @@ +# 如何编辑数学公式 + +数学公式只在开启了【富文本】编辑模式下才可使用。 + +首先可以激活节点,然后点击上方工具栏中的【公式】打开右侧的格式侧边栏,然后再输入框中输入公式后点击【完成】即可将公式输入节点。 + +当你再次双击节点时,公式会转换成源码,你可以直接修改,回车完成后即可渲染。 + +所以你也可以不通过侧边栏,直接在文本编辑框中输入公式,不过公式的源码前后必须通过`$`符号包裹,否则不会解析为格式。 \ No newline at end of file diff --git a/web/src/pages/Doc/zh/help6/index.vue b/web/src/pages/Doc/zh/help6/index.vue new file mode 100644 index 00000000..46ff3004 --- /dev/null +++ b/web/src/pages/Doc/zh/help6/index.vue @@ -0,0 +1,20 @@ + +++ + + + + \ No newline at end of file diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md index 30ce728a..c3c08ab5 100644 --- a/web/src/pages/Doc/zh/introduction/index.md +++ b/web/src/pages/Doc/zh/introduction/index.md @@ -380,7 +380,7 @@如何编辑数学公式
+数学公式只在开启了【富文本】编辑模式下才可使用。
+首先可以激活节点,然后点击上方工具栏中的【公式】打开右侧的格式侧边栏,然后再输入框中输入公式后点击【完成】即可将公式输入节点。
+当你再次双击节点时,公式会转换成源码,你可以直接修改,回车完成后即可渲染。
+所以你也可以不通过侧边栏,直接在文本编辑框中输入公式,不过公式的源码前后必须通过
+ +$符号包裹,否则不会解析为格式。-
孟照星
+Alex
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue index ca21c062..ec11c921 100644 --- a/web/src/pages/Doc/zh/introduction/index.vue +++ b/web/src/pages/Doc/zh/introduction/index.vue @@ -8,18 +8,18 @@
特性
- - - - - - - -
- - - - - + + + + + + + +
json、png、svg、markdown、xmind、txt,支持从json、xmind、markdown导入- + + + +
json、png、svg、markdown、xmind、txt,支持从json、xmind、markdown导入官方提供了如下插件,可根据需求按需引入(某个功能不生效大概率是因为你没有引入对应的插件),具体使用方式请查看文档:
@@ -37,11 +37,11 @@2.
web使用
simple-mind-map库,基于vue2.x、ElementUI搭建的在线思维导图。特性:- - - - - + + + + +
提供文档页面服务。
3.
@@ -331,7 +331,7 @@dist-
孟照星
+Alex
diff --git a/web/src/pages/Doc/zh/utils/index.md b/web/src/pages/Doc/zh/utils/index.md index e9771cb0..614e3852 100644 --- a/web/src/pages/Doc/zh/utils/index.md +++ b/web/src/pages/Doc/zh/utils/index.md @@ -511,6 +511,16 @@ document.addEventListener(fullscrrenEvent, () => { 退出全屏状态。 +#### defenseXSS(htmlStr) + +> v0.10.0+ + +- `htmlStr`:需要过滤的html字符串 + +返回:过滤后的html字符串 + +防御 XSS 攻击,过滤恶意 HTML 标签和属性。你可以在将节点数据传递给SimpleMindMap前递归遍历树数据,通过该方法处理节点富文本内容,避免 XSS 攻击。 + ## 在 canvas 中模拟 css 的背景属性 引入: diff --git a/web/src/pages/Doc/zh/utils/index.vue b/web/src/pages/Doc/zh/utils/index.vue index 6a696eed..0f2317a2 100644 --- a/web/src/pages/Doc/zh/utils/index.vue +++ b/web/src/pages/Doc/zh/utils/index.vue @@ -427,6 +427,15 @@
v0.9.11+
退出全屏状态。
+defenseXSS(htmlStr)
+++v0.10.0+
++
+- +
htmlStr:需要过滤的html字符串返回:过滤后的html字符串
+防御 XSS 攻击,过滤恶意 HTML 标签和属性。你可以在将节点数据传递给SimpleMindMap前递归遍历树数据,通过该方法处理节点富文本内容,避免 XSS 攻击。
在 canvas 中模拟 css 的背景属性
引入:
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas' diff --git a/web/src/pages/Doc/zh/xmind/index.md b/web/src/pages/Doc/zh/xmind/index.md index 10f25302..7927d13a 100644 --- a/web/src/pages/Doc/zh/xmind/index.md +++ b/web/src/pages/Doc/zh/xmind/index.md @@ -22,12 +22,14 @@ simpleMindMap.xmind ## 方法 -### xmind.parseXmindFile(file) +### xmind.parseXmindFile(file, handleMultiCanvas) 解析`.xmind`文件,返回解析后的数据,可以使用`mindMap.setData(data)`来将返回的数据渲染到画布上 `file`:`File`对象 +`handleMultiCanvas`:v0.10.0+,可选,可传递一个函数,如果导入的xmind文件存在多个画布,那么会调用该函数,函数接收xmind画布列表数据为参数,需要返回其中一个画布的数据,比如接收的参数为`content`,要导入第二个画布的数据则返回`content[1]`。函数可以是异步函数,返回一个Promise实例。 + ### xmind.transformXmind(content) > v0.6.6+版本该方法改为异步方法,返回一个Promise实例 diff --git a/web/src/pages/Doc/zh/xmind/index.vue b/web/src/pages/Doc/zh/xmind/index.vue index d5b58a3a..241f39bc 100644 --- a/web/src/pages/Doc/zh/xmind/index.vue +++ b/web/src/pages/Doc/zh/xmind/index.vue @@ -14,9 +14,10 @@simpleMindMap.xmind方法
-xmind.parseXmindFile(file)
+xmind.parseXmindFile(file, handleMultiCanvas)
解析
.xmind文件,返回解析后的数据,可以使用mindMap.setData(data)来将返回的数据渲染到画布上+
file:File对象
handleMultiCanvas:v0.10.0+,可选,可传递一个函数,如果导入的xmind文件存在多个画布,那么会调用该函数,函数接收xmind画布列表数据为参数,需要返回其中一个画布的数据,比如接收的参数为content,要导入第二个画布的数据则返回content[1]。函数可以是异步函数,返回一个Promise实例。xmind.transformXmind(content)
v0.6.6+版本该方法改为异步方法,返回一个Promise实例
diff --git a/web/src/pages/Index/components/Block2.vue b/web/src/pages/Index/components/Block2.vue index 7cacb01a..f0c7e29a 100644 --- a/web/src/pages/Index/components/Block2.vue +++ b/web/src/pages/Index/components/Block2.vue @@ -42,11 +42,11 @@ export default { dataList: [ { icon: 'iconstar', - value: 'Github star数量3000+' + value: 'Github star数量4000+' }, { icon: 'iconfork', - value: 'Github fork数量400+' + value: 'Github fork数量500+' }, { icon: 'iconxiazai', @@ -54,7 +54,7 @@ export default { }, { icon: 'iconteamwork', - value: '代码贡献者16+' + value: '代码贡献者17+' } ], functionList: [