FabricJS - Group selection brings objects to front while selected

Question

When I select a group of objects all them are automatically rendered on top of everything. This is a annoying behaviour that makes hard to select other elements that were on top of the selected elements.

There is an example of that happening here.

function newRect(index) {
    return new fabric.Rect({
    width: 100,
    height: 100,
    top: index * 30,
    left: index * 30,
    fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
  });
}

var canvas = new fabric.Canvas('canvas');

var rect0 = newRect(0);
canvas.add(rect0);

var rect1 = newRect(1);
canvas.add(rect1);

var rect2 = newRect(2);
canvas.add(rect2);

var group = new fabric.Group([rect0, rect1]);

canvas.setActiveGroup(group).renderAll();

setTimeout(function() {
  canvas.discardActiveGroup().renderAll();
}, 5000);

When the two elements that are behind another are selected, they are rendered on top of the third one. But when they are deselected, (wait 5 seconds until the group is discarded) they are rendered properly behind the element on top.

Is there anyway to disable this behaviour? I would that the selected elements maintain there z order while selected and do not be on top of everything.

Answer 1

I think I've found the solution.

I need to put the add preserveObjectStacking: true option while initializing the canvas.

var canvas = new fabric.Canvas('canvas', {
  preserveObjectStacking: true,
});

https://jsfiddle.net/fbgu7697/3/

It's working as I expected but it seems to have a weird bug. I'll open it on github.

UPDATE

The issue was already fixed in 1.6.1 version.

https://jsfiddle.net/1vawp9gu/