feature：节点文本增加自动换行功能

simple-mind-map/index.js

@@ -59,7 +59,9 @@ const defaultOpt = {
       opacity: 0.5,
       fontSize: 14
     }
-  }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500
 }
 
 //  思维导图

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/Node.js

@@ -1,6 +1,6 @@
 import Style from './Style'
 import Shape from './Shape'
-import { resizeImgSize, asyncRun } from './utils'
+import { resizeImgSize, asyncRun, measureText } from './utils'
 import { Image, SVG, Circle, A, G, Rect, Text } from '@svgdotjs/svg.js'
 import btnsSvg from './svg/btns'
 import iconsSvg from './svg/icons'
@@ -376,10 +376,31 @@ class Node {
       false,
       this.nodeData.data.isActive
     )
-    this.nodeData.data.text.split(/\n/gim).forEach((item, index) => {
+    // 文本超长自动换行
+    let textStyle = this.style.getTextFontStyle()
+    let textArr = this.nodeData.data.text.split(/\n/gim)
+    let maxWidth = this.mindMap.opt.textAutoWrapWidth
+    textArr.forEach((item, index) => {
+      let arr = item.split('')
+      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 = []
+        }
+      }
+      if (line.length > 0) {
+        lines.push(line.join(''))
+      }
+      textArr[index] = lines.join('\n')
+    })
+    textArr = textArr.join('\n').split(/\n/gim)
+    textArr.forEach((item, index) => {
       let node = new Text().text(item)
       this.style.text(node)
-      console.log(this.isRoot, fontSize, lineHeight, index);
       node.y(fontSize * lineHeight * index)
       g.add(node)
     })

simple-mind-map/src/Style.js

@@ -124,6 +124,16 @@ class Style {
       })
   }
 
