From c8dfbd3b8729877cd18e28c9a5cdf1105e8b4306 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Fri, 11 Aug 2023 09:08:44 +0800 Subject: [PATCH] Doc: update --- simple-mind-map/package.json | 2 +- simple-mind-map/src/core/render/Render.js | 11 ++++- simple-mind-map/src/core/render/node/Node.js | 51 ++++++++++++++++++-- simple-mind-map/src/core/view/View.js | 16 ++++-- web/src/pages/Doc/en/changelog/index.md | 32 ++++++++++++ web/src/pages/Doc/en/changelog/index.vue | 22 +++++++++ web/src/pages/Doc/en/constructor/index.md | 3 ++ web/src/pages/Doc/en/constructor/index.vue | 21 ++++++++ web/src/pages/Doc/en/keyCommand/index.md | 10 +++- web/src/pages/Doc/en/keyCommand/index.vue | 8 +++ web/src/pages/Doc/en/richText/index.md | 4 +- web/src/pages/Doc/en/richText/index.vue | 3 ++ web/src/pages/Doc/en/utils/index.md | 6 +++ web/src/pages/Doc/en/utils/index.vue | 5 ++ web/src/pages/Doc/zh/changelog/index.md | 32 ++++++++++++ web/src/pages/Doc/zh/changelog/index.vue | 22 +++++++++ web/src/pages/Doc/zh/constructor/index.md | 3 ++ web/src/pages/Doc/zh/constructor/index.vue | 21 ++++++++ web/src/pages/Doc/zh/keyCommand/index.md | 10 +++- web/src/pages/Doc/zh/keyCommand/index.vue | 8 +++ web/src/pages/Doc/zh/richText/index.md | 4 +- web/src/pages/Doc/zh/richText/index.vue | 3 ++ web/src/pages/Doc/zh/utils/index.md | 6 +++ web/src/pages/Doc/zh/utils/index.vue | 5 ++ 24 files changed, 294 insertions(+), 14 deletions(-) diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 1e2eea22..7d5c467e 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.6.12", + "version": "0.6.13", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index f407ec80..8944dba9 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -48,7 +48,7 @@ class Render { this.themeConfig = this.mindMap.themeConfig this.draw = this.mindMap.draw // 渲染树，操作过程中修改的都是这里的数据 - this.renderTree = merge({},this.mindMap.opt.data || {}) + this.renderTree = merge({}, this.mindMap.opt.data || {}) // 是否重新渲染 this.reRender = false // 是否正在渲染中 @@ -112,6 +112,13 @@ class Render { this.mindMap.on('paste', data => { this.onPaste(data) }) + // let timer = null + // this.mindMap.on('view_data_change', () => { + // clearTimeout(timer) + // timer = setTimeout(() => { + // this.render() + // }, 300) + // }) } // 注册命令 @@ -888,7 +895,7 @@ class Render { // 更新了连线的样式 let props = Object.keys(style) let hasLineStyleProps = false - props.forEach((key) => { + props.forEach(key => { if (lineStyleProps.includes(key)) { hasLineStyleProps = true } diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index 682297a9..e614e36b 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -97,6 +97,8 @@ class Node { this.isMultipleChoice = false // 是否需要重新layout this.needLayout = false + // 当前是否是隐藏状态 + this.isHide = false // 概要相关方法 Object.keys(nodeGeneralizationMethods).forEach(item => { this[item] = nodeGeneralizationMethods[item].bind(this) @@ -367,7 +369,13 @@ class Node { }) } this.group.add(this._unVisibleRectRegionNode) - this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this) + this.renderer.layout.renderExpandBtnRect( + this._unVisibleRectRegionNode, + this.expandBtnSize, + width, + height, + this + ) } } @@ -475,9 +483,7 @@ class Node { if (!this.group) { return } - let { - alwaysShowExpandBtn - } = this.mindMap.opt + let { alwaysShowExpandBtn } = this.mindMap.opt if (alwaysShowExpandBtn) { // 需要移除展开收缩按钮 if (this._expandBtn && this.nodeData.children.length <= 0) { @@ -499,11 +505,48 @@ class Node { this.renderGeneralization() // 更新节点位置 let t = this.group.transform() + // // 如果上次不在可视区内，且本次也不在，那么直接返回 + // let { left: ox, top: oy } = this.getNodePosInClient( + // t.translateX, + // t.translateY + // ) + // let oldIsInClient = + // ox > 0 && oy > 0 && ox < this.mindMap.width && oy < this.mindMap.height + // let { left: nx, top: ny } = this.getNodePosInClient(this.left, this.top) + // let newIsNotInClient = + // nx + this.width < 0 || + // ny + this.height < 0 || + // nx > this.mindMap.width || + // ny > this.mindMap.height + // if (!oldIsInClient && newIsNotInClient) { + // if (!this.isHide) { + // this.isHide = true + // this.group.hide() + // } + // return + // } + // // 如果当前是隐藏状态，那么先显示 + // if (this.isHide) { + // this.isHide = false + // this.group.show() + // } // 如果节点位置没有变化，则返回 if (this.left === t.translateX && this.top === t.translateY) return this.group.translate(this.left - t.translateX, this.top - t.translateY) } + // 获取节点相当于画布的位置 + getNodePosInClient(_left, _top) { + let drawTransform = this.mindMap.draw.transform() + let { scaleX, scaleY, translateX, translateY } = drawTransform + let left = _left * scaleX + translateX + let top = _top * scaleY + translateY + return { + left, + top + } + } + // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置 reRender() { let sizeChange = this.getSize() diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index 2f89bf66..0f16e52c 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -82,15 +82,20 @@ class View { // 鼠标滚轮，向上和向左，都是缩小 case CONSTANTS.DIR.UP: case CONSTANTS.DIR.LEFT: - mousewheelZoomActionReverse ? this.enlarge(cx, cy, isTouchPad) : this.narrow(cx, cy, isTouchPad) + mousewheelZoomActionReverse + ? this.enlarge(cx, cy, isTouchPad) + : this.narrow(cx, cy, isTouchPad) break // 鼠标滚轮，向下和向右，都是放大 case CONSTANTS.DIR.DOWN: case CONSTANTS.DIR.RIGHT: - mousewheelZoomActionReverse ? this.narrow(cx, cy, isTouchPad) : this.enlarge(cx, cy, isTouchPad) + mousewheelZoomActionReverse + ? this.narrow(cx, cy, isTouchPad) + : this.enlarge(cx, cy, isTouchPad) break } - } else {// 鼠标滚轮事件控制画布移动 + } else { + // 鼠标滚轮事件控制画布移动 let step = mousewheelMoveStep if (isTouchPad) { step = 5 @@ -147,6 +152,7 @@ class View { // 平移x,y方向 translateXY(x, y) { + if (x === 0 && y === 0) return this.x += x this.y += y this.transform() @@ -154,24 +160,28 @@ class View { // 平移x方向 translateX(step) { + if (step === 0) return this.x += step this.transform() } // 平移x方式到 translateXTo(x) { + if (x === 0) return this.x = x this.transform() } // 平移y方向 translateY(step) { + if (step === 0) return this.y += step this.transform() } // 平移y方向到 translateYTo(y) { + if (y === 0) return this.y = y this.transform() } diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 2a86db64..9d59c2bc 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,37 @@ # Changelog +## 0.6.13 + +Fix: + +> 1.Fix the issue of the inability to drag the canvas while holding down the middle mouse button on a node in read-only mode. +> +> 2.Fixed the issue of probabilistic error reporting after quickly dragging nodes several times. +> +> 3.Fix the issue of pulling up the input method during operations such as activating nodes on the mobile end, expanding and collapsing. +> +> 4.Fix the issue where an exception request is initiated when the background image in the theme configuration is none. + +New: + +> 1.Mobile gesture scaling optimization: Scale according to a linear relationship, and adjust the canvas position with double finger displacement. +> +> 2.Remove the logic of asynchronous rendering nodes and improve the speed of creating new nodes. +> +> 3.The export of images has been changed from the html2canvas library to the dom to image more library to address the issue of missing text styles in exporting rich text nodes. +> +> 4.When a non rich text input box enters the editing state, it is deselected by default. +> +> 5.When there is an activation node, it supports automatically entering text editing mode when pressing the Chinese, numeric, or English buttons. + +Demo： + +> 1.Add anti shake operations when saving view data to optimize performance. +> +> 2.Some time-consuming operations add loading effects. +> +> 3.Improve the dark mode of right-click menus and rich text toolbars. + ## 0.6.12 Fix: diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 433ec8c0..a8d90a51 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,28 @@ diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md index 2223ce35..b0579ff4 100644 --- a/web/src/pages/Doc/en/richText/index.md +++ b/web/src/pages/Doc/en/richText/index.md @@ -14,7 +14,9 @@ The principle of this plugin is to use [Quill](https://github.com/quilljs/quill) > > 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](https://github.com/niklasvh/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. -The version of `v0.5.7+` directly uses `html2canvas` to convert the entire `svg`, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export. +> The version of `v0.5.7+` directly uses `html2canvas` to convert the entire `svg`, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export. + +`V0.6.13+` version uses [dom-to-image-more](https://github.com/1904labs/dom-to-image-more) Replaced 'html2canvas' to address the issue of ineffective color export for nodes. ## Register diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue index 7b645bd8..9b39eb20 100644 --- a/web/src/pages/Doc/en/richText/index.vue +++ b/web/src/pages/Doc/en/richText/index.vue @@ -14,7 +14,10 @@

