feat:增加行布局

index.html

@@ -39,7 +39,6 @@
             </ul>
           </div>
         </div>
-
         <div class="menu-item__size-add">
           <i></i>
         </div>
@@ -70,6 +69,18 @@
         </div>
       </div>
       <div class="menu-divider"></div>
+      <div class="menu-item">
+        <div class="menu-item__left">
+          <i></i>
+        </div>
+        <div class="menu-item__center">
+          <i></i>
+        </div>
+        <div class="menu-item__right">
+          <i></i>
+        </div>
+      </div>
+      <div class="menu-divider"></div>
       <div class="menu-item">
         <div class="menu-item__search">
           <i></i>

src/assets/images/center.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-1zm2-3h8v1H4v-1zM2 7h12v1H2V7zm0-6h12v1H2V1zm2 3h8v1H4V4z" fill="#3D4757" fill-rule="evenodd"/></svg>

src/assets/images/left.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2zm0-3h8v1H2zm0-3h12v1H2zm0-6h12v1H2zm0 3h8v1H2z" fill="#3d4757" fill-rule="evenodd"/></svg>

src/assets/images/right.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-1zm4-3h8v1H6v-1zM2 7h12v1H2V7zm0-6h12v1H2V1zm4 3h8v1H6V4z" fill="#3D4757" fill-rule="evenodd"/></svg>

src/editor/core/command/Command.ts

