Wrong bounding box after creating a selection.

[jeroenrosendaal]

When selecting all objects inside the canvas and creating an ActiveSelection of it the bounding box becomes wrong. Does somebody know how to fix this? If read about .setCoords() but haven't succeeded with this.

https://jsfiddle.net/vhbx6prk/3/

const canvas = new fabric.Canvas("canvas")
canvas.setWidth(document.body.clientWidth)
canvas.setHeight(document.body.clientHeight)

canvas.on('after:render', () => {
	canvas.contextContainer.strokeStyle = '#555';
  canvas.forEachObject((obj) => {
    var bound = obj.getBoundingRect();
    canvas.contextContainer.strokeRect(
      bound.left + 0.5,
      bound.top + 0.5,
      bound.width,
      bound.height
    );
  });
});

const word1 = new fabric.Text("Example 1", {
  left: 100,
  top: 100,
  width: 50,
  height: 56,
})

const word2 = new fabric.Text("Example 1", {
  left: 200,
  top: 200,
  width: 50,
  height: 56,
  fill: "red",
})

canvas.add(word1)
canvas.add(word2)

const selection = new fabric.ActiveSelection(canvas.getObjects(), {
  canvas: canvas,
});

[asturur]

In fabric 5 the getBounding box is relative to the parent.
You need to use the activeSelection transform to transform the bounding box.

I suggest you to see how the method is built in fabric 6 and just copy the code in your project if you need it in that way. If you are at the start of your project use fabric 6.

[jeroenrosendaal]

This fill fix it. But I'm not sure why. Can you explain?

var mCanvas = this.tmpCanvas.viewportTransform;
var mObject = obj.calcTransformMatrix();
var mTotal = fabric.util.multiplyTransformMatrices(mCanvas, mObject);
const matrix = fabric.util.qrDecompose(mTotal);

 return {
    left: matrix.translateX - (obj.width / 2) * matrix.scaleX,
    top: matrix.translateY - (obj.height / 2) * matrix.scaleY, 
    width: (width - left) * this.tmpCanvas.getZoom(),
    height: (height - top) * this.tmpCanvas.getZoom(),
};

[jeroenrosendaal]

And this will not take rotation into account. Can you help with that? Can't seem to figure it out.

[asturur]

i wonder why you can't use the normal render control box function. seems to me you want the control box.

[asturur]

not sure this is what you are looking for:
https://jsfiddle.net/asturur/2rmuqa5n/3/