fix: compute table row and col info boundary error #324

src/editor/core/draw/Draw.ts

@@ -1143,7 +1143,7 @@ export class Draw {
             let curTdRealHeight = 0
             let i = 0
             while (i < td.rowspan) {
-              const curTr = trList[i + t]
+              const curTr = trList[i + t] || trList[t]
               curTdMinHeight += curTr.minHeight!
               curTdRealHeight += curTr.height!
               i++
@@ -1183,11 +1183,8 @@ export class Draw {
         // 需要重新计算表格内值
         this.tableParticle.computeRowColInfo(element)
         // 计算出表格高度
-        const tableHeight = trList.reduce((pre, cur) => pre + cur.height, 0)
+        const tableHeight = this.tableParticle.getTableHeight(element)
-        const tableWidth = element.colgroup!.reduce(
+        const tableWidth = this.tableParticle.getTableWidth(element)
-          (pre, cur) => pre + cur.width,
-          0
-        )
         element.width = tableWidth
         element.height = tableHeight
         const elementWidth = tableWidth * scale

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

@@ -37,7 +37,7 @@ export class TableParticle {
         const curRowIndex = rowIndex! + rowspan - 1
         if (curRowIndex !== d) {
           const changeTd = tr.tdList.splice(d, 1)[0]
-          trList[curRowIndex].tdList.splice(colIndex!, 0, changeTd)
+          trList[curRowIndex]?.tdList.splice(colIndex!, 0, changeTd)
         }
       }
     }
@@ -232,6 +232,42 @@ export class TableParticle {
     }
   }
 
+  public getTableWidth(element: IElement): number {
+    return element.colgroup!.reduce((pre, cur) => pre + cur.width, 0)
+  }
+
+  public getTableHeight(element: IElement): number {
+    const trList = element.trList
+    if (!trList?.length) return 0
+    return this.getTdListByColIndex(trList, 0).reduce(
+      (pre, cur) => pre + cur.height!,
+      0
+    )
+  }
+
+  public getRowCountByColIndex(trList: ITr[], colIndex: number): number {
+    return this.getTdListByColIndex(trList, colIndex).reduce(
+      (pre, cur) => pre + cur.rowspan,
+      0
+    )
+  }
+
+  public getTdListByColIndex(trList: ITr[], colIndex: number): ITd[] {
+    const data: ITd[] = []
+    for (let r = 0; r < trList.length; r++) {
+      const tdList = trList[r].tdList
+      for (let d = 0; d < tdList.length; d++) {
+        const td = tdList[d]
+        const min = td.colIndex!
+        const max = min + td.colspan - 1
+        if (colIndex >= min && colIndex <= max) {
+          data.push(td)
+        }
+      }
+    }
+    return data
+  }
+
   public computeRowColInfo(element: IElement) {
     const { colgroup, trList } = element
     if (!colgroup || !trList) return
@@ -245,48 +281,33 @@ export class TableParticle {
       let rowMinHeight = 0
       for (let d = 0; d < tr.tdList.length; d++) {
         const td = tr.tdList[d]
-        // 计算之前行x轴偏移量
+        // 计算当前td所属列索引
-        let offsetXIndex = 0
+        let colIndex = 0
+        // 第一行td位置为当前列索引+上一个单元格colspan，否则从第一行开始计算列偏移量
         if (trList.length > 1 && t !== 0) {
-          for (let pT = 0; pT < t; pT++) {
+          // 当前列起始索引：以之前单元格为起始点
-            const pTr = trList[pT]
+          const preTd = tr.tdList[d - 1]
-            // 相同x轴是否存在跨行
+          const start = preTd ? preTd.colIndex! + preTd.colspan : d
-            for (let pD = 0; pD < pTr.tdList.length; pD++) {
+          for (let c = start; c < colgroup.length; c++) {
-              const pTd = pTr.tdList[pD]
+            // 查找相同索引列之前行数，相加判断是否位置被挤占
-              const pTdX = pTd.x!
+            const rowCount = this.getRowCountByColIndex(trList.slice(0, t), c)
-              const pTdY = pTd.y!
+            // 不存在挤占则默认当前单元格可以存在该位置
-              const pTdWidth = pTd.width!
+            if (rowCount === t) {
-              const pTdHeight = pTd.height!
+              colIndex = c
-              // 小于
+              // 重置单元格起始位置坐标
-              if (pTdX < x) continue
+              let preColWidth = 0
-              if (pTdX > x) break
+              for (let preC = 0; preC < c; preC++) {
-              if (pTdX === x && pTdY + pTdHeight > y) {
+                preColWidth += colgroup[preC].width
-                // 中间存在断行，则移到断行后td位置
-                const nextPTd = pTr.tdList[pD + 1]
-                if (
-                  nextPTd &&
-                  pTd.colIndex! + pTd.colspan !== nextPTd.colIndex
-                ) {
-                  x = nextPTd.x!
-                  offsetXIndex = nextPTd.colIndex!
-                } else {
-                  x += pTdWidth
-                  offsetXIndex += pTd.colspan
-                }
               }
+              x = preColWidth
+              break
             }
           }
-        }
-        // 计算格列数
-        let colIndex = 0
-        const preTd = tr.tdList[d - 1]
-        if (preTd) {
-          colIndex = preTd.colIndex! + offsetXIndex + 1
-          if (preTd.colspan > 1) {
-            colIndex += preTd.colspan - 1
-          }
         } else {
-          colIndex += offsetXIndex
+          const preTd = tr.tdList[d - 1]
+          if (preTd) {
+            colIndex = preTd.colIndex! + preTd.colspan
+          }
         }
         // 计算格宽高
         let width = 0
@@ -295,7 +316,8 @@ export class TableParticle {
         }
         let height = 0
         for (let row = 0; row < td.rowspan; row++) {
-          height += trList[row + t].height
+          const curTr = trList[row + t] || trList[t]
+          height += curTr.height
         }
         // y偏移量
         if (rowMinHeight === 0 || rowMinHeight > height) {

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

@@ -252,7 +252,8 @@ export class TableTool {
         let isChangeSize = false
         // 改变尺寸
         if (order === TableOrder.ROW) {
-          const tr = element.trList![index]
+          const trList = element.trList!
+          const tr = trList[index] || trList[index - 1]
           // 最大移动高度-向上移动超出最小高度限定，则减少移动量
           const { defaultTrMinHeight } = this.options
           if (dy < 0 && tr.height + dy < defaultTrMinHeight) {