Box within Group rendering issues

[MariuszDabrowski]

Placing a box within a group produces the following (drag around to see the result):

Test case: https://codepen.io/MarioD/pen/vwQErz

[forresto]

Oh, thank you. I might have more issues, but that is one of them (trying to recreate gif on right, and rotation is 😕) https://codepen.io/forresto/pen/YbMQXj?editors=0010

Edit: fixed with 👇 .

[desandro]

Thanks for reporting this issue. This is indeed a bug — sort of.

When you add a Box, you are really adding six Rects to your model. So if you add that Box to a Group, then those six Rect will not update their z-index sorting.

The simplest way to resolve this is to enable updateSort: true on the containing Group.

let group = new Group({
  addTo: illo,
  updateSort: true,
});

new Zdog.Box({
  addTo: group,
});

See Box in Group updateSort demo on CodePen

But if you indeed want a Box in a Group without sorting, then you need to add an additional Group with updateSort: true just for the box.

let group = new Zdog.Group({
  addTo: illo,
});

// add other shapes to group
let circle = new Zdog.Ellipse({
  addTo: group,
});
circle.copy({
});

// create separate Group for Box to updateSort
let boxGroup = new Zdog.Group({
  addTo: group,
  updateSort: true,
});

// add box to boxGroup
new Zdog.Box({
  addTo: boxGroup,
});

See Box in separate Group demo on CodePen