leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

有具体的撤销重做具体方案吗?我试了各种事件总有这样那样的问题

Open cheft opened this issue 9 months ago • 6 comments

有具体的撤销重做具体方案吗?我试了各种事件总有这样那样的问题,希望有做过的同学指点指点,自己弄感觉要踩很多的坑。 考虑对象 move、resize、rotate、画笔绘制、增删对象、还有其它属性?

cheft avatar Apr 03 '25 09:04 cheft

历史记录是比较复杂的,看看有没有做过的同学给你一些建议,目前官方只有这个提示:https://www.leaferjs.com/ui/plugin/in/editor/Editor/history.html

leaferjs avatar Apr 03 '25 10:04 leaferjs

是啊,撤销重做的方案是随着产品场景变化而变化的,建议需要保存状态的时候手动保存

常见手动保存的时机: 1、结束修改某属性值 => 比如为某些元素设置fill,选择颜色过程中可能需要实时绘制预览效果,直到用户修改完成后才是需要保存的时机。 而且这里可能还涉及到框选多个元素的批量操作,可以保存为一次记录。

2、成组解组、层级变化,ui add、dropTo 等操作后等等

我使用了一个稿定设计曾经开源的历史记录存储库来完成底层的数据存储,我在基础上做了一些小改动,使存储数据不会成指数增长。 只需要关注合适的时机undo,redo,保存状态,如果你恰巧需要,希望可以帮到你 https://github.com/Xdy1579883916/state-snapshot

Xdy1579883916 avatar Apr 07 '25 01:04 Xdy1579883916

如果太复杂,我现在只能偷懒做法,每次变动后缓存全量的 json, 撤销重做时再 add(json) 算了,不知道这样会有多少坑,踩踩看。

cheft avatar Apr 07 '25 08:04 cheft

我目前就是这样的,每次存下整个json,这个方式最简单

但是随着操作次数增加 缓存的数据会成指数增长,所以需要想办法抑制

方案1:数据改变的时候json diff一下,存储每次的diff patch 实现撤销重做

方案2:state-snapshot 这是脱离业务的,纯粹的撤销重做方案,支持自定义规则实现细粒度地存储方案,你可能需要仔细阅读库文档

Xdy1579883916 avatar Apr 07 '25 09:04 Xdy1579883916

@Xdy1579883916 state-snapshot 这个库会自动进行 json diff,实现diff存储,不是每次全量储存?并且提供了历史记录的 API 供使用。

cheft avatar Apr 08 '25 02:04 cheft

嗯 有默认rule,如果和自己的json不匹配可以自定义rule。核心概念就是通过rule进行chunk拆分,每个chunk有个hash,哈希一致就可以实现复用

Xdy1579883916 avatar Apr 08 '25 04:04 Xdy1579883916