alimozdemir / fabric-history Goto Github PK

The history is not working properly when i add video

Here is the timeline of actions:
added element: video
actions: undo-redo-undo(err here)
expected: pre-state before adding video
actual: video appears again

when checked thoroughly, fabricCanvas.historyUndo still contains the video object after 2nd undo.

P.S: after deleting the video element via click event, the historyRedo property becomes NULL. So when redo is clicked , video doesnt come back

If I add color Red, Black, Blue.

then when calling .undo() background is not going Blue, Black, red.

it is going Blue to White. This is not expected while Undo.

I have 2 issues.

1. Background image scaled and set, 2 path objects added and undo background image gets moved and gives some white space.

2. When undoing an object that added immediately after background image. It removes background image also.

Instead of going back after the first brush drawing(erasing it from the canvas) it goes further and removes also the background image, meanwhile doing a redo() after this makes the canvas with the first brush drawing and the background image reappear.

How to pass values in this.extraProps??
Also how i can manage multiple canvases?

Hi Mate, thank you for your nice plugin.
I try to use it in nuxt js.
When I import your library it says "fabric is not defined"
seems it run history library before fabric. But I am not use how to load it right in nuxt js env for vue js.

Can you please help me?

plugin should sustain the custom added properties by the user or developer in the fabric object

Thanks for building this plugin!

I noticed that clearing the canvas isn't part of the history. So if I

• draw a red line
• then a green line
• then clear the canvas
• and finally use undo
  => Only the red line is shown now but I would have expected both the red and green line.

Fix: Also listen for canvas:cleared event.

fabric.Canvas.prototype._historyEvents = function () {
    return {
        'object:added': this._historySaveAction,
        'object:removed': this._historySaveAction,
        'object:modified': this._historySaveAction,
        'object:skewing': this._historySaveAction,
        'canvas:cleared': this._historySaveAction,
    };
};

Hi,

This repo is great and im finding it very useful! I have come across one problem where if i draw a select around multiple objects and then delete those objects i cannot undo that operation.

singular delete appear to work fine for me, but the groups dont.

use case: selecting multiple objects, delete those objects and then attempt to undo
expected outcome: the group deletion is undone and both object reappear
actual outcome: undoes previous action before deletion

here is how i am deleting objects in Fabricjs:

const checkforDelete = (e) => {
    if (e.key === 'Backspace' || e.key === 'Delete') {
        const activeObjects = canvas.getActiveObjects();

        // remove objects
        if (activeObjects.length > 0) {
            activeObjects.forEach((object) => {
                if (!object.isEditing) {
                    canvas.remove(object);
                }
            });
        }
    }
};

here is my code for history management:

export const History = (canvas) => {
    if (!canvas) return;

    window.addEventListener('keydown', ({ keyCode, ctrlKey, shiftKey }) => {
        // Check Ctrl key is pressed.
        if (!ctrlKey && !keyCode === 91) {
            return;
        }

        // Check pressed button is Z - Ctrl+Z.
        if (keyCode === 90 && !shiftKey) {
            canvas.undo();
        }

        // Check pressed button is Y - Ctrl+Y or Ctrl+Z+Shift
        if (keyCode === 89 || (keyCode === 90 && shiftKey)) {
            canvas.redo();
        }
    });
};

First of all. Programimg with undo and redo is an amazing experience. 🥳🥳

Recently I encountered the function of restoring the content removed by the eraser in development. Using the undo test will remove Objects. How can I restore the content removed by the eraser?

Fabric 5.2 custom build with Erasing.
Fabric-history 1.6

