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(): generate docs [#9169](https://github.com/fabricjs/fabric.js/pull/9169)
 - fix(utils) Fixes the code for the anchor point in point controls for polygons [#9178](https://github.com/fabricjs/fabric.js/pull/9178)
 - CD(): website submodule [#9165](https://github.com/fabricjs/fabric.js/pull/9165)

e2e/tests/selection/stale-state/index.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+import { CanvasUtil } from '../../../utils/CanvasUtil';
+
+import '../../../setup';
+
+test('selection stale state #9087', async ({ page }) => {
+  await test.step('select', async () => {
+    await page.mouse.move(20, 20);
+    await page.mouse.down();
+    await page.mouse.move(600, 600, { steps: 20 });
+    await page.mouse.up();
+  });
+  await test.step('rotate', async () => {
+    await page.mouse.move(400, 150);
+    await page.mouse.down();
+    await page.mouse.move(570, 150, { steps: 20 });
+    await page.mouse.up();
+  });
+  await test.step('deselect', async () => {
+    await page.mouse.move(20, 20);
+    await page.mouse.down();
+    await page.mouse.up();
+  });
+  await test.step('select', async () => {
+    await page.mouse.move(20, 20);
+    await page.mouse.down();
+    await page.mouse.move(600, 600, { steps: 20 });
+    await page.mouse.up();
+  });
+  expect(await new CanvasUtil(page).screenshot()).toMatchSnapshot();
+});

e2e/tests/selection/stale-state/index.ts

@@ -0,0 +1,33 @@
+import { Rect } from 'fabric';
+import { beforeAll } from '../../test';
+
+beforeAll(
+  (canvas) => {
+    const centerPoint = canvas.getCenterPoint();
+    const rect1 = new Rect({
+      width: 75,
+      height: 75,
+      top: centerPoint.y - 75,
+      left: centerPoint.x - 75,
+      originX: 'center',
+      originY: 'center',
+    });
+    const rect2 = new Rect({
+      width: 75,
+      height: 75,
+      top: centerPoint.y + 75,
+      left: centerPoint.x + 75,
+      originX: 'center',
+      originY: 'center',
+    });
+    canvas.add(rect1, rect2);
+    canvas.on('mouse:down', ({ pointer, absolutePointer }) =>
+      console.log(pointer, absolutePointer)
+    );
+    canvas.on('mouse:up', ({ pointer, absolutePointer }) =>
+      console.log(pointer, absolutePointer)
+    );
+    return { rect1, rect2 };
+  },
+  { enableRetinaScaling: false }
+);

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,6 +1,6 @@
 import type { ControlRenderingStyleOverride } from '../controls/controlRendering';
 import { classRegistry } from '../ClassRegistry';
-import type { GroupProps } from './Group';
+import type { GroupProps, LayoutContext } from './Group';
 import { Group } from './Group';
 import type { FabricObject } from './Object/FabricObject';
 import type { TOptions } from '../typedefs';
@@ -141,6 +141,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}