New: The node supports rich text editing.
New：Automatic line wrapping function is added to node text.
Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 719b321c..cab290fd 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -82,14 +82,23 @@ mindMap.setTheme('Theme name') For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js). -### usePlugin(plugin) +### usePlugin(plugin, opt = {}) > v0.3.0+ +- `opt`：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter. + If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain. Note: The plugin needs to be registered before instantiating `MindMap`. +### hasPlugin(plugin) + +> v0.4.0+ + +Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is `-1`, it means that the plugin is not registered. + + ## Static props ### pluginList @@ -177,6 +186,8 @@ Listen to an event. Event list: | scale | Zoom event | scale (zoom ratio) | | node_img_dblclick（v0.2.15+） | Node image double-click event | this (node instance), 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） | ### emit(event, ...args) @@ -324,4 +335,16 @@ map). > v0.1.5+ Convert the coordinates of the browser's visible window to coordinates relative -to the canvas. \ No newline at end of file +to the canvas. + +### addPlugin(plugin, opt) + +> v0.4.0+ + +Register plugin, Use `MindMap.usePlugin` to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the `addPlugin` method of the instance. + +### removePlugin(plugin) + +> v0.4.0+ + +Remove registered plugin, Plugins registered through the `usePlugin` or `addPlugin` methods can be removed. \ No newline at end of file diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index e66acf0c..37cf5c16 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -214,12 +214,20 @@ MindMap.defineTheme('Theme name', {}) mindMap.setTheme('Theme name')For all configurations of theme, please refer to Default Topic. The defineThememethod will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to blueSky.
+v0.3.0+
opt：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.
Note: The plugin needs to be registered before instantiating MindMap.
++v0.4.0+
+
Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is -1, it means that the plugin is not registered.
@@ -398,6 +406,16 @@ poor performance and should be used sparingly.Node tree render end 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） ++ transforming-dom-to-images（v0.4.0+） +Available when the +RichTextplugin is registered. When there is aDOMnode insvg, theDOMnode 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 convertingindex（Index of the node currently converted to）、len（Total number of nodes to be converted） +emit(event, ...args)
@@ -641,6 +659,16 @@ map).
Convert the coordinates of the browser's visible window to coordinates relative to the canvas.
+++v0.4.0+
+
Register plugin, Use MindMap.usePlugin to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the addPlugin method of the instance.
++v0.4.0+
+
Remove registered plugin, Plugins registered through the usePlugin or addPlugin methods can be removed.
Exports as png, an async method that returns image data, data:url data which
can be downloaded or displayed.
name：svg title
domToImage：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the dom node in the svg into a picture
plusCssText：v0.4.0+, When node rich text editing is enabled and domToImage passes false, additional css styles can be added. If there is a dom node in svg, you can set some styles for the node through this parameter, such as:
svg(
+ '',
+ false,
+ `* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }`
+)
+Exports as svg, an async method that returns svg data, data:url data which
can be downloaded or displayed.
domToImage：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the DOM node embedded in svg into a picture.Gets svg data, an async method that returns an object:
{
node; // svg object
- str; // svg string
+ str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
+ nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
}
simple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework.
1.simple-mind-map
This is an online mind map built using the simple-mind-map library and based
on Vue2.x and ElementUI. Features include:
++v0.4.0+
+
++Note: This is a testing nature and imperfect function
+
This plugin provides the ability to edit rich text of nodes, and takes effect after registration.
+By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, and color. Underline and line height are not supported.
+The principle of this plugin is to use Quill editor implements rich text editing, and then uses the edited DOM node directly as the text data of the node, and embeds the DOM node through the svg foreignObject tag during rendering.
This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting svg as an image is very simple, Get the svg string, and then create the blob data of the type=image/svg+xml type. Then use the URL.createObjectURL method to generate the data:url data. Then create a Image tag, use the data:url as the src of the image, and finally draw the image on the canvas object for export, However, after testing, when the DOM node is embedded in the svg, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the foreignObject node in svg, using html2canvas Convert the DOM node in the foreignObject node into an image and then replace the foreignObject node. This method can work, but it is very time-consuming. Because the html2canvas conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.
If you have a better way, please leave a message.
+import MindMap from 'simple-mind-map'
+import RichText from 'simple-mind-map/src/RichText.js'
+
+MindMap.usePlugin(RichText, opt?)
+After registration and instantiation of MindMap, the instance can be obtained through mindMap.richText.
The opt option can pass the following parameters:
opt.fontFamilyListReplace the built-in font list during rich text editing. The built-in list is:
+[
+ '宋体, SimSun, Songti SC',
+ '微软雅黑, Microsoft YaHei',
+ '楷体, 楷体_GB2312, SimKai, STKaiti',
+ '黑体, SimHei, Heiti SC',
+ '隶书, SimLi',
+ 'andale mono',
+ 'arial, helvetica, sans-serif',
+ 'arial black, avant garde',
+ 'comic sans ms',
+ 'impact, chicago',
+ 'times new roman',
+ 'sans-serif',
+ 'serif'
+]
+opt.fontSizeListReplace the built-in font size list during rich text editing. The built-in list is:
+[1, 2, 3, ...100]
+Select All. When the node is being edited, you can select all the text in the node through this method.
+config：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:{
+ font: '字体',
+ size: '12px,' // font size
+ bold: true, // Bold or not, true/false
+ italic: true, // Italic or not, true/false
+ underline: true, // Show underline or not, true/false
+ strike: true, // Whether to display strikethrough, true/false
+ color: '#333' // color
+}
+Formats the currently selected text.
+range：The range object of Quill, has the following format:{
+ index,
+ length
+}
+config：Same as formatText methodFormats the text of the specified range.
+config：Same as formatText methodFormats all text of the current edit node.
+Converts a normal node style object to a rich text style object. Because there are differences between node style attributes and rich text style attributes during non-rich text editing, a conversion operation is required. For example:
+{
+ fontFamily: 'xxx'
+}
+
+// After conversion
+
+{
+ font: 'xxx'
+}
+Converts rich text style objects to normal node style objects. For example:
+{
+ size: '16px'
+}
+
+// After conversion
+
+{
+ fontSize: 16
+}
+svg: svg nodeConvert the dom element embedded in the svg into a picture and return a Promise.
Convert all nodes to non-rich text nodes.
+ +新增：节点支持富文本编辑。
New：节点文本增加自动换行功能。
-Fix：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。
+新增：节点文本增加自动换行功能。
+修复：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。
修复：根节点文字无法换行的问题。
主题的所有配置可以参考默认主题。defineTheme方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考blueSky。
+v0.3.0+
opt：v0.4.0+，插件参数。如果某个插件支持自定义选项的话可以通过这个参数传入。注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。
注意：插件需要在实例化MindMap前注册。
++v0.4.0+
+
获取是否注册了某个插件，返回的是插件在注册插件列表里的索引，为-1则代表插件没有注册。
@@ -391,6 +399,16 @@ mindMap.setTheme('主题名称')节点树渲染完毕事件 + + +rich_text_selection_change（v0.4.0+） +当注册了 +RichText插件时可用。当节点编辑时，文本选区发生改变时触发hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息） ++ transforming-dom-to-images（v0.4.0+） +当注册了 +RichText插件时可用。当svg中存在DOM节点时，导出为图片时会将DOM节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点index（当前转换到的节点索引）、len（一共需要转换的节点数量） +emit(event, ...args)
@@ -629,6 +647,16 @@ mindMap.setTheme('主题名称')v0.1.5+
将浏览器可视窗口的坐标转换成相对于画布的坐标
+++v0.4.0+
+
注册插件，使用MindMap.usePlugin注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的addPlugin方法。
++v0.4.0+
+
移除注册的插件，无论是通过usePlugin还是addPlugin方法注册的插件都可以移除。
导出为png，异步方法，返回图片数据，data:url数据，可以自行下载或显示
name：svg标题
domToImage：v0.4.0+，当开启了节点富文本编辑，可以通过该参数指定是否将svg中的dom节点转换成图片的形式
plusCssText：v0.4.0+，当开启了节点富文本编辑，且domToImage传了false时，可以添加附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：
svg(
+ '',
+ false,
+ `* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }`
+)
+导出为svg，异步方法，返回svg数据，data:url数据，可以自行下载或显示
domToImage：v0.4.0+，如果开启了节点富文本，则可以通过该参数指定是否要将svg中嵌入的DOM节点转换为图片。获取svg数据，异步方法，返回一个对象：
{
node// svg对象
- str// svg字符串
+ str// svg字符串，如果开启了富文本编辑且domToImage设为true，那么该值返回的svg字符内的dom节点会被转换成图片的形式
+ nodeWithDomToImg// v0.4.0+，DOM节点转换为图片后的svg对象，只有当开启了富文本编辑且domToImage设为true才有值，否则为null
}
++v0.4.0+
+
++注意：这是一个测试性质和不完善的功能
+
该插件提供节点富文本编辑的能力，注册了即可生效。
+默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。
+该插件的原理是使用Quill编辑器实现富文本编辑，然后把编辑后生成的DOM节点直接作为节点的文本数据，并且在渲染的时候通过svg的foreignObject标签嵌入DOM节点。
这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将svg导出为图片的原理很简单，获取到svg字符串，然后创建为type=image/svg+xml类型的blob数据，再使用URL.createObjectURL方法生成data:url数据，再创建一个Image标签，将data:url作为该图片的src，最后再将这个图片绘制到canvas对象上进行导出，但是经过测试，当svg中嵌入了DOM节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历svg中的foreignObject节点，使用html2canvas将foreignObject节点内的DOM节点转换为图片再替换掉foreignObject节点，这种方式可以工作，但是非常耗时，因为html2canvas转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。
如果你有更好的方式也欢迎留言。
+import MindMap from 'simple-mind-map'
+import RichText from 'simple-mind-map/src/RichText.js'
+
+MindMap.usePlugin(RichText, opt?)
+注册完且实例化MindMap后可通过mindMap.richText获取到该实例。
opt选项可以传递以下参数：
opt.fontFamilyList替换富文本编辑时内置字体列表。内置的列表为：
+[
+ '宋体, SimSun, Songti SC',
+ '微软雅黑, Microsoft YaHei',
+ '楷体, 楷体_GB2312, SimKai, STKaiti',
+ '黑体, SimHei, Heiti SC',
+ '隶书, SimLi',
+ 'andale mono',
+ 'arial, helvetica, sans-serif',
+ 'arial black, avant garde',
+ 'comic sans ms',
+ 'impact, chicago',
+ 'times new roman',
+ 'sans-serif',
+ 'serif'
+]
+opt.fontSizeList替换富文本编辑时内置字号列表。内置的列表为：
+[1, 2, 3, ...100]
+选中全部。当节点正在编辑中可以通过该方法选中节点内的所有文本。
+config：对象，键为样式属性，值为样式值，完整的配置如下：{
+ font: '字体',
+ size: '12px,' // 字号
+ bold: true, // 是否加粗，true/false
+ italic: true, // 是否斜体，true/false
+ underline: true, // 是否显示下划线，true/false
+ strike: true, // 是否显示删除线，true/false
+ color: '#333' // 颜色
+}
+格式化当前选中的文本。
+range：Quill的范围对象，格式如下：{
+ index,
+ length
+}
+config：同formatText方法格式化指定范围的文本。
+config：同formatText方法格式化当前编辑节点的所有文本。
+将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的，所以需要一个转换操作。比如：
+{
+ fontFamily: 'xxx'
+}
+
+// 转换后
+
+{
+ font: 'xxx'
+}
+将富文本样式对象转换成普通节点样式对象。比如：
+{
+ size: '16px'
+}
+
+// 转换后
+
+{
+ fontSize: 16
+}
+svg： svg节点将svg中嵌入的dom元素转换成图片，返回一个Promise。
将所有节点转换成非富文本节点。
+ +