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

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(ActiveSelection): make sure canvas is in charge of setting initial coords [#9322](https://github.com/fabricjs/fabric.js/pull/9322)
 - test(): Migrate json control tests [#9323](https://github.com/fabricjs/fabric.js/pull/9323)
 - fix() Textbox inputs with new lines, regression from #9097 [#9192](https://github.com/fabricjs/fabric.js/pull/9192)
 - docs(): add link to contributing guide [#8393](https://github.com/fabricjs/fabric.js/pull/8393)

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,34 @@ describe('ActiveSelection', () => {
     selection.add(new FabricObject({ left: 50, top: 50, strokeWidth: 0 }));
     expect(selection.item(0).getCenterPoint()).toEqual({ x: 50, y: 50 });
   });
+
+  // remove skip once #9152 is merged
+  it.skip('should not set coords in the constructor', () => {
+    const spy = jest.spyOn(ActiveSelection.prototype, 'setCoords');
+    new ActiveSelection([
+      new FabricObject({
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+      }),
+    ]);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  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().lineCoords).toMatchSnapshot();
+    expect(canvas.getActiveSelection().aCoords).toMatchSnapshot();
+  });
 });

src/shapes/ActiveSelection.ts

@@ -3,14 +3,26 @@ 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';
 
 export interface ActiveSelectionOptions extends GroupProps {
   multiSelectionStacking: MultiSelectionStacking;
 }
 
+/**
+ * Used by Canvas to manage selection.
+ * Canvas accepts an `activeSelection` option allowing overriding and customization.
+ *
+ * @example
+ * class MyActiveSelection extends ActiveSelection {
+ *   ...
+ * }
+ *
+ * const canvas = new Canvas(el, {
+ *  activeSelection: new MyActiveSelection()
+ * })
+ */
 export class ActiveSelection extends Group {
   declare _objects: FabricObject[];
 
@@ -26,15 +38,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`] = `
+{
+  "bl": Point {
+    "x": 600,
+    "y": 250.5,
+  },
+  "br": Point {
+    "x": 802,
+    "y": 250.5,
+  },
+  "tl": Point {
+    "x": 600,
+    "y": 200,
+  },
+  "tr": Point {
+    "x": 802,
+    "y": 200,
+  },
+}
+`;
+
+exports[`ActiveSelection sets coords after attaching to canvas 2`] = `
+{
+  "bl": Point {
+    "x": 100,
+    "y": 201,
+  },
+  "br": Point {
+    "x": 201,
+    "y": 201,
+  },
+  "tl": Point {
+    "x": 100,
+    "y": 100,
+  },
+  "tr": Point {
+    "x": 201,
+    "y": 100,
+  },
+}
+`;