fix(IText): cursor width under group (#9341)

CHANGELOG.md

@@ -2,9 +2,10 @@
 
 ## [next]
 
+- fix(IText): cursor width under group [#9341](https://github.com/fabricjs/fabric.js/pull/9341)
 - TS(Canvas): constructor optional el [#9348](https://github.com/fabricjs/fabric.js/pull/9348)
 
-## [6.0.0-b3]
+## [6.0.0-b13]
 
 - fix(Textbox): implemente a fix for the style shifting issues on new lines [#9197](https://github.com/fabricjs/fabric.js/pull/9197)
 - Fix(Control) fix a regression in `wrap with fixed anchor`, regression from #8400 [#9326](https://github.com/fabricjs/fabric.js/pull/9326)

src/shapes/IText/IText.test.ts

@@ -0,0 +1,42 @@
+import '../../../jest.extend';
+import { Group } from '../Group';
+import { IText } from './IText';
+
+describe('IText', () => {
+  describe('cursor drawing width', () => {
+    test.each([
+      { scale: 1, zoom: 1, textScale: 1, angle: 0, textAngle: 0 },
+      { scale: 1, zoom: 50, textScale: 2, angle: 0, textAngle: 0 },
+      { scale: 200, zoom: 1, textScale: 2, angle: 45, textAngle: 0 },
+      { scale: 200, zoom: 1, textScale: 1, angle: 0, textAngle: 0 },
+      { scale: 200, zoom: 50, textScale: 1, angle: 30, textAngle: 30 },
+      { scale: 200, zoom: 1 / 200, textScale: 1, angle: 0, textAngle: 0 },
+      { scale: 200, zoom: 1 / 200, textScale: 2, angle: 0, textAngle: 90 },
+    ])(
+      'group scaled by $scale and rotated by $angle , text scaled by $textScale and rotated by $textAngle, and canvas zoomed by $zoom',
+      ({ scale, zoom, textScale, angle, textAngle }) => {
+        const text = new IText('testing', {
+          cursorWidth: 100,
+          angle: textAngle,
+          scaleX: textScale,
+          scaleY: textScale,
+        });
+        const group = new Group([text]);
+        group.set({ scaleX: scale, scaleY: scale, angle });
+        group.setCoords();
+        const fillRect = jest.fn();
+        const getZoom = jest.fn().mockReturnValue(zoom);
+        const mockContext = { fillRect };
+        const mockCanvas = { contextTop: mockContext, getZoom };
+        jest.replaceProperty(text, 'canvas', mockCanvas);
+
+        text.renderCursorAt(1);
+        const call = fillRect.mock.calls[0];
+        expect({ width: call[2], height: call[3] }).toMatchSnapshot({
+          cloneDeepWith: (value) =>
+            typeof value === 'number' ? value.toFixed(3) : undefined,
+        });
+      }
+    );
+  });
+});

src/shapes/IText/IText.ts

@@ -500,7 +500,7 @@ export class IText<
       charIndex =
         cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0,
       charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'),
-      multiplier = this.scaleX * this.canvas!.getZoom(),
+      multiplier = this.getObjectScaling().x * this.canvas!.getZoom(),
       cursorWidth = this.cursorWidth / multiplier,
       dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'),
       topOffset =

src/shapes/IText/__snapshots__/IText.test.ts.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IText cursor drawing width group scaled by 1 and rotated by 0 , text scaled by 1 and rotated by 0, and canvas zoomed by 1 1`] = `
+{
+  "height": "40.000",
+  "width": "100.000",
+}
+`;
+
+exports[`IText cursor drawing width group scaled by 1 and rotated by 0 , text scaled by 2 and rotated by 0, and canvas zoomed by 50 1`] = `
+{
+  "height": "40.000",
+  "width": "1.000",
+}
+`;
+
+exports[`IText cursor drawing width group scaled by 200 and rotated by 0 , text scaled by 1 and rotated by 0, and canvas zoomed by 0.005 1`] = `
+{
+  "height": "40.000",
+  "width": "100.000",
+}
+`;
+
+exports[`IText cursor drawing width group scaled by 200 and rotated by 0 , text scaled by 1 and rotated by 0, and canvas zoomed by 1 1`] = `
+{
+  "height": "40.000",
+  "width": "0.500",
+}
+`;
+
+exports[`IText cursor drawing width group scaled by 200 and rotated by 0 , text scaled by 2 and rotated by 90, and canvas zoomed by 0.005 1`] = `
+{
+  "height": "40.000",
+  "width": "50.000",
+}
+`;
+
+exports[`IText cursor drawing width group scaled by 200 and rotated by 30 , text scaled by 1 and rotated by 30, and canvas zoomed by 50 1`] = `
+{
+  "height": "40.000",
+  "width": "0.010",
+}
+`;
+
+exports[`IText cursor drawing width group scaled by 200 and rotated by 45 , text scaled by 2 and rotated by 0, and canvas zoomed by 1 1`] = `
+{
+  "height": "40.000",
+  "width": "0.250",
+}
+`;