Is it possible to undo erasing?

[egemenerd]

Hi,

I'm using the eraser brush;

http://fabricjs.com/erasing

It is working properly but what if the user wants to undo the last action? How can I achieve this?

[graphics-et-al]

https://github.com/alimozdemir/fabric-history
:)

[ShaMan123]

@egemenerd it is possible.
The easiest way that comes to mind is listening to erasing:end event.
It provides enough context to make these decisions.
Take a look at the demo http://fabricjs.com/erasing
Then you can remove the paths from the objects' clip path.
BTW I think I'm going to change how eraser interacts with object, freeing it for clipPath, but in the near future

[egemenerd]

@ShaMan123 Thanks for the reply.

Actually I just need to use the eraser for background image. I am able to find and remove the last added path with the following code.

$("#undo").on("click", function () {
    var BGclipPath = canvas.backgroundImage.clipPath;
    var objects = BGclipPath.getObjects('path');
    if (objects.length !== 0) {
        // Remove the last path
        BGclipPath._objects = BGclipPath._objects.slice(0, -1);

        // Update the clipPath
        canvas.backgroundImage.clipPath = BGclipPath;

        // Clear the canvas and load from json again
        var json = canvas.toJSON();
        canvas.clear();
        canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
    }
 });

The problem is, the clippath is not being updated until I create another path with the eraser. I fixed this issue with clearing the canvas and loading from the json again after every button click. It is working but I'm not sure this is the best way :)

Note: I tried using canvas.requestRenderAll(); but it is not working.

[ShaMan123]

That sounds an overkill to me.
Try marking the clip path as dirty and if necessary the bgImage as well before rendering

[egemenerd]

@ShaMan123 I did what you said and it worked. Thank you very much :) Here is the final code;

$("#undo").on("click", function () {
    var BGclipPath = canvas.backgroundImage.clipPath;
    BGclipPath.set("dirty", true);
    var objects = BGclipPath.getObjects('path');
    if (objects.length !== 0) {
        BGclipPath._objects = BGclipPath._objects.slice(0, -1);
        canvas.backgroundImage.set({ clipPath: BGclipPath, dirty: true});
        canvas.requestRenderAll();
    }
});

[ShaMan123]

This is now supported via EraserBrush#inverted
The eraser has moved https://github.com/ShaMan123/erase2d

[davidanquetin]

Hi @ShaMan123
I have the same question here, with fabric v5.4.0 (EraserBrush included via custom build)

I would make an undo system which can remove eraser actions step by step (and not all object eraser at once).
so i watch targets from eraser Event, then watch each target (my drawned paths on canvas) and their eraser._objects array

I have tried to remove only the first object of this array, but it has no visual effect on canvas, i do not understand why ?

eraserEvent.targets.forEach(targetPath => {
  const objects = targetPath.eraser.getObjects('path');
    if (objects.length !== 0) {
      targetPath.eraser._objects = targetPath.eraser._objects.slice(0, -1);
      // here, console.log(targetPath.eraser._objects) show that the path was well removed...

      canvas.value.requestRenderAll();
     }
})

if i delete all eraser from the target, all steps are removed, it works but it's not step by step if my target is attached to multiple erasing paths.

Thanks !

[ShaMan123]

This is a fabric gotcha.
You need to mark the object as dirty and re render (a clip path in fabric is unaware of its parent so it doesn't flag it by itself as it should)

[ShaMan123]

Take a look at erase2d

[davidanquetin]

thanks, i had tried the gotcha solution but it was not working, i will test again.
Erase2d is compatible with fabric v5 ? I had already implemented all the system with erase2d and. favric V6 but for other resaons i had to go back to previous version v5.

[ShaMan123]

No
ShaMan123/erase2d#46

[davidanquetin]

Finally I found the problem : make target object dirty is not enough, i had to make object.eraser dirty too, so the final code is :

eraserEvent.targets.forEach(targetPath => {
  const objects = targetPath.eraser.getObjects('path');
    if (objects.length !== 0) {
      targetPath.eraser._objects = targetPath.eraser._objects.slice(0, -1);
      targetPath.set('dirty', true);
      targetPath.eraser.set('dirty', true);
     }
  canvas.value.requestRenderAll();
})

Thanks for help !