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

docs/en/guide/schema.md

@@ -39,7 +39,8 @@ interface IElement {
     LEFT = 'left',
     CENTER = 'center',
     RIGHT = 'right',
-    ALIGNMENT = 'alignment'
+    ALIGNMENT = 'alignment',
+    JUSTIFY = 'justify'
   };
   rowMargin?: number;
   letterSpacing?: number;

docs/en/guide/shortcut-internal.md

@@ -132,6 +132,10 @@ Feature: Line right
 
 Feature: Both sides are aligned
 
+## Ctrl/Cmd + Shift + J
+
+Feature: Line justify
+
 ## Ctrl + Shift + X
 
 Feature: Strikethrough

docs/guide/schema.md

@@ -39,7 +39,8 @@ interface IElement {
     LEFT = 'left',
     CENTER = 'center',
     RIGHT = 'right',
-    ALIGNMENT = 'alignment'
+    ALIGNMENT = 'alignment',
+    JUSTIFY = 'justify'
   };
   rowMargin?: number;
   letterSpacing?: number;

docs/guide/shortcut-internal.md

@@ -132,6 +132,10 @@
 
 功能：两端对齐
 
+## Ctrl/Cmd + Shift + J
+
+功能：分散对齐
+
 ## Ctrl + Shift + X
 
 功能：删除线

index.html

@@ -158,6 +158,9 @@
         <div class="menu-item__alignment">
           <i></i>
         </div>
+        <div class="menu-item__justify">
+          <i></i>
+        </div>
         <div class="menu-item__row-margin">
           <i title="行间距"></i>
           <div class="options">

src/assets/images/justify.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="#3D4757" fill="#3D4757" d="M2 10.5H14M2 13.5H14" stroke-linecap="round" stroke-linejoin="miter">
+  </path>
+  <path stroke="#3D4757" fill="#3D4757" d="M14 3.5L12 1.5M14 3.5L12 5.5M14 3.5L2 3.5M4 1.5L2 3.5M2 3.5L4 5.5"
+    stroke-linecap="round" stroke-linejoin="miter">
+  </path>
+</svg>

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
   }

src/main.ts

@@ -313,6 +313,15 @@ window.onload = function () {
     instance.command.executeRowFlex(RowFlex.ALIGNMENT)
   }
 
+  const justifyDom = document.querySelector<HTMLDivElement>(
+    '.menu-item__justify'
+  )!
+  justifyDom.title = `分散对齐(${isApple ? '⌘' : 'Ctrl'}+Shift+J)`
+  justifyDom.onclick = function () {
+    console.log('justify')
+    instance.command.executeRowFlex(RowFlex.JUSTIFY)
+  }
+
   const rowMarginDom = document.querySelector<HTMLDivElement>(
     '.menu-item__row-margin'
   )!
@@ -1503,12 +1512,15 @@ window.onload = function () {
     centerDom.classList.remove('active')
     rightDom.classList.remove('active')
     alignmentDom.classList.remove('active')
+    justifyDom.classList.remove('active')
     if (payload.rowFlex && payload.rowFlex === 'right') {
       rightDom.classList.add('active')
     } else if (payload.rowFlex && payload.rowFlex === 'center') {
       centerDom.classList.add('active')
     } else if (payload.rowFlex && payload.rowFlex === 'alignment') {
       alignmentDom.classList.add('active')
+    } else if (payload.rowFlex && payload.rowFlex === 'justify') {
+      justifyDom.classList.add('active')
     } else {
       leftDom.classList.add('active')
     }

src/style.css

@@ -339,6 +339,10 @@ ul {
   background-image: url('./assets/images/alignment.svg');
 }
 
+.menu-item__justify i {
+  background-image: url('./assets/images/justify.svg');
+}
+
 .menu-item__row-margin {
   position: relative;
 }