diff --git a/simple-mind-map/src/plugins/Export.js b/simple-mind-map/src/plugins/Export.js index a48f0622..79e538c1 100644 --- a/simple-mind-map/src/plugins/Export.js +++ b/simple-mind-map/src/plugins/Export.js @@ -220,7 +220,6 @@ class Export { const { str } = await this.getSvgData() const svgUrl = await this.fixSvgStrAndToBlob(str) const res = await this.svgToPng(svgUrl, transparent) - console.log(res) return res } diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 0e24eb2e..4b30ad9d 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -13,6 +13,24 @@ Fix: > 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: @@ -21,6 +39,28 @@ New: > 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. ## 0.9.1-fix.2 diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index e09ebce6..283e0196 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -9,12 +9,34 @@

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.

0.9.1-fix.2

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 @@ maxHistoryCount（v0.5.6+） Number -1000 +1000（v0.9.2+ changed 500） Maximum number of history records @@ -595,6 +595,27 @@ 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

@@ -674,6 +695,12 @@ {color: '#999', opacity: 0.5, fontSize: 14} Watermark text style + +onlyExport（v0.9.2+） +Boolean +false +Is only add watermarks during export +

Icon Configuration

@@ -1072,6 +1099,16 @@ poor performance and should be used sparingly.

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)

@@ -1219,7 +1256,7 @@ redo. All commands are as follows:

SET_NODE_DATA -Update node data, that is, update the data in the data object of the node data object +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}) diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md index b7346813..b4fdacf9 100644 --- a/web/src/pages/Doc/en/doExport/index.md +++ b/web/src/pages/Doc/en/doExport/index.md @@ -48,9 +48,9 @@ a.click() - `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`. @@ -74,15 +74,19 @@ svg( Exports as `svg`. -### pdf(name, useMultiPageExport, maxImageWidth) +### pdf(name, transparent = false) + +> v0.8.1：pdf(name, useMultiPageExport, maxImageWidth) > 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. diff --git a/web/src/pages/Doc/en/doExport/index.vue b/web/src/pages/Doc/en/doExport/index.vue index 3623f21f..dea8489a 100644 --- a/web/src/pages/Doc/en/doExport/index.vue +++ b/web/src/pages/Doc/en/doExport/index.vue @@ -42,10 +42,10 @@ a.click()

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.

    @@ -69,7 +69,10 @@ a.click() )

    Exports as svg.

    -

    pdf(name, useMultiPageExport, maxImageWidth)

    +

    pdf(name, transparent = false)

    +
    +

    v0.8.1：pdf(name, useMultiPageExport, maxImageWidth)

    +

    v0.2.1+

    @@ -78,10 +81,13 @@ a.click()

    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.

    diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md index e881c8e2..008d982a 100644 --- a/web/src/pages/Doc/en/node/index.md +++ b/web/src/pages/Doc/en/node/index.md @@ -217,7 +217,7 @@ if `key` is not passed, return the `data` object ### setData(data) 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 +nodeData, `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. ### setText(text, richText) diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue index 45296250..b2009736 100644 --- a/web/src/pages/Doc/en/node/index.vue +++ b/web/src/pages/Doc/en/node/index.vue @@ -161,7 +161,7 @@ default false

    if key is not passed, return the data object

    setData(data)

    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

    +nodeData, 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.

    setText(text, richText)

    导出为png。

    @@ -69,7 +69,10 @@ a.click() )

    导出为svg。

    -

    pdf(name, useMultiPageExport, maxImageWidth)

    +

    pdf(name, transparent = false)

    +
    +

    v0.8.1：pdf(name, useMultiPageExport, maxImageWidth)

    +

    v0.2.1+

    @@ -78,10 +81,13 @@ a.click()

    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，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。

    diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md index 7902db92..70d0d579 100644 --- a/web/src/pages/Doc/zh/node/index.md +++ b/web/src/pages/Doc/zh/node/index.md @@ -214,7 +214,7 @@ ### setData(data) -设置节点数据，`SET_NODE_DATA`命令的快捷方法 +设置节点数据，`SET_NODE_DATA`命令的快捷方法，这个方法和命令不会更新视图，所以如果你要修改文本，就使用`setText`方法，或者用手指文本的命令。 ### setText(text, richText, resetRichText) diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue index 7e6abc07..84fd2cdb 100644 --- a/web/src/pages/Doc/zh/node/index.vue +++ b/web/src/pages/Doc/zh/node/index.vue @@ -154,7 +154,7 @@

    getData(key)

    获取该节点真实数据nodeData的data对象里的指定值，key不传返回这个data对象

    setData(data)

    -

    设置节点数据，SET_NODE_DATA命令的快捷方法

    +

    设置节点数据，SET_NODE_DATA命令的快捷方法，这个方法和命令不会更新视图，所以如果你要修改文本，就使用setText方法，或者用手指文本的命令。

    setText(text, richText, resetRichText)