abhi06991 / Undo-Redo-Fabricjs

A simple Undo-Redo implementation using fabricjs
MIT License
45 stars 8 forks source link

some questions (no bugg) #1

Open sandor opened 7 years ago

sandor commented 7 years ago

Hey, this is looking really great. Since I am not an experienced developer, I would like to ask a few questions:

  1. could this be working by simply importing the script and listening to a fabric canvas that was created elsewhere in the code? Have an existing app prototype where I love to have this feature separated...

  2. would this work also for object groups?

  3. would this work also for delete actions?

Tahnks. And really great work!

abhi06991 commented 7 years ago

Hi Sandor,

Glad you liked my work. Here are the answers to your question:

1, could this be working by simply importing the script and listening to a fabric canvas that was created elsewhere in the code? Have an existing app prototype where I love to have this feature separated...

Ans: I implemented this functionality using Modular design pattern. You must have built your prototype using some other way, so directly importing the script may not work. What you can do is: There are three functions and one config variable at the heart of this functionality:

1) updateCanvasState 2)undo 3)redo 4) _config variable

You can copy these four components and use it in your code

  1. would this work also for object groups?

Ans: Yes it will work. The concept is simple: Which ever actions you want the app to remember for going back and forward, you will call updateCanvasState function. This function is what that does the job of maintaining the canvas states.

  1. would this work also for delete actions?

Ans: Absolutely.Fabricjs calls the delete event. This is how you can implement.

 _canvasObject.on(
        'object:removed', function(){
            updateCanvasState();
        }
    );

You can go through this link for even more Object events. Fabricjs Object events NOTE: I declared the fabricjs canvas object as _canvasObject. You must have declared it in different way, so make the changes accordingly and it should work.

sandor commented 7 years ago

@abhi06991 Thanks! I have implemented it in my electron app prototype. Had to strip out all the button related stuff (I am calling undo redo with shortkeys), working really very nicely. Since I am not an experienced developer, making things running are huge rewards for me :-)

Sorry, for dumb questions here (I know this space is for bugs/issues):

Do you see a way to also listen to the changes of the fabric canvas itself (ie. changin canvas color or size)? Something like this:

canvas.on(
        'canvas:modified', function(){
            updateCanvasState();
        }
    );

Just as an idea (not that I could implement this - so you can take it as a feature request): would it make sense to specify a var for the steps you can go back anf fore in order to keep your app fast?