diff --git a/docs/en/guide/command-execute.md b/docs/en/guide/command-execute.md index bd3c8e6b3..9d046758b 100644 --- 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 index d9262bdc1..d88aa4993 100644 --- 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 index a107a2dc4..18fa76317 100644 --- 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 index dcf11cd60..079beec0f 100644 --- 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 index d67af4a8b..a6579e926 100644 --- 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 index e2e336111..6d876364e 100644 --- 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 index 366e191e2..7204b343b 100644 --- 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 index da90bab3a..c37d7d853 100644 --- 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 index f86377102..034161d9e 100644 --- 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 = [ 'dashArray', 'trList', 'borderType', + 'borderColor', 'width', 'height', 'url', diff --git a/src/editor/dataset/constant/Table.ts b/src/editor/dataset/constant/Table.ts index 04aa9a4e1..62b969e98 100644 --- 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> = { 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 index ea16053dd..ba1d89d4e 100644 --- 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 index d10086c07..0b2442894 100644 --- 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 }