feat: table element can be merged after paging #41

src/editor/core/draw/Draw.ts

@@ -1145,6 +1145,25 @@ export class Draw {
  } else if (element.type === ElementType.TABLE) {
  const tdPaddingWidth = tdPadding[1] + tdPadding[3]
  const tdPaddingHeight = tdPadding[0] + tdPadding[2]
+ // 表格分页处理进度：https://github.com/Hufe921/canvas-editor/issues/41
+ // 查看后续表格是否属于同一个源表格-存在即合并
+ if (element.pagingId) {
+ let tableIndex = i + 1
+ let combineCount = 0
+ while (tableIndex < elementList.length) {
+ const nextElement = elementList[tableIndex]
+ if (nextElement.pagingId === element.pagingId) {
+ element.trList!.push(...nextElement.trList!)
+ tableIndex++
+ combineCount++
+ } else {
+ break
+ }
+ }
+ if (combineCount) {
+ elementList.splice(i + 1, combineCount)
+ }
+ }
  // 计算表格行列
  this.tableParticle.computeRowColInfo(element)
  // 计算表格内元素信息
@@ -1248,6 +1267,7 @@ export class Draw {
  let deleteStart = 0
  let deleteCount = 0
  let preTrHeight = 0
+ // 大于一行时再拆分避免循环
  if (trList.length > 1) {
  for (let r = 0; r < trList.length; r++) {
  const tr = trList[r]
@@ -1274,23 +1294,42 @@ export class Draw {
  (pre, cur) => pre + cur.height,
  0
  )
+ const pagingId = getUUID()
+ element.pagingId = pagingId
  element.height -= cloneTrHeight
  metrics.height -= cloneTrHeight
  metrics.boundingBoxDescent -= cloneTrHeight
  // 追加拆分表格
  const cloneElement = deepClone(element)
+ cloneElement.pagingId = pagingId
  cloneElement.trList = cloneTrList
  cloneElement.id = getUUID()
  this.spliceElementList(elementList, i + 1, 0, cloneElement)
  // 换页的是当前行则改变上下文
  const positionContext = this.position.getPositionContext()
- if (
- positionContext.isTable &&
- positionContext.trIndex === deleteStart
- ) {
- positionContext.index! += 1
- positionContext.trIndex = 0
- this.position.setPositionContext(positionContext)
+ 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)
+ }
  }
  }
  }

src/editor/interface/Element.ts

@@ -64,6 +64,7 @@ export interface ITableElement {
  trId?: string
  tableId?: string
  conceptId?: string
+ pagingId?: string // 用于区分拆分的表格同属一个源表格
 }
 
 export type ITable = ITableAttr & ITableElement

src/editor/utils/element.ts

@@ -488,6 +488,23 @@ export function zipElementList(payload: IElement[]): IElement[] {
  listElement.valueList = zipElementList(valueList)
  element = listElement
  } else if (element.type === ElementType.TABLE) {
+ // 分页表格先进行合并
+ if (element.pagingId) {
+ let tableIndex = e + 1
+ let combineCount = 0
+ while (tableIndex < elementList.length) {
+ const nextElement = elementList[tableIndex]
+ if (nextElement.pagingId === element.pagingId) {
+ element.height! += nextElement.height!
+ element.trList!.push(...nextElement.trList!)
+ tableIndex++
+ combineCount++
+ } else {
+ break
+ }
+ }
+ e += combineCount
+ }
  if (element.trList) {
  for (let t = 0; t < element.trList.length; t++) {
  const tr = element.trList[t]