feat: 实现表格跨页拆分 #41

[ThunderYu]

TODO:

• 表格内容跨页拆分
• 跨页拆分后位置上下文修正
• 跨页拆分后光标位置修正
• 拆分出的后续行中的空单元格处理
• 跨页行列操作处理（插入、删除）
• ⌛表格各类操作支持跨页（如框选、合并、设置边框样式等）
• 单元格中控件跨页处理
• 单元格中列表跨页处理

Bugs

• 拖拽使行高大于纸张内容区域高度时的异常处理
• 表格拆分后，中文录入异常

[Whiteyingshan]

试了试发现拆分后会在顶部多出一页空白页，还有要是用鼠标将表格高度拖到高于页面的高度，会直接卡死

[ThunderYu]

试了试发现拆分后会在顶部多出一页空白页，还有要是用鼠标将表格高度拖到高于页面的高度，会直接卡死

多出空白页的问题如何复现？

[Whiteyingshan]

多出空白页的问题如何复现？

创建一个1*1的表格进行分页拆分，准确来说表格第一行超过页面高度就会产生空白页
经测试是由于改变配置文件src\editor\utils\option.ts中的行间距defaultRowMargin为0.75再进行操作就会产生空白页

[ThunderYu]

试试看空白页和卡死的问题是否还存在 @Whiteyingshan

[Whiteyingshan]

空白页行间距defaultRowMargin为0.75时还在
拖动卡死不在了，但是只要拖动超过最大高度后，再进行分页就会卡死

[ThunderYu]

卡死的问题处理了下，至于defaultRowMargin为0.75时操作产生空白页的问题，已在另一个PR（#779）中修复，后续合过来。

[Whiteyingshan]

空白页和卡死的问题经测试已修复

[liushuai05]

试了一下简单表格可以用，但是复杂表格好像就不行了 大佬 @ThunderYu

我的数据json文件如下：
obj.json

不过能满足常规基本使用，非常棒，我发布到@liushuai05/canvas-editor包里面了

[ThunderYu]

加载 obj.json 后如何操作复现问题？ @liushuai05

[liushuai05]

加载 obj.json 后如何操作复现问题？ @liushuai05

你加载这个json没复现出来嘛 大佬，那就先跳过这个问题吧 ，目前暂时不影响我这边业务开展
我就随便横竖合并几个单元格敲了一堆回车然后就这样了

并且我这边（正常业务逻辑）代码生成的table json 替换到源json中然后渲染出来的表格自动分页目前没出现问题

[ThunderYu]

加载 obj.json 后如何操作复现问题？ @liushuai05

你加载这个json没复现出来嘛 大佬，那就先跳过这个问题吧 ，目前暂时不影响我这边业务开展 我就随便横竖合并几个单元格敲了一堆回车然后就这样了

并且我这边（正常业务逻辑）代码生成的table json 替换到源json中然后渲染出来的表格自动分页目前没出现问题

目前看来确实还有些问题，特别是一些边界情况，这个后面我再处理下

[liushuai05]

加载 obj.json 后如何操作复现问题？ @liushuai05

你加载这个json没复现出来嘛 大佬，那就先跳过这个问题吧 ，目前暂时不影响我这边业务开展 我就随便横竖合并几个单元格敲了一堆回车然后就这样了
并且我这边（正常业务逻辑）代码生成的table json 替换到源json中然后渲染出来的表格自动分页目前没出现问题

目前看来确实还有些问题，特别是一些边界情况，这个后面我再处理下

那太感谢了 不得不说这个pr 解决了我最后一公里痛点 过几天就要给客户演示 各种超长表格自动生成 真太棒了

[wen-shiqiang]

复制进去的表格有问题，高度不会自动撑开

调整表格的时候会报错

[tuzixiangs]

表格中需要自动换行的文字或者段落,在复制粘贴时会超出单元格范围,但在调整某个单元格的宽度或者在某段文字手动换行,整个表格就会恢复正常. 具体见下面的视频

2024-10-09.14.18.01.mov

[ThunderYu]

@tuzixiangs @wen-shiqiang 再试试看

[tuzixiangs]

@tuzixiangs @wen-shiqiang 再试试看

可以了,感谢

[zhuyihe]

enter 前

enter 后

表格整体跑到下一页去了
表格操作栏位置错乱

[zhuyihe]

表格分了22页卡顿明显

看了下主要是computeRowList以及克隆导致计算耗时

[ThunderYu]

表格跨页处理目前遇到了瓶颈，主要有两方面问题：

1. 表格中各类数据跨页处理复杂
   表格中文本内容和图片的跨页拆分当前已实现，但涉及表格中控件跨页、composing输入状态跨页、选区跨页、查询匹配等场景时必须一一处理其内部逻辑，改造工作量大且扩展性差。
2. 性能问题，
   当前实现方案是在排版时先合并跨页拆分的表格，然后再次进行拆分，合并/拆分处理之后还要修正位置上下文，在表格较大的情况下此方案可能存在性能问题。

当前我有一个想法是将原始数据（elementList）和排版后的渲染数据区分开，整体流程为：

elementList -> 排版引擎 -> renderElementList -> 渲染引擎 -> 界面 -> 用户交互 -> 改变elementList

界面发生交互时，将renderElementList的索引、位置上下文、选区等信息转换为基于原始elementList的数据，所有改变最终改动的仍是原始elementList。

此方案主要有三个优点：

1. 使表格跨页拆分对其他功能模块透明，尽可能复用选区、控件、表格等模块中的代码
2. 省掉排版时跨页表格的预合并，提升性能（？）
3. 拆分出排版引擎、渲染引擎，整体架构更为清晰

不过这两天看了下代码，这个方案实现起来要改造的东西也不少，所以想问问作者大佬 @Hufe921 和其他大佬们对这套方案的看法，以及有没有其他的思路。

[liushuai05]

上面zhuyihe大佬提出的问题
@ThunderYu

如果只是解决deepClone慢的话我看到网上有大佬说可以使用 structuredClone，然后做一下兼容浏览器不支持structuredClone的话用deepClone，不知道这个能不能快一丢丢，可以参考一下看看大佬 https://juejin.cn/post/7080433165264748557

[liushuai05]

从doc复制过来的内容会出现表格错位问题大佬

复现方法：将文件里的内容复制到富文本编辑器，然后在顶部删除几个空行，滚动到下面就能看到这个问题

并且会伴随报错：

下面是参考doc
test.zip