feat: table td with multiple border types #435

docs/en/guide/schema.md

@@ -55,7 +55,7 @@ interface IElement {
       rowspan: number;
       verticalAlign?: VerticalAlign;
       backgroundColor?: string;
-      borderType?: TdBorder;
+      borderTypes?: TdBorder[];
       slashType?: TdSlash;
       value: IElement[];
     }[];

docs/guide/schema.md

@@ -55,7 +55,7 @@ interface IElement {
       rowspan: number;
       verticalAlign?: VerticalAlign;
       backgroundColor?: string;
-      borderType?: TdBorder;
+      borderTypes?: TdBorder[];
       slashType?: TdSlash;
       value: IElement[];
     }[];

src/editor/core/command/CommandAdapt.ts

@@ -1416,12 +1416,24 @@ export class CommandAdapt {
     if (!rowCol) return
     const tdList = rowCol.flat()
     // 存在则设置边框类型，否则取消设置
-    const isSetBorderType = tdList.some(td => td.borderType !== payload)
+    const isSetBorderType = tdList.some(td => !td.borderTypes?.includes(payload))
     tdList.forEach(td => {
+      if (!td.borderTypes) {
+        td.borderTypes = []
+      }
+      const borderTypeIndex = td.borderTypes.findIndex(type => type === payload)
       if (isSetBorderType) {
-        td.borderType = payload
+        if (!~borderTypeIndex) {
+          td.borderTypes.push(payload)
+        }
       } else {
-        delete td.borderType
+        if (~borderTypeIndex) {
+          td.borderTypes.splice(borderTypeIndex, 1)
+        }
+      }
+      // 不存在边框设置时删除字段
+      if (!td.borderTypes.length) {
+        delete td.borderTypes
       }
     })
     const { endIndex } = this.range.getRange()

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

@@ -179,7 +179,10 @@ export class TableParticle {
           this._drawSlash(ctx, td, startX, startY)
         }
         // 没有设置单元格边框 && 没有设置表格边框则忽略
-        if (!td.borderType && (isEmptyBorderType || isExternalBorderType)) {
+        if (
+          !td.borderTypes?.length &&
+          (isEmptyBorderType || isExternalBorderType)
+        ) {
           continue
         }
         const width = td.width! * scale
@@ -190,22 +193,22 @@ export class TableParticle {
         // 绘制线条
         ctx.beginPath()
         // 单元格边框
-        if (td.borderType === TdBorder.TOP) {
+        if (td.borderTypes?.includes(TdBorder.TOP)) {
           ctx.moveTo(x - width, y)
           ctx.lineTo(x, y)
           ctx.stroke()
         }
-        if (td.borderType === TdBorder.RIGHT) {
+        if (td.borderTypes?.includes(TdBorder.RIGHT)) {
           ctx.moveTo(x, y)
           ctx.lineTo(x, y + height)
           ctx.stroke()
         }
-        if (td.borderType === TdBorder.BOTTOM) {
+        if (td.borderTypes?.includes(TdBorder.BOTTOM)) {
           ctx.moveTo(x, y + height)
           ctx.lineTo(x - width, y + height)
           ctx.stroke()
         }
-        if (td.borderType === TdBorder.LEFT) {
+        if (td.borderTypes?.includes(TdBorder.LEFT)) {
           ctx.moveTo(x - width, y)
           ctx.lineTo(x - width, y + height)
           ctx.stroke()

src/editor/dataset/constant/Element.ts

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

src/editor/interface/table/Td.ts

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