fix: table tool render option

src/editor/assets/css/table/table.css

@@ -82,4 +82,23 @@
   z-index: 9;
   position: absolute;
   border: 1px dotted #000000;
+}
+
+.ce-table-tool__border {
+  position: absolute;
+  z-index: 1;
+  background: transparent;
+  pointer-events: none;
+}
+
+.ce-table-tool__border__row {
+  position: absolute;
+  cursor: row-resize;
+  pointer-events: auto;
+}
+
+.ce-table-tool__border__col {
+  position: absolute;
+  cursor: col-resize;
+  pointer-events: auto;
 }

src/editor/core/command/CommandAdapt.ts

@@ -542,8 +542,7 @@ export class CommandAdapt {
     this.range.setRange(0, 0)
     // 重新渲染
     this.draw.render({ curIndex: 0 })
-    const position = this.position.getOriginalPositionList()
-    this.tableTool.render(element, position[index!])
+    this.tableTool.render()
   }
 
   public insertTableBottomRow() {
@@ -609,8 +608,7 @@ export class CommandAdapt {
     this.range.setRange(0, 0)
     // 重新渲染
     this.draw.render({ curIndex: 0 })
-    const position = this.position.getOriginalPositionList()
-    this.tableTool.render(element, position[index!])
+    this.tableTool.render()
   }
 
   public insertTableLeftCol() {
@@ -667,8 +665,7 @@ export class CommandAdapt {
     this.range.setRange(0, 0)
     // 重新渲染
     this.draw.render({ curIndex: 0 })
-    const position = this.position.getOriginalPositionList()
-    this.tableTool.render(element, position[index!])
+    this.tableTool.render()
   }
 
   public insertTableRightCol() {
@@ -725,8 +722,7 @@ export class CommandAdapt {
     this.range.setRange(0, 0)
     // 重新渲染
     this.draw.render({ curIndex: 0 })
-    const position = this.position.getOriginalPositionList()
-    this.tableTool.render(element, position[index!])
+    this.tableTool.render()
   }
 
   public deleteTableRow() {
@@ -962,8 +958,7 @@ export class CommandAdapt {
     const curIndex = startTd.value.length - 1
     this.range.setRange(curIndex, curIndex)
     this.draw.render()
-    const position = this.position.getOriginalPositionList()
-    this.tableTool.render(element, position[index!])
+    this.tableTool.render()
   }
 
   public cancelMergeTableCell() {
@@ -1024,8 +1019,7 @@ export class CommandAdapt {
     const curIndex = curTd.value.length - 1
     this.range.setRange(curIndex, curIndex)
     this.draw.render()
-    const position = this.position.getOriginalPositionList()
-    this.tableTool.render(element, position[index!])
+    this.tableTool.render()
   }
 
   public tableTdVerticalAlign(payload: VerticalAlign) {

src/editor/core/draw/Draw.ts

@@ -1319,10 +1319,10 @@ export class Draw {
     } else {
       this._immediateRender()
     }
+    const positionContext = this.position.getPositionContext()
     // 光标重绘
     if (isSetCursor) {
       const positionList = this.position.getPositionList()
-      const positionContext = this.position.getPositionContext()
       if (positionContext.isTable) {
         const { index, trIndex, tdIndex } = positionContext
         const elementList = this.getOriginalElementList()
@@ -1344,7 +1344,7 @@ export class Draw {
       const oldHeaderElementList = deepClone(this.header.getElementList())
       const { startIndex, endIndex } = this.range.getRange()
       const pageNo = this.pageNo
-      const oldPositionContext = deepClone(this.position.getPositionContext())
+      const oldPositionContext = deepClone(positionContext)
       const zone = this.zone.getZone()
       this.historyManager.execute(function () {
         self.zone.setZone(zone)
@@ -1358,6 +1358,10 @@ export class Draw {
     }
     // 信息变动回调
     nextTick(() => {
+      // 表格工具重新渲染
+      if (isCompute && !this.isReadonly() && positionContext.isTable) {
+        this.tableTool.render()
+      }
       // 页面尺寸改变
       if (this.listener.pageSizeChange) {
         this.listener.pageSizeChange(this.pageRowList.length)

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

@@ -2,7 +2,6 @@ import { IElement } from '../../../..'
 import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { TableOrder } from '../../../../dataset/enum/table/TableTool'
 import { IEditorOption } from '../../../../interface/Editor'
-import { IElementPosition } from '../../../../interface/Element'
 import { Position } from '../../../position/Position'
 import { Draw } from '../../Draw'
 
@@ -11,13 +10,16 @@ interface IAnchorMouseDown {
   order: TableOrder;
   index: number;
   element: IElement;
-  position: IElementPosition;
 }
 
 export class TableTool {
 
-  private readonly translate = 18
-  private minTdWidth = 20
+  // 单元格最小宽度
+  private readonly MIN_TD_WIDTH = 20
+  // 行列工具相对表格偏移值
+  private readonly ROW_COL_OFFSET = 18
+  // 边框工具宽/高度
+  private readonly BORDER_VALUE = 4
 
   private draw: Draw
   private canvas: HTMLCanvasElement
@@ -26,6 +28,7 @@ export class TableTool {
   private container: HTMLDivElement
   private toolRowContainer: HTMLDivElement | null
   private toolColContainer: HTMLDivElement | null
+  private toolBorderContainer: HTMLDivElement | null
   private anchorLine: HTMLDivElement | null
   private mousedownX: number
   private mousedownY: number
@@ -39,6 +42,7 @@ export class TableTool {
     // x、y轴
     this.toolRowContainer = null
     this.toolColContainer = null
+    this.toolBorderContainer = null
     this.anchorLine = null
     this.mousedownX = 0
     this.mousedownY = 0
@@ -47,29 +51,43 @@ export class TableTool {
   public dispose() {
     this.toolRowContainer?.remove()
     this.toolColContainer?.remove()
+    this.toolBorderContainer?.remove()
+    this.toolRowContainer = null
+    this.toolColContainer = null
+    this.toolBorderContainer = null
   }
 
-  public render(element: IElement, position: IElementPosition) {
+  public render() {
+    const { isTable, index, trIndex, tdIndex } = this.position.getPositionContext()
+    if (!isTable) return
+
+    // 销毁之前工具
     this.dispose()
-    const { trIndex, tdIndex } = this.position.getPositionContext()
+
+    // 渲染所需数据
     const { scale } = this.options
-    const height = this.draw.getHeight()
-    const pageGap = this.draw.getPageGap()
+    const elementList = this.draw.getOriginalElementList()
+    const positionList = this.position.getOriginalPositionList()
+    const element = elementList[index!]
+    const position = positionList[index!]
     const { colgroup, trList } = element
     const { coordinate: { leftTop } } = position
+    const height = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
     const prePageHeight = this.draw.getPageNo() * (height + pageGap)
+    const tableX = leftTop[0]
+    const tableY = leftTop[1] + prePageHeight
     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 rowHeightList = trList!.map(tr => tr.height)
     const rowContainer = document.createElement('div')
     rowContainer.classList.add(`${EDITOR_PREFIX}-table-tool__row`)
-    rowContainer.style.transform = `translateX(-${this.translate * scale}px)`
-    for (let r = 0; r < rowList.length; r++) {
-      const rowHeight = rowList[r] * scale
+    rowContainer.style.transform = `translateX(-${this.ROW_COL_OFFSET * scale}px)`
+    for (let r = 0; r < rowHeightList.length; r++) {
+      const rowHeight = rowHeightList[r] * scale
       const rowItem = document.createElement('div')
       rowItem.classList.add(`${EDITOR_PREFIX}-table-tool__row__item`)
       if (r === rowIndex) {
@@ -81,7 +99,6 @@ export class TableTool {
         this._mousedown({
           evt,
           element,
-          position,
           index: r,
           order: TableOrder.ROW
         })
@@ -90,17 +107,18 @@ export class TableTool {
       rowItem.style.height = `${rowHeight}px`
       rowContainer.append(rowItem)
     }
-    rowContainer.style.left = `${leftTop[0]}px`
-    rowContainer.style.top = `${leftTop[1] + prePageHeight}px`
+    rowContainer.style.left = `${tableX}px`
+    rowContainer.style.top = `${tableY}px`
     this.container.append(rowContainer)
     this.toolRowContainer = rowContainer
 
-    // 渲染列
+    // 渲染列工具
+    const colWidthList = colgroup!.map(col => col.width)
     const colContainer = document.createElement('div')
     colContainer.classList.add(`${EDITOR_PREFIX}-table-tool__col`)
-    colContainer.style.transform = `translateY(-${this.translate * scale}px)`
-    for (let c = 0; c < colList.length; c++) {
-      const colHeight = colList[c] * scale
+    colContainer.style.transform = `translateY(-${this.ROW_COL_OFFSET * scale}px)`
+    for (let c = 0; c < colWidthList.length; c++) {
+      const colWidth = colWidthList[c] * scale
       const colItem = document.createElement('div')
       colItem.classList.add(`${EDITOR_PREFIX}-table-tool__col__item`)
       if (c === colIndex) {
@@ -112,23 +130,70 @@ export class TableTool {
         this._mousedown({
           evt,
           element,
-          position,
           index: c,
           order: TableOrder.COL
         })
       }
       colItem.append(colItemAnchor)
-      colItem.style.width = `${colHeight}px`
+      colItem.style.width = `${colWidth}px`
       colContainer.append(colItem)
     }
-    colContainer.style.left = `${leftTop[0]}px`
-    colContainer.style.top = `${leftTop[1] + prePageHeight}px`
+    colContainer.style.left = `${tableX}px`
+    colContainer.style.top = `${tableY}px`
     this.container.append(colContainer)
     this.toolColContainer = colContainer
+
+    // 渲染单元格边框拖拽工具
+    const tableHeight = element.height! * scale
+    const tableWidth = element.width! * scale
+    const borderContainer = document.createElement('div')
+    borderContainer.classList.add(`${EDITOR_PREFIX}-table-tool__border`)
+    borderContainer.style.height = `${tableHeight}px`
+    borderContainer.style.width = `${tableWidth}px`
+    borderContainer.style.left = `${tableX}px`
+    borderContainer.style.top = `${tableY}px`
+    for (let r = 0; r < trList!.length; r++) {
+      const tr = trList![r]
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d]
+        const rowBorder = document.createElement('div')
+        rowBorder.classList.add(`${EDITOR_PREFIX}-table-tool__border__row`)
+        rowBorder.style.width = `${td.width! * scale}px`
+        rowBorder.style.height = `${this.BORDER_VALUE}px`
+        rowBorder.style.top = `${(td.y! + td.height!) * scale - this.BORDER_VALUE / 2}px`
+        rowBorder.style.left = `${td.x! * scale}px`
+        rowBorder.onmousedown = (evt) => {
+          this._mousedown({
+            evt,
+            element,
+            index: td.rowIndex!,
+            order: TableOrder.ROW
+          })
+        }
+        borderContainer.appendChild(rowBorder)
+        const colBorder = document.createElement('div')
+        colBorder.classList.add(`${EDITOR_PREFIX}-table-tool__border__col`)
+        colBorder.style.width = `${this.BORDER_VALUE}px`
+        colBorder.style.height = `${td.height! * scale}px`
+        colBorder.style.top = `${td.y! * scale}px`
+        colBorder.style.left = `${(td.x! + td.width!) * scale - this.BORDER_VALUE / 2}px`
+        colBorder.onmousedown = (evt) => {
+          this._mousedown({
+            evt,
+            element,
+            index: td.colIndex!,
+            order: TableOrder.COL
+          })
+        }
+        borderContainer.appendChild(colBorder)
+      }
+    }
+    this.container.append(borderContainer)
+    this.toolBorderContainer = borderContainer
   }
 
   private _mousedown(payload: IAnchorMouseDown) {
-    const { evt, index, order, element, position } = payload
+    const { evt, index, order, element } = payload
     this.canvas = this.draw.getPage()
     const { scale } = this.options
     const width = this.draw.getWidth()
@@ -190,8 +255,10 @@ export class TableTool {
           const curColWidth = colgroup[index].width
           // 最小移动距离计算
           const moveColWidth = curColWidth + dx
-          if (moveColWidth < this.minTdWidth) {
-            dx = this.minTdWidth - curColWidth
+          const nextColWidth = colgroup[index + 1]?.width || 0
+          // 如果移动距离小于最小宽度，或者大于当前列和下一列宽度之和则移动最小宽度
+          if (moveColWidth < this.MIN_TD_WIDTH || moveColWidth > curColWidth + nextColWidth) {
+            dx = this.MIN_TD_WIDTH - curColWidth
           }
           // 最大移动距离计算
           let moveTableWidth = 0
@@ -225,7 +292,6 @@ export class TableTool {
       }
       if (isChangeSize) {
         this.draw.render({ isSetCursor: false })
-        this.render(element, position)
       }
       // 还原副作用
       anchorLine.remove()
@@ -251,4 +317,4 @@ export class TableTool {
     return { dx, dy }
   }
 
-}
+}

src/editor/core/event/handlers/mousedown.ts

@@ -100,9 +100,7 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
   const tableTool = draw.getTableTool()
   tableTool.dispose()
   if (isTable && !isReadonly) {
-    const originalElementList = draw.getOriginalElementList()
-    const originalPositionList = position.getOriginalPositionList()
-    tableTool.render(originalElementList[index], originalPositionList[index])
+    tableTool.render()
   }
   // 超链接
   const hyperlinkParticle = draw.getHyperlinkParticle()

src/editor/core/position/Position.ts

@@ -290,13 +290,14 @@ export class Position {
     let curPositionIndex = -1
     // 判断是否在表格内
     if (isTable) {
+      const { scale } = this.options
       const { td, tablePosition } = payload
       if (td && tablePosition) {
         const { leftTop } = tablePosition.coordinate
-        const tdX = td.x! + leftTop[0]
-        const tdY = td.y! + leftTop[1]
-        const tdWidth = td.width!
-        const tdHeight = td.height!
+        const tdX = td.x! * scale + leftTop[0]
+        const tdY = td.y! * scale + leftTop[1]
+        const tdWidth = td.width! * scale
+        const tdHeight = td.height! * scale
         if (!(tdX < x && x < tdX + tdWidth && tdY < y && y < tdY + tdHeight)) {
           return {
             index: curPositionIndex