feat: support for table cell slash #290

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

docs/en/guide/schema.md

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

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
 
 功能：表格单元格背景色

docs/guide/schema.md

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

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)

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

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

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' // 反斜线 \
+}

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,

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 // 真实最小高度（包含跨列）