@@ -1,3 +1,4 @@
+import { RowFlex } from "../../dataset/enum/Row"
 import { CommandAdapt } from "./CommandAdapt"
 
 export class Command {
@@ -15,6 +16,9 @@ export class Command {
   private static strikeout: Function
   private static color: Function
   private static highlight: Function
+  private static left: Function
+  private static center: Function
+  private static right: Function
   private static search: Function
   private static print: Function
 
@@ -32,6 +36,9 @@ export class Command {
     Command.strikeout = adapt.strikeout.bind(adapt)
     Command.color = adapt.color.bind(adapt)
     Command.highlight = adapt.highlight.bind(adapt)
+    Command.left = adapt.rowFlex.bind(adapt)
+    Command.center = adapt.rowFlex.bind(adapt)
+    Command.right = adapt.rowFlex.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
   }
@@ -90,6 +97,18 @@ export class Command {
     return Command.highlight(payload)
   }
 
+  public executeLeft() {
+    return Command.left(RowFlex.LEFT)
+  }
+
+  public executeCenter() {
+    return Command.center(RowFlex.CENTER)
+  }
+
+  public executeRight() {
+    return Command.right(RowFlex.RIGHT)
+  }
+
   // 搜索、打印
   public executeSearch(payload: string | null) {
     return Command.search(payload)

src/editor/core/command/CommandAdapt.ts

@@ -1,21 +1,25 @@
 import { ElementStyleKey } from "../../dataset/enum/ElementStyle"
+import { RowFlex } from "../../dataset/enum/Row"
 import { IEditorOption } from "../../interface/Editor"
 import { IElementStyle } from "../../interface/Element"
 import { printImageBase64 } from "../../utils/print"
 import { Draw } from "../draw/Draw"
 import { HistoryManager } from "../history/HistoryManager"
+import { Position } from "../position/Position"
 import { RangeManager } from "../range/RangeManager"
 
 export class CommandAdapt {
 
   private draw: Draw
   private range: RangeManager
+  private position: Position
   private historyManager: HistoryManager
   private options: Required<IEditorOption>
 
   constructor(draw: Draw) {
     this.draw = draw
     this.range = draw.getRange()
+    this.position = draw.getPosition()
     this.historyManager = draw.getHistoryManager()
     this.options = draw.getOptions()
   }
@@ -157,6 +161,28 @@ export class CommandAdapt {
     this.draw.render({ isSetCursor: false })
   }
 
+  public rowFlex(payload: RowFlex) {
+    const { startIndex, endIndex } = this.range.getRange()
+    if (startIndex === 0 && endIndex === 0) return
+    const positionList = this.position.getPositionList()
+    // 开始/结束行号
+    const startRowNo = positionList[startIndex].rowNo
+    const endRowNo = positionList[endIndex].rowNo
+    const elementList = this.draw.getElementList()
+    // 当前选区所在行
+    for (let p = 0; p < positionList.length; p++) {
+      const postion = positionList[p]
+      if (postion.rowNo > endRowNo) break
+      if (postion.rowNo >= startRowNo && postion.rowNo <= endRowNo) {
+        elementList[p].rowFlex = payload
+      }
+    }
+    // 光标定位
+    const isSetCursor = startIndex === endIndex
+    const curIndex = isSetCursor ? endIndex : startIndex
+    this.draw.render({ curIndex, isSetCursor })
+  }
+
   public search(payload: string | null) {
     if (payload) {
       const elementList = this.draw.getElementList()

src/editor/core/draw/Draw.ts

@@ -1,4 +1,5 @@
 import { ZERO } from "../../dataset/constant/Common"
+import { RowFlex } from "../../dataset/enum/Row"
 import { IDrawOption } from "../../interface/Draw"
 import { IEditorOption } from "../../interface/Editor"
 import { IElement, IElementPosition, IElementStyle } from "../../interface/Element"
@@ -170,7 +171,8 @@ export class Draw {
         width: 0,
         height: 0,
         ascent: 0,
-        elementList: []
+        elementList: [],
+        rowFlex: this.elementList[0].rowFlex
       })
     }
     for (let i = 0; i < this.elementList.length; i++) {
@@ -189,7 +191,8 @@ export class Draw {
           width,
           height: this.options.defaultSize,
           elementList: [lineText],
-          ascent: fontBoundingBoxAscent
+          ascent: fontBoundingBoxAscent,
+          rowFlex: lineText.rowFlex
         })
       } else {
         curRow.width += width
@@ -207,6 +210,15 @@ export class Draw {
     let index = 0
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
+      // 计算行偏移量（行居左、居中、居右）
+      if (curRow.rowFlex && curRow.rowFlex !== RowFlex.LEFT) {
+        const canvasInnerWidth = this.canvas.width - margins[1] - margins[3]
+        if (curRow.rowFlex === RowFlex.CENTER) {
+          x += (canvasInnerWidth - curRow.width) / 2
+        } else {
+          x += canvasInnerWidth - curRow.width
+        }
+      }
       for (let j = 0; j < curRow.elementList.length; j++) {
         this.ctx.save()
         const element = curRow.elementList[j]

src/editor/core/event/GlobalEvent.ts

@@ -55,6 +55,7 @@ export class GlobalEvent {
     }
     this.cursor.recoveryCursor()
     this.range.recoveryRangeStyle()
+    this.range.setRange(0, 0)
   }
 
   setDragState() {

src/editor/core/range/RangeManager.ts

@@ -59,6 +59,7 @@ export class RangeManager {
     let strikeout = !~curElementList.findIndex(el => !el.strikeout)
     const color = curElement.color || null
     const highlight = curElement.highlight || null
+    const rowFlex = curElement.rowFlex || null
     // 菜单
     const painter = !!this.draw.getPainterStyle()
     const undo = this.historyManager.isCanUndo()
@@ -73,7 +74,8 @@ export class RangeManager {
       underline,
       strikeout,
       color,
-      highlight
+      highlight,
+      rowFlex
     })
   }
 
@@ -93,7 +95,8 @@ export class RangeManager {
       underline: false,
       strikeout: false,
       color: null,
-      highlight: null
+      highlight: null,
+      rowFlex: null
     })
   }
 

src/editor/dataset/enum/Row.ts

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

src/editor/interface/Element.ts

@@ -1,3 +1,5 @@
+import { RowFlex } from "../dataset/enum/Row"
+
 export interface IElementStyle {
   font?: string;
   size?: number;
@@ -9,6 +11,7 @@ export interface IElementStyle {
   italic?: boolean;
   underline?: boolean;
   strikeout?: boolean;
+  rowFlex?: RowFlex;
 }
 
 export interface IElementBasic {

src/editor/interface/Listener.ts

@@ -1,3 +1,5 @@
+import { RowFlex } from "../dataset/enum/Row"
+
 export interface IRangeStype {
   undo: boolean;
   redo: boolean;
@@ -9,6 +11,7 @@ export interface IRangeStype {
   strikeout: boolean;
   color: string | null;
   highlight: string | null;
+  rowFlex: RowFlex | null;
 }
 
 export type IRangeStyleChange = (payload: IRangeStype) => void;

src/editor/interface/Row.ts

@@ -1,3 +1,4 @@
+import { RowFlex } from "../dataset/enum/Row"
 import { IElement } from "./Element"
 
 export type IRowElement = IElement & {
@@ -8,5 +9,6 @@ export interface IRow {
   width: number;
   height: number;
   ascent: number;
+  rowFlex?: RowFlex
   elementList: IRowElement[];
 }

src/main.ts

@@ -138,7 +138,22 @@ window.onload = function () {
     console.log('highlight')
     highlightControlDom?.click()
   }
-
+  // 行布局
+  const leftDom = document.querySelector<HTMLDivElement>('.menu-item__left')!
+  leftDom.onclick = function () {
+    console.log('left')
+    instance.command.executeLeft()
+  }
+  const centerDom = document.querySelector<HTMLDivElement>('.menu-item__center')!
+  centerDom.onclick = function () {
+    console.log('center')
+    instance.command.executeCenter()
+  }
+  const rightDom = document.querySelector<HTMLDivElement>('.menu-item__right')!
+  rightDom.onclick = function () {
+    console.log('right')
+    instance.command.executeRight()
+  }
   // 搜索、打印
   const collspanDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')
@@ -193,6 +208,17 @@ window.onload = function () {
       highlightControlDom.value = '#ffff00'
       highlightSpanDom.style.backgroundColor = '#ffff00'
     }
+    // 行布局
+    leftDom.classList.remove('active')
+    centerDom.classList.remove('active')
+    rightDom.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 {
+      leftDom.classList.add('active')
+    }
     // 功能
     payload.undo ? undoDom.classList.remove('no-allow') : undoDom.classList.add('no-allow')
     payload.redo ? redoDom.classList.remove('no-allow') : redoDom.classList.add('no-allow')

src/style.css

@@ -211,6 +211,18 @@ ul {
   background-color: #ffff00;
 }
 
+.menu-item__left i {
+  background-image: url('./assets/images/left.svg');
+}
+
+.menu-item__center i {
+  background-image: url('./assets/images/center.svg');
+}
+
+.menu-item__right i {
+  background-image: url('./assets/images/right.svg');
+}
+
 .menu-item__search {
   position: relative;
 }