fix(Controls) avoid sliding with stroke uniform

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Controls) avoid sliding with stroke uniform [#9458](https://github.com/fabricjs/fabric.js/pull/9458)
 - feat(util): expose `calcPlaneRotation` [#9419](https://github.com/fabricjs/fabric.js/pull/9419)
 - refactor(Canvas): BREAKING remove button from mouse events, delegate to event.button property [#9449](https://github.com/fabricjs/fabric.js/pull/9449)
 - patch(Canvas): move event mouse:up:before earlier in the logic for more control [#9434](https://github.com/fabricjs/fabric.js/pull/9434)

e2e/tests/controls/polygon-controls/index.spec.ts

@@ -39,6 +39,53 @@ test('polygon controls can modify polygon - exact false', async ({ page }) => {
   });
 });
 
+test('polygon controls can modify polygon - transform and strokeUniform', async ({
+  page,
+}) => {
+  const canvasUtil = new CanvasUtil(page);
+  const starUtil = new ObjectUtil(page, 'star');
+
+  // notes with skewX is broken
+  await starUtil.executeInBrowser((object) => {
+    object.strokeUniform = true;
+    object.scaleX = 1.2;
+    object.scaleY = 0.9;
+    object.flipY = true;
+    object.setDimensions();
+    object.setCoords();
+    object.canvas.renderAll();
+  });
+
+  expect(await canvasUtil.screenshot()).toMatchSnapshot({
+    name: 'initial_with_transform.png',
+  });
+
+  const p2ControlPoint = await starUtil.getObjectControlPoint('p2');
+
+  // drag the p2 control
+  await page.mouse.move(p2ControlPoint.x, p2ControlPoint.y);
+  await page.mouse.down();
+  await page.mouse.move(p2ControlPoint.x + 300, p2ControlPoint.y + 100, {
+    steps: 40,
+  });
+  await page.mouse.up();
+  expect(await canvasUtil.screenshot()).toMatchSnapshot({
+    name: 'moved_controls_p2_with_transform.png',
+  });
+
+  // drag control p4 in the opposite direction
+  const p4ControlPoint = await starUtil.getObjectControlPoint('p4');
+  await page.mouse.move(p4ControlPoint.x, p4ControlPoint.y);
+  await page.mouse.down();
+  await page.mouse.move(p4ControlPoint.x - 300, p4ControlPoint.y - 100, {
+    steps: 40,
+  });
+  await page.mouse.up();
+  expect(await canvasUtil.screenshot()).toMatchSnapshot({
+    name: 'moved_controls_p4_with_trasnform.png',
+  });
+});
+
 test('polygon controls can modify polygon - exact true', async ({ page }) => {
   const canvasUtil = new CanvasUtil(page);
   const starUtil = new ObjectUtil(page, 'star');

src/controls/polyControl.ts

@@ -80,7 +80,12 @@ export const factoryPolyActionHandler = (
     y: number
   ) {
     const poly = transform.target as Polyline,
-      anchorPoint = new Point(
+      strokeWidth = poly.strokeWidth;
+    // do all calculation without strokeWidth
+    // to avoid scaling issues between dimensions and scaling factors
+    // when strokeUniform is set as true
+    poly.strokeWidth = 0;
+    const anchorPoint = new Point(
         poly.points[(pointIndex > 0 ? pointIndex : poly.points.length) - 1]
       ),
       anchorPointInParentPlane = anchorPoint
@@ -99,7 +104,7 @@ export const factoryPolyActionHandler = (
       newPositionNormalized.x + 0.5,
       newPositionNormalized.y + 0.5
     );
-
+    poly.strokeWidth = strokeWidth;
     return actionPerformed;
   };
 };