Undo Redo remove my object's attributes

[leacumont]

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 ?

[geekreflex]

The reason your constraints got removed is because the library doesn't expect custom properties in your object. In the source code, the extraProps array is predefined with certain properties that the library recognizes, such as 'selectable' and 'editable'. Adding custom properties like 'id' and 'lockRotation' might not work as expected because the library was not designed to handle them.

this.extraProps(['selectable', 'editable', 'id', 'lockRotation']);

To work around this, just open the library's source code, find where extraProps is defined, and add your missing properties like 'id' and 'lockRotation'. You can also extract the modified code into a separate file. Make the necessary adjustments and then import this customized version into your project.

[leacumont]

I think it worked pretty well !
I got another problem but I don't think fabric-history has a meaning on it.
Thank you !