From a99d5b43e9ce56ed987259fcb156a0b66968c8be Mon Sep 17 00:00:00 2001 From: zhangyiqun Date: Wed, 27 Nov 2024 14:14:15 +0800 Subject: [PATCH] fix: Insert column Delete column missing processing for a cross-page table --- .../core/draw/particle/table/TableOperate.ts | 96 ++++++++++++++++++- 1 file changed, 94 insertions(+), 2 deletions(-) diff --git a/src/editor/core/draw/particle/table/TableOperate.ts b/src/editor/core/draw/particle/table/TableOperate.ts index 366e191e2..54bbcbaa1 100644 --- a/src/editor/core/draw/particle/table/TableOperate.ts +++ b/src/editor/core/draw/particle/table/TableOperate.ts @@ -6,7 +6,7 @@ import { IEditorOption } from '../../../../interface/Editor' import { IColgroup } from '../../../../interface/table/Colgroup' import { ITd } from '../../../../interface/table/Td' import { ITr } from '../../../../interface/table/Tr' -import { getUUID } from '../../../../utils' +import { deepClone, getUUID } from '../../../../utils' import { formatElementContext, formatElementList @@ -16,6 +16,7 @@ import { RangeManager } from '../../../range/RangeManager' import { Draw } from '../../Draw' import { TableParticle } from './TableParticle' import { TableTool } from './TableTool' +import { IPositionContext } from '../../../../interface/Position' export class TableOperate { private draw: Draw @@ -24,6 +25,7 @@ export class TableOperate { private tableTool: TableTool private tableParticle: TableParticle private options: DeepRequired + private syncCross: boolean constructor(draw: Draw) { this.draw = draw @@ -32,6 +34,7 @@ export class TableOperate { this.tableTool = draw.getTableTool() this.tableParticle = draw.getTableParticle() this.options = draw.getOptions() + this.syncCross = false } public insertTable(row: number, col: number) { @@ -247,6 +250,51 @@ export class TableOperate { } } + public syncToCrossPageTable( + pagingId: string, + index: number, + tdIndex: number, + visitor: Function, + trIndex?: number | undefined + ) { + if (this.syncCross) return + this.syncCross = true + const originalElementList = this.draw.getOriginalElementList() + const len = originalElementList.length + const crossTableContext: IPositionContext[] = [] + let i = index - 1 + let j = index + 1 + while (i >= 0 && originalElementList[i].pagingId === pagingId) { + const element = originalElementList[i] + crossTableContext.push({ + isTable: true, + index: i, + tdIndex, + trIndex, + tableId: element.id + }) + i-- + } + while (j < len && originalElementList[j].pagingId === pagingId) { + const element = originalElementList[j] + crossTableContext.push({ + isTable: true, + index: j, + tdIndex, + trIndex, + tableId: element.id + }) + j++ + } + if (crossTableContext.length) { + for (const tableContext of crossTableContext) { + this.position.setPositionContext(tableContext) + visitor(tableContext) + } + } + this.syncCross = false + } + public insertTableLeftCol() { const positionContext = this.position.getPositionContext() if (!positionContext.isTable) return @@ -281,6 +329,14 @@ export class TableOperate { width: defaultColMinWidth }) this.adjustColWidth(element) + this.syncToCrossPageTable( + element.pagingId as string, + index as number, + tdIndex as number, + () => this.insertTableLeftCol() + ) + // 如果当前处于相关跨页表格的处理时,不去渲染 + if (this.syncCross) return // 重新设置上下文 this.position.setPositionContext({ isTable: true, @@ -331,6 +387,13 @@ export class TableOperate { width: defaultColMinWidth }) this.adjustColWidth(element) + this.syncToCrossPageTable( + element.pagingId as string, + index as number, + tdIndex as number, + () => this.insertTableRightCol() + ) + if (this.syncCross) return // 重新设置上下文 this.position.setPositionContext({ isTable: true, @@ -407,6 +470,17 @@ export class TableOperate { this.tableTool.dispose() } + public deleteTableByTableContext(tableContext: IPositionContext) { + const { tableId } = tableContext + const elementList = this.draw.getOriginalElementList() + const curTableIndex = elementList.findIndex(el => el.id === tableId) + if (curTableIndex !== -1) { + tableContext.index = curTableIndex + this.position.setPositionContext(tableContext) + this.deleteTable() + } + } + public deleteTableCol() { const positionContext = this.position.getPositionContext() if (!positionContext.isTable) return @@ -419,7 +493,17 @@ export class TableOperate { // 如果是最后一列,直接删除整个表格 const moreTdTr = curTrList.find(tr => tr.tdList.length > 1) if (!moreTdTr) { - this.deleteTable() + const clonedPositionContext = deepClone(positionContext) + this.syncToCrossPageTable( + element.pagingId as string, + index as number, + tdIndex as number, + (tableContext: IPositionContext) => { + this.deleteTableByTableContext(tableContext) + }, + trIndex as number + ) + this.deleteTableByTableContext(clonedPositionContext) return } // 缩小colspan或删除与当前列重叠的单元格 @@ -440,6 +524,13 @@ export class TableOperate { } } element.colgroup?.splice(curColIndex, 1) + this.syncToCrossPageTable( + element.pagingId as string, + index as number, + tdIndex as number, + () => this.deleteTableCol(), + trIndex as number + ) // 重新设置上下文 this.position.setPositionContext({ isTable: false @@ -458,6 +549,7 @@ export class TableOperate { const originalElementList = this.draw.getOriginalElementList() originalElementList.splice(positionContext.index!, 1) const curIndex = positionContext.index! - 1 + if (this.syncCross) return this.position.setPositionContext({ isTable: false, index: curIndex