Confusion About Group Capabilities Of Fabricjs

I have been experimenting with fabricjs lately. I am attempting to create a group structure (hierarchy) of layers similar to a raster editor like krita/gimp, conceptually. In other

Solution 1:

group#addWithUpdate will update dimension and position. Just call add while adding to group, after adding the objects call group.addWithUpdate() to update the dimension.

DEMO

var canvas = new fabric.Canvas("t2", {
  // preserveObjectStacking : true,width: 130,
  height:130
});

var rect1 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'red'
})

var rect2 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'yellow'
})

// contains groups 2 and 3// modifying "top" and "left" seems to have no effect?var group1 = new fabric.Group([], {
  'top': 50,
  'left': 20,
})

//will contain rect1 (red)var group2 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})

// will contain rect2 (yellow)var group3 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})
canvas.add(group1)

group1.add(group2)
group2.addWithUpdate(rect1)

group1.add(group3)
group3.addWithUpdate(rect2)
group1.addWithUpdate()

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script><divid="t2-cont" ><canvasid="t2"style="border:black solid 2px;"></canvas></div>

And to change the positions of object call moveTo on grouped object.

DEMO

const canvas = new fabric.Canvas("t2", {
  // preserveObjectStacking : true,width: 130,
  height:130
});

const rect1 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'red'
})

const rect2 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'yellow'
})

// contains groups 2 and 3// modifying "top" and "left" seems to have no effect?const group1 = new fabric.Group([], {
  'top': 50,
  'left': 20,
})

//will contain rect1 (red)const group2 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})

// will contain rect2 (yellow)const group3 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})
canvas.add(group1)

group1.add(group2)
group2.addWithUpdate(rect1)

group1.add(group3)
group3.addWithUpdate(rect2)
group1.addWithUpdate()

setTimeout(()=> {
  group2.moveTo(1);
  group1.addWithUpdate();
  canvas.requestRenderAll();
}, 1000)

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script><divid="t2-cont" ><canvasid="t2"style="border:black solid 2px;"></canvas></div>