diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js index 827ad3c9..e29fb748 100644 --- a/simple-mind-map/src/RichText.js +++ b/simple-mind-map/src/RichText.js @@ -41,6 +41,7 @@ class RichText { this.lastRange = null this.node = null this.styleEl = null + this.cacheEditingText = '' this.initOpt() this.extendQuill() this.appendCss() @@ -160,9 +161,9 @@ class RichText { // 还不是富文本的情况 let text = node.nodeData.data.text.split(/\n/gim).join('
') let html = `

${text}

` - this.textEditNode.innerHTML = html + this.textEditNode.innerHTML = this.cacheEditingText || html } else { - this.textEditNode.innerHTML = node.nodeData.data.text + this.textEditNode.innerHTML = this.cacheEditingText || node.nodeData.data.text } this.initQuillEditor() document.querySelector('.ql-editor').style.minHeight = originHeight + 'px' @@ -172,6 +173,7 @@ class RichText { // 如果是非富文本的情况,需要手动应用文本样式 this.setTextStyleIfNotRichText(node) } + this.cacheEditingText = '' } // 如果是非富文本的情况,需要手动应用文本样式 @@ -188,14 +190,19 @@ class RichText { this.formatAllText(style) } + // 获取当前正在编辑的内容 + getEditText() { + let html = this.quill.container.firstChild.innerHTML + // 去除最后的空行 + return html.replace(/


<\/p>$/, '') + } + // 隐藏文本编辑控件,即完成编辑 hideEditText(nodes) { if (!this.showTextEdit) { return } - let html = this.quill.container.firstChild.innerHTML - // 去除最后的空行 - html = html.replace(/


<\/p>$/, '') + let html = this.getEditText() let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList list.forEach(node => { this.mindMap.execCommand('SET_NODE_TEXT', node, html, true) diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index b371f658..adb2c9de 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -6,16 +6,21 @@ export default class TextEdit { constructor(renderer) { this.renderer = renderer this.mindMap = renderer.mindMap + // 当前编辑的节点 + this.currentNode = null // 文本编辑框 this.textEditNode = null // 文本编辑框是否显示 this.showTextEdit = false + // 如果编辑过程中缩放画布了,那么缓存当前编辑的内容 + this.cacheEditingText = '' this.bindEvent() } // 事件 bindEvent() { this.show = this.show.bind(this) + this.onScale = this.onScale.bind(this) // 节点双击事件 this.mindMap.on('node_dblclick', this.show) // 点击事件 @@ -48,6 +53,7 @@ export default class TextEdit { } this.show(this.renderer.activeNodeList[0]) }) + this.mindMap.on('scale', this.onScale) } // 注册临时快捷键 @@ -60,6 +66,7 @@ export default class TextEdit { // 显示文本编辑框 show(node) { + this.currentNode = node let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node) this.mindMap.view.translateXY(offsetLeft, offsetTop) let rect = node._textData.node.node.getBoundingClientRect() @@ -70,6 +77,19 @@ export default class TextEdit { this.showEditTextBox(node, rect) } + // 处理画布缩放 + onScale() { + if (!this.currentNode) return + if (this.mindMap.richText) { + this.mindMap.richText.cacheEditingText = this.mindMap.richText.getEditText() + this.mindMap.richText.showTextEdit = false + } else { + this.cacheEditingText = this.getEditText() + this.showTextEdit = false + } + this.show(this.currentNode) + } + // 显示文本编辑框 showEditTextBox(node, rect) { this.mindMap.emit('before_show_text_edit') @@ -89,7 +109,7 @@ export default class TextEdit { let scale = this.mindMap.view.scale let lineHeight = node.style.merge('lineHeight') let fontSize = node.style.merge('fontSize') - let textLines = node.nodeData.data.text.split(/\n/gim) + let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim) node.style.domText(this.textEditNode, scale, textLines.length) this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.innerHTML = textLines.join('
') @@ -104,7 +124,10 @@ export default class TextEdit { } this.showTextEdit = true // 选中文本 - this.selectNodeText() + if (!this.cacheEditingText) { + this.selectNodeText() + } + this.cacheEditingText = '' } // 选中文本 @@ -116,8 +139,14 @@ export default class TextEdit { selection.addRange(range) } + // 获取当前正在编辑的内容 + getEditText() { + return getStrWithBrFromHtml(this.textEditNode.innerHTML) + } + // 隐藏文本编辑框 hideEditTextBox() { + this.currentNode = null if (this.mindMap.richText) { return this.mindMap.richText.hideEditText() } @@ -125,7 +154,7 @@ export default class TextEdit { return } this.renderer.activeNodeList.forEach(node => { - let str = getStrWithBrFromHtml(this.textEditNode.innerHTML) + let str = this.getEditText() this.mindMap.execCommand('SET_NODE_TEXT', node, str) if (node.isGeneralization) { // 概要节点