+  // 获取文本样式
+  getTextFontStyle() {
+    return { 
+      italic: this.merge('fontStyle') === 'italic', 
+      bold: this.merge('fontWeight'), 
+      fontSize: this.merge('fontSize'), 
+      fontFamily: this.merge('fontFamily')
+    }
+  }
+
   //  html文字节点
 
   domText(node, fontSizeScale = 1) {

simple-mind-map/src/TextEdit.js

@@ -75,6 +75,7 @@ export default class TextEdit {
     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 * this.mindMap.view.scale + 'px'
     this.showTextEdit = true
     // 选中文本
     this.selectNodeText()

simple-mind-map/src/utils/index.js

@@ -235,4 +235,34 @@ export const camelCaseToHyphen = (str) => {
   return str.replace(/([a-z])([A-Z])/g, (...args) => {
     return args[1] + '-' + args[2].toLowerCase()
   })
+}
+
+//计算节点的文本长宽
+let measureTextContext = null
+export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
+  const font = joinFontStr({
+    italic,
+    bold,
+    fontSize,
+    fontFamily
+  })
+  if (!measureTextContext) {
+    const canvas = document.createElement('canvas')
+    measureTextContext = canvas.getContext('2d')
+  }
+  measureTextContext.save()
+  measureTextContext.font = font
+  const {
+    width,
+    actualBoundingBoxAscent,
+    actualBoundingBoxDescent
+  } = measureTextContext.measureText(text)
+  measureTextContext.restore()
+  const height = actualBoundingBoxAscent + actualBoundingBoxDescent
+  return { width, height }
+}
+
+// 拼接font字符串
+export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => {
+  return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''} ${fontSize}px ${fontFamily} `
 }

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.4
+
+New：1.Automatic line wrapping function is added to node text.
+
 ## 0.3.3
 
 Fix: The root node text cannot wrap.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.3.4</h2>
+<p>New：1.Automatic line wrapping function is added to node text.</p>
 <h2>0.3.3</h2>
 <p>Fix: The root node text cannot wrap.</p>
 <h2>0.3.2</h2>

web/src/pages/Doc/en/constructor/index.md

@@ -40,6 +40,7 @@ const mindMap = new MindMap({
 | readonly（v0.1.7+）              | Boolean | false            | Whether it is read-only mode                                 |          |
 | enableFreeDrag（v0.2.4+）        | Boolean | false            | Enable node free drag                                        |          |
 | watermarkConfig（v0.2.4+）       | Object  |                  | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration |          |
+| textAutoWrapWidth（v0.3.4+）     | Number  | 500 |   Each line of text in the node will wrap automatically when it reaches the width               |          |
 
 ### Watermark config
 

web/src/pages/Doc/en/constructor/index.vue

@@ -140,6 +140,13 @@
 <td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
 <td></td>
 </tr>
+<tr>
+<td>textAutoWrapWidth（v0.3.4+）</td>
+<td>Number</td>
+<td>500</td>
+<td>Each line of text in the node will wrap automatically when it reaches the width</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>

web/src/pages/Doc/en/utils/index.md

@@ -109,6 +109,22 @@ Angle to radian
 
 CamelCase to hyphen
 
+#### joinFontStr({ italic, bold, fontSize, fontFamily })
+
+> v0.3.4+
+
+Join the `font` attribute value of the `css` font
+
+#### measureText(text, { italic, bold, fontSize, fontFamily })
+
+> v0.3.4+
+
+Measure the width and height of the text, return value:
+
+```js
+{ width, height }
+```
+
 ## Simulate CSS background in Canvas
 
 Import:

web/src/pages/Doc/en/utils/index.vue

@@ -62,6 +62,18 @@ and copying the <code>data</code> of the data object, example:</p>
 <p>v0.2.24+</p>
 </blockquote>
 <p>CamelCase to hyphen</p>
+<h4>joinFontStr({ italic, bold, fontSize, fontFamily })</h4>
+<blockquote>
+<p>v0.3.4+</p>
+</blockquote>
+<p>Join the <code>font</code> attribute value of the <code>css</code> font</p>
+<h4>measureText(text, { italic, bold, fontSize, fontFamily })</h4>
+<blockquote>
+<p>v0.3.4+</p>
+</blockquote>
+<p>Measure the width and height of the text, return value:</p>
+<pre class="hljs"><code>{ width, height }
+</code></pre>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.4
+
+New：1.节点文本增加自动换行功能。
+
 ## 0.3.3
 
 修复：根节点文字无法换行的问题。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.3.4</h2>
+<p>New：1.节点文本增加自动换行功能。</p>
 <h2>0.3.3</h2>
 <p>修复：根节点文字无法换行的问题。</p>
 <h2>0.3.2</h2>

web/src/pages/Doc/zh/constructor/index.md

@@ -40,6 +40,7 @@ const mindMap = new MindMap({
 | readonly（v0.1.7+）              | Boolean | false            | 是否是只读模式                                               |          |
 | enableFreeDrag（v0.2.4+）        | Boolean | false            | 是否开启节点自由拖拽                                         |          |
 | watermarkConfig（v0.2.4+）       | Object  |                  | 水印配置，详细配置请参考下方表格【水印配置】                 |          |
+| textAutoWrapWidth（v0.3.4+）     | Number  | 500 |   节点内每行文本达到该宽度后自动换行               |          |
 
 ### 水印配置
 

web/src/pages/Doc/zh/constructor/index.vue

@@ -140,6 +140,13 @@
 <td>水印配置，详细配置请参考下方表格【水印配置】</td>
 <td></td>
 </tr>
+<tr>
+<td>textAutoWrapWidth（v0.3.4+）</td>
+<td>Number</td>
+<td>500</td>
+<td>节点内每行文本达到该宽度后自动换行</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>

web/src/pages/Doc/zh/utils/index.md

@@ -104,6 +104,22 @@ copyNodeTree({}, node)
 
 驼峰转连字符
 
+#### joinFontStr({ italic, bold, fontSize, fontFamily })
+
+> v0.3.4+
+
+拼接`css`字体的`font`属性值
+
+#### measureText(text, { italic, bold, fontSize, fontFamily })
+
+> v0.3.4+
+
+测量文本的宽高，返回值：
+
+```js
+{ width, height }
+```
+
 ## 在canvas中模拟css的背景属性
 
 引入：

web/src/pages/Doc/zh/utils/index.vue

@@ -57,6 +57,18 @@
 <p>v0.2.24+</p>
 </blockquote>
 <p>驼峰转连字符</p>
+<h4>joinFontStr({ italic, bold, fontSize, fontFamily })</h4>
+<blockquote>
+<p>v0.3.4+</p>
+</blockquote>
+<p>拼接<code>css</code>字体的<code>font</code>属性值</p>
+<h4>measureText(text, { italic, bold, fontSize, fontFamily })</h4>
+<blockquote>
+<p>v0.3.4+</p>
+</blockquote>
+<p>测量文本的宽高，返回值：</p>
+<pre class="hljs"><code>{ width, height }
+</code></pre>
 <h2>在canvas中模拟css的背景属性</h2>
 <p>引入：</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>