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/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 2c72933e..97560ac6 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -126,5 +126,10 @@ export const defaultOpt = { // 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 customInnerElsAppendTo: null, // 拖拽元素时，指示元素新位置的块的最大高度 - nodeDragPlaceholderMaxSize: 20 + nodeDragPlaceholderMaxSize: 20, + // 是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态 + enableCreateHiddenInput: true, + // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式 + // 该配置在enableCreateHiddenInput设为true时生效 + enableAutoEnterTextEditWhenKeydown: true } diff --git a/simple-mind-map/src/core/command/KeyCommand.js b/simple-mind-map/src/core/command/KeyCommand.js index e894516c..4b493fd6 100644 --- a/simple-mind-map/src/core/command/KeyCommand.js +++ b/simple-mind-map/src/core/command/KeyCommand.js @@ -108,6 +108,11 @@ export default class KeyCommand { return arr } + // 判断是否按下了组合键 + hasCombinationKey(e) { + return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey + } + // 获取快捷键对应的键值数组 getKeyCodeArr(key) { let keyArr = key.split(/\s*\+\s*/) diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index 7fbf7698..92499d98 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -1,4 +1,4 @@ -import { getStrWithBrFromHtml, checkNodeOuter } from '../../utils' +import { getStrWithBrFromHtml, checkNodeOuter, isMobile } from '../../utils' // 节点文字编辑类 export default class TextEdit { @@ -67,7 +67,9 @@ export default class TextEdit { // 创建一个隐藏的文本输入框 createHiddenInput() { - if (this.hiddenInputEl) return + const { enableCreateHiddenInput, enableAutoEnterTextEditWhenKeydown } = + this.mindMap.opt + if (this.hiddenInputEl || isMobile() || !enableCreateHiddenInput) return this.hiddenInputEl = document.createElement('input') this.hiddenInputEl.type = 'text' this.hiddenInputEl.style.cssText = ` @@ -75,6 +77,25 @@ export default class TextEdit { left: -99999px; top: -99999px; ` + // 监听按键事件 + if (enableAutoEnterTextEditWhenKeydown) { + this.hiddenInputEl.addEventListener('keydown', e => { + const activeNodeList = this.mindMap.renderer.activeNodeList + if (activeNodeList.length <= 0 || activeNodeList.length > 1) return + const node = activeNodeList[0] + // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式 + const keyCode = e.keyCode + if ( + node && + (keyCode === 229 || + (keyCode >= 65 && keyCode <= 90) || + (keyCode >= 48 && keyCode <= 57)) && + !this.mindMap.keyCommand.hasCombinationKey(e) + ) { + this.show(node) + } + }) + } // 监听粘贴事件 this.hiddenInputEl.addEventListener('paste', async event => { event.preventDefault() @@ -106,7 +127,7 @@ export default class TextEdit { stopFocusOnNodeActive() { this.enableFocus = false } - + // 开启默认聚焦 openFocusOnNodeActive() { this.enableFocus = true @@ -148,7 +169,7 @@ export default class TextEdit { this.mindMap.richText.showEditText(node, rect, isInserting) return } - this.showEditTextBox(node, rect) + this.showEditTextBox(node, rect, isInserting) } // 处理画布缩放 @@ -166,7 +187,7 @@ export default class TextEdit { } // 显示文本编辑框 - showEditTextBox(node, rect) { + showEditTextBox(node, rect, isInserting) { this.mindMap.emit('before_show_text_edit') this.registerTmpShortcut() if (!this.textEditNode) { @@ -179,10 +200,11 @@ export default class TextEdit { 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) } let scale = this.mindMap.view.scale @@ -209,12 +231,27 @@ export default class TextEdit { } this.showTextEdit = true // 选中文本 - if (!this.cacheEditingText) { + // if (!this.cacheEditingText) { + // this.selectNodeText() + // } + if (isInserting) { this.selectNodeText() + } else { + this.focus() } this.cacheEditingText = '' } + // 聚焦 + focus() { + let selection = window.getSelection() + let range = document.createRange() + range.selectNodeContents(this.textEditNode) + range.collapse() + selection.removeAllRanges() + selection.addRange(range) + } + // 选中文本 selectNodeText() { let selection = window.getSelection() diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index 28a8b354..fd99c5bf 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -204,7 +204,7 @@ class Drag extends Base { // 检测重叠节点 checkOverlapNode() { - if (!this.drawTransform) { + if (!this.drawTransform || !this.placeholder) { return } const { nodeDragPlaceholderMaxSize } = this.mindMap.opt diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 48140620..146bcf88 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' @@ -507,11 +517,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 } // 将所有节点转换成非富文本节点 diff --git a/simple-mind-map/src/plugins/TouchEvent.js b/simple-mind-map/src/plugins/TouchEvent.js index 1d297820..67ff6a08 100644 --- a/simple-mind-map/src/plugins/TouchEvent.js +++ b/simple-mind-map/src/plugins/TouchEvent.js @@ -58,7 +58,6 @@ class TouchEvent { let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY) let cx = (touch1ClientX + touch2ClientX) / 2 let cy = (touch1ClientY + touch2ClientY) / 2 - // 手势缩放,基于最开始的位置进行缩放(基于前一个位置缩放不是线性关系); 缩放同时支持位置拖动 var view = this.mindMap.view; if(!this.touchScaleViewBefore){ diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index 90236598..c934eca6 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -455,25 +455,25 @@ export const loadImage = imgFile => { } // 移除字符串中的html实体 -export const removeHTMLEntities = (str) => { - [[' ', ' ']].forEach((item) => { +export const removeHTMLEntities = str => { + ;[[' ', ' ']].forEach(item => { str = str.replaceAll(item[0], item[1]) }) return str } // 获取一个数据的类型 -export const getType = (data) => { +export const getType = data => { return Object.prototype.toString.call(data).slice(7, -1) } // 判断一个数据是否是null和undefined和空字符串 -export const isUndef = (data) => { +export const isUndef = data => { return data === null || data === undefined || data === '' } // 移除html字符串中节点的内联样式 -export const removeHtmlStyle = (html) => { +export const removeHtmlStyle = html => { return html.replaceAll(/(<[^\s]+)\s+style=["'][^'"]+["']\s*(>)/g, '$1$2') } @@ -485,12 +485,12 @@ export const addHtmlStyle = (html, tag, style) => { // 检查一个字符串是否是富文本字符 let checkIsRichTextEl = null -export const checkIsRichText = (str) => { +export const checkIsRichText = str => { if (!checkIsRichTextEl) { checkIsRichTextEl = document.createElement('div') } checkIsRichTextEl.innerHTML = str - for (let c = checkIsRichTextEl.childNodes, i = c.length; i--;) { + for (let c = checkIsRichTextEl.childNodes, i = c.length; i--; ) { if (c[i].nodeType == 1) return true } return false @@ -503,13 +503,20 @@ export const replaceHtmlText = (html, searchText, replaceText) => { replaceHtmlTextEl = document.createElement('div') } replaceHtmlTextEl.innerHTML = html - let walk = (root) => { + let walk = root => { let childNodes = root.childNodes - childNodes.forEach((node) => { - if (node.nodeType === 1) {// 元素节点 + childNodes.forEach(node => { + if (node.nodeType === 1) { + // 元素节点 walk(node) - } else if (node.nodeType === 3) {// 文本节点 - root.replaceChild(document.createTextNode(node.nodeValue.replaceAll(searchText, replaceText)), node) + } else if (node.nodeType === 3) { + // 文本节点 + root.replaceChild( + document.createTextNode( + node.nodeValue.replaceAll(searchText, replaceText) + ), + node + ) } }) } @@ -518,22 +525,39 @@ export const replaceHtmlText = (html, searchText, replaceText) => { } // 判断一个颜色是否是白色 -export const isWhite = (color) => { +export const isWhite = color => { color = String(color).replaceAll(/\s+/g, '') - return ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(color) || /rgba\(255,255,255,[^)]+\)/.test(color) + return ( + ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes( + color + ) || /rgba\(255,255,255,[^)]+\)/.test(color) + ) } // 判断一个颜色是否是透明 -export const isTransparent = (color) => { +export const isTransparent = color => { color = String(color).replaceAll(/\s+/g, '') - return ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color) + return ( + ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color) + ) } // 从当前主题里获取一个非透明非白色的颜色 -export const getVisibleColorFromTheme = (themeConfig) => { +export const getVisibleColorFromTheme = themeConfig => { let { lineColor, root, second, node } = themeConfig - let list = [lineColor, root.fillColor, root.color, second.fillColor, second.color, node.fillColor, node.color, root.borderColor, second.borderColor, node.borderColor] - for(let i = 0; i < list.length; i++) { + let list = [ + lineColor, + root.fillColor, + root.color, + second.fillColor, + second.color, + node.fillColor, + node.color, + root.borderColor, + second.borderColor, + node.borderColor + ] + for (let i = 0; i < list.length; i++) { let color = list[i] if (!isTransparent(color) && !isWhite(color)) { return color @@ -543,22 +567,24 @@ export const getVisibleColorFromTheme = (themeConfig) => { // 将

形式的节点富文本内容转换成\n换行的文本 let nodeRichTextToTextWithWrapEl = null -export const nodeRichTextToTextWithWrap = (html) => { +export const nodeRichTextToTextWithWrap = html => { if (!nodeRichTextToTextWithWrapEl) { nodeRichTextToTextWithWrapEl = document.createElement('div') } nodeRichTextToTextWithWrapEl.innerHTML = html const childNodes = nodeRichTextToTextWithWrapEl.childNodes let res = '' - for(let i = 0; i < childNodes.length; i++) { + for (let i = 0; i < childNodes.length; i++) { const node = childNodes[i] - if (node.nodeType === 1) {// 元素节点 + if (node.nodeType === 1) { + // 元素节点 if (node.tagName.toLowerCase() === 'p') { res += node.textContent + '\n' } else { res += node.textContent } - } else if (node.nodeType === 3) {// 文本节点 + } else if (node.nodeType === 3) { + // 文本节点 res += node.nodeValue } } @@ -567,7 +593,7 @@ export const nodeRichTextToTextWithWrap = (html) => { // 将
换行的文本转换成

形式的节点富文本内容 let textToNodeRichTextWithWrapEl = null -export const textToNodeRichTextWithWrap = (html) => { +export const textToNodeRichTextWithWrap = html => { if (!textToNodeRichTextWithWrapEl) { textToNodeRichTextWithWrapEl = document.createElement('div') } @@ -575,23 +601,34 @@ export const textToNodeRichTextWithWrap = (html) => { const childNodes = textToNodeRichTextWithWrapEl.childNodes let list = [] let str = '' - for(let i = 0; i < childNodes.length; i++) { + for (let i = 0; i < childNodes.length; i++) { const node = childNodes[i] - if (node.nodeType === 1) {// 元素节点 + if (node.nodeType === 1) { + // 元素节点 if (node.tagName.toLowerCase() === 'br') { list.push(str) str = '' } else { str += node.textContent } - } else if (node.nodeType === 3) {// 文本节点 + } else if (node.nodeType === 3) { + // 文本节点 str += node.nodeValue } } if (str) { list.push(str) } - return list.map((item) => { - return `

${item}

` - }).join('') -} \ No newline at end of file + return list + .map(item => { + return `

${item}

` + }) + .join('') +} + +// 判断是否是移动端环境 +export const isMobile = () => { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( + navigator.userAgent + ) +} diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue index c2d1d829..b3e9d461 100644 --- a/web/src/pages/Edit/components/Contextmenu.vue +++ b/web/src/pages/Edit/components/Contextmenu.vue @@ -3,6 +3,7 @@ class="contextmenuContainer listBox" v-if="isShow" :style="{ left: left + 'px', top: top + 'px' }" + :class="{ isDark: isDark }" >