The following prompts exist in versions prior to v0.5.6:

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.

+

The version of v0.5.7+ directly uses html2canvas to convert the entire svg, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.

+
+

V0.6.13+ version uses dom-to-image-more Replaced 'html2canvas' to address the issue of ineffective color export for nodes.

Register

import MindMap from 'simple-mind-map'
 import RichText from 'simple-mind-map/src/plugins/RichText.js'
diff --git a/web/src/pages/Doc/en/utils/index.md b/web/src/pages/Doc/en/utils/index.md
index 74135d4c..f259d80c 100644
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -244,6 +244,12 @@ Convert the rich text content of nodes in the form of `
` into
 
 Convert the wrapped text of `
` into node rich text content in the form of `
`.
 
+#### isMobile()
+
+> v0.6.13+
+
+Determine if it is a mobile environment.
+
 ## 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 0d3563b2..ce892c8b 100644
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -174,6 +174,11 @@ and copying the data of the data object, example:

 
v0.6.12+

 
 
Convert the wrapped text of <br> into node rich text content in the form of <p><span></span><p>.

+
isMobile()

+

+
v0.6.13+

+

+
Determine if it is a mobile environment.

 
Simulate CSS background in Canvas

 
Import:

 
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index ca82e5e1..e5177e54 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.6.13
+
+修复：
+
+> 1.修复只读模式下鼠标中键按住节点无法拖动画布的问题。 
+>
+> 2.修复快速拖动节点几次后会概率性报错的问题。 
+>
+> 3.修复在移动端激活节点、展开收起时等操作时会拉起输入法的问题。
+>
+> 4.修复主题配置中背景图片为none时会发起一个异常请求的问题。
+
+新增：
+
+> 1.移动端手势缩放优化: 按线性关系进行缩放、双指位移可以调整画布位置。 
+>
+> 2.去掉异步渲染节点的逻辑，提升创建新节点的速度。 
+>
+> 3.导出图片由html2canvas库改为使用dom-to-image-more库，解决导出富文本节点文字样式丢失的问题。 
+>
+> 4.非富文本输入框进入编辑状态时取消默认全选。
+>
+> 5.存在一个激活节点时，支持按下中文、数字、英文按键时自动进入文本编辑模式。
+
+Demo：
+
+> 1.保存视图数据时增加防抖操作，优化性能。
+>
+> 2.一些耗时的操作添加loading效果。
+>
+> 3.完善右键菜单和富文本工具条的暗黑模式。
+
 ## 0.6.12
 
 修复：
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 44931f76..ec0170e3 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,28 @@
 
