feat: add table border color #897

Hufe921 · Nov 27, 2024 · 7e8af04 · 7e8af04
1 parent 2430bf7
commit 7e8af04
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 3 deletions.
diff --git a/docs/en/guide/command-execute.md b/docs/en/guide/command-execute.md
@@ -457,6 +457,16 @@ Usage:
 instance.command.executeTableBorderType(payload: TableBorder)
 ```
 
+## executeTableBorderColor
+
+Feature: Table border color
+
+Usage:
+
+```javascript
+instance.command.executeTableBorderColor(payload: string)
+```
+
 ## executeTableTdBorderType
 
 Feature: Table td border type

diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md
@@ -76,6 +76,7 @@ interface IElement {
     }[];
   }[];
   borderType?: TableBorder;
+  borderColor?: string;
   // Hyperlinks
   url?: string;
   // Superscript and subscript

diff --git a/docs/guide/command-execute.md b/docs/guide/command-execute.md
@@ -457,6 +457,16 @@ instance.command.executeTableTdVerticalAlign(payload: VerticalAlign)
 instance.command.executeTableBorderType(payload: TableBorder)
 ```
 
+## executeTableBorderColor
+
+功能：表格边框颜色
+
+用法：
+
+```javascript
+instance.command.executeTableBorderColor(payload: string)
+```
+
 ## executeTableTdBorderType
 
 功能：表格单元格边框类型

diff --git a/docs/guide/schema.md b/docs/guide/schema.md
@@ -76,6 +76,7 @@ interface IElement {
     }[];
   }[];
   borderType?: TableBorder;
+  borderColor?: string;
   // 超链接
   url?: string;
   // 上下标

diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts
@@ -46,6 +46,7 @@ export class Command {
   public executeCancelMergeTableCell: CommandAdapt['cancelMergeTableCell']
   public executeTableTdVerticalAlign: CommandAdapt['tableTdVerticalAlign']
   public executeTableBorderType: CommandAdapt['tableBorderType']
+  public executeTableBorderColor: CommandAdapt['tableBorderColor']
   public executeTableTdBorderType: CommandAdapt['tableTdBorderType']
   public executeTableTdSlashType: CommandAdapt['tableTdSlashType']
   public executeTableTdBackgroundColor: CommandAdapt['tableTdBackgroundColor']
@@ -176,6 +177,7 @@ export class Command {
     this.executeCancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt)
     this.executeTableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt)
     this.executeTableBorderType = adapt.tableBorderType.bind(adapt)
+    this.executeTableBorderColor = adapt.tableBorderColor.bind(adapt)
     this.executeTableTdBorderType = adapt.tableTdBorderType.bind(adapt)
     this.executeTableTdSlashType = adapt.tableTdSlashType.bind(adapt)
     this.executeTableTdBackgroundColor =

diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts
@@ -964,6 +964,12 @@ export class CommandAdapt {
     this.tableOperate.tableBorderType(payload)
   }
 
+  public tableBorderColor(payload: string) {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    this.tableOperate.tableBorderColor(payload)
+  }
+
   public tableTdBorderType(payload: TdBorder) {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return

diff --git a/src/editor/core/draw/particle/table/TableOperate.ts b/src/editor/core/draw/particle/table/TableOperate.ts
@@ -699,6 +699,27 @@ export class TableOperate {
     })
   }
 
+  public tableBorderColor(payload: string) {
+    const positionContext = this.position.getPositionContext()
+    if (!positionContext.isTable) return
+    const { index } = positionContext
+    const originalElementList = this.draw.getOriginalElementList()
+    const element = originalElementList[index!]
+    if (
+      (!element.borderColor &&
+        payload === this.options.table.defaultBorderColor) ||
+      element.borderColor === payload
+    ) {
+      return
+    }
+    element.borderColor = payload
+    const { endIndex } = this.range.getRange()
+    this.draw.render({
+      curIndex: endIndex,
+      isCompute: false
+    })
+  }
+
   public tableTdBorderType(payload: TdBorder) {
     const rowCol = this.tableParticle.getRangeRowCol()
     if (!rowCol) return

diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts
@@ -149,9 +149,12 @@ export class TableParticle {
     startX: number,
     startY: number
   ) {
-    const { colgroup, trList, borderType } = element
+    const { colgroup, trList, borderType, borderColor } = element
     if (!colgroup || !trList) return
-    const { scale } = this.options
+    const {
+      scale,
+      table: { defaultBorderColor }
+    } = this.options
     const tableWidth = element.width! * scale
     const tableHeight = element.height! * scale
     // 无边框
@@ -166,6 +169,7 @@ export class TableParticle {
       ctx.setLineDash([3, 3])
     }
     ctx.lineWidth = scale
+    ctx.strokeStyle = borderColor || defaultBorderColor
     // 渲染边框
     if (!isEmptyBorderType && !isInternalBorderType) {
       this._drawOuterBorder({

diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts
@@ -53,6 +53,7 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'dashArray',
   'trList',
   'borderType',
+  'borderColor',
   'width',
   'height',
   'url',

diff --git a/src/editor/dataset/constant/Table.ts b/src/editor/dataset/constant/Table.ts
@@ -3,5 +3,6 @@ import { ITableOption } from '../../interface/table/Table'
 export const defaultTableOption: Readonly<Required<ITableOption>> = {
   tdPadding: [0, 5, 5, 5],
   defaultTrMinHeight: 42,
-  defaultColMinWidth: 40
+  defaultColMinWidth: 40,
+  defaultBorderColor: '#000000'
 }
diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts
@@ -63,6 +63,7 @@ export interface ITableAttr {
   colgroup?: IColgroup[]
   trList?: ITr[]
   borderType?: TableBorder
+  borderColor?: string
 }
 
 export interface ITableElement {

diff --git a/src/editor/interface/table/Table.ts b/src/editor/interface/table/Table.ts
@@ -4,4 +4,5 @@ export interface ITableOption {
   tdPadding?: IPadding
   defaultTrMinHeight?: number
   defaultColMinWidth?: number
+  defaultBorderColor?: string
 }