diff --git a/docs/en/guide/command-execute.md b/docs/en/guide/command-execute.md index 7a21361..9fd2cb7 100644 --- a/docs/en/guide/command-execute.md +++ b/docs/en/guide/command-execute.md @@ -426,7 +426,17 @@ Feature: Table td border type Usage: ```javascript -instance.command.executeTableTdBorderType(payload: TableBorder) +instance.command.executeTableTdBorderType(payload: TdBorder) +``` + +## executeTableTdSlashType + +Feature: Table td slash type + +Usage: + +```javascript +instance.command.executeTableTdSlashType(payload: TdSlash) ``` ## executeTableTdBackgroundColor diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md index 361ec37..d487cde 100644 --- a/docs/en/guide/schema.md +++ b/docs/en/guide/schema.md @@ -55,6 +55,7 @@ interface IElement { verticalAlign?: VerticalAlign; backgroundColor?: string; borderType?: TdBorder; + slashType?: TdSlash; value: IElement[]; }[]; }[]; diff --git a/docs/guide/command-execute.md b/docs/guide/command-execute.md index 0d2127d..b1c54f8 100644 --- a/docs/guide/command-execute.md +++ b/docs/guide/command-execute.md @@ -429,6 +429,16 @@ instance.command.executeTableBorderType(payload: TableBorder) instance.command.executeTableTdBorderType(payload: TdBorder) ``` +## executeTableTdSlashType + +功能:表格单元格内斜线 + +用法: + +```javascript +instance.command.executeTableTdSlashType(payload: TdSlash) +``` + ## executeTableTdBackgroundColor 功能:表格单元格背景色 diff --git a/docs/guide/schema.md b/docs/guide/schema.md index 7201e0c..7f4ef4f 100644 --- a/docs/guide/schema.md +++ b/docs/guide/schema.md @@ -55,6 +55,7 @@ interface IElement { verticalAlign?: VerticalAlign; backgroundColor?: string; borderType?: TdBorder; + slashType?: TdSlash; value: IElement[]; }[]; }[]; diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index d75b640..f55e1b3 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -44,6 +44,7 @@ export class Command { public executeTableTdVerticalAlign: CommandAdapt['tableTdVerticalAlign'] public executeTableBorderType: CommandAdapt['tableBorderType'] public executeTableTdBorderType: CommandAdapt['tableTdBorderType'] + public executeTableTdSlashType: CommandAdapt['tableTdSlashType'] public executeTableTdBackgroundColor: CommandAdapt['tableTdBackgroundColor'] public executeTableSelectAll: CommandAdapt['tableSelectAll'] public executeImage: CommandAdapt['image'] @@ -147,6 +148,7 @@ export class Command { this.executeTableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt) this.executeTableBorderType = adapt.tableBorderType.bind(adapt) this.executeTableTdBorderType = adapt.tableTdBorderType.bind(adapt) + this.executeTableTdSlashType = adapt.tableTdSlashType.bind(adapt) this.executeTableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt) this.executeTableSelectAll = adapt.tableSelectAll.bind(adapt) diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 40bf9cf..03a2744 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -13,7 +13,7 @@ import { ElementType } from '../../dataset/enum/Element' import { ElementStyleKey } from '../../dataset/enum/ElementStyle' import { ListStyle, ListType } from '../../dataset/enum/List' import { RowFlex } from '../../dataset/enum/Row' -import { TableBorder, TdBorder } from '../../dataset/enum/table/Table' +import { TableBorder, TdBorder, TdSlash } from '../../dataset/enum/table/Table' import { TitleLevel } from '../../dataset/enum/Title' import { VerticalAlign } from '../../dataset/enum/VerticalAlign' import { ICatalog } from '../../interface/Catalog' @@ -1253,6 +1253,27 @@ export class CommandAdapt { }) } + public tableTdSlashType(payload: TdSlash) { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const rowCol = this.draw.getTableParticle().getRangeRowCol() + if (!rowCol) return + const tdList = rowCol.flat() + // 存在则设置单元格斜线类型,否则取消设置 + const isSetTdSlashType = tdList.some(td => td.slashType !== payload) + tdList.forEach(td => { + if (isSetTdSlashType) { + td.slashType = payload + } else { + delete td.slashType + } + }) + const { endIndex } = this.range.getRange() + this.draw.render({ + curIndex: endIndex + }) + } + public tableTdBackgroundColor(payload: string) { const isReadonly = this.draw.isReadonly() if (isReadonly) return diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts index f1ae929..501b274 100644 --- a/src/editor/core/draw/particle/table/TableParticle.ts +++ b/src/editor/core/draw/particle/table/TableParticle.ts @@ -1,5 +1,5 @@ import { ElementType, IElement, TableBorder } from '../../../..' -import { TdBorder } from '../../../../dataset/enum/table/Table' +import { TdBorder, TdSlash } from '../../../../dataset/enum/table/Table' import { IEditorOption } from '../../../../interface/Editor' import { ITd } from '../../../../interface/table/Td' import { ITr } from '../../../../interface/table/Tr' @@ -116,6 +116,31 @@ export class TableParticle { ctx.translate(-0.5, -0.5) } + private _drawSlash( + ctx: CanvasRenderingContext2D, + td: ITd, + startX: number, + startY: number + ) { + const { scale } = this.options + ctx.save() + const width = td.width! * scale + const height = td.height! * scale + const x = Math.round(td.x! * scale + startX) + const y = Math.round(td.y! * scale + startY) + // 正斜线 / + if (td.slashType === TdSlash.FORWARD) { + ctx.moveTo(x + width, y) + ctx.lineTo(x, y + height) + } else { + // 反斜线 \ + ctx.moveTo(x, y) + ctx.lineTo(x + width, y + height) + } + ctx.stroke() + ctx.restore() + } + private _drawBorder( ctx: CanvasRenderingContext2D, element: IElement, @@ -148,6 +173,10 @@ export class TableParticle { const tr = trList[t] for (let d = 0; d < tr.tdList.length; d++) { const td = tr.tdList[d] + // 单元格内斜线 + if (td.slashType) { + this._drawSlash(ctx, td, startX, startY) + } // 没有设置单元格边框 && 没有设置表格边框则忽略 if (!td.borderType && (isEmptyBorderType || isExternalBorderType)) { continue diff --git a/src/editor/dataset/enum/table/Table.ts b/src/editor/dataset/enum/table/Table.ts index 6482dc3..f01b94a 100644 --- a/src/editor/dataset/enum/table/Table.ts +++ b/src/editor/dataset/enum/table/Table.ts @@ -7,3 +7,8 @@ export enum TableBorder { export enum TdBorder { BOTTOM = 'bottom' } + +export enum TdSlash { + FORWARD = 'forward', // 正斜线 / + BACK = 'back' // 反斜线 \ +} diff --git a/src/editor/index.ts b/src/editor/index.ts index 1efc2c2..a38d6bf 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -44,7 +44,7 @@ import { defaultCursorOption } from './dataset/constant/Cursor' import { IPageNumber } from './interface/PageNumber' import { defaultPageNumberOption } from './dataset/constant/PageNumber' import { VerticalAlign } from './dataset/enum/VerticalAlign' -import { TableBorder, TdBorder } from './dataset/enum/table/Table' +import { TableBorder, TdBorder, TdSlash } from './dataset/enum/table/Table' import { IFooter } from './interface/Footer' import { defaultFooterOption } from './dataset/constant/Footer' import { MaxHeightRatio, NumberType } from './dataset/enum/Common' @@ -264,6 +264,7 @@ export { PaperDirection, TableBorder, TdBorder, + TdSlash, MaxHeightRatio, NumberType, TitleLevel, diff --git a/src/editor/interface/table/Td.ts b/src/editor/interface/table/Td.ts index 12ddb5b..592b500 100644 --- a/src/editor/interface/table/Td.ts +++ b/src/editor/interface/table/Td.ts @@ -1,5 +1,5 @@ import { VerticalAlign } from '../../dataset/enum/VerticalAlign' -import { TdBorder } from '../../dataset/enum/table/Table' +import { TdBorder, TdSlash } from '../../dataset/enum/table/Table' import { IElement, IElementPosition } from '../Element' import { IRow } from '../Row' @@ -22,6 +22,7 @@ export interface ITd { verticalAlign?: VerticalAlign backgroundColor?: string borderType?: TdBorder + slashType?: TdSlash mainHeight?: number // 内容 + 内边距高度 realHeight?: number // 真实高度(包含跨列) realMinHeight?: number // 真实最小高度(包含跨列)