Guideline / Konva way / best practice to implement undo / redo?

[lanyusan]

Is there a guideline or Konva way or any best practice to implement undo / redo with Konva?

I got from an issue that the maintainer recommends to manually implement undo / redo.

We have found out that without a generic way, it would be very hard if not impossible to implement multiple steps undo / redo as it would requires application developer carefully track stage shapes' movements and also any design entity logic relationship changes.

Is there any chance to take a whole stage snapshot at any user interaction where app decides good for a snap shot then use the snap shots for undo / redo?

I understand Konva provides JSON serialization. Could it be used for this purpose?

Has the community ever successfully implemented Undo / Redo with Konva? Any suggestions would be much appreciated.

Thanks.

[lavrton]

Everything is already described here:

https://konvajs.org/docs/data_and_serialization/Best_Practices.html#What-is-the-best-way-to-save-load-full-stage-content-and-how-to-implement-undo-redo
And here (react specific, but the idea is the same for other solutions):
https://konvajs.org/docs/react/Undo-Redo.html#page-title

In short:
You should not connect Konva and undo/redo function. Konva is a rendering engine. You can use pure DOM, SVG or any other drawing framework to render shapes on the page. From my standpoint, undo/redo should be independent of rendering.

You can use Konva JSON serialization for that. But I don't recommend doing that. It may work from simple scenes. But when you have event listeners, images, caching, etc, managing updates via Konva serialization will be hard.

[lanyusan]

Thanks. We might need to rethink how far we need to go for undo / redo. Maybe just support no more than 3 steps, which would be much easier.