feat:add table tool

src/editor/assets/css/index.css

@@ -107,4 +107,84 @@
 .resizer-image {
   position: absolute;
   opacity: 0.5;
+}
+
+.table-tool__row {
+  position: absolute;
+  width: 12px;
+  border-radius: 6.5px;
+  overflow: hidden;
+  background-color: #E2E6ED;
+}
+
+.table-tool__row .table-tool__row__item {
+  width: 100%;
+  position: relative;
+}
+
+.table-tool__row .table-tool__row__item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 2px;
+  width: 8px;
+  height: 1px;
+  background-color: #C0C6CF;
+}
+
+.table-tool__row .table-tool__row__item:last-child:after {
+  display: none;
+}
+
+.table-tool__col {
+  position: absolute;
+  height: 12px;
+  border-radius: 6.5px;
+  overflow: hidden;
+  background-color: #E2E6ED;
+  display: flex;
+}
+
+.table-tool__col .table-tool__col__item {
+  height: 100%;
+  position: relative;
+}
+
+.table-tool__col .table-tool__col__item::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: -1px;
+  width: 1px;
+  height: 8px;
+  z-index: 1;
+  background-color: #C0C6CF;
+}
+
+.table-tool__col .table-tool__col__item:first-child:after {
+  display: none;
+}
+
+.table-tool__row .table-tool__row__item.active,
+.table-tool__col .table-tool__col__item.active {
+  background-color: #C4D7FA;
+}
+
+.table-tool__col .table-tool__anchor {
+  right: -5px;
+  width: 10px;
+  height: 12px;
+  z-index: 9;
+  position: absolute;
+  cursor: col-resize;
+}
+
+.table-tool__row .table-tool__anchor {
+  bottom: -5px;
+  left: 0;
+  width: 12px;
+  height: 10px;
+  z-index: 9;
+  position: absolute;
+  cursor: row-resize;
 }

src/editor/core/draw/Draw.ts

@@ -25,6 +25,7 @@ import { PageNumber } from "./frame/PageNumber"
 import { GlobalObserver } from "../observer/GlobalObserver"
 import { TableParticle } from "./particle/table/TableParticle"
 import { ISearchResult } from "../../interface/Search"
