canvas-editor icon indicating copy to clipboard operation
canvas-editor copied to clipboard

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

Open ThunderYu opened this issue 1 year ago • 22 comments

TODO:

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

Bugs

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

ThunderYu avatar Aug 18 '24 03:08 ThunderYu

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

Whiteyingshan avatar Aug 21 '24 03:08 Whiteyingshan

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

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

ThunderYu avatar Aug 21 '24 06:08 ThunderYu

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

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

Whiteyingshan avatar Aug 21 '24 06:08 Whiteyingshan

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

ThunderYu avatar Aug 21 '24 13:08 ThunderYu

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

Whiteyingshan avatar Aug 22 '24 00:08 Whiteyingshan

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

ThunderYu avatar Aug 22 '24 07:08 ThunderYu

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

Whiteyingshan avatar Aug 22 '24 09:08 Whiteyingshan

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

image image

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

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

liushuai05 avatar Aug 29 '24 09:08 liushuai05

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

ThunderYu avatar Aug 30 '24 08:08 ThunderYu

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

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

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

liushuai05 avatar Aug 30 '24 08:08 liushuai05

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

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

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

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

ThunderYu avatar Aug 30 '24 09:08 ThunderYu

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

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

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

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

liushuai05 avatar Aug 30 '24 09:08 liushuai05

image 复制进去的表格有问题,高度不会自动撑开 image 调整表格的时候会报错

wen-shiqiang avatar Sep 30 '24 03:09 wen-shiqiang

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

https://github.com/user-attachments/assets/a5a78731-fe59-4190-b13f-8848bea3e53c

tuzixiangs avatar Oct 09 '24 06:10 tuzixiangs

@tuzixiangs @wen-shiqiang 再试试看

ThunderYu avatar Oct 09 '24 07:10 ThunderYu

@tuzixiangs @wen-shiqiang 再试试看

可以了,感谢

tuzixiangs avatar Oct 09 '24 07:10 tuzixiangs

enter 前 image enter 后 image image

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

zhuyihe avatar Oct 15 '24 06:10 zhuyihe

image 表格分了22页卡顿明显 image 看了下主要是computeRowList以及克隆导致计算耗时

zhuyihe avatar Oct 16 '24 02:10 zhuyihe

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

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

当前我有一个想法是将原始数据(elementList)和排版后的渲染数据区分开,整体流程为:

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

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

此方案主要有三个优点:

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

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

ThunderYu avatar Oct 24 '24 02:10 ThunderYu

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

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

liushuai05 avatar Nov 08 '24 03:11 liushuai05

从doc复制过来的内容会出现表格错位问题大佬 image 复现方法:将文件里的内容复制到富文本编辑器,然后在顶部删除几个空行,滚动到下面就能看到这个问题 image 并且会伴随报错: image

下面是参考doc test.zip

liushuai05 avatar Nov 08 '24 04:11 liushuai05

表格跨三页及以上时,在第二页及以后的表格尾增加文本时,文本会丢失

微信截图_20250219140026

以下是测试数据 AI-3345-341825000010-0178.json

Whiteyingshan avatar Feb 19 '25 06:02 Whiteyingshan