feat: add justify-all property to row flex #535

src/editor/core/draw/Draw.ts

@@ -1585,15 +1585,20 @@ export class Draw {
         ) {
           curRow.height = defaultBasicRowMarginHeight
         }
-        // 两端对齐
+        // 两端对齐、分散对齐
         if (
-          preElement?.rowFlex === RowFlex.ALIGNMENT &&
-          curRowWidth > availableWidth
+          preElement?.rowFlex === RowFlex.JUSTIFY ||
+          (preElement?.rowFlex === RowFlex.ALIGNMENT && isWidthNotEnough)
         ) {
+          // 忽略换行符及尾部元素间隔设置
+          const rowElementList =
+            curRow.elementList[0]?.value === ZERO
+              ? curRow.elementList.slice(1)
+              : curRow.elementList
           const gap =
-            (availableWidth - curRow.width) / curRow.elementList.length
-          for (let e = 0; e < curRow.elementList.length; e++) {
-            const el = curRow.elementList[e]
+            (availableWidth - curRow.width) / (rowElementList.length - 1)
+          for (let e = 0; e < rowElementList.length - 1; e++) {
+            const el = rowElementList[e]
             el.metrics.width += gap
           }
           curRow.width = availableWidth
@@ -1832,7 +1837,10 @@ export class Draw {
           this.radioParticle.render(ctx, element, x, y + offsetY)
         } else if (element.type === ElementType.TAB) {
           this.textParticle.complete()
-        } else if (element.rowFlex === RowFlex.ALIGNMENT) {
+        } else if (
+          element.rowFlex === RowFlex.ALIGNMENT ||
+          element.rowFlex === RowFlex.JUSTIFY
+        ) {
           // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本
           this.textParticle.record(ctx, element, x, y + offsetY)
           this.textParticle.complete()

src/editor/core/shortcut/keys/richtextKeys.ts

@@ -90,5 +90,13 @@ export const richtextKeys: IRegisterShortcut[] = [
     callback: (command: Command) => {
       command.executeRowFlex(RowFlex.ALIGNMENT)
     }
+  },
+  {
+    key: KeyMap.J,
+    mod: true,
+    shift: true,
+    callback: (command: Command) => {
+      command.executeRowFlex(RowFlex.JUSTIFY)
+    }
   }
 ]

src/editor/dataset/enum/Row.ts

@@ -2,5 +2,6 @@ export enum RowFlex {
   LEFT = 'left',
   CENTER = 'center',
   RIGHT = 'right',
-  ALIGNMENT = 'alignment'
+  ALIGNMENT = 'alignment',
+  JUSTIFY = 'justify'
 }

src/editor/utils/element.ts

@@ -736,6 +736,8 @@ export function getElementRowFlex(node: HTMLElement) {
       return RowFlex.RIGHT
     case 'justify':
       return RowFlex.ALIGNMENT
+    case 'justify-all':
+      return RowFlex.JUSTIFY
     default:
       return RowFlex.LEFT
   }