Merge pull request #79 from Hufe921/feature/alignment

feat:add row alignment

index.html

@@ -85,6 +85,9 @@
         <div class="menu-item__right">
           <i></i>
         </div>
+        <div class="menu-item__alignment">
+          <i></i>
+        </div>
         <div class="menu-item__row-margin">
           <i></i>
           <div class="options">

src/assets/images/alignment.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2v-1zm0-3h12v1H2v-1zm0-3h12v1H2V7zm0-6h12v1H2V1zm0 3h12v1H2V4z" fill="#3D4757" fill-rule="evenodd"/></svg>

src/editor/core/command/Command.ts

@@ -35,6 +35,7 @@ export class Command {
   private static left: CommandAdapt['rowFlex']
   private static center: CommandAdapt['rowFlex']
   private static right: CommandAdapt['rowFlex']
+  private static alignment: CommandAdapt['rowFlex']
   private static rowMargin: CommandAdapt['rowMargin']
   private static insertTable: CommandAdapt['insertTable']
   private static insertTableTopRow: CommandAdapt['insertTableTopRow']
@@ -104,6 +105,7 @@ export class Command {
     Command.left = adapt.rowFlex.bind(adapt)
     Command.center = adapt.rowFlex.bind(adapt)
     Command.right = adapt.rowFlex.bind(adapt)
+    Command.alignment = adapt.rowFlex.bind(adapt)
     Command.rowMargin = adapt.rowMargin.bind(adapt)
     Command.insertTable = adapt.insertTable.bind(adapt)
     Command.insertTableTopRow = adapt.insertTableTopRow.bind(adapt)
@@ -254,6 +256,10 @@ export class Command {
     return Command.right(RowFlex.RIGHT)
   }
 
+  public executeAlignment() {
+    return Command.alignment(RowFlex.ALIGNMENT)
+  }
+
   public executeRowMargin(payload: number) {
     return Command.rowMargin(payload)
   }

src/editor/core/draw/Draw.ts

@@ -744,6 +744,15 @@ export class Draw {
         || curRow.width + metrics.width > innerWidth
         || (i !== 0 && element.value === ZERO)
       ) {
+        // 两端对齐
+        if (preElement?.rowFlex === RowFlex.ALIGNMENT && curRow.width + metrics.width > innerWidth) {
+          const gap = (innerWidth - curRow.width) / curRow.elementList.length
+          for (let e = 0; e < curRow.elementList.length; e++) {
+            const el = curRow.elementList[e]
+            el.metrics.width += gap
+          }
+          curRow.width = innerWidth
+        }
         rowList.push({
           width: metrics.width,
           height,
@@ -785,13 +794,11 @@ export class Draw {
     let index = startIndex
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i]
-      // 计算行偏移量（行居左、居中、居右）
+      // 计算行偏移量（行居中、居右）
-      if (curRow.rowFlex && curRow.rowFlex !== RowFlex.LEFT) {
+      if (curRow.rowFlex === RowFlex.CENTER) {
-        if (curRow.rowFlex === RowFlex.CENTER) {
+        x += (innerWidth - curRow.width) / 2
-          x += (innerWidth - curRow.width) / 2
+      } else if (curRow.rowFlex === RowFlex.RIGHT) {
-        } else {
+        x += innerWidth - curRow.width
-          x += innerWidth - curRow.width
-        }
       }
       // 当前td所在位置
       const tablePreX = x
@@ -869,6 +876,10 @@ export class Draw {
           this.checkboxParticle.render(ctx, element, x, y + offsetY)
         } else if (element.type === ElementType.TAB) {
           this._drawRichText(ctx)
+        } else if (element.rowFlex === RowFlex.ALIGNMENT) {
+          // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本
+          this.textParticle.record(ctx, element, x, y + offsetY)
+          this._drawRichText(ctx)
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY)
         }

src/editor/dataset/enum/Row.ts

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

src/main.ts

@@ -146,6 +146,12 @@ window.onload = function () {
     instance.command.executeRight()
   }
 
+  const alignmentDom = document.querySelector<HTMLDivElement>('.menu-item__alignment')!
+  alignmentDom.onclick = function () {
+    console.log('alignment')
+    instance.command.executeAlignment()
+  }
+
   const rowMarginDom = document.querySelector<HTMLDivElement>('.menu-item__row-margin')!
   const rowOptionDom = rowMarginDom.querySelector<HTMLDivElement>('.options')!
   rowMarginDom.onclick = function () {
@@ -866,10 +872,13 @@ window.onload = function () {
     leftDom.classList.remove('active')
     centerDom.classList.remove('active')
     rightDom.classList.remove('active')
+    alignmentDom.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 {
       leftDom.classList.add('active')
     }

src/style.css

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