What is the best way to save grouped objects to a database?

[lance-lfx]

I understand that when objects on the canvas are grouped, they are immediately made children of the group and all objects are controlled by the group. The group is added to the canvas as an object.
E.g
Canvas._object = [object 1, object 2, object 3, group]

However, I tried to imitate the same structure when I save all 4 objects to my database (including the group). The parent-children relationship is broken once reloaded from my database. So, when I do load it, it loads a group that shows all 3 children objects and the actual 3 children free from the group. What should I do to maintain this parent-children relationship so I can load the groups properly without any duplication?

[mhieupham1]

are you saving each object one by one or all at once ? @lance-lfx

[lance-lfx]

I am saving objects one by one instead of the entire canvas, but I run into this group issue if I do that.

[zhe-he]

Only save the outermost shapes. Use canvas.toObject to export the entire canvas and canvas.loadFromJSON to import the entire canvas. Use canvas.getObjects() to get the outermost shapes.

[asturur]

Are you using group.toObject() to save, and group.fromObject(data) to restore?
And if yes, what is going wrong?

[lance-lfx]

I looked into this problem in more detail:
For example, when I have 2 shape objects and I grouped them, the canvas _objects array shows there are 3 objects (group + 2 shape objects), but only the group is in the _objectsToRender array, so only the group is rendered and the 2 shape objects aren't. However, when I saved and reloaded all 3 of the objects from the database, all 3 of the objects are rendered. Are there any properties or methods that I need check in order to only render the Group object?

[asturur]

I think you are doing something wrong at high level.

If you do

const obj1 = new fabric.Rect();
const obj2 = new fabric.Rect();
const obj3 = new fabric.Rect();
const grp = new fabric.Group([obj1, obj2, obj3])
canvas.add(grp); // notice this is the only one added
var json = canvas.toObject();

in the JSON structure to save in the database you should have the parent/children relationship intact.
In the canvas object array there would be a single object and in the grp.objects array there should be 3.

[lance-lfx]

ok, this makes much more sense now
i didn't realize that if the objects already exist on the canvas, you have to manually remove them from the canvas first and then create new group and add only the group to canvas. maybe this is worth mentioning in the docs?