feat: 实现表格跨页拆分 #41
TODO:
- [x] 表格内容跨页拆分
- [x] 跨页拆分后位置上下文修正
- [x] 跨页拆分后光标位置修正
- [x] 拆分出的后续行中的空单元格处理
- [x] 跨页行列操作处理(插入、删除)
- [ ] ⌛表格各类操作支持跨页(如框选、合并、设置边框样式等)
- [ ] 单元格中控件跨页处理
- [ ] 单元格中列表跨页处理
Bugs
- [x] 拖拽使行高大于纸张内容区域高度时的异常处理
- [x] 表格拆分后,中文录入异常
试了试发现拆分后会在顶部多出一页空白页,还有要是用鼠标将表格高度拖到高于页面的高度,会直接卡死
试了试发现拆分后会在顶部多出一页空白页,还有要是用鼠标将表格高度拖到高于页面的高度,会直接卡死
多出空白页的问题如何复现?
多出空白页的问题如何复现?
~创建一个1*1的表格进行分页拆分,准确来说表格第一行超过页面高度就会产生空白页~ 经测试是由于改变配置文件src\editor\utils\option.ts中的行间距defaultRowMargin为0.75再进行操作就会产生空白页
试试看空白页和卡死的问题是否还存在 @Whiteyingshan
空白页行间距defaultRowMargin为0.75时还在 拖动卡死不在了,但是只要拖动超过最大高度后,再进行分页就会卡死
卡死的问题处理了下,至于defaultRowMargin为0.75时操作产生空白页的问题,已在另一个PR(#779)中修复,后续合过来。
空白页和卡死的问题经测试已修复
试了一下简单表格可以用,但是复杂表格好像就不行了 大佬 @ThunderYu
我的数据json文件如下: obj.json
不过能满足常规基本使用,非常棒,我发布到@liushuai05/canvas-editor包里面了
加载 obj.json 后如何操作复现问题? @liushuai05
加载 obj.json 后如何操作复现问题? @liushuai05
你加载这个json没复现出来嘛 大佬,那就先跳过这个问题吧 ,目前暂时不影响我这边业务开展 我就随便横竖合并几个单元格敲了一堆回车然后就这样了
并且我这边(正常业务逻辑)代码生成的table json 替换到源json中然后渲染出来的表格自动分页目前没出现问题
加载 obj.json 后如何操作复现问题? @liushuai05
你加载这个json没复现出来嘛 大佬,那就先跳过这个问题吧 ,目前暂时不影响我这边业务开展 我就随便横竖合并几个单元格敲了一堆回车然后就这样了
并且我这边(正常业务逻辑)代码生成的table json 替换到源json中然后渲染出来的表格自动分页目前没出现问题
目前看来确实还有些问题,特别是一些边界情况,这个后面我再处理下
加载 obj.json 后如何操作复现问题? @liushuai05
你加载这个json没复现出来嘛 大佬,那就先跳过这个问题吧 ,目前暂时不影响我这边业务开展 我就随便横竖合并几个单元格敲了一堆回车然后就这样了 并且我这边(正常业务逻辑)代码生成的table json 替换到源json中然后渲染出来的表格自动分页目前没出现问题
目前看来确实还有些问题,特别是一些边界情况,这个后面我再处理下
那太感谢了 不得不说这个pr 解决了我最后一公里痛点 过几天就要给客户演示 各种超长表格自动生成 真太棒了
复制进去的表格有问题,高度不会自动撑开
调整表格的时候会报错
表格中需要自动换行的文字或者段落,在复制粘贴时会超出单元格范围,但在调整某个单元格的宽度或者在某段文字手动换行,整个表格就会恢复正常. 具体见下面的视频
https://github.com/user-attachments/assets/a5a78731-fe59-4190-b13f-8848bea3e53c
@tuzixiangs @wen-shiqiang 再试试看
@tuzixiangs @wen-shiqiang 再试试看
可以了,感谢
enter 前
enter 后
表格整体跑到下一页去了 表格操作栏位置错乱
表格分了22页卡顿明显
看了下主要是computeRowList以及克隆导致计算耗时
表格跨页处理目前遇到了瓶颈,主要有两方面问题:
- 表格中各类数据跨页处理复杂 表格中文本内容和图片的跨页拆分当前已实现,但涉及表格中控件跨页、composing输入状态跨页、选区跨页、查询匹配等场景时必须一一处理其内部逻辑,改造工作量大且扩展性差。
- 性能问题, 当前实现方案是在排版时先合并跨页拆分的表格,然后再次进行拆分,合并/拆分处理之后还要修正位置上下文,在表格较大的情况下此方案可能存在性能问题。
当前我有一个想法是将原始数据(elementList)和排版后的渲染数据区分开,整体流程为:
elementList -> 排版引擎 -> renderElementList -> 渲染引擎 -> 界面 -> 用户交互 -> 改变elementList
界面发生交互时,将renderElementList的索引、位置上下文、选区等信息转换为基于原始elementList的数据,所有改变最终改动的仍是原始elementList。
此方案主要有三个优点:
- 使表格跨页拆分对其他功能模块透明,尽可能复用选区、控件、表格等模块中的代码
- 省掉排版时跨页表格的预合并,提升性能(?)
- 拆分出排版引擎、渲染引擎,整体架构更为清晰
不过这两天看了下代码,这个方案实现起来要改造的东西也不少,所以想问问作者大佬 @Hufe921 和其他大佬们对这套方案的看法,以及有没有其他的思路。
上面zhuyihe大佬提出的问题 @ThunderYu
如果只是解决deepClone慢的话我看到网上有大佬说可以使用 structuredClone,然后做一下兼容浏览器不支持structuredClone的话用deepClone,不知道这个能不能快一丢丢,可以参考一下看看大佬 https://juejin.cn/post/7080433165264748557