diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md index 2359115..4238790 100644 --- a/docs/en/guide/schema.md +++ b/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[]; }[]; diff --git a/docs/guide/schema.md b/docs/guide/schema.md index 64fc662..2f2a176 100644 --- a/docs/guide/schema.md +++ b/docs/guide/schema.md @@ -55,7 +55,7 @@ interface IElement { rowspan: number; verticalAlign?: VerticalAlign; backgroundColor?: string; - borderType?: TdBorder; + borderTypes?: TdBorder[]; slashType?: TdSlash; value: IElement[]; }[]; diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 0dd4f26..fc36221 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/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() diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts index e7a394c..1e8d48b 100644 --- a/src/editor/core/draw/particle/table/TableParticle.ts +++ b/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() diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index 4336d1f..d0c86ed 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -70,7 +70,7 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array = [ export const TABLE_TD_ZIP_ATTR: Array = [ 'verticalAlign', 'backgroundColor', - 'borderType' + 'borderTypes' ] export const TABLE_CONTEXT_ATTR: Array = [ diff --git a/src/editor/interface/table/Td.ts b/src/editor/interface/table/Td.ts index 592b500..f704c6f 100644 --- a/src/editor/interface/table/Td.ts +++ b/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 // 真实高度(包含跨列)