From d45a18904ed5809a81cd3f89ead297dd004f229f Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Tue, 18 Apr 2023 09:45:29 +0800 Subject: [PATCH] =?UTF-8?q?Feature=EF=BC=9A1.=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E8=8A=82=E7=82=B9=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E6=A1=86=E3=80=81=E8=8A=82=E7=82=B9=E5=A4=87=E6=B3=A8=E6=B5=AE?= =?UTF-8?q?=E5=B1=82=E7=9A=84z-index=E3=80=822.=E6=94=AF=E6=8C=81=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E7=94=BB=E5=B8=83=E5=8C=BA=E5=9F=9F=E5=A4=96=E7=BB=93?= =?UTF-8?q?=E6=9D=9F=E8=8A=82=E7=82=B9=E7=BC=96=E8=BE=91=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/index.js | 8 +++++++- simple-mind-map/src/Event.js | 8 ++++++++ simple-mind-map/src/RichText.js | 4 ++++ simple-mind-map/src/TextEdit.js | 10 ++++++++++ simple-mind-map/src/utils/nodeCreateContents.js | 15 ++++++++------- 5 files changed, 37 insertions(+), 8 deletions(-) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 7ae5592a..d3cdbe74 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -95,7 +95,13 @@ const defaultOpt = { initRootNodePosition: null, // 导出png、svg、pdf时的图形内边距 exportPaddingX: 10, - exportPaddingY: 10 + exportPaddingY: 10, + // 节点文本编辑框的z-index + nodeTextEditZIndex: 3000, + // 节点备注浮层的z-index + nodeNoteTooltipZIndex: 3000, + // 是否在点击了画布外的区域时结束节点文本的编辑状态 + isEndNodeTextEditOnClickOuter: true } // 思维导图 diff --git a/simple-mind-map/src/Event.js b/simple-mind-map/src/Event.js index 917f51b8..daac439f 100644 --- a/simple-mind-map/src/Event.js +++ b/simple-mind-map/src/Event.js @@ -27,6 +27,7 @@ class Event extends EventEmitter { // 绑定函数上下文 bindFn() { + this.onBodyClick = this.onBodyClick.bind(this) this.onDrawClick = this.onDrawClick.bind(this) this.onMousedown = this.onMousedown.bind(this) this.onMousemove = this.onMousemove.bind(this) @@ -41,6 +42,7 @@ class Event extends EventEmitter { // 绑定事件 bind() { + document.body.addEventListener('click', this.onBodyClick) this.mindMap.svg.on('click', this.onDrawClick) this.mindMap.el.addEventListener('mousedown', this.onMousedown) this.mindMap.svg.on('mousedown', this.onSvgMousedown) @@ -55,6 +57,7 @@ class Event extends EventEmitter { // 解绑事件 unbind() { + document.body.removeEventListener('click', this.onBodyClick) this.mindMap.svg.off('click', this.onDrawClick) this.mindMap.el.removeEventListener('mousedown', this.onMousedown) window.removeEventListener('mousemove', this.onMousemove) @@ -71,6 +74,11 @@ class Event extends EventEmitter { this.emit('draw_click', e) } + // 页面的单击事件 + onBodyClick(e) { + this.emit('body_click', e) + } + // svg画布的鼠标按下事件 onSvgMousedown(e) { this.emit('svg_mousedown', e) diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js index 2f2af9f7..39a24920 100644 --- a/simple-mind-map/src/RichText.js +++ b/simple-mind-map/src/RichText.js @@ -99,6 +99,9 @@ class RichText { if (!this.textEditNode) { this.textEditNode = document.createElement('div') this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: 3px 5px;margin-left: -5px;margin-top: -3px;` + this.textEditNode.addEventListener('click', e => { + e.stopPropagation() + }) document.body.appendChild(this.textEditNode) } // 原始宽高 @@ -107,6 +110,7 @@ class RichText { let originHeight = g.attr('data-height') // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见 let bgColor = node.style.merge('fillColor') + this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor this.textEditNode.style.minWidth = originWidth + 'px' this.textEditNode.style.minHeight = originHeight + 'px' diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index 388e8090..f2f9330b 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -23,6 +23,12 @@ export default class TextEdit { // 隐藏文本编辑框 this.hideEditTextBox() }) + this.mindMap.on('body_click', () => { + // 隐藏文本编辑框 + if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) { + this.hideEditTextBox() + } + }) this.mindMap.on('svg_mousedown', () => { // 隐藏文本编辑框 this.hideEditTextBox() @@ -73,6 +79,9 @@ export default class TextEdit { this.textEditNode.addEventListener('keyup', e => { e.stopPropagation() }) + this.textEditNode.addEventListener('click', e => { + e.stopPropagation() + }) document.body.appendChild(this.textEditNode) } let scale = this.mindMap.view.scale @@ -80,6 +89,7 @@ export default class TextEdit { let fontSize = node.style.merge('fontSize') let textLines = 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('
') this.textEditNode.style.minWidth = rect.width + 10 + 'px' this.textEditNode.style.minHeight = rect.height + 6 + 'px' diff --git a/simple-mind-map/src/utils/nodeCreateContents.js b/simple-mind-map/src/utils/nodeCreateContents.js index e2ec64c5..eafa8a6b 100644 --- a/simple-mind-map/src/utils/nodeCreateContents.js +++ b/simple-mind-map/src/utils/nodeCreateContents.js @@ -205,13 +205,14 @@ function createNoteNode() { if (!this.noteEl) { this.noteEl = document.createElement('div') this.noteEl.style.cssText = ` - position: absolute; - padding: 10px; - border-radius: 5px; - box-shadow: 0 2px 5px rgb(0 0 0 / 10%); - display: none; - background-color: #fff; - ` + position: absolute; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 5px rgb(0 0 0 / 10%); + display: none; + background-color: #fff; + z-index: ${ this.mindMap.opt.nodeNoteTooltipZIndex } + ` document.body.appendChild(this.noteEl) } this.noteEl.innerText = this.nodeData.data.note