Fabric v6 is currently in beta, "pretty close to the official release" (fabricjs/fabric.js#8299 (comment)). Would be awesome to see fabric-history supporting this new version.

Currently "import 'fabric-history';" crashes my application when used with fabric v6 (ERROR Error: Uncaught (in promise): ReferenceError: fabric is not defined), probably because of the changes in imports mentioned here.

Heya,

I've created some custom classes with FabricJS and am coming across issues with undo/redo.

i THINK the problem is how im intitalising those custom classes rather than anything to do with this libraries implementation. Have you successfully got history working with custom classes?

Thanks,
Perry

Would be lovely to use this with typescript.

If undo or redo is called only one times more, the history will broke.

Reproduce steps:

• draw a line,
• push Undo button - first time,
• push Undo button - second time,
• history is gone.

Above steps same on redoing.

Codepen example

I am adding base64 image to to canvas,which works fine on iOS, but the undo option operation causes an error:

(in (null);3) Unexpected identifier 'code'. Expected either a closing ']' or a ',' following an array element.

Any idea what the reason for this?

Hi,

So I have been using fabric-history and works greatly for 1 canvas. Now we have implemented multiple canvases stored in an array and all functions works well except the history, it seem to only work on 1 canvas, so when I loop through canvases, it will do multiple undo which is not what I want.

My question is how can I have multiple canvases but the history undo goes back 1 by 1

I feel the whole canvases should be stored in history instead of per canvas but not sure how to implement this.

@alimozdemir

When importing the script using several different ways, I always get:

Uncaught TypeError: canvas.undo is not a function

Tried with fabric 3.4.0 like in the example in the readme and also with fabric 4.4.0

I copy pasted the example in the readme into a html file and it produces the same error

Hi @lyzerk,

Thanks for your work on the module! I've been implementing this and noticed you also added support for the extraProps! Nice one! However, when I run yarn build I get a failed to minify error and it is reporting that the error is occurring on:

./node_modules/fabric-history/src/index.js:6

Related SO issue:
https://stackoverflow.com/questions/45671597/failed-to-minify-the-code-from-this-file

I'm using webpack with the UglifyJsPlugin. I'm using many other node modules in my app but I'm only getting this issue when including fabric-history.

Any ideas/help with this would be greatly appreciated!

Cheers!

Kyle

Is it possible to keep the activeObject after undo / redo?

I have background image and then i add some objects on canavs, and start doing undo it also undo the backgound image. but want to keep background image. so is there any option to exclude an object saving into history?

i want it to remove only what I added after loading from json but deletes everything

Hi,

When i create my canvas i add some default objects to the layout for the user to play around with. The fabric-history module takes these objects being added into its history and on undo will remove them.

I'm hoping there might be a way that i can define a starting point for fabric-history so that this does not happen.

Type: Question
use case: Define a starting point in Fabrics history
Expected outcome: when a user undo history it only goes back to the defined point in time

Cheers,
Perry

Hello,

i have an issue, items become not selectable when doing undo/redo while editing.

Step to reproduce :
1 / Add a text
2 / Edit the text
3 / Do a undo while still editing the text
4 / Do a redo
5 / Text is not selectable anymore

http://jsfiddle.net/lk77/kz59stg7/66/

you can see on the fiddle that when you go on edit mode, selectable become false, and when you leave edit mode, selectable is true again.

but if you do undo/redo it stays like that, and never go back to true

thanks

Is there a way you would recommend for selectively toggling on and off saving changes to the history stack?

In particular, I want certain actions on fabric canvas to be ignored when undoing / redoing.

I thought I would be able to use canvas.offHistory() and canvas.onHistory() to disable saving state when adding selected objects, e.g.

    canvas.offHistory();
    canvas.add(obj);   
    
    canvas.renderAll();
    canvas.onHistory();

but this still fires history:append

Hiya,

me again :) Im just wondering if you have tried using patterns with loadfromjson. I'm trying to include it in my project and having some issues with the object dissapearing from the canvas when i undeo then redo to reapply the pattern.

Steps

1. Add an object to canvas
2. set fill to a color
3. update object fill to a dynamic pattern
4. try undo
5. try redo

Expected outcome: pattern is reapplied to object
Actual outcome: object dissapears from canvas

this is my code to set fill with a pattern, i have implemented the function as a custom function of a group class i created. the area object is a Rect within the group.

 _setBackgroundImage: function (url) {
                canvas.offHistory();
                const area = this._objects.find((el) => el.id === 'canvas-area' );

                const self = this;

                fabric.Image.fromURL(url, function (img) {

                    if (area.width > area.height) {
                        img.scaleToWidth(area.width);
                    } else {
                        img.scaleToHeight(area.height);
                    }

                    var patternSourceCanvas = new fabric.StaticCanvas();
                    patternSourceCanvas.add(img);
                    patternSourceCanvas.renderAll();

                    patternSourceCanvas.setDimensions({
                        width: img.getScaledWidth(),
                        height: img.getScaledHeight(),
                    });
                    patternSourceCanvas.renderAll();

                    var pattern = new fabric.Pattern({
                        source: patternSourceCanvas.getElement(),
                        repeat: 'repeat',
                    });

                    area.set('fill', pattern);
                    self.set('_backgroundImage', url);
                    canvas.onHistory();
                    canvas.renderAll();
                });
            },

