feat: table element paging across multiple pages #41

Hufe921 · Mar 17, 2024 · 01b1104 · 01b1104
1 parent 6d488ae
commit 01b1104
Showing 1 changed file with 37 additions and 26 deletions.
diff --git a/src/editor/core/draw/Draw.ts b/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)
  }
  }
  }