How to make group of object in fabric js version 1.7.22 after object load from json with custom attributes?

Question

I am using fabricJS version 1.7.22. I want to implement functionality of grouping and UnGrouping.

When I convert my canvas into json using toJSON(list_of_custom_attribute). my custom attribute not added into json. (custom attribute of subObject which are include in group are not added into json).

Is there any patch for grouping, so that, every time my all custom attribute is add in group's objects.

My grouping code is like below (I borrow this code from fabricJS toGroup() function of latest fabricJS version 2.7.0) :

var activeObject = this.canvas.getActiveGroup();
    var objects = activeObject._objects.concat();
    activeObject._objects = [];
    var options = fabric.Object.prototype.toObject.call(activeObject);
    var newGroup = new fabric.Group([]);
    delete options.type;
    newGroup.set(options);
    objects.forEach(function (object) {
        if (object) {
            object.canvas.remove(object);
            object.group = newGroup;
        }
    });
    newGroup._objects = objects;
    if (!activeObject.canvas) {
        return newGroup;
    }
    else {
        var canvas = activeObject.canvas;
        that.extend(newGroup, that.randomId());
        canvas.add(newGroup);
        canvas._activeObject = newGroup;
        newGroup.setCoords();
    }

I try some scenario Which may help to understand problem. (my all canvas object must contain custom_attribute called 'id')

1) add one image and clone that image. now convert canvas into json. (JSON contain all my custom attributes like this => [ rect[id], circle[id] ]).

2) add one image and clone that image and group that both image. now convert canvas into json. (JSON contain all my custom attributes like this : => group (rect[id], circle[id]))

3) add one image and clone that image. now convert canvas into json (this is like first scenario). now clear canvas and load that json into canvas again. now make group of that both object. and convert canvas into json it look like this => group( rect[], circle[])

The main problem as after perform loadfromJSON. (scenario 3) after loadfromJSON, my objects of group not contain custom attribute.because my canvas json not contain that attribute.

Answer 1

You can try this code snippet by adding it to your application. It will help you keeping custom_attributes of objects even after loading from JSON.

fabric.Object.prototype.toObject = (function(toObject) {
    //console.log('toObject==>', toObject);
    return function(propertiesToInclude) {
        return fabric.util.object.extend(toObject.call(this,
            propertiesToInclude), {
            custom_attribute: this.custom_attribute ?
                this.custom_attribute : '',
        });
    };
})(fabric.Object.prototype.toObject);