优化代码

simple-mind-map/src/constants/defaultOptions.js

@@ -131,5 +131,8 @@ export const defaultOpt = {
   enableCreateHiddenInput: true,
   // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式
   // 该配置在enableCreateHiddenInput设为true时生效
-  enableAutoEnterTextEditWhenKeydown: true
+  enableAutoEnterTextEditWhenKeydown: true,
+  // 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果
+  // 需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果
+  richTextEditFakeInPlace: false
 }

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

@@ -155,6 +155,12 @@ class RichText {
     if (this.showTextEdit) {
       return
     }
+    const {
+      richTextEditFakeInPlace,
+      customInnerElsAppendTo,
+      nodeTextEditZIndex,
+      textAutoWrapWidth
+    } = this.mindMap.opt
     this.node = node
     this.isInserting = isInserting
     if (!rect) rect = node._textData.node.node.getBoundingClientRect()
@@ -168,20 +174,31 @@ class RichText {
     let scaleX = rect.width / originWidth
     let scaleY = rect.height / originHeight
     // 内边距
-    const paddingX = 14
-    const paddingY = 4
+    let paddingX = 6
+    let paddingY = 4
+    if (richTextEditFakeInPlace) {
+      let paddingValue = node.getPaddingVale()
+      paddingX = paddingValue.paddingX
+      paddingY = paddingValue.paddingY
+    }
     if (!this.textEditNode) {
       this.textEditNode = document.createElement('div')
       this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
-      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: ${paddingY}px ${paddingX}px;`
+      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: ${paddingY}px ${paddingX}px;
+      `
       this.textEditNode.addEventListener('click', e => {
         e.stopPropagation()
       })
       this.textEditNode.addEventListener('mousedown', e => {
         e.stopPropagation()
       })
-      const targetNode =
-        this.mindMap.opt.customInnerElsAppendTo || document.body
+      const targetNode = customInnerElsAppendTo || document.body
       targetNode.appendChild(this.textEditNode)
     }
     // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
@@ -189,7 +206,7 @@ class RichText {
     let color = node.style.merge('color')
     this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
     this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
-    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
+    this.textEditNode.style.zIndex = nodeTextEditZIndex
     this.textEditNode.style.backgroundColor =
       bgColor === 'transparent'
         ? isWhite(color)
@@ -201,15 +218,16 @@ class RichText {
     this.textEditNode.style.left = rect.left + 'px'
     this.textEditNode.style.top = rect.top + 'px'
     this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth =
-      this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
+    this.textEditNode.style.maxWidth = textAutoWrapWidth + paddingX * 2 + 'px'
     this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
     this.textEditNode.style.transformOrigin = 'left top'
-    this.textEditNode.style.borderRadius = (node.style.merge('borderRadius') || 5) + 'px'
-    if(node.style.merge('shape') == 'roundedRectangle'){
-      this.textEditNode.style.borderRadius = '50px';
+    if (richTextEditFakeInPlace) {
+      this.textEditNode.style.borderRadius =
+        (node.style.merge('borderRadius') || 5) + 'px'
+      if (node.style.merge('shape') == 'roundedRectangle') {
+        this.textEditNode.style.borderRadius = (node.height || 50) + 'px'
+      }
     }
-	
     if (!node.nodeData.data.richText) {
       // 还不是富文本的情况
       let text = node.nodeData.data.text.split(/\n/gim).join('<br>')

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

@@ -6,7 +6,7 @@ class TouchEvent {
     this.touchesNum = 0
     this.singleTouchstartEvent = null
     this.clickNum = 0
-    this.doubleTouchmoveDistance = 0
+    this.touchStartScaleView = null
     this.bindEvent()
   }
 
@@ -33,7 +33,7 @@ class TouchEvent {
   // 手指按下事件
   onTouchstart(e) {
     this.touchesNum = e.touches.length
-    this.touchScaleViewBefore = false;
+    this.touchStartScaleView = null
     if (this.touchesNum === 1) {
       let touch = e.touches[0]
       this.singleTouchstartEvent = touch
@@ -54,26 +54,46 @@ class TouchEvent {
       let oy = touch1.clientY - touch2.clientY
       let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
       // 以两指中心点进行缩放
-      let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(touch1.clientX, touch1.clientY)
-      let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
+      let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(
+        touch1.clientX,
+        touch1.clientY
+      )
+      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){
-        this.touchScaleViewBefore = {distance:distance,scale:view.scale,x:view.x,y:view.y,cx:cx,cy:cy};
-        return;
+      const view = this.mindMap.view
+      if (!this.touchStartScaleView) {
+        this.touchStartScaleView = {
+          distance: distance,
+          scale: view.scale,
+          x: view.x,
+          y: view.y,
+          cx: cx,
+          cy: cy
+        }
+        return
       }
-	  
-	  var viewBefore = this.touchScaleViewBefore;
-      var scale = viewBefore.scale * (distance / viewBefore.distance);
-      if(Math.abs(distance - viewBefore.distance) <= 10){scale = viewBefore.scale;}
-      var ratio = (1 - scale / viewBefore.scale);
-      view.scale = scale < 0.1 ? 0.1 : scale;
-      view.x = viewBefore.x + (cx - viewBefore.x) * ratio + (cx - viewBefore.cx)*scale;
-      view.y = viewBefore.y + (cy - viewBefore.y) * ratio + (cy - viewBefore.cy)*scale;
-      view.transform();
-      this.mindMap.emit('scale',scale);
+      const viewBefore = this.touchStartScaleView
+      const scale = viewBefore.scale * (distance / viewBefore.distance)
+      if (Math.abs(distance - viewBefore.distance) <= 10) {
+        scale = viewBefore.scale
+      }
+      const ratio = 1 - scale / viewBefore.scale
+      view.scale = scale < 0.1 ? 0.1 : scale
+      view.x =
+        viewBefore.x +
+        (cx - viewBefore.x) * ratio +
+        (cx - viewBefore.cx) * scale
+      view.y =
+        viewBefore.y +
+        (cy - viewBefore.y) * ratio +
+        (cy - viewBefore.cy) * scale
+      view.transform()
+      this.mindMap.emit('scale', scale)
     }
   }
 
@@ -100,8 +120,7 @@ class TouchEvent {
     }
     this.touchesNum = 0
     this.singleTouchstartEvent = null
-    this.doubleTouchmoveDistance = 0
-    this.touchScaleViewBefore = null;
+    this.touchStartScaleView = null
   }
 
   // 发送鼠标事件