Add Undo and Redo suppoert

[rizwanullah]

I want to use this library but main feature of my application is undo & redo,Can you please guide me how could I handle it as you people did in http://printio.ru/ringer_man_tees/new

Regards,
Rizwan Ullah
[email protected]

[kangax]

I'll try to move redo/undo into a separate module to be included as part of fabric. Marking as "feature".

[rizwanullah]

Thanks,

We will wait for updates from you to start our project.

On Wed, Apr 6, 2011 at 10:25 PM, kangax <
[email protected]>wrote:

I'll try to move redo/undo into a separate module to be included as part of
fabric. Marking as "feature".

Reply to this email directly or view it on GitHub:
#23 (comment)

Regards:

Rizwan Ullah
Founder & CEO

CurioLogix | A Web 2.0,Multimedia and Mobile 2.0 Specialist Company
http://www.curiologix.com
+92-302-6263645

[kangax]

This isn't priority issue so closing for now.

[hadees]

Did you ever add this support?

Thanks!

[kangax]

No, haven't added yet.

[origin1tech]

undo/redo...do you have any thoughts on how it could be done? I'll create a module for it but would be nice to get some feedback as I"m sure you've thought about how it might be accomplished.

[origin1tech]

After further review I'm not so sure this can be obtained very gracefully by the library itself. I say this because the library would need to be aware of all custom events so as to know when to save state. My point is although I'd love this feature I decided to simply create custom listeners (a dispatcher if you will) that fires and passes what I need when events that affect state are fired. It works very well. With that said on large objects (canvas with many complex items) I would limit undo steps. Google dispatcher or custom listeners and you'll get some concepts. Once you understand the scope of how they work implement on your desired events(your custom functions like myfunc.add.circle or whatever) when this fires pass in the datalessjson representation to an array. When you undo, grab the last item in the array and then delete that item or conversely add it to a "redo" array. Really not hard at all once I thought about it. In fact again I'm not sure its really a good idea to include an "Undo" in the fabric.js library unless Kangax creates the ui as well if that makes sense. Perhaps the author can chime in if he catches this.

[kangax]

There's some foundation for state saving/checking in fabric: "stateful"
property, setupState/saveState methods, etc. It's not documented,
though, as far as I remember.

As I try to modularize fabric more, I think we might refactor that
functionality into a separate module in a near future.

kangax

On Sat, Jun 2, 2012 at 7:15 PM, Origin1 Technologies <
[email protected]

wrote:

After further review I'm not so sure this can be obtained very gracefully
by the library itself. I say this because inherently the library would need
to be aware of all custom events so as to know when to save state. My point
is although I'd love this feature I decided to simply create custom
listeners (a dispatcher if you will) that fires and passes what I need when
events that affect state are fired. It works very well. With that said on
large objects (canvas with many complex items) I would limit undo steps.

---

Reply to this email directly or view it on GitHub:
#23 (comment)

[origin1tech]

I'll play with that and see what I come up with.

This is one of those rare deals that if it works well (presenting concept later this week) it will go the distance. You may get your "undo/redo" built for you!

I'll keep you posted.

-----Original Message-----
From: Juriy Zaytsev [mailto:[email protected]]
Sent: Sunday, June 03, 2012 4:49 AM
To: Origin1 Technologies
Subject: Re: [fabric.js] Add Undo and Redo suppoert (#23)

There's some foundation for state saving/checking in fabric: "stateful"
property, setupState/saveState methods, etc. It's not documented, though, as far as I remember.

As I try to modularize fabric more, I think we might refactor that functionality into a separate module in a near future.

kangax

On Sat, Jun 2, 2012 at 7:15 PM, Origin1 Technologies < [email protected]

wrote:

After further review I'm not so sure this can be obtained very
gracefully by the library itself. I say this because inherently the
library would need to be aware of all custom events so as to know when
to save state. My point is although I'd love this feature I decided to
simply create custom listeners (a dispatcher if you will) that fires
and passes what I need when events that affect state are fired. It
works very well. With that said on large objects (canvas with many complex items) I would limit undo steps.

---

Reply to this email directly or view it on GitHub:
#23 (comment)

---

Reply to this email directly or view it on GitHub:
#23 (comment)

[luklukls]

i did overlayme.com/page/app/xindex.php

[kangax]

Hey @luklukls. Looks nice!

I'm curious about couple of things:

1. how did you make "remove" icon to be positioned in left/top corner at all times?
2. how did you make "export to pdf" work?
3. did you have to change anything in fabric?
4. and finally, how long did it take you to complete this and if there's any comments/suggestions/feedback you have? :)

[luklukls]

see my page/app/app.js
undo redo : stateupdate(),undo(),goredo().
remove icon ~ drawCorners()
luklukls@ff740b5#src/object.class.js
export to pdf
CANVAS TOSVG -> TCPDF
Change fabric?
YES adding few lines
5)
1 month , yeah your framework very cool i like it . GOD Bless You!