+import { TableTool } from "./particle/table/TableTool"
 
 export class Draw {
 
@@ -50,6 +51,7 @@ export class Draw {
   private imageParticle: ImageParticle
   private textParticle: TextParticle
   private tableParticle: TableParticle
+  private tableTool: TableTool
   private pageNumber: PageNumber
 
   private rowList: IRow[]
@@ -87,6 +89,7 @@ export class Draw {
     this.imageParticle = new ImageParticle(this)
     this.textParticle = new TextParticle(this)
     this.tableParticle = new TableParticle(this)
+    this.tableTool = new TableTool(this)
     this.pageNumber = new PageNumber(this)
     new GlobalObserver(this)
 
@@ -234,6 +237,10 @@ export class Draw {
     return this.imageParticle
   }
 
+  public getTableTool(): TableTool {
+    return this.tableTool
+  }
+
   public getRowCount(): number {
     return this.rowList.length
   }

src/editor/core/draw/particle/table/TableTool.ts

@@ -0,0 +1,93 @@
+import { IElement } from "../../../.."
+import { IEditorOption } from "../../../../interface/Editor"
+import { IElementPosition } from "../../../../interface/Element"
+import { Position } from "../../../position/Position"
+import { Draw } from "../../Draw"
+
+export class TableTool {
+
+  private readonly translate = 18
+
+  private draw: Draw
+  private options: Required<IEditorOption>
+  private position: Position
+  private container: HTMLDivElement
+  private toolRowContainer: HTMLDivElement | null
+  private toolColContainer: HTMLDivElement | null
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.position = draw.getPosition()
+    this.container = draw.getContainer()
+    // x、y轴
+    this.toolRowContainer = null
+    this.toolColContainer = null
+  }
+
+  public dispose() {
+    this.toolRowContainer?.remove()
+    this.toolColContainer?.remove()
+  }
+
+  public render(element: IElement, position: IElementPosition) {
+    this.dispose()
+    const { trIndex, tdIndex } = this.position.getPositionContext()
+    const { scale } = this.options
+    const height = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
+    const { colgroup, trList } = element
+    const { coordinate: { leftTop } } = position
+    const prePageHeight = this.draw.getPageNo() * (height + pageGap)
+    const td = element.trList![trIndex!].tdList[tdIndex!]
+    const rowIndex = td.rowIndex
+    const colIndex = td.colIndex
+    // 计算表格行列信息
+    const rowList = trList!.map(tr => tr.height)
+    const colList = colgroup!.map(col => col.width)
+    // 渲染行
+    const rowContainer = document.createElement('div')
+    rowContainer.classList.add('table-tool__row')
+    rowContainer.style.transform = `translateX(-${this.translate * scale}px)`
+    for (let r = 0; r < rowList.length; r++) {
+      const rowHeight = rowList[r] * scale
+      const rowItem = document.createElement('div')
+      rowItem.classList.add('table-tool__row__item')
+      if (r === rowIndex) {
+        rowItem.classList.add('active')
+      }
+      const rowItemAnchor = document.createElement('div')
+      rowItemAnchor.classList.add('table-tool__anchor')
+      rowItem.append(rowItemAnchor)
+      rowItem.style.height = `${rowHeight}px`
+      rowContainer.append(rowItem)
+    }
+    rowContainer.style.left = `${leftTop[0]}px`
+    rowContainer.style.top = `${leftTop[1] + prePageHeight}px`
+    this.container.append(rowContainer)
+    this.toolRowContainer = rowContainer
+
+    // 渲染列
+    const colContainer = document.createElement('div')
+    colContainer.classList.add('table-tool__col')
+    colContainer.style.transform = `translateY(-${this.translate * scale}px)`
+    for (let c = 0; c < colList.length; c++) {
+      const colHeight = colList[c] * scale
+      const colItem = document.createElement('div')
+      colItem.classList.add('table-tool__col__item')
+      if (c === colIndex) {
+        colItem.classList.add('active')
+      }
+      const colItemAnchor = document.createElement('div')
+      colItemAnchor.classList.add('table-tool__anchor')
+      colItem.append(colItemAnchor)
+      colItem.style.width = `${colHeight}px`
+      colContainer.append(colItem)
+    }
+    colContainer.style.left = `${leftTop[0]}px`
+    colContainer.style.top = `${leftTop[1] + prePageHeight}px`
+    this.container.append(colContainer)
+    this.toolColContainer = colContainer
+  }
+
+}

src/editor/core/event/CanvasEvent.ts

@@ -6,6 +6,7 @@ import { writeTextByElementList } from "../../utils/clipboard"
 import { Cursor } from "../cursor/Cursor"
 import { Draw } from "../draw/Draw"
 import { ImageParticle } from "../draw/particle/ImageParticle"
+import { TableTool } from "../draw/particle/table/TableTool"
 import { HistoryManager } from "../history/HistoryManager"
 import { Position } from "../position/Position"
 import { RangeManager } from "../range/RangeManager"
@@ -24,6 +25,7 @@ export class CanvasEvent {
   private cursor: Cursor | null
   private historyManager: HistoryManager
   private imageParticle: ImageParticle
+  private tableTool: TableTool
 
   constructor(draw: Draw) {
     this.isAllowDrag = false
@@ -38,6 +40,7 @@ export class CanvasEvent {
     this.range = this.draw.getRange()
     this.historyManager = this.draw.getHistoryManager()
     this.imageParticle = this.draw.getImageParticle()
+    this.tableTool = this.draw.getTableTool()
   }
 
   public register() {
@@ -163,6 +166,13 @@ export class CanvasEvent {
       const curIndex = isTable ? tdValueIndex! : index
       this.imageParticle.drawResizer(elementList[curIndex], positionList[curIndex])
     }
+    // 表格工具组件
+    this.tableTool.dispose()
+    if (isTable) {
+      const elementList = this.draw.getOriginalElementList()
+      const positionList = this.position.getOriginalPositionList()
+      this.tableTool.render(elementList[index], positionList[index])
+    }
   }
 
   public mouseleave(evt: MouseEvent) {

src/editor/core/event/GlobalEvent.ts

@@ -4,6 +4,7 @@ import { findParent } from "../../utils"
 import { Cursor } from "../cursor/Cursor"
 import { Draw } from "../draw/Draw"
 import { ImageParticle } from "../draw/particle/ImageParticle"
+import { TableTool } from "../draw/particle/table/TableTool"
 import { RangeManager } from "../range/RangeManager"
 import { CanvasEvent } from "./CanvasEvent"
 
@@ -16,6 +17,7 @@ export class GlobalEvent {
   private canvasEvent: CanvasEvent
   private range: RangeManager
   private imageParticle: ImageParticle
+  private tableTool: TableTool
 
   constructor(draw: Draw, canvasEvent: CanvasEvent) {
     this.draw = draw
@@ -25,6 +27,7 @@ export class GlobalEvent {
     this.cursor = null
     this.range = draw.getRange()
     this.imageParticle = draw.getImageParticle()
+    this.tableTool = draw.getTableTool()
   }
 
   public register() {
@@ -66,6 +69,7 @@ export class GlobalEvent {
     this.range.recoveryRangeStyle()
     this.range.setRange(0, 0)
     this.imageParticle.clearResizer()
+    this.tableTool.dispose()
   }
 
   public setDragState() {