feat: avoid punctuation at the beginning of a row

src/editor/core/draw/Draw.ts

@@ -1000,17 +1000,20 @@ export class Draw {
       })
       // 超过限定宽度
       const preElement = elementList[i - 1]
+      const nextElement = elementList[i + 1]
+      // 累计行宽 + 当前元素宽度 + 后面标点符号宽度
+      const curRowWidth = curRow.width + metrics.width + this.textParticle.measurePunctuationWidth(ctx, nextElement)
       if (
         preElement?.type === ElementType.TABLE
         || preElement?.type === ElementType.BLOCK
         || element.type === ElementType.BLOCK
         || preElement?.imgDisplay === ImageDisplay.INLINE
         || element.imgDisplay === ImageDisplay.INLINE
-        || curRow.width + metrics.width > innerWidth
+        || curRowWidth > innerWidth
         || (i !== 0 && element.value === ZERO)
       ) {
         // 两端对齐
-        if (preElement?.rowFlex === RowFlex.ALIGNMENT && curRow.width + metrics.width > innerWidth) {
+        if (preElement?.rowFlex === RowFlex.ALIGNMENT && curRowWidth > innerWidth) {
           const gap = (innerWidth - curRow.width) / curRow.elementList.length
           for (let e = 0; e < curRow.elementList.length; e++) {
             const el = curRow.elementList[e]

src/editor/core/draw/particle/TextParticle.ts

@@ -1,4 +1,5 @@
 import { IElement } from '../../..'
+import { PUNCTUATION_LIST } from '../../../dataset/constant/Common'
 import { IRowElement } from '../../../interface/Row'
 import { Draw } from '../Draw'
 
@@ -21,6 +22,11 @@ export class TextParticle {
     this.cacheMeasureText = new Map()
   }
 
+  public measurePunctuationWidth(ctx: CanvasRenderingContext2D, element: IElement): number {
+    if (!element || !PUNCTUATION_LIST.includes(element.value)) return 0
+    return this.measureText(ctx, element).width
+  }
+
   public measureText(ctx: CanvasRenderingContext2D, element: IElement): TextMetrics {
     const id = `${element.value}${ctx.font}`
     const cacheTextMetrics = this.cacheMeasureText.get(id)

src/editor/dataset/constant/Common.ts

@@ -4,6 +4,7 @@ export const ZERO = '\u200B'
 export const WRAP = '\n'
 export const HORIZON_TAB = '\t'
 export const NBSP = '\u0020'
+export const PUNCTUATION_LIST = ['·', '、', ':', '：', ',', '，', '.', '。', ';', '；', '?', '？', '!', '！']
 
 export const maxHeightRadioMapping: Record<MaxHeightRatio, number> = {
   [MaxHeightRatio.HALF]: 1 / 2,