[juancamilor]

luklukls, that link does not seem to be working anymore. Would it be possible to share it again ? ... I believe I can use the same idea for a whiteboard implementation (https://groups.google.com/forum/?fromgroups#!topic/fabricjs/wqmWC-UgLew).
Thanks

[Elvinas]

Anything new about undo/redo feature?

[chrisrickard]

I am allowing the user to remove the last added path (in my painting application), this works fine for me:

var lastItemIndex = (fabricCanvas.getObjects().length - 1);
var item = fabricCanvas.item(lastItemIndex);

if(item.get('type') === 'path') {
  fabricCanvas.remove(item);
  fabricCanvas.renderAll();
}

But you could just as easily remove that IF statement and allow them to remove anything.

[jadhavanant85]

@chrisrickard great work for me for undo

[lukluk]

cool

2015-06-10 15:14 GMT+07:00 Anant [email protected]:

@chrisrickard https://github.com/chrisrickard great work for me for undo

—
Reply to this email directly or view it on GitHub
#23 (comment).

Lukluk Luhuring S. S.Kom, MT
Software Engineer / Seminar Speaker

[stormbreakers]

do we have state present in object to detect when it is added or moved

[Elvinas]

Yes, you can look up here: http://fabricjs.com/events/ There's event inspector and you can observe these events.

[stormbreakers]

has any one done undo feature on a group object

[dshep4]

+1

[dineshsinghchauhan]

@luklukls your link overlayme.com/page/app/xindex.php not working can you please share the updated link of app

[paulcredmond]

Any update on this? It would be great to have this as a separate module.

[asturur]

@paulcredmond undo redo feature can be built with fromObject/ toObject.
Is not as straight forward as it seems, but is not something that with the actual team we can support.

[AlexanderIstomin]

i wrote undo/redo functions. Here is fiddle:
https://jsfiddle.net/AlexanderIstomin/8y92ceuf/
sorry for messy code - just copied pieces from my project

[krishnaisdinesh]

@AlexanderIstomin One click in both direction is false.

[abhi06991]

I have implemented Undo Redo using Canvas states. Take a look. Could be useful to someone. I have also provided a Demo URL
https://github.com/abhi06991/Undo-Redo-Fabricjs

[hazeeb]

Any update on this ?

[asturur]

Undo redo is a specific application feature and not a canvas one. It won t be part of fabric.js

[paulcredmond]

I made an implementation of this as well if it's useful for anyone: https://github.com/paulcredmond/fabric-undoredo

[vxrai]

To track the state, I'm using JSON.stringify(canvas) and canvas.loadFromJSON() and have an event registered on the object:modified to capture the state.
I just wanted to know if pushing the entire json of the canvas for every state update going to be expensive and put the load on the browser?
@asturur - your input will be valuable.

[asturur]

well the bigger the design the more expensive, untill is not slow is still ok.

Updating part of the json is complicated and can give you mutability problem.

An harder alternative is saving just the differences but is a path full of errors to solve. The problems comes when you handle multi selections in which what is changed is harder to find.

[vxrai]

Hey, Andrea (@asturur ) for now I have decided to stick to saving the canvas json. In time if I find that its expensive or is causing issues, I will restrict to saving only the last 10 iterations on the canvas.

[asturur]

i mean if you have 600 objects on the canvas, and you do toJson and stringfy, will take some ms. If is ok, keep this approach.

If you have 20 objects and not crazy groups with hundreds of objects, it will be ok

[vxrai]

Hi @asturur , that's much clear now.
Also, just incase you missed it, can you please look into this issue as well - https://github.com/fabricjs/fabricjs.com/issues/215