Hello! First of all, thanks for your plugin. But I have the problem with undo when I set the overlay image on my canvas.
Please, see this
In order to reproduce the problem, draw a line with a pencil, then press ctrl + z, you will see that instead of removing the line, all canvas objects are deleted, including overlay image.

Thank you

Hi,

I'm implementing some UI buttons on the screen to help the user experience with undo/redo. I would like to change the state of these buttons depending on if its possible to currently perform an undo or redo function.

Do you have any methods available where i might be able to do this?

action: canUndo()
expected result: if can undo history returns true

action: canRedo()
expected result: if can redo history returns true

I've implemented a layer control feature with fabricJS. I also implemented fabric-history for the canvas. When switching layers with moveTo, there aren't any fired events. I think layer changes are pretty major events, and should probably be "undo-able".

Steps to reproduce:

1. Create an fabricJS canvas
2. Add fabric-history
3. Add a few elements
4. run moveTo on an object

And you won't be able to undo the layer change

Hello I'm using fabric js latest version and creating an editor tool. we create shapes by using mouse down and modify them when mouse is move . when I use undo/redo function it remove 2 objects at same time .
But when I add the shape first by clicking on the button with default width and height and top and left the undo redo function works fine.
i've tried to debug it on mouse down the object is added first with width and height 0 and on mouse move the object is modified with calculations of mouse movement thus 2 objects are maintained in the history instead of one how can i fix that ?

https://jsfiddle.net/durga598/7amunr73/2/

here is my code use it with history js and try to create multiple shapes and then use undo redo it will create the bug

fabric-history depends on an old version of "fabric": "^3.3.2", which depends on an old version of "jsdom": "^15.1.0", which has a vulnurability advisory: Insufficient Granularity of Access Control in JSDom
Need to fix so that jsdom version is >= 16.5.

Hiya,

I've noticed a history persistence issue with redo/undo. It seems that the history path is not cleared when you redo and start a new path. This is quite hard to explain so hopefully the steps to create helps make it clearer.

steps to recreate:

1. add text
2. change text color
3. change text size
4. undo x 3 so we are back at step 1
5. change font wieght
6. redo x 1

expected outcome: nothing happens
actual outcome: reverts state to step 2

I guess it's more of a wonder,
Is there any quick way to also cache which objects were selected on each state?

Great plugin btw working beautifully!

After I
draw something, then UNDO it, draw something else, then again UNDO it,
I always get a wrong state.

i change my whole canvas dynamically
Now for every new canvas i use clearHistory function but the json file is not empty so when undo and redo is used on the new canvas it renders the previous canvas data so i want to clear json
i tried to modify your code but i am not that good so wasn't able to do it

Your library is nice though :)

Issue: Browser crashes with frequent undo.
Reproduce Steps:

1. Add more than 300 objects into the canvas.
2. Execute undo every second.
3. Browser asks to wait or stop the process. Continue with wait.
4. Once page is back giving undo back-to-back ends with crashing the browser with blank page.

I've created a canvas object editor where some objects are should be fixed and non-selectable and therefore NOT part of the undo-redo process but not even using the extraProps options to the canvas, they still eventually get selectable and therefore deletable, allowing the state of a totally empty canvas

Is is possible to cancel the adding of particular objects to the stack in the history:append event handler?

The script give me some problem that I solve by put false historyProcessing assignment in the callback of loadfromJSON.

I hope this help.

Hello,

i would like to limit the history to the last 10 actions, is this possible currently ?

i could just splice the historyUndo / historyRedo array but i don't know if there is a better way

thanks

Hi,

Is there any way to skip an action/actions on an object to become part of fabic-history stack?
e.g
If a number of items are allowed to be added in the canvas but a default object should not be affected by undo/redo. It should remain there and undo/redo should work only for the actions on rest of the items

First of all Kudos for the awesome library.

