Feat：当开启openRealtimeRenderOnNodeTextEdit选项后，会去除文本编辑框的背景和阴影，达到类似原地编辑的效果

simple-mind-map/src/core/render/Render.js

@@ -133,6 +133,11 @@ class Render {
 
   //   绑定事件
   bindEvent() {
+    const {
+      openPerformance,
+      performanceConfig,
+      openRealtimeRenderOnNodeTextEdit
+    } = this.mindMap.opt
     // 画布点击事件清除当前激活节点列表
     this.mindMap.on('draw_click', e => {
       this.clearActiveNodeListOnDrawClick(e, 'click')
@@ -147,35 +152,6 @@ class Render {
       this.setRootNodeCenter()
     })
     // 性能模式
-    this.performanceMode()
-    // 实时渲染当节点文本编辑时
-    if (this.mindMap.opt.openRealtimeRenderOnNodeTextEdit) {
-      this.mindMap.on('node_text_edit_change', ({ node, text }) => {
-        node._textData = node.createTextNode(text)
-        const { width, height } = node.getNodeRect()
-        node.width = width
-        node.height = height
-        node.layout()
-        this.mindMap.render(() => {
-          // 输入框的left不会改变，所以无需更新
-          this.textEdit.updateTextEditNode(['left'])
-        })
-      })
-    }
-    // 处理非https下的复制黏贴问题
-    // 暂时不启用，因为给页面的其他输入框（比如节点文本编辑框）粘贴内容也会触发，冲突问题暂时没有想到好的解决方法，不可能要求所有输入框都阻止冒泡
-    // if (!navigator.clipboard) {
-    //   this.handlePaste = this.handlePaste.bind(this)
-    //   window.addEventListener('paste', this.handlePaste)
-    //   this.mindMap.on('beforeDestroy', () => {
-    //     window.removeEventListener('paste', this.handlePaste)
-    //   })
-    // }
-  }
-
-  // 性能模式，懒加载节点
-  performanceMode() {
-    const { openPerformance, performanceConfig } = this.mindMap.opt
     const onViewDataChange = throttle(() => {
       if (this.root) {
         this.mindMap.emit('node_tree_render_start')
@@ -188,24 +164,57 @@ class Render {
         )
       }
     }, performanceConfig.time)
-    let lastOpen = false
-    this.mindMap.on('before_update_config', opt => {
-      lastOpen = opt.openPerformance
-    })
-    this.mindMap.on('after_update_config', opt => {
-      if (opt.openPerformance && !lastOpen) {
-        // 动态开启性能模式
-        this.mindMap.on('view_data_change', onViewDataChange)
+    if (openPerformance) {
+      this.mindMap.on('view_data_change', onViewDataChange)
+    }
+    // 文本编辑时实时更新节点大小
+    this.onNodeTextEditChange = this.onNodeTextEditChange.bind(this)
+    if (openRealtimeRenderOnNodeTextEdit) {
+      this.mindMap.on('node_text_edit_change', this.onNodeTextEditChange)
+    }
+    // 监听配置改变事件
+    this.mindMap.on('after_update_config', (opt, lastOpt) => {
+      // 更新openPerformance配置
+      if (opt.openPerformance !== lastOpt.openPerformance) {
+        this.mindMap[opt.openPerformance ? 'on' : 'off'](
+          'view_data_change',
+          onViewDataChange
+        )
         this.forceLoadNode()
       }
-      if (!opt.openPerformance && lastOpen) {
-        // 动态关闭性能模式
-        this.mindMap.off('view_data_change', onViewDataChange)
-        this.forceLoadNode()
+      // 更新openRealtimeRenderOnNodeTextEdit配置
+      if (
+        opt.openRealtimeRenderOnNodeTextEdit !==
+        lastOpt.openRealtimeRenderOnNodeTextEdit
+      ) {
+        this.mindMap[opt.openRealtimeRenderOnNodeTextEdit ? 'on' : 'off'](
+          'node_text_edit_change',
+          this.onNodeTextEditChange
+        )
       }
     })
-    if (!openPerformance) return
-    this.mindMap.on('view_data_change', onViewDataChange)
+    // 处理非https下的复制黏贴问题
+    // 暂时不启用，因为给页面的其他输入框（比如节点文本编辑框）粘贴内容也会触发，冲突问题暂时没有想到好的解决方法，不可能要求所有输入框都阻止冒泡
+    // if (!navigator.clipboard) {
+    //   this.handlePaste = this.handlePaste.bind(this)
+    //   window.addEventListener('paste', this.handlePaste)
+    //   this.mindMap.on('beforeDestroy', () => {
+    //     window.removeEventListener('paste', this.handlePaste)
+    //   })
+    // }
+  }
+
+  // 监听文本编辑事件，实时更新节点大小
+  onNodeTextEditChange({ node, text }) {
+    node._textData = node.createTextNode(text)
+    const { width, height } = node.getNodeRect()
+    node.width = width
+    node.height = height
+    node.layout()
+    this.mindMap.render(() => {
+      // 输入框的left不会改变，所以无需更新
+      this.textEdit.updateTextEditNode(['left'])
+    })
   }
 
   // 强制渲染节点，不考虑是否在画布可视区域内

simple-mind-map/src/core/render/TextEdit.js

@@ -96,6 +96,22 @@ export default class TextEdit {
     this.mindMap.on('beforeDestroy', () => {
       this.unBindEvent()
     })
+    this.mindMap.on('after_update_config', (opt, lastOpt) => {
+      if (
+        opt.openRealtimeRenderOnNodeTextEdit !==
+        lastOpt.openRealtimeRenderOnNodeTextEdit
+      ) {
+        if (this.mindMap.richText) {
+          this.mindMap.richText.onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
+            opt.openRealtimeRenderOnNodeTextEdit
+          )
+        } else {
+          this.onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
+            opt.openRealtimeRenderOnNodeTextEdit
+          )
+        }
+      }
+    })
   }
 
   // 解绑事件
@@ -162,7 +178,8 @@ export default class TextEdit {
     if (node.isUseCustomNodeContent()) {
       return
     }
-    const { beforeTextEdit } = this.mindMap.opt
+    const { beforeTextEdit, openRealtimeRenderOnNodeTextEdit } =
+      this.mindMap.opt
     if (typeof beforeTextEdit === 'function') {
       let isShow = false
       try {
@@ -176,7 +193,12 @@ export default class TextEdit {
     this.currentNode = node
     const { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
     this.mindMap.view.translateXY(offsetLeft, offsetTop)
-    const rect = node._textData.node.node.getBoundingClientRect()
+    const g = node._textData.node
+    const rect = g.node.getBoundingClientRect()
+    // 如果开启了大小实时更新，那么直接隐藏节点原文本
+    if (openRealtimeRenderOnNodeTextEdit) {
+      g.hide()
+    }
     const params = {
       node,
       rect,
@@ -191,6 +213,19 @@ export default class TextEdit {
     this.showEditTextBox(params)
   }
 
+  // 当openRealtimeRenderOnNodeTextEdit配置更新后需要更新编辑框样式
+  onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
+    openRealtimeRenderOnNodeTextEdit
+  ) {
+    if (!this.textEditNode) return
+    this.textEditNode.style.backgroundColor = openRealtimeRenderOnNodeTextEdit
+      ? 'transparent'
+      : '#fff'
+    this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit
+      ? 'none'
+      : '0 0 20px rgba(0,0,0,.5)'
+  }
+
   // 处理画布缩放
   onScale() {
     const node = this.getCurrentEditNode()
@@ -212,8 +247,12 @@ export default class TextEdit {
   //  显示文本编辑框
   showEditTextBox({ node, rect, isInserting, isFromKeyDown, isFromScale }) {
     if (this.showTextEdit) return
-    const { nodeTextEditZIndex, textAutoWrapWidth, selectTextOnEnterEditText } =
-      this.mindMap.opt
+    const {
+      nodeTextEditZIndex,
+      textAutoWrapWidth,
+      selectTextOnEnterEditText,
+      openRealtimeRenderOnNodeTextEdit
+    } = this.mindMap.opt
     if (!isFromScale) {
       this.mindMap.emit('before_show_text_edit')
     }
@@ -224,8 +263,12 @@ export default class TextEdit {
       this.textEditNode.style.cssText = `
         position: fixed;
         box-sizing: border-box;
-        background-color:#fff;
-        box-shadow: 0 0 20px rgba(0,0,0,.5);
+        ${
+          openRealtimeRenderOnNodeTextEdit
+            ? ''
+            : `background-color:#fff;
+        box-shadow: 0 0 20px rgba(0,0,0,.5);`
+        }
         padding: ${this.textNodePaddingY}px ${this.textNodePaddingX}px;
         margin-left: -${this.textNodePaddingX}px;
         margin-top: -${this.textNodePaddingY}px;
@@ -351,17 +394,8 @@ export default class TextEdit {
     if (!this.showTextEdit) {
       return
     }
-    this.mindMap.execCommand(
-      'SET_NODE_TEXT',
-      this.currentNode,
-      this.getEditText()
-    )
-    if (this.currentNode.isGeneralization) {
-      // 概要节点
-      this.currentNode.generalizationBelongNode.updateGeneralization()
-    }
-    this.mindMap.render()
     const currentNode = this.currentNode
+    const text = this.getEditText()
     this.currentNode = null
     this.textEditNode.style.display = 'none'
     this.textEditNode.innerHTML = ''
@@ -370,6 +404,12 @@ export default class TextEdit {
     this.textEditNode.style.fontWeight = 'normal'
     this.textEditNode.style.transform = 'translateY(0)'
     this.showTextEdit = false
+    this.mindMap.execCommand('SET_NODE_TEXT', currentNode, text)
+    // if (currentNode.isGeneralization) {
+    //   // 概要节点
+    //   currentNode.generalizationBelongNode.updateGeneralization()
+    // }
+    this.mindMap.render()
     this.mindMap.emit(
       'hide_text_edit',
       this.textEditNode,

simple-mind-map/src/core/render/node/MindMapNode.js

@@ -428,7 +428,8 @@ class MindMapNode {
     if (!this.group) return
     // 清除之前的内容
     this.group.clear()
-    const { hoverRectPadding, tagPosition } = this.mindMap.opt
+    const { hoverRectPadding, tagPosition, openRealtimeRenderOnNodeTextEdit } =
+      this.mindMap.opt
     let { width, height, textContentItemMargin } = this
     let { paddingY } = this.getPaddingVale()
     const halfBorderWidth = this.getBorderWidth() / 2
@@ -524,6 +525,12 @@ class MindMapNode {
         .x(-oldX) // 修复非富文本模式下同时存在图标和换行的文本时，被收起和展开时图标与文字距离会逐渐拉大的问题
         .x(textContentOffsetX)
         .y((textContentHeight - this._textData.height) / 2)
+      // 如果开启了文本编辑实时渲染，需要判断当前渲染的节点是否是正在编辑的节点，是的话将透明度设置为0不显示
+      if (openRealtimeRenderOnNodeTextEdit) {
+        this._textData.node.opacity(
+          this.mindMap.renderer.textEdit.getCurrentEditNode() === this ? 0 : 1
+        )
+      }
       textContentNested.add(this._textData.node)
       textContentOffsetX += this._textData.width + textContentItemMargin
     }

simple-mind-map/src/plugins/RichText.js

@@ -189,7 +189,8 @@ class RichText {
       nodeTextEditZIndex,
       textAutoWrapWidth,
       selectTextOnEnterEditText,
-      transformRichTextOnEnterEdit
+      transformRichTextOnEnterEdit,
+      openRealtimeRenderOnNodeTextEdit
     } = this.mindMap.opt
     textAutoWrapWidth = node.hasCustomWidth()
       ? node.customTextWidth
@@ -222,7 +223,11 @@ class RichText {
       this.textEditNode.style.cssText = `
         position:fixed; 
         box-sizing: border-box; 
-        box-shadow: 0 0 20px rgba(0,0,0,.5);
+        ${
+          openRealtimeRenderOnNodeTextEdit
+            ? ''
+            : 'box-shadow: 0 0 20px rgba(0,0,0,.5);'
+        }
         outline: none; 
         word-break: break-all;
         padding: ${paddingY}px ${paddingX}px;
@@ -244,7 +249,9 @@ class RichText {
     this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
     this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
     this.textEditNode.style.zIndex = nodeTextEditZIndex
-    this.textEditNode.style.background = this.getBackground(node)
+    if (!openRealtimeRenderOnNodeTextEdit) {
+      this.textEditNode.style.background = this.getBackground(node)
+    }
     this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
     this.textEditNode.style.minHeight = originHeight + 'px'
     this.textEditNode.style.left = rect.left + 'px'
@@ -297,6 +304,21 @@ class RichText {
     this.cacheEditingText = ''
   }
 
+  // 当openRealtimeRenderOnNodeTextEdit配置更新后需要更新编辑框样式
+  onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
+    openRealtimeRenderOnNodeTextEdit
+  ) {
+    if (!this.textEditNode) return
+    this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit
+      ? 'transparent'
+      : this.node
+      ? this.getBackground(node)
+      : ''
+    this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit
+      ? 'none'
+      : '0 0 20px rgba(0,0,0,.5)'
+  }
+
   // 更新文本编辑框的大小和位置
   updateTextEditNode() {
     if (!this.node) return
@@ -388,6 +410,12 @@ class RichText {
     let html = this.getEditText()
     html = this.sortHtmlNodeStyles(html)
     const list = nodes && nodes.length > 0 ? nodes : [this.node]
+    const node = this.node
+    this.textEditNode.style.display = 'none'
+    this.showTextEdit = false
+    this.mindMap.emit('rich_text_selection_change', false)
+    this.node = null
+    this.isInserting = false
     list.forEach(node => {
       this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
       // if (node.isGeneralization) {
@@ -396,12 +424,6 @@ class RichText {
       // }
       this.mindMap.render()
     })
-    const node = this.node
-    this.textEditNode.style.display = 'none'
-    this.showTextEdit = false
-    this.mindMap.emit('rich_text_selection_change', false)
-    this.node = null
-    this.isInserting = false
     this.mindMap.emit('hide_text_edit', this.textEditNode, list, node)
   }