From 29a988a1d4d57a98068a299986ddbe38a52d80a4 Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Fri, 31 Mar 2023 21:41:09 +0800
Subject: [PATCH] feat: avoid punctuation at the beginning of a row

---
 src/editor/core/draw/Draw.ts                  | 7 +++++--
 src/editor/core/draw/particle/TextParticle.ts | 6 ++++++
 src/editor/dataset/constant/Common.ts         | 1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
index ed7b3fd..559ffce 100644
--- a/src/editor/core/draw/Draw.ts
+++ b/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]
diff --git a/src/editor/core/draw/particle/TextParticle.ts b/src/editor/core/draw/particle/TextParticle.ts
index 99e0066..9fc1c95 100644
--- a/src/editor/core/draw/particle/TextParticle.ts
+++ b/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)
diff --git a/src/editor/dataset/constant/Common.ts b/src/editor/dataset/constant/Common.ts
index de5bf4c..fe5fedd 100644
--- a/src/editor/dataset/constant/Common.ts
+++ b/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,