fix(ActiveSelection): reset positioning when cleared

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(ActiveSelection): reset positioning when cleared [#9088](https://github.com/fabricjs/fabric.js/pull/9088)
 - ci(): Install system deps only when necessary [#9086](https://github.com/fabricjs/fabric.js/pull/9086)
 - fix(util, Path): path distance measurement fix for M cmd [#9076](https://github.com/fabricjs/fabric.js/pull/9076)
 - chore(TS): Image class type checks, BREAKING change to FromURL static method [#9036](https://github.com/fabricjs/fabric.js/pull/9036)

src/shapes/ActiveSelection.spec.ts

@@ -0,0 +1,58 @@
+import { ActiveSelection } from './ActiveSelection';
+import { FabricObject } from './Object/FabricObject';
+
+describe('ActiveSelection', () => {
+  it('clearing active selection objects resets transform', () => {
+    const obj = new FabricObject({
+      left: 100,
+      top: 100,
+      width: 100,
+      height: 100,
+    });
+    const selection = new ActiveSelection([obj], {
+      left: 200,
+      top: 200,
+      angle: 45,
+      skewX: 0.5,
+      skewY: -0.5,
+    });
+    selection.remove(obj);
+    expect(selection).toMatchObject({
+      left: 0,
+      top: 0,
+      angle: 0,
+      scaleX: 1,
+      scaleY: 1,
+      skewX: 0,
+      skewY: 0,
+      flipX: false,
+      flipY: false,
+      _objects: [],
+    });
+  });
+
+  it('deselect removes all objects and resets transform', () => {
+    const selection = new ActiveSelection([], {
+      left: 200,
+      top: 100,
+      angle: 45,
+    });
+    const spy = jest.spyOn(selection, 'removeAll');
+    selection.onDeselect();
+    expect(spy).toHaveBeenCalled();
+    expect(selection).toMatchObject({
+      left: 0,
+      top: 0,
+      angle: 0,
+      scaleX: 1,
+      scaleY: 1,
+      skewX: 0,
+      skewY: 0,
+      flipX: false,
+      flipY: false,
+      _objects: [],
+    });
+    selection.add(new FabricObject({ left: 50, top: 50, strokeWidth: 0 }));
+    expect(selection.item(0).getCenterPoint()).toEqual({ x: 50, y: 50 });
+  });
+});

src/shapes/ActiveSelection.ts

@@ -1,5 +1,6 @@
 import type { ControlRenderingStyleOverride } from '../controls/controlRendering';
 import { classRegistry } from '../ClassRegistry';
+import type { GroupProps, LayoutContext } from './Group';
 import { Group } from './Group';
 import type { FabricObject } from './Object/FabricObject';
 
@@ -21,7 +22,7 @@ export class ActiveSelection extends Group {
 
   constructor(
     objects?: FabricObject[],
-    options?: any,
+    options?: Partial<GroupProps>,
     objectsRelativeToGroup?: boolean
   ) {
     super(objects, options, objectsRelativeToGroup);
@@ -134,6 +135,25 @@ export class ActiveSelection extends Group {
     return false;
   }
 
+  _applyLayoutStrategy(context: LayoutContext): void {
+    super._applyLayoutStrategy(context);
+    if (this._objects.length === 0) {
+      // in this case layout was skipped
+      // we reset transform for the next selection
+      Object.assign(this, {
+        left: 0,
+        top: 0,
+        angle: 0,
+        scaleX: 1,
+        scaleY: 1,
+        skewX: 0,
+        skewY: 0,
+        flipX: false,
+        flipY: false,
+      });
+    }
+  }
+
   /**
    * Returns string representation of a group
    * @return {String}