From 5b52bb8794b96a9f9460fe65cf4c2467e8790299 Mon Sep 17 00:00:00 2001
From: baseWalker <104012756+baseWalker@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:21:43 +0800
Subject: [PATCH] feat: table td with multiple slash types #436

Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>
---
 docs/en/guide/schema.md                       |  2 +-
 docs/guide/schema.md                          |  2 +-
 src/editor/core/command/CommandAdapt.ts       | 24 +++++++++++++++----
 .../core/draw/particle/table/TableParticle.ts |  9 +++----
 src/editor/dataset/constant/Element.ts        |  3 ++-
 src/editor/interface/table/Td.ts              |  2 +-
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md
index 4238790..e973c8d 100644
--- a/docs/en/guide/schema.md
+++ b/docs/en/guide/schema.md
@@ -56,7 +56,7 @@ interface IElement {
       verticalAlign?: VerticalAlign;
       backgroundColor?: string;
       borderTypes?: TdBorder[];
-      slashType?: TdSlash;
+      slashTypes?: TdSlash[];
       value: IElement[];
     }[];
   }[];
diff --git a/docs/guide/schema.md b/docs/guide/schema.md
index 2f2a176..b0c6a37 100644
--- a/docs/guide/schema.md
+++ b/docs/guide/schema.md
@@ -56,7 +56,7 @@ interface IElement {
       verticalAlign?: VerticalAlign;
       backgroundColor?: string;
       borderTypes?: TdBorder[];
-      slashType?: TdSlash;
+      slashTypes?: TdSlash[];
       value: IElement[];
     }[];
   }[];
diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts
index fc36221..6eeb47f 100644
--- a/src/editor/core/command/CommandAdapt.ts
+++ b/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()
diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts
index 1e8d48b..650c611 100644
--- a/src/editor/core/draw/particle/table/TableParticle.ts
+++ b/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)
         }
         // 没有设置单元格边框 && 没有设置表格边框则忽略
diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts
index d0c86ed..5ac1c5a 100644
--- a/src/editor/dataset/constant/Element.ts
+++ b/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> = [
diff --git a/src/editor/interface/table/Td.ts b/src/editor/interface/table/Td.ts
index f704c6f..7e9f366 100644
--- a/src/editor/interface/table/Td.ts
+++ b/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 // 真实最小高度（包含跨列）