search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
892 stars 315 forks source link

Undo performance #74

Open joekur opened 4 years ago

joekur commented 4 years ago

I'm seeing the undo() function become slow as you draw a lot of lines on the canvas. This makes sense because I see we need to redraw all of our lines on each undo (except for the last line which is popped off our save data).

Would it help to have a limited buffer of changes that can be undone? Maybe the length of which could be configured via prop?

Maybe the drawing could be kept in two canvases, so that one holds just the buffer of "undo-able" lines and is completely redrawn on undo, and one that is kept static, holding all the lines that are no longer undo-able. Of course we'd have to manage moving lines from the first to the second as we draw new lines.

Thoughts? I could possibly take a crack at it if we agree on an approach and you'd like the help.

embiem commented 4 years ago

I think this is a great idea.

To not break anything, what do you think about using a prop like undoStackSize with a default value of 0? The default 0 would mean that we still use the exact same flow as we have right now, while anything above 0 will use the undo system you propose.

joekur commented 4 years ago

Yes my thoughts exactly. I think 0 makes sense as special value for unlimited.