From 2fef76c55cebb220499fe6a1b7d7db56c5f8760c Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 9 Aug 2023 17:01:35 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E5=AF=BC=E5=87=BA=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E7=94=B1html2canvas=E5=BA=93=E6=94=B9=E4=B8=BAdom-to-?= =?UTF-8?q?image-more=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/package-lock.json | 28 ++++++++++++++++++--- simple-mind-map/package.json | 2 +- simple-mind-map/src/plugins/RichText.js | 33 ++++++++++++++++++------- 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/simple-mind-map/package-lock.json b/simple-mind-map/package-lock.json index 160c304d..ee730af9 100644 --- a/simple-mind-map/package-lock.json +++ b/simple-mind-map/package-lock.json @@ -1,17 +1,17 @@ { "name": "simple-mind-map", - "version": "0.6.11-fix.1", + "version": "0.6.12", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "0.6.11-fix.1", + "version": "0.6.12", "license": "MIT", "dependencies": { "@svgdotjs/svg.js": "^3.0.16", "deepmerge": "^1.5.2", + "dom-to-image-more": "^3.1.6", "eventemitter3": "^4.0.7", - "html2canvas": "^1.4.1", "jspdf": "^2.5.1", "jszip": "^3.10.1", "mdast-util-from-markdown": "^1.3.0", @@ -255,6 +255,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "optional": true, "engines": { "node": ">= 0.6.0" } @@ -411,6 +412,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "optional": true, "dependencies": { "utrie": "^1.0.2" } @@ -516,6 +518,11 @@ "node": ">=6.0.0" } }, + "node_modules/dom-to-image-more": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.1.6.tgz", + "integrity": "sha512-VMO0jNme32T06mWtkOC9QXfj+1npoJxkaTFW0DCwBLguwBKMjqwndiDANxDnbZ0kvNEecwxkv0Zmgdr96cGtAA==" + }, "node_modules/dompurify": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz", @@ -937,6 +944,7 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "optional": true, "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" @@ -2142,6 +2150,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "optional": true, "dependencies": { "utrie": "^1.0.2" } @@ -2206,6 +2215,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "optional": true, "dependencies": { "base64-arraybuffer": "^1.0.2" } @@ -2461,7 +2471,8 @@ "base64-arraybuffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", - "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==" + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "optional": true }, "brace-expansion": { "version": "1.1.11", @@ -2576,6 +2587,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "optional": true, "requires": { "utrie": "^1.0.2" } @@ -2648,6 +2660,11 @@ "esutils": "^2.0.2" } }, + "dom-to-image-more": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.1.6.tgz", + "integrity": "sha512-VMO0jNme32T06mWtkOC9QXfj+1npoJxkaTFW0DCwBLguwBKMjqwndiDANxDnbZ0kvNEecwxkv0Zmgdr96cGtAA==" + }, "dompurify": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz", @@ -2966,6 +2983,7 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "optional": true, "requires": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" @@ -3749,6 +3767,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "optional": true, "requires": { "utrie": "^1.0.2" } @@ -3800,6 +3819,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "optional": true, "requires": { "base64-arraybuffer": "^1.0.2" } diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 8bcf3c53..1e2eea22 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -26,8 +26,8 @@ "dependencies": { "@svgdotjs/svg.js": "^3.0.16", "deepmerge": "^1.5.2", + "dom-to-image-more": "^3.1.6", "eventemitter3": "^4.0.7", - "html2canvas": "^1.4.1", "jspdf": "^2.5.1", "jszip": "^3.10.1", "mdast-util-from-markdown": "^1.3.0", diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 1a640b2e..f55ad867 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -1,7 +1,12 @@ import Quill from 'quill' import 'quill/dist/quill.snow.css' -import html2canvas from 'html2canvas' -import { walk, getTextFromHtml, isWhite, getVisibleColorFromTheme } from '../utils' +import domtoimage from 'dom-to-image-more' +import { + walk, + getTextFromHtml, + isWhite, + getVisibleColorFromTheme +} from '../utils' import { CONSTANTS } from '../constants/constant' let extended = false @@ -172,10 +177,11 @@ class RichText { this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) - this.textEditNode.addEventListener('mousedown', (e) => { + this.textEditNode.addEventListener('mousedown', e => { e.stopPropagation() }) - const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + const targetNode = + this.mindMap.opt.customInnerElsAppendTo || document.body targetNode.appendChild(this.textEditNode) } // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见 @@ -185,7 +191,11 @@ class RichText { this.textEditNode.style.marginTop = `-${paddingY * scaleY}px` this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.style.backgroundColor = - bgColor === 'transparent' ? isWhite(color) ? getVisibleColorFromTheme(this.mindMap.themeConfig) : '#fff' : bgColor + bgColor === 'transparent' + ? isWhite(color) + ? getVisibleColorFromTheme(this.mindMap.themeConfig) + : '#fff' + : bgColor this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px' this.textEditNode.style.minHeight = originHeight + 'px' this.textEditNode.style.left = rect.left + 'px' @@ -502,11 +512,16 @@ class RichText { } } walk(node) - let canvas = await html2canvas(el, { - backgroundColor: null - }) + + // 如果使用html2canvas + // let canvas = await html2canvas(el, { + // backgroundColor: null + // }) + // return canvas.toDataURL() + + const res = await domtoimage.toPng(el) this.mindMap.el.removeChild(el) - return canvas.toDataURL() + return res } // 将所有节点转换成非富文本节点