diff --git a/README.md b/README.md index 0e52b3a1..f2a9e985 100644 --- a/README.md +++ b/README.md @@ -153,4 +153,8 @@ const mindMap = new MindMap({ 才镇 + + + 小米bbᯤ²ᴳ +

\ No newline at end of file diff --git a/index.html b/index.html index 96a77aa9..245c7b68 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ 思绪思维导图
\ No newline at end of file + } \ No newline at end of file diff --git a/simple-mind-map/package-lock.json b/simple-mind-map/package-lock.json index a3858abc..d05ccda1 100644 --- a/simple-mind-map/package-lock.json +++ b/simple-mind-map/package-lock.json @@ -1,16 +1,15 @@ { "name": "simple-mind-map", - "version": "0.6.13", + "version": "0.6.15-fix.2", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "0.6.13", + "version": "0.6.15-fix.2", "license": "MIT", "dependencies": { "@svgdotjs/svg.js": "^3.0.16", "deepmerge": "^1.5.2", - "dom-to-image-more": "^3.1.6", "eventemitter3": "^4.0.7", "jspdf": "^2.5.1", "jszip": "^3.10.1", @@ -518,11 +517,6 @@ "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", @@ -2660,11 +2654,6 @@ "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", diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 31728787..0956a766 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.6.15-fix.2", + "version": "0.6.16", "description": "一个简单的web在线思维导图", "authors": [ { @@ -26,7 +26,6 @@ "dependencies": { "@svgdotjs/svg.js": "^3.0.16", "deepmerge": "^1.5.2", - "dom-to-image-more": "^3.1.6", "eventemitter3": "^4.0.7", "jspdf": "^2.5.1", "jszip": "^3.10.1", diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 693a67ef..7b919f96 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -155,5 +155,14 @@ export const defaultOpt = { // 错误处理函数 errorHandler: (code, error) => { console.error(code, error) - } + }, + // 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖 + // 如果不覆盖，会发生偏移问题 + resetCss: ` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + ` } diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js index c6829df3..d18d8ee0 100644 --- a/simple-mind-map/src/core/render/node/nodeCreateContents.js +++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js @@ -86,6 +86,7 @@ function createIconNode() { // 创建富文本节点 function createRichTextNode() { + const { textAutoWrapWidth } = this.mindMap.opt let g = new G() // 重新设置富文本节点内容 let recoverText = false @@ -119,15 +120,16 @@ function createRichTextNode() { let html = `
${this.nodeData.data.text}
` if (!commonCaches.measureRichtextNodeTextSizeEl) { commonCaches.measureRichtextNodeTextSizeEl = document.createElement('div') + commonCaches.measureRichtextNodeTextSizeEl.style.position = 'fixed' + commonCaches.measureRichtextNodeTextSizeEl.style.left = '-999999px' + this.mindMap.el.appendChild(commonCaches.measureRichtextNodeTextSizeEl) } let div = commonCaches.measureRichtextNodeTextSizeEl div.innerHTML = html - div.style.cssText = `position: fixed; left: -999999px;` let el = div.children[0] el.classList.add('smm-richtext-node-wrap') el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml') - el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px' - this.mindMap.el.appendChild(div) + el.style.maxWidth = textAutoWrapWidth + 'px' let { width, height } = el.getBoundingClientRect() // 如果文本为空，那么需要计算一个默认高度 if (height <= 0) { diff --git a/simple-mind-map/src/plugins/Export.js b/simple-mind-map/src/plugins/Export.js index 779a5829..08c8ec3c 100644 --- a/simple-mind-map/src/plugins/Export.js +++ b/simple-mind-map/src/plugins/Export.js @@ -39,6 +39,10 @@ class Export { let imageList = svg.find('image') let task = imageList.map(async item => { let imgUlr = item.attr('href') || item.attr('xlink:href') + // 已经是data:URL形式不用转换 + if (/^data:/.test(imgUlr)) { + return + } let imgData = await imgToDataUrl(imgUlr) item.attr('href', imgData) }) @@ -180,13 +184,20 @@ class Export { str = removeHTMLEntities(str) // 如果开启了富文本，则使用htmltocanvas转换为图片 if (this.mindMap.richText) { - let res = await this.mindMap.richText.handleExportPng(node.node) - let imgDataUrl = await this.svgToPng( - res, - transparent, - rotateWhenWidthLongerThenHeight - ) - return imgDataUrl + // 覆盖html默认的样式 + let foreignObjectList = node.find('foreignObject') + if (foreignObjectList.length > 0) { + foreignObjectList[0].add(SVG(``)) + } + str = node.svg() + // 使用其他库（html2canvas、dom-to-image-more等）来完成导出 + // let res = await this.mindMap.richText.handleExportPng(node.node) + // let imgDataUrl = await this.svgToPng( + // res, + // transparent, + // rotateWhenWidthLongerThenHeight + // ) + // return imgDataUrl } // 转换成blob数据 let blob = new Blob([str], { @@ -225,15 +236,13 @@ class Export { // 导出为svg // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入 - async svg(name, plusCssText) { + async svg(name) { let { node } = await this.getSvgData() // 开启了节点富文本编辑 if (this.mindMap.richText) { - if (plusCssText) { - let foreignObjectList = node.find('foreignObject') - if (foreignObjectList.length > 0) { - foreignObjectList[0].add(SVG(``)) - } + let foreignObjectList = node.find('foreignObject') + if (foreignObjectList.length > 0) { + foreignObjectList[0].add(SVG(``)) } } node.first().before(SVG(`${name}`)) diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index c5830b44..1666387e 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -1,6 +1,6 @@ import Quill from 'quill' import 'quill/dist/quill.snow.css' -import domtoimage from 'dom-to-image-more' +// import domtoimage from 'dom-to-image-more' import { walk, getTextFromHtml, diff --git a/web/src/assets/avatar/小米.jpg b/web/src/assets/avatar/小米.jpg new file mode 100644 index 00000000..eb4ec403 Binary files /dev/null and b/web/src/assets/avatar/小米.jpg differ diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 0de26636..0e6f5775 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,23 @@ # Changelog +## 0.6.16 + +Fix: + +> 1.Optimize the logic of rich text measurement elements, remove duplicate settings for styles, and add duplicate nodes +> +> 2.Optimize the export image logic, and when traversing the node to convert the URL of the image, if it is already in the form of data: URL, do not handle it repeatedly. + +New: + +> 1.Remove the second parameter of the exported SVG method and configure it through instantiation instead. +> +> 2.Export images without using external libraries. + +Demo: + +> 1.Fixed a bug where siblings can be added to the root node when editing the outline separately. + ## 0.6.15-fix.2 Fix: Fixed an issue where rich text nodes cannot be displayed in Firefox browser. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 3b3c0d6c..32c1ae75 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,21 @@ diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index 1adeb5db..784506cc 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -1,5 +1,23 @@ # Changelog +## 0.6.16 + +修复： + +> 1.优化富文本测量元素的逻辑，删除样式的重复设置和节点的重复添加。 +> +> 2.优化导出图片逻辑，遍历节点转换图片的url时，如果已经是data:URL形式不重复处理。 + +新增： + +> 1.去除导出svg方法的第二个参数，改为通过实例化配置。 +> +> 2.导出图片不再使用外部库。 + +Demo： + +> 1.修复单独编辑大纲时能给根节点添加兄弟节点的bug。 + ## 0.6.15-fix.2 修复：修复在Firefox浏览器中富文本节点无法显示的问题。 diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 8248fe74..a53a7bba 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -1,6 +1,21 @@