feat: table td with multiple slash types #436

Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>

docs/en/guide/schema.md

@@ -56,7 +56,7 @@ interface IElement {
       verticalAlign?: VerticalAlign;
       backgroundColor?: string;
       borderTypes?: TdBorder[];
-      slashType?: TdSlash;
+      slashTypes?: TdSlash[];
       value: IElement[];
     }[];
   }[];

docs/guide/schema.md

@@ -56,7 +56,7 @@ interface IElement {
       verticalAlign?: VerticalAlign;
       backgroundColor?: string;
       borderTypes?: TdBorder[];
-      slashType?: TdSlash;
+      slashTypes?: TdSlash[];
       value: IElement[];
     }[];
   }[];

src/editor/core/command/CommandAdapt.ts

@@ -1416,7 +1416,9 @@ export class CommandAdapt {
     if (!rowCol) return
     const tdList = rowCol.flat()
     // 存在则设置边框类型，否则取消设置
-    const isSetBorderType = tdList.some(td => !td.borderTypes?.includes(payload))
+    const isSetBorderType = tdList.some(
+      td => !td.borderTypes?.includes(payload)
+    )
     tdList.forEach(td => {
       if (!td.borderTypes) {
         td.borderTypes = []
@@ -1449,12 +1451,26 @@ export class CommandAdapt {
     if (!rowCol) return
     const tdList = rowCol.flat()
     // 存在则设置单元格斜线类型，否则取消设置
-    const isSetTdSlashType = tdList.some(td => td.slashType !== payload)
+    const isSetTdSlashType = tdList.some(
+      td => !td.slashTypes?.includes(payload)
+    )
     tdList.forEach(td => {
+      if (!td.slashTypes) {
+        td.slashTypes = []
+      }
+      const slashTypeIndex = td.slashTypes.findIndex(type => type === payload)
       if (isSetTdSlashType) {
-        td.slashType = payload
+        if (!~slashTypeIndex) {
+          td.slashTypes.push(payload)
+        }
       } else {
-        delete td.slashType
+        if (~slashTypeIndex) {
+          td.slashTypes.splice(slashTypeIndex, 1)
+        }
+      }
+      // 不存在斜线设置时删除字段
+      if (!td.slashTypes.length) {
+        delete td.slashTypes
       }
     })
     const { endIndex } = this.range.getRange()

src/editor/core/draw/particle/table/TableParticle.ts

@@ -129,11 +129,12 @@ export class TableParticle {
     const x = Math.round(td.x! * scale + startX)
     const y = Math.round(td.y! * scale + startY)
     // 正斜线 /
-    if (td.slashType === TdSlash.FORWARD) {
+    if (td.slashTypes?.includes(TdSlash.FORWARD)) {
       ctx.moveTo(x + width, y)
       ctx.lineTo(x, y + height)
-    } else {
+    }
-      // 反斜线 \
+    // 反斜线 \
+    if (td.slashTypes?.includes(TdSlash.BACK)) {
       ctx.moveTo(x, y)
       ctx.lineTo(x + width, y + height)
     }
@@ -175,7 +176,7 @@ export class TableParticle {
       for (let d = 0; d < tr.tdList.length; d++) {
         const td = tr.tdList[d]
         // 单元格内斜线
-        if (td.slashType) {
+        if (td.slashTypes?.length) {
           this._drawSlash(ctx, td, startX, startY)
         }
         // 没有设置单元格边框 && 没有设置表格边框则忽略

src/editor/dataset/constant/Element.ts

@@ -70,7 +70,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
 export const TABLE_TD_ZIP_ATTR: Array<keyof ITd> = [
   'verticalAlign',
   'backgroundColor',
-  'borderTypes'
+  'borderTypes',
+  'slashTypes'
 ]
 
 export const TABLE_CONTEXT_ATTR: Array<keyof IElement> = [

src/editor/interface/table/Td.ts

@@ -22,7 +22,7 @@ export interface ITd {
   verticalAlign?: VerticalAlign
   backgroundColor?: string
   borderTypes?: TdBorder[]
-  slashType?: TdSlash
+  slashTypes?: TdSlash[]
   mainHeight?: number // 内容 + 内边距高度
   realHeight?: number // 真实高度（包含跨列）
   realMinHeight?: number // 真实最小高度（包含跨列）