From 0f7dc949a4c9b574273b5a294cd8cd101a9007fb Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Thu, 20 Apr 2023 09:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/RichText.js               | 42 +++++++++++++++++--
 simple-mind-map/src/css/quill.css             | 11 -----
 .../src/utils/nodeCreateContents.js           | 13 +++---
 3 files changed, 46 insertions(+), 20 deletions(-)
 delete mode 100644 simple-mind-map/src/css/quill.css

diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/RichText.js
index 39a24920..827ad3c9 100644
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -1,6 +1,5 @@
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
-import './css/quill.css'
 import html2canvas from 'html2canvas'
 import { Image as SvgImage } from '@svgdotjs/svg.js'
 import { walk } from './utils'
@@ -41,8 +40,39 @@ class RichText {
     this.range = null
     this.lastRange = null
     this.node = null
+    this.styleEl = null
     this.initOpt()
     this.extendQuill()
+    this.appendCss()
+  }
+
+  // 插入样式
+  appendCss() {
+    let cssText = `
+      .ql-editor {
+        overflow: hidden;
+        padding: 0;
+        height: auto;
+        line-height: normal;
+      }
+      
+      .ql-container {
+        height: auto;
+        font-size: inherit;
+      }
+      
+      .smm-richtext-node-wrap p {
+        display: flex;
+      }
+      
+      .smm-richtext-node-edit-wrap p {
+        display: flex;
+      }
+    `
+    this.styleEl = document.createElement('style')
+    this.styleEl.type = 'text/css'
+    this.styleEl.innerHTML = cssText
+    document.head.appendChild(this.styleEl)
   }
 
   // 处理选项参数
@@ -96,9 +126,12 @@ class RichText {
     if (!rect) rect = node._textData.node.node.getBoundingClientRect()
     this.mindMap.emit('before_show_text_edit')
     this.mindMap.renderer.textEdit.registerTmpShortcut()
+    const paddingX = 5
+    const paddingY = 3
     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.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;margin-left: -${paddingX}px;margin-top: -${paddingY}px;`
       this.textEditNode.addEventListener('click', e => {
         e.stopPropagation()
       })
@@ -112,14 +145,14 @@ class RichText {
     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.minWidth = originWidth + paddingX * 2 + 'px'
     this.textEditNode.style.minHeight = originHeight + 'px'
     this.textEditNode.style.left =
       rect.left + (rect.width - originWidth) / 2 + 'px'
     this.textEditNode.style.top =
       rect.top + (rect.height - originHeight) / 2 + 'px'
     this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
     this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
       rect.height / originHeight
     })`
@@ -458,6 +491,7 @@ class RichText {
   // 插件被移除前做的事情
   beforePluginRemove() {
     this.transformAllNodesToNormalNode()
+    document.head.removeChild(this.styleEl)
   }
 }
 
diff --git a/simple-mind-map/src/css/quill.css b/simple-mind-map/src/css/quill.css
deleted file mode 100644
index 7afdf142..00000000
--- a/simple-mind-map/src/css/quill.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.ql-editor {
-    overflow: hidden;
-    padding: 0;
-    height: auto;
-    line-height: normal;
-}
-
-.ql-container {
-    height: auto;
-    font-size: inherit;
-}
\ No newline at end of file
diff --git a/simple-mind-map/src/utils/nodeCreateContents.js b/simple-mind-map/src/utils/nodeCreateContents.js
index eafa8a6b..9c507af1 100644
--- a/simple-mind-map/src/utils/nodeCreateContents.js
+++ b/simple-mind-map/src/utils/nodeCreateContents.js
@@ -57,6 +57,7 @@ function createRichTextNode() {
   div.innerHTML = html
   div.style.cssText = `position: fixed; left: -999999px;`
   let el = div.children[0]
+  el.classList.add('smm-richtext-node-wrap')
   el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
   el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
   this.mindMap.el.appendChild(div)
@@ -100,11 +101,13 @@ function createTextNode() {
     let lines = []
     let line = []
     while (arr.length) {
-      line.push(arr.shift())
-      let text = line.join('')
-      if (measureText(text, textStyle).width >= maxWidth) {
-        lines.push(text)
-        line = []
+      let str = arr.shift()
+      let text = [...line, str].join('')
+      if (measureText(text, textStyle).width <= maxWidth) {
+        line.push(str)
+      } else {
+        lines.push(line.join(''))
+        line = [str]
       }
     }
     if (line.length > 0) {