fix: After horizontally flipping the child elements within the group, the cursor display is incorrect

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(): After horizontally flipping the child elements within the group, the cursor display is incorrect [#10649](https://github.com/fabricjs/fabric.js/issues/10649)
 - refactor(): swap lodash with es-toolkit [#10651](https://github.com/fabricjs/fabric.js/pull/10651)
 - chore(): update vitest [#10648](https://github.com/fabricjs/fabric.js/pull/10648)
 - feat(): Add support for text decoration tickness [#10643](https://github.com/fabricjs/fabric.js/pull/10643)

src/controls/Control-cursor.spec.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import { scaleSkewCursorStyleHandler } from './scaleSkew';
+import type { TPointerEvent } from '../../fabric';
+import { Group } from '../shapes/Group';
+import { Canvas } from '../canvas/Canvas';
+import { Rect } from '../shapes/Rect';
+
+describe('fabric.controls.cursor', () => {
+  const canvas = new Canvas(undefined);
+  const rect = new Rect({ width: 100, height: 100 });
+  const groupRect = new Rect({ width: 100, height: 100 });
+  const group = new Group([groupRect], {
+    interactive: true,
+    subTargetCheck: true,
+  });
+  canvas.add(rect, group);
+
+  const cornerControls = ['tl', 'tr', 'br', 'bl'];
+
+  function makeEventData(clientX: number, clientY: number) {
+    return {
+      clientX,
+      clientY,
+    } as TPointerEvent;
+  }
+
+  function test(target: Rect) {
+    const topRightEventData = makeEventData(1000, -1000);
+    const bottomRightEventData = makeEventData(1000, 1000);
+    const bottomLeftEventData = makeEventData(-1000, 1000);
+    const topLeftEventData = makeEventData(-1000, -1000);
+    const list = [
+      { eventData: topRightEventData, cursor: 'ne-resize' },
+      { eventData: bottomRightEventData, cursor: 'se-resize' },
+      { eventData: bottomLeftEventData, cursor: 'sw-resize' },
+      { eventData: topLeftEventData, cursor: 'nw-resize' },
+    ];
+
+    for (const item of list) {
+      const { eventData, cursor } = item;
+      for (const name of cornerControls) {
+        const res = scaleSkewCursorStyleHandler(
+          eventData,
+          target.controls[name],
+          target,
+        );
+        expect(res).toBe(cursor);
+      }
+    }
+  }
+
+  it('scaleSkewCursorStyleHandler', () => {
+    const angle = Math.random() * 360;
+    const groupAngle = Math.random() * 360;
+    rect.set('angle', angle);
+    groupRect.set('angle', angle);
+    group.set('angle', groupAngle);
+    const list = [
+      [false, false],
+      [false, true],
+      [true, false],
+      [true, true],
+    ];
+    for (const [flipX, flipY] of list) {
+      rect.set({ flipX, flipY });
+      groupRect.set({ flipX, flipY });
+
+      test(rect);
+      test(groupRect);
+    }
+  });
+});

src/controls/scale.ts

@@ -107,7 +107,7 @@ export const scaleCursorStyleHandler: ControlCursorCallback = (
   if (scalingIsForbidden(fabricObject, by, scaleProportionally)) {
     return NOT_ALLOWED_CURSOR;
   }
-  const n = findCornerQuadrant(fabricObject, control);
+  const n = findCornerQuadrant(eventData, control, fabricObject);
   return `${scaleMap[n]}-resize`;
 };
 

src/controls/skew.ts

@@ -79,7 +79,7 @@ export const skewCursorStyleHandler: ControlCursorCallback = (
   if (control.y !== 0 && isLocked(fabricObject, 'lockSkewingX')) {
     return NOT_ALLOWED_CURSOR;
   }
-  const n = findCornerQuadrant(fabricObject, control) % 4;
+  const n = findCornerQuadrant(eventData, control, fabricObject) % 4;
   return `${skewMap[n]}-resize`;
 };
 

src/controls/util.ts

@@ -14,6 +14,7 @@ import {
 } from '../util/misc/radiansDegreesConversion';
 import type { Control } from './Control';
 import { CENTER } from '../constants';
+import { sendPointToPlane } from '../util/misc/planeChange';
 
 export const NOT_ALLOWED_CURSOR = 'not-allowed';
 
@@ -84,14 +85,29 @@ export const commonEventInfo: TransformAction<
  * @return {Number} 0 - 7 a quadrant number
  */
 export function findCornerQuadrant(
-  fabricObject: FabricObject,
+  eventData: TPointerEvent,
   control: Control,
+  fabricObject: FabricObject,
 ): number {
-  //  angle is relative to canvas plane
-  const angle = fabricObject.getTotalAngle(),
-    cornerAngle =
-      angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360;
-  return Math.round((cornerAngle % 360) / 45);
+  const target = sendPointToPlane(
+    fabricObject.canvas!.getViewportPoint(eventData),
+    undefined,
+    fabricObject.canvas!.viewportTransform,
+  );
+  const center = fabricObject.getCenterPoint();
+  let point: Point;
+  if (control.x !== 0 && control.y !== 0) {
+    point = center;
+  } else {
+    const { E, F } = calculateProjections(
+      center,
+      target,
+      fabricObject.getTotalAngle(),
+    );
+    point = control.x == 0 ? F : E;
+  }
+  const n = getDirection(point, target);
+  return n;
 }
 
 /**
@@ -156,3 +172,46 @@ export function getLocalPoint(
   localPoint.y -= control.offsetY;
   return localPoint;
 }
+
+function getDirection(point: Point, target: Point) {
+  const dx = target.x - point.x;
+  const dy = target.y - point.y;
+
+  const radians = Math.atan2(dy, dx);
+  const degrees = radiansToDegrees(radians);
+  return Math.floor((degrees + 382.5) / 45) % 8;
+}
+
+/**
+ * Given rectangle ABCD with its center at O, it is rotated by an angle around the center O, and there exists a point P outside O.
+ * Draw segment OY perpendicular to the base AB of the rectangle, and draw segment OX perpendicular to the side AD of the rectangle.
+ * Draw PE perpendicular to OY with foot E, and draw PF perpendicular to OX with foot F. Find points E and F.
+ * @param O
+ * @param P
+ * @param angle
+ * @returns
+ */
+function calculateProjections(O: Point, P: Point, angle: number) {
+  const rad = degreesToRadians(angle);
+  const cosA = Math.cos(rad);
+  const sinA = Math.sin(rad);
+
+  // Calculate vector OP
+  const opX = P.x - O.x;
+  const opY = P.y - O.y;
+
+  // Vector in the direction of the OX axis (base direction): (cosA, sinA)
+  // Vector in the direction of the OY axis (side direction): (-sinA, cosA)
+
+  // Calculate the projection of point F on the OX axis (foot)
+  // Using the vector projection formula: projection scalar t = (OP · OX) / (|OX|^2), since |OX| is a unit vector, |OX|^2=1
+  const tF = opX * cosA + opY * sinA;
+  const F = new Point(O.x + tF * cosA, O.y + tF * sinA);
+
+  // Calculate the projection of point E on the OY axis (foot)
+  // Similarly: projection scalar t = (OP · OY) / (|OY|^2), |OY|^2=1
+  const tE = opX * -sinA + opY * cosA;
+  const E = new Point(O.x + tE * -sinA, O.y + tE * cosA);
+
+  return { E, F };
+}