feat: table element paging across multiple pages #41

src/editor/core/draw/Draw.ts

@@ -1154,6 +1154,7 @@ export class Draw {
             const nextElement = elementList[tableIndex]
             if (nextElement.pagingId === element.pagingId) {
               element.trList!.push(...nextElement.trList!)
+              element.height! += nextElement.height!
               tableIndex++
               combineCount++
             } else {
@@ -1259,8 +1260,16 @@ export class Draw {
             curPagePreHeight += row.height
           }
         }
-        // 表格高度超过页面高度
+        // 当前剩余高度是否能容下当前表格第一行（可拆分）的高度
         const rowMarginHeight = rowMargin * 2 * scale
+        if (
+          curPagePreHeight + element.trList![0].height! + rowMarginHeight >
+          height
+        ) {
+          // 无可拆分行则切换至新页
+          curPagePreHeight = marginHeight
+        }
+        // 表格高度超过页面高度开始截断行
         if (curPagePreHeight + rowMarginHeight + elementHeight > height) {
           const trList = element.trList!
           // 计算需要移除的行数
@@ -1294,7 +1303,7 @@ export class Draw {
               (pre, cur) => pre + cur.height,
               0
             )
-            const pagingId = getUUID()
+            const pagingId = element.pagingId || getUUID()
             element.pagingId = pagingId
             element.height -= cloneTrHeight
             metrics.height -= cloneTrHeight
@@ -1305,31 +1314,33 @@ export class Draw {
             cloneElement.trList = cloneTrList
             cloneElement.id = getUUID()
             this.spliceElementList(elementList, i + 1, 0, cloneElement)
-            // 换页的是当前行则改变上下文
-            const positionContext = this.position.getPositionContext()
-            if (positionContext.isTable) {
-              // 查找光标所在表格索引（根据trId搜索）
-              let newPositionContextIndex = -1
-              let newPositionContextTrIndex = -1
-              let tableIndex = i
-              while (tableIndex < elementList.length) {
-                const curElement = elementList[tableIndex]
-                if (curElement.pagingId !== pagingId) break
-                const trIndex = curElement.trList!.findIndex(
-                  r => r.id === positionContext.trId
-                )
-                if (~trIndex) {
-                  newPositionContextIndex = tableIndex
-                  newPositionContextTrIndex = trIndex
-                  break
-                }
-                tableIndex++
-              }
-              if (~newPositionContextIndex) {
-                positionContext.index = newPositionContextIndex
-                positionContext.trIndex = newPositionContextTrIndex
-                this.position.setPositionContext(positionContext)
+          }
+        }
+        // 表格经过分页处理-需要处理上下文
+        if (element.pagingId) {
+          const positionContext = this.position.getPositionContext()
+          if (positionContext.isTable) {
+            // 查找光标所在表格索引（根据trId搜索）
+            let newPositionContextIndex = -1
+            let newPositionContextTrIndex = -1
+            let tableIndex = i
+            while (tableIndex < elementList.length) {
+              const curElement = elementList[tableIndex]
+              if (curElement.pagingId !== element.pagingId) break
+              const trIndex = curElement.trList!.findIndex(
+                r => r.id === positionContext.trId
+              )
+              if (~trIndex) {
+                newPositionContextIndex = tableIndex
+                newPositionContextTrIndex = trIndex
+                break
               }
+              tableIndex++
+            }
+            if (~newPositionContextIndex) {
+              positionContext.index = newPositionContextIndex
+              positionContext.trIndex = newPositionContextTrIndex
+              this.position.setPositionContext(positionContext)
             }
           }
         }