So i have a template creator where I can add Text and change color, boldness, italic of the Text.
However When i undo, the previous color/boldness/italicised doe not appear. It goes back to the event before text was added.

On further check, Only the below events fire ;

object:added': this._historySaveAction,
      'object:removed': this._historySaveAction,
      'object:modified': this._historySaveAction,
      'object:skewing': this._historySaveAction, 

The object:modified does not fire on the inner properties modification of text .

Hello there,
I'm using fabric-js v5.2.4. and the latest version of fabric-history.
I added objects on my canvas, adding some attributes like an id, then constraint like lockration:true.

let rect = new fabric.Rect({
    fill: '#FF5733',
    id: "rect",
    width: fabric.util.parseUnit('100mm'),
    height: fabric.util.parseUnit('50mm'),
    lockRotation: true,
});

let square = new fabric.Rect({
    fill: '#FFC300',
    id: "square",
    width: fabric.util.parseUnit('50mm'),
    height: fabric.util.parseUnit('50mm'),
    lockRotation: true
});

let circle = new fabric.Circle({
    fill: '#0AD6C3',
    id: "circle",
    radius: fabric.util.parseUnit('50mm'),
    lockRotation: true
});

I'm using id for specifying a square and a rectangle
Then I'm setting their constraints like this:
rect.setControlsVisibility({mtr: false}); square.setControlsVisibility({mtr: false, mt: false, mr: false, mb: false, ml: false}); circle.setControlsVisibility({mtr: false});

But my constraints disappear when I use the function undo or redo, as long as my 'id' on each object.
Here's the code I'm using fo undo and redo functions.

document.addEventListener("keydown", function(e) {
    if ( e.ctrlKey && e.keyCode == 90 ) {
        canvas.toObject();
        canvas.undo();
        redefineRules();
    }
    else if( e.ctrlKey && e.keyCode == 89 ) {
        canvas.toObject();
        canvas.redo();
        redefineRules();
    }
})

function redefineRules() {
    canvas.getObjects().forEach(obj => {
        obj.set({
            lockRotation: true,
        });
        console.log(obj);
        switch (obj.id) {
            case "rect" || "circle":
                obj.setControlsVisibility({mtr: false});
                break;
            case "square":
                obj.setControlsVisibility({mtr: false, mt: false, mr: false, mb: false, ml: false});
                break;
            default:
                break;
        }
    });
}

But of course on my redefineRules() function, obj.id doesn't exist.

Can someone help me please ?

I have given some custom properties to my canvas object and i would like to store those in the history. Fabric JS accepts an array of prop names while converting it to json. Is there a way we can specify them and store those as well when storing the history?

Ive come accross one other issue while testing your repo.

use case: i have a number of non selectable objects on my canvas, and i undo an operation off adding in a shape
expected outcome: non selectable objects should remain non selectable
actual outcome: non selectable objects arte now selectable

code for history management:

export const History = (canvas) => {
    if (!canvas) return;

    window.addEventListener('keydown', ({ keyCode, ctrlKey, shiftKey }) => {
        // Check Ctrl key is pressed.
        if (!ctrlKey && !keyCode === 91) {
            return;
        }

        // Check pressed button is Z - Ctrl+Z.
        if (keyCode === 90 && !shiftKey) {
            canvas.undo();
        }

        // Check pressed button is Y - Ctrl+Y or Ctrl+Z+Shift
        if (keyCode === 89 || (keyCode === 90 && shiftKey)) {
            canvas.redo();
        }
    });
};

code for non selectable objects:

    /**
     * add image to canvas
     */
    const addImage = (newImg) => {
        var img = newImg.set({
            width: newImg.width,
            height: newImg.height,
            id: 'canvas-img',
            originX: 'center',
            originY: 'center',
            selectable: false,
        });

        fabricCanvas.add(img);
        img.center();
        fabricCanvas.renderAll();
    };

    /**
     * Set canvas area
     */
    const addCanvas = (config) => {
        const rect = new fabric.Rect({
            id: 'canvas-area',
            height: config.height,
            width: config.width,
            fill: 'white',
            originX: 'center',
            originY: 'center',
            selectable: false,
        });

        fabricCanvas.add(rect);
        rect.center();
        fabricCanvas.renderAll();
    };