3.Fix the issue of duplicate rendering of nodes caused by forward and backward when the number of nodes exceeds the maximum number of cache pools.
4.Fix the issue of the canvas moving in the opposite direction when scrolling horizontally with the mouse or touchpad.
5.Fix the issue where the mouse in flag is not reset when a node is destroyed.
+6.Fix the issue of incorrect position calculation in the scrollbar plugin when the 'initRootNodePosition' configuration is not set to the default '[center, center]'.
+7.Fix the issue where dragging the canvas cannot stop when the mouse is released on the node.
+8.Fix the issue of errors in the position calculated by the view. fit method when the canvas container is not 0 from the top left corner of the browser window.
+9.Fix the issue where the watermark in the exported image does not fully cover the entire image when there are a large number of nodes.
+10.Fix the issue of inserting formula errors.
+11.Fix the issue of losing the selected text status when the mouse moves out of the editing box while selecting text in the node text editing state.
+12.When repairing node rich text editing, Fix the issue 'rich_text_selection_change' event is not triggered when the text selection range is 'null'.
+13.Fix the issue of no 'node' instance in the 'node_dragging' event callback.
+14.Fix the issue of too many nodes and the canvas size being too large to export PNG.
New:
+1.Modify the mousewheel event, change the dir flag to dirs, support storing multiple directions, and optimize the dual finger movement operation of the touchpad.
2.The TextEdit class adds the isShowTextEdit method to determine whether the current node is in an editing state.
3.Change the paste method of the render class to support pasting clipboard data.
+4.Add a configuration option to restrict mind map graphics within the canvas.
+5.When registering the scrollbar plugin, it supports configuring whether to restrict the mind map within the canvas.
+6.Folding all nodes will move the mind map root node to the center of the canvas.
+7.Support the configuration option of displaying watermarks only during export.
+8.When pasting images from the clipboard at a node, custom processing functions are supported to upload the images to your server.
+9.Refactoring the export logic of the PDF, the exported PDF size is no longer a fixed A4, but the size of the mind map, while deleting the configuration for pagination export.
+10.Node connections support displaying arrows as a field for the theme.
+11.The maximum number of historical records is adjusted to 500 by default.
+
Demo：
++1.Support configuration to display watermarks only during export.
+2.Basic style configuration line supports displaying arrows.
Fix:
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 08a4c995..6ff4d060 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -61,7 +61,7 @@ const mindMap = new MindMap({ | nodeTextEditZIndex（v0.5.5+） | Number | 3000 | | z-index of node text edit box elements | | nodeNoteTooltipZIndex（v0.5.5+） | Number | 3000 | z-index of floating layer elements in node comments | | | isEndNodeTextEditOnClickOuter（v0.5.5+） | Boolean | true | Whether to end the editing status of node text when clicking on an area outside the canvas | | -| maxHistoryCount（v0.5.6+） | Number | 1000 | | Maximum number of history records | +| maxHistoryCount（v0.5.6+） | Number | 1000（v0.9.2+ changed 500） | | Maximum number of history records | | alwaysShowExpandBtn（v0.5.8+） | Boolean | false | Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default | | | iconList（v0.5.8+） | Array | [] | The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the "Icon Configuration" table below for the detailed structure of the object | | | maxNodeCacheCount（v0.5.10+） | Number | 1000 | The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool | | @@ -105,6 +105,9 @@ const mindMap = new MindMap({ | highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | Highlight box style when the mouse moves into the summary to highlight the node it belongs to | | | createNewNodeBehavior（v0.9.1+） | String | default | Behavior when creating a new node. default（By default, newly created nodes will be activated and enter editing mode. If multiple new nodes are created simultaneously, they will only be activated and will not enter editing mode）、notActive（Do not activate newly created nodes）、activeOnly（Only activate newly created nodes and do not enter editing mode） | | | defaultNodeImage（v0.9.1-fix.2+） | String | | Image address, the default image displayed when node image loading fails | | +| handleNodePasteImg（v0.9.2+） | null or Function | null | The processing method for pasting images from the clipboard on a node is to convert them into data:URL data and insert them into the node by default. You can use this method to upload image data to the server and save the URL of the image. An asynchronous method can be passed to receive image data of Blob type, and the specified structure needs to be returned: { url, size: {width, height} } | | +| isLimitMindMapInCanvas（v0.9.2+） | Boolean | false | Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things | +| 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 | ### Data structure @@ -156,6 +159,7 @@ If you want to add custom fields, you can add them to the same level as 'data' a | textSpacing | Number | 100 | Spacing between watermarks in the same row | | angle | Number | 30 | Tilt angle of watermark, range: [0, 90] | | textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | Watermark text style | +| onlyExport（v0.9.2+） | Boolean | false | Is only add watermarks during export | ### Icon Configuration @@ -414,6 +418,8 @@ Listen to an event. Event list: | set_data（v0.7.3+） | Triggered when the setData method is called to dynamically set mind map data | data（New Mind Map Data） | | resize（v0.8.0+） | Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called | | | beforeDestroy（v0.9.0+） | Triggered before destroying the mind map, i.e. triggered by calling the destroy method | | +| body_mousedown（v0.9.2+） | Mousedown event of document.body | e（event object） | +| body_click | Click event of document.body | e（event object） | ### emit(event, ...args) @@ -507,7 +513,7 @@ redo. All commands are as follows: | EXPAND_ALL | Expand all nodes | | | UNEXPAND_ALL | Collapse all nodes | | | UNEXPAND_TO_LEVEL (v0.2.8+) | Expand to a specified level | level (the level to expand to, 1, 2, 3...) | -| SET_NODE_DATA | Update node data, that is, update the data in the data object of the node data object | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) | +| SET_NODE_DATA | Update node data, that is, update the data in the data object of the node data object. Note that this command will not trigger view updates | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) | | SET_NODE_TEXT | Set node text | node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to `true`）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset） | | SET_NODE_IMAGE | Set Node Image | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed) | | SET_NODE_ICON | Set Node Icon | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) | diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 0e22c4bd..e7719bc5 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -290,7 +290,7 @@{expand: true})rotateWhenWidthLongerThenHeight: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
checkRotate: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees
checkRotate: v0.7.0+, (v0.9.2+obsolete), Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees
compress：v0.8.1+，null | { width, height }, The parameter for compressing images. In some cases, the length and width of the exported image may be very large. If you want to reduce it, you can use this parameter to control it. Only one width or height can be provided, and it will be scaled proportionally
compress：v0.8.1+, (v0.9.2+obsolete)，null | { width, height }, The parameter for compressing images. In some cases, the length and width of the exported image may be very large. If you want to reduce it, you can use this parameter to control it. Only one width or height can be provided, and it will be scaled proportionally
Exports as png.
Exports as svg.
+v0.8.1：pdf(name, useMultiPageExport, maxImageWidth)
+
@@ -78,10 +81,13 @@ a.click()v0.2.1+
name：File name
useMultiPageExport: v0.6.15+, Boolean, false, Whether to export multiple pages, default to single page
useMultiPageExport: v0.6.15+, (v0.9.2+obsolete), Boolean, false, Whether to export multiple pages, default to single page
maxImageWidth：v0.8.1+，null | Number，The default is twice the width of A4 paper, which is a parameter for compressing images. In some cases, the length and width of the image may be very large, resulting in a very large PDF volume. Therefore, if you want to reduce the volume, you can use this parameter to control the maximum width of the image
maxImageWidth：v0.8.1+, (v0.9.2+obsolete)，null | Number，The default is twice the width of A4 paper, which is a parameter for compressing images. In some cases, the length and width of the image may be very large, resulting in a very large PDF volume. Therefore, if you want to reduce the volume, you can use this parameter to control the maximum width of the image
transparent：v0.9.2+，Boolean，default is false，Specify whether the background of the exported image is transparent
Export as pdf. Unlike other export methods, this method does not return data and directly triggers the download.
false
if key is not passed, return the data object
Set the value of the specified key in the data object of the node's real data
-nodeData, SET_NODE_DATA command's shortcut method
SET_NODE_DATA command's shortcut method. This method and command will not update the view, so if you want to modify the text, use the 'setText' method or use the command pointing to the text.
v0.3.2+
Gets whether the watermark exists.
+++v0.9.2+
+
Clear watermark.
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index cd2b79dc..60e636fb 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -13,6 +13,25 @@ > 4.修复鼠标或触控板水平滚动时画布移动方向相反的问题。 > > 5.修复节点被销毁时鼠标移入标志没有复位的问题。 +> +> 6.修复滚动条插件在initRootNodePosition配置不为默认的[center,center]时位置计算错误的问题。 +> +> 7.修复拖拽画布时鼠标在节点上面松开时拖拽无法停止的问题。 +> +> 8.修复当画布容器距浏览器窗口左上角不为0时，view.fit方法计算出来的位置有误差的问题。 +> +> 9.修复当节点数量比较多时，导出的图片中水印没有完全覆盖整个图片的问题。 +> +> 10.修复插入公式报错的问题。 +> +> 11.修复节点文本编辑状态中鼠标选择文本时移出编辑框，文字选中状态会丢失的问题。 +> +> 12.修复节点富文本编辑时，文本选中范围为null时没有触发rich_text_selection_change事件的问题。 +> +> 13.修复node_dragging事件回参里没有node实例的问题。 +> +> 14.修复节点数量过多，画布尺寸过大无法导出png的问题。 + 新增： @@ -21,6 +40,28 @@ > 2.TextEdit类增加isShowTextEdit方法判断当前是否处在节点编辑状态。 > > 3.Render类的paste方法改为支持粘贴剪贴板的数据。 +> +> 4.新增将思维导图图形限制在画布内的配置选项。 +> +> 5.注册了滚动条插件的情况下，支持配置是否将思维导图限制在画布内。 +> +> 6.收起所有节点操作会将思维导图根节点移至画布中心。 +> +> 7.支持仅在导出时显示水印的配置选项。 +> +> 8.在节点粘贴剪贴板中的图片时，支持自定义处理函数，可以将图片上传到你的服务器。 +> +> 9.重构pdf的导出逻辑，导出的pdf尺寸不再是固定的a4，而是思维导图的尺寸，同时删除分页导出的配置。 +> +> 10.节点连线支持显示箭头，作为主题的一个字段。 +> +> 11.最大历史记录数量默认调整为500。 + +Demo： + +> 1.支持配置仅在导出时显示水印。 +> +> 2.基础样式配置连线支持显示箭头。 ## 0.9.1-fix.2 diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 45417006..95b279c9 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -9,12 +9,34 @@3.修复当节点数量超出了缓存池的最大数量时，前进回退会导致节点重复渲染的问题。
4.修复鼠标或触控板水平滚动时画布移动方向相反的问题。
5.修复节点被销毁时鼠标移入标志没有复位的问题。
+6.修复滚动条插件在initRootNodePosition配置不为默认的[center,center]时位置计算错误的问题。
+7.修复拖拽画布时鼠标在节点上面松开时拖拽无法停止的问题。
+8.修复当画布容器距浏览器窗口左上角不为0时，view.fit方法计算出来的位置有误差的问题。
+9.修复当节点数量比较多时，导出的图片中水印没有完全覆盖整个图片的问题。
+10.修复插入公式报错的问题。
+11.修复节点文本编辑状态中鼠标选择文本时移出编辑框，文字选中状态会丢失的问题。
+12.修复节点富文本编辑时，文本选中范围为null时没有触发rich_text_selection_change事件的问题。
+13.修复node_dragging事件回参里没有node实例的问题。
+14.修复节点数量过多，画布尺寸过大无法导出png的问题。
新增：
+1.修改mousewheel事件,dir标志修改为dirs,支持存储多个方向,优化触控板的双指移动操作。
2.TextEdit类增加isShowTextEdit方法判断当前是否处在节点编辑状态。
3.Render类的paste方法改为支持粘贴剪贴板的数据。
+4.新增将思维导图图形限制在画布内的配置选项。
+5.注册了滚动条插件的情况下，支持配置是否将思维导图限制在画布内。
+6.收起所有节点操作会将思维导图根节点移至画布中心。
+7.支持仅在导出时显示水印的配置选项。
+8.在节点粘贴剪贴板中的图片时，支持自定义处理函数，可以将图片上传到你的服务器。
+9.重构pdf的导出逻辑，导出的pdf尺寸不再是固定的a4，而是思维导图的尺寸，同时删除分页导出的配置。
+10.节点连线支持显示箭头，作为主题的一个字段。
+11.最大历史记录数量默认调整为500。
+
Demo：
++1.支持配置仅在导出时显示水印。
+2.基础样式配置连线支持显示箭头。
修复：
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 4605478e..c8c58fd8 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -61,7 +61,7 @@ const mindMap = new MindMap({ | nodeTextEditZIndex（v0.5.5+） | Number | 3000 | 节点文本编辑框元素的z-index | | nodeNoteTooltipZIndex（v0.5.5+） | Number | 3000 | 节点备注浮层元素的z-index | | isEndNodeTextEditOnClickOuter（v0.5.5+） | Boolean | true | 是否在点击了画布外的区域时结束节点文本的编辑状态 | -| maxHistoryCount（v0.5.6+） | Number | 1000 | 最大历史记录数 | +| maxHistoryCount（v0.5.6+） | Number | 1000（v0.9.2+改为500） | 最大历史记录数 | | alwaysShowExpandBtn（v0.5.8+） | Boolean | false | 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示 | | iconList（v0.5.8+） | Array | [] | 扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格 | | maxNodeCacheCount（v0.5.10+） | Number | 1000 | 节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量 | @@ -105,6 +105,9 @@ const mindMap = new MindMap({ | highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | 鼠标移入概要高亮所属节点时的高亮框样式 | | createNewNodeBehavior（v0.9.1+） | String | default | 创建新节点时的行为。default（默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式）、notActive（不激活新创建的节点）、activeOnly（只激活新创建的节点，不进入编辑模式） | | defaultNodeImage（v0.9.1-fix.2+） | String | | 图片地址，当节点图片加载失败时显示的默认图片 | +| handleNodePasteImg（v0.9.2+） | null 或 Function | null | 在节点上粘贴剪贴板中的图片的处理方法，默认是转换为data:url数据插入到节点中，你可以通过该方法来将图片数据上传到服务器，实现保存图片的url。可以传递一个异步方法，接收Blob类型的图片数据，需要返回指定结构：{ url, size: {width, height} } | +| isLimitMindMapInCanvas（v0.9.2+） | Boolean | false | 是否将思维导图限制在画布内。比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 | +| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+） | Boolean | true | 当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用 | ### 数据结构 @@ -156,6 +159,7 @@ const mindMap = new MindMap({ | textSpacing | Number | 100 | 同一行水印之间的间距 | | angle | Number | 30 | 水印的倾斜角度，范围：[0, 90] | | textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | 水印文字样式 | +| onlyExport（v0.9.2+） | Boolean | false | 是否仅在导出时添加水印 | ### 图标配置 @@ -411,6 +415,8 @@ mindMap.setTheme('主题名称') | set_data（v0.7.3+） | 调用了setData方法动态设置思维导图数据时触发 | data（新的思维导图数据） | | resize（v0.8.0+） | 容器尺寸改变后触发，实际上是当思维导图实例的`resize`方法被调用后触发 | | | beforeDestroy（v0.9.0+） | 思维导图销毁前触发，即调用了destroy方法触发 | | +| body_mousedown（v0.9.2+） | document.body的鼠标按下事件 | e（事件对象） | +| body_click | document.body的点击事件 | e（事件对象） | ### emit(event, ...args) @@ -502,7 +508,7 @@ mindMap.updateConfig({ | EXPAND_ALL | 展开所有节点 | | | UNEXPAND_ALL | 收起所有节点 | | | UNEXPAND_TO_LEVEL（v0.2.8+） | 展开到指定层级 | level（要展开到的层级，1、2、3...） | -| SET_NODE_DATA | 更新节点数据，即更新节点数据对象里`data`对象的数据 | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） | +| SET_NODE_DATA | 更新节点数据，即更新节点数据对象里`data`对象的数据，注意这个命令不会触发视图的更新 | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） | | SET_NODE_TEXT | 设置节点文本 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为`true`）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式） | | SET_NODE_IMAGE | 设置节点图片 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） | | SET_NODE_ICON | 设置节点图标 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） | diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index 8945f5e7..745e894f 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -252,7 +252,7 @@data对象的数据data对象的数据，注意这个命令不会触发视图的更新{expand: true}）rotateWhenWidthLongerThenHeight: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度
checkRotate：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度
checkRotate：v0.7.0+，（v0.9.2+已废弃），Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度
compress：v0.8.1+，null | { width, height }, 压缩图片的参数，某些情况下导出的图片长宽可能非常大，如果希望减小，那么可以通过该参数来控制，宽或高只提供一个即可，会按比例缩放
compress：v0.8.1+，（v0.9.2+已废弃），null | { width, height }, 压缩图片的参数，某些情况下导出的图片长宽可能非常大，如果希望减小，那么可以通过该参数来控制，宽或高只提供一个即可，会按比例缩放
导出为png。
导出为svg。
+v0.8.1：pdf(name, useMultiPageExport, maxImageWidth)
+
@@ -78,10 +81,13 @@ a.click()v0.2.1+
name：文件名称
useMultiPageExport: v0.6.15+，Boolean, false, 是否多页导出，默认为单页
useMultiPageExport: v0.6.15+，（v0.9.2+已废弃），Boolean, false, 是否多页导出，默认为单页
maxImageWidth：v0.8.1+，null | Number，默认为a4纸的宽度的2倍, 压缩图片的参数，某些情况下图片的长宽可能非常大，导致pdf体积也非常大，所以如果希望减小体积，那么可以通过该参数来控制图片的最大宽度
maxImageWidth：v0.8.1+，（v0.9.2+已废弃），null | Number，默认为a4纸的宽度的2倍, 压缩图片的参数，某些情况下图片的长宽可能非常大，导致pdf体积也非常大，所以如果希望减小体积，那么可以通过该参数来控制图片的最大宽度
transparent：v0.9.2+，Boolean，默认为false，指定导出图片的背景是否是透明的
导出为pdf，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。
获取该节点真实数据nodeData的data对象里的指定值，key不传返回这个data对象
设置节点数据，SET_NODE_DATA命令的快捷方法
设置节点数据，SET_NODE_DATA命令的快捷方法，这个方法和命令不会更新视图，所以如果你要修改文本，就使用setText方法，或者用手指文本的命令。
v0.3.2+
获取是否存在水印。
+++v0.9.2+
+
清除水印。