diff --git a/web/src/pages/Doc/zh/richText/index.md b/web/src/pages/Doc/zh/richText/index.md
index dcca3e9d..1d5e27ee 100644
--- a/web/src/pages/Doc/zh/richText/index.md
+++ b/web/src/pages/Doc/zh/richText/index.md
@@ -14,7 +14,9 @@
 >
 > 这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将`svg`导出为图片的原理很简单，获取到`svg`字符串，然后创建为`type=image/svg+xml`类型的`blob`数据，再使用`URL.createObjectURL`方法生成`data:url`数据，再创建一个`Image`标签，将`data:url`作为该图片的`src`，最后再将这个图片绘制到`canvas`对象上进行导出，但是经过测试，当`svg`中嵌入了`DOM`节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历`svg`中的`foreignObject`节点，使用[html2canvas](https://github.com/niklasvh/html2canvas)将`foreignObject`节点内的`DOM`节点转换为图片再替换掉`foreignObject`节点，这种方式可以工作，但是非常耗时，因为`html2canvas`转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。
 
-`v0.5.7+`的版本直接使用`html2canvas`转换整个`svg`，速度不再是问题，但是目前存在一个`bug`，就是节点的颜色导出后不生效。
+> `v0.5.7+`的版本直接使用`html2canvas`转换整个`svg`，速度不再是问题，但是目前存在一个`bug`，就是节点的颜色导出后不生效。
+
+`v0.6.13+`版本使用[dom-to-image-more](https://github.com/1904labs/dom-to-image-more)替换了`html2canvas`，解决了节点的颜色导出后不生效的问题。
 
 ## 注册
 
diff --git a/web/src/pages/Doc/zh/richText/index.vue b/web/src/pages/Doc/zh/richText/index.vue
index 510f1184..443ed88b 100644
--- a/web/src/pages/Doc/zh/richText/index.vue
+++ b/web/src/pages/Doc/zh/richText/index.vue
@@ -14,7 +14,10 @@
 
v0.5.6即以前的版本存在以下提示：

 
这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将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秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。

 
+

 
v0.5.7+的版本直接使用html2canvas转换整个svg，速度不再是问题，但是目前存在一个bug，就是节点的颜色导出后不生效。

+

+
v0.6.13+版本使用dom-to-image-more替换了html2canvas，解决了节点的颜色导出后不生效的问题。

 
注册

 
import MindMap from 'simple-mind-map'
 import RichText from 'simple-mind-map/src/plugins/RichText.js'
diff --git a/web/src/pages/Doc/zh/utils/index.md b/web/src/pages/Doc/zh/utils/index.md
index c5e1c921..c5e440b9 100644
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -239,6 +239,12 @@ copyNodeTree({}, node)
 
 将`
`换行的文本转换成`
`形式的节点富文本内容。
 
+#### isMobile()
+
+> v0.6.13+
+
+判断是否是移动端环境。
+
 ## 在canvas中模拟css的背景属性
 
 引入：
diff --git a/web/src/pages/Doc/zh/utils/index.vue b/web/src/pages/Doc/zh/utils/index.vue
index 8c34bb28..9a1e1102 100644
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -169,6 +169,11 @@
 
v0.6.12+

 
 
将<br>换行的文本转换成<p><span></span><p>形式的节点富文本内容。

+
isMobile()

+

+
v0.6.13+

+

+
判断是否是移动端环境。

 
在canvas中模拟css的背景属性

 
引入：

 
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'