Feat：富文本支持设置对齐方式

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

@@ -234,5 +234,6 @@ export const richTextSupportStyleList = [
   'fontWeight',
   'fontStyle',
   'textDecoration',
-  'color'
+  'color',
+  'textAlign'
 ]

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

@@ -97,6 +97,19 @@ class RichText {
         word-break: break-all;
         user-select: none;
       }
+
+      .ql-editor .ql-align-left, 
+      .smm-richtext-node-wrap .ql-align-left {
+        text-align: left;
+      }
+
+      .smm-richtext-node-wrap .ql-align-right {
+        text-align: right;
+      }
+
+      .smm-richtext-node-wrap .ql-align-center {
+        text-align: center;
+      }
       `
     )
     let cssText = `
@@ -106,6 +119,7 @@ class RichText {
         height: auto;
         line-height: 1.2;
         -webkit-user-select: text;
+        text-align: inherit;
       }
       
       .ql-container {
@@ -148,6 +162,8 @@ class RichText {
 
     this.extendFont([])
 
+    this.extendAlign()
+
     // 扩展quill的字号列表
     const SizeAttributor = Quill.import('attributors/class/size')
     SizeAttributor.whitelist = fontSizeList
@@ -172,6 +188,13 @@ class RichText {
     Quill.register(FontStyle, true)
   }
 
+  // 扩展文本对齐方式
+  extendAlign() {
+    const AlignFormat = Quill.import('formats/align')
+    AlignFormat.whitelist = ['right', 'center', 'justify', 'left']
+    Quill.register(AlignFormat, true)
+  }
+
   // 显示文本编辑控件
   showEditText({ node, rect, isInserting, isFromKeyDown, isFromScale }) {
     if (this.showTextEdit) {
@@ -444,7 +467,8 @@ class RichText {
         'background',
         'font',
         'size',
-        'formula'
+        'formula',
+        'align'
       ], // 明确指定允许的格式，不包含有序列表，无序列表等
       theme: 'snow'
     })
@@ -606,9 +630,19 @@ class RichText {
     if (!this.range && !this.lastRange) return
     const rangeLost = !this.range
     const range = rangeLost ? this.lastRange : this.range
-    clear
-      ? this.quill.removeFormat(range.index, range.length)
-      : this.quill.formatText(range.index, range.length, config)
+    if (clear) {
+      this.quill.removeFormat(range.index, range.length)
+    } else {
+      const { align, ...rest } = config
+      // 文本对齐需要对行进行格式化
+      if (align) {
+        this.quill.formatLine(range.index, range.length, 'align', align)
+      }
+      // 其他内容对文本
+      if (Object.keys(rest).length > 0) {
+        this.quill.formatText(range.index, range.length, rest)
+      }
+    }
     if (rangeLost) {
       this.quill.setSelection(this.lastRange.index, this.lastRange.length)
     }
@@ -655,6 +689,9 @@ class RichText {
         case 'color':
           config.color = value
           break
+        case 'textAlign':
+          config.align = value
+          break
         default:
           break
       }
@@ -689,6 +726,9 @@ class RichText {
         case 'color':
           data.color = value
           break
+        case 'align':
+          data.textAlign = value
+          break
         default:
           break
       }

simple-mind-map/src/theme/default.js

@@ -93,7 +93,9 @@ export default {
     // 节点鼠标hover和激活时显示的矩形边框的颜色，主题里不设置，默认会取hoverRectColor实例化选项的值
     hoverRectColor: '',
     // 点鼠标hover和激活时显示的矩形边框的圆角大小
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    // 文本对齐
+    align: 'left'
     // 下列样式也支持给节点设置，用于覆盖最外层的设置
     // paddingX,
     // paddingY,
@@ -128,7 +130,8 @@ export default {
     endDir: [1, 0],
     lineMarkerDir: 'end',
     hoverRectColor: '',
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    textAlign: 'left'
   },
   // 三级及以下节点样式
   node: {
@@ -153,7 +156,8 @@ export default {
     endDir: [1, 0],
     lineMarkerDir: 'end',
     hoverRectColor: '',
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    textAlign: 'left'
   },
   // 概要节点样式
   generalization: {
@@ -177,7 +181,8 @@ export default {
     startDir: [0, 0],
     endDir: [1, 0],
     hoverRectColor: '',
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    textAlign: 'left'
   }
 }
 
@@ -210,7 +215,8 @@ const nodeSizeIndependenceList = [
   'hoverRectRadius',
   'lineFlow',
   'lineFlowDuration',
-  'lineFlowForward'
+  'lineFlowForward',
+  'textAlign'
 ]
 export const checkIsNodeSizeIndependenceConfig = config => {
   let keys = Object.keys(config)