fix(ActiveSelection): make sure canvas is in charge of setting initial coords

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(ActiveSelection): initial coords [#9322](https://github.com/fabricjs/fabric.js/pull/9322)
 - docs(): add link to contributing guide [#8393](https://github.com/fabricjs/fabric.js/pull/8393)
 - test(e2e): Drag&Drop tests [#9112](https://github.com/fabricjs/fabric.js/pull/9112)
 - fix(CanvasEvents): regression of `getPointer` usages + BREAKING: drop event data [#9186](https://github.com/fabricjs/fabric.js/pull/9186)

src/canvas/SelectableCanvas.ts

@@ -302,6 +302,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     super(el, options);
     this._activeSelection = activeSelection;
     this._activeSelection.set('canvas', this);
+    this._activeSelection.setCoords();
   }
 
   protected initElements(el: string | HTMLCanvasElement) {

src/shapes/ActiveSelection.spec.ts

@@ -1,3 +1,4 @@
+import { Canvas } from '../canvas/Canvas';
 import { ActiveSelection } from './ActiveSelection';
 import { FabricObject } from './Object/FabricObject';
 
@@ -55,4 +56,20 @@ describe('ActiveSelection', () => {
     selection.add(new FabricObject({ left: 50, top: 50, strokeWidth: 0 }));
     expect(selection.item(0).getCenterPoint()).toEqual({ x: 50, y: 50 });
   });
+
+  it('sets coords after attaching to canvas', () => {
+    const canvas = new Canvas(null, {
+      activeSelection: new ActiveSelection([
+        new FabricObject({
+          left: 100,
+          top: 100,
+          width: 100,
+          height: 100,
+        }),
+      ]),
+      viewportTransform: [2, 0, 0, 0.5, 400, 150],
+    });
+    expect(canvas.getActiveSelection().getCoords()).toMatchSnapshot();
+    expect(canvas.getActiveSelection().getCoords(true)).toMatchSnapshot();
+  });
 });

src/shapes/ActiveSelection.ts

@@ -3,7 +3,6 @@ import { classRegistry } from '../ClassRegistry';
 import type { GroupProps, LayoutContext } from './Group';
 import { Group } from './Group';
 import type { FabricObject } from './Object/FabricObject';
-import type { TOptions } from '../typedefs';
 
 export type MultiSelectionStacking = 'canvas-stacking' | 'selection-order';
 
@@ -26,15 +25,6 @@ export class ActiveSelection extends Group {
 
   static type = 'ActiveSelection';
 
-  constructor(
-    objects?: FabricObject[],
-    options?: TOptions<ActiveSelectionOptions>,
-    objectsRelativeToGroup?: boolean
-  ) {
-    super(objects, options, objectsRelativeToGroup);
-    this.setCoords();
-  }
-
   /**
    * @private
    */

src/shapes/__snapshots__/ActiveSelection.spec.ts.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActiveSelection sets coords after attaching to canvas 1`] = `
+[
+  Point {
+    "x": 600,
+    "y": 200,
+  },
+  Point {
+    "x": 802,
+    "y": 200,
+  },
+  Point {
+    "x": 802,
+    "y": 250.5,
+  },
+  Point {
+    "x": 600,
+    "y": 250.5,
+  },
+]
+`;
+
+exports[`ActiveSelection sets coords after attaching to canvas 2`] = `
+[
+  Point {
+    "x": 100,
+    "y": 100,
+  },
+  Point {
+    "x": 201,
+    "y": 100,
+  },
+  Point {
+    "x": 201,
+    "y": 201,
+  },
+  Point {
+    "x": 100,
+    "y": 201,
+  },
+]
+`;