From 8acf1cf34ef97e2688244a5300bf84d628026146 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 14 Sep 2023 18:03:19 +0530 Subject: [PATCH 1/4] Update IText.ts --- src/shapes/IText/IText.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shapes/IText/IText.ts b/src/shapes/IText/IText.ts index 117c2d88344..4a2ef312ed7 100644 --- a/src/shapes/IText/IText.ts +++ b/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 = From 2a9cd00554d457309c2035001ce2435b469e7231 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 14 Sep 2023 19:04:03 +0530 Subject: [PATCH 2/4] init --- src/shapes/IText/IText.test.ts | 32 +++++++++++ .../IText/__snapshots__/IText.test.ts.snap | 56 +++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 src/shapes/IText/IText.test.ts create mode 100644 src/shapes/IText/__snapshots__/IText.test.ts.snap diff --git a/src/shapes/IText/IText.test.ts b/src/shapes/IText/IText.test.ts new file mode 100644 index 00000000000..d13e76877de --- /dev/null +++ b/src/shapes/IText/IText.test.ts @@ -0,0 +1,32 @@ +import '../../../jest.extend'; +import { Group } from '../Group'; +import { IText } from './IText'; + +describe('IText', () => { + test.each([ + { scale: 1, zoom: 1 }, + { scale: 1, zoom: 50 }, + { scale: 200, zoom: 1 }, + { scale: 200, zoom: 50 }, + { scale: 200, zoom: 1 / 200 }, + ])( + 'cursor width under a group scaled by $scale and canvas zoomed by $zoom', + ({ scale, zoom }) => { + const text = new IText('testing', { cursorWidth: 100 }); + const group = new Group([text]); + group.set({ scaleX: scale, scaleY: scale }); + 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); + expect(fillRect.mock.calls).toMatchSnapshot({ + cloneDeepWith: (value) => + typeof value === 'number' ? Math.round(value * 10) / 10 : undefined, + }); + } + ); +}); diff --git a/src/shapes/IText/__snapshots__/IText.test.ts.snap b/src/shapes/IText/__snapshots__/IText.test.ts.snap new file mode 100644 index 00000000000..218bcc90767 --- /dev/null +++ b/src/shapes/IText/__snapshots__/IText.test.ts.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IText cursor width under a group scaled by 1 and canvas zoomed by 1 1`] = ` +[ + [ + -92.2, + -18.6, + 100, + 40, + ], +] +`; + +exports[`IText cursor width under a group scaled by 1 and canvas zoomed by 50 1`] = ` +[ + [ + -43.2, + -18.6, + 2, + 40, + ], +] +`; + +exports[`IText cursor width under a group scaled by 200 and canvas zoomed by 0.005 1`] = ` +[ + [ + -92.2, + -18.6, + 100, + 40, + ], +] +`; + +exports[`IText cursor width under a group scaled by 200 and canvas zoomed by 1 1`] = ` +[ + [ + -42.5, + -18.6, + 0.5, + 40, + ], +] +`; + +exports[`IText cursor width under a group scaled by 200 and canvas zoomed by 50 1`] = ` +[ + [ + -42.2, + -18.6, + 0, + 40, + ], +] +`; From 29f9af929f31576f36f602589213379ccaba00cf Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 14 Sep 2023 13:36:50 +0000 Subject: [PATCH 3/4] update CHANGELOG.md --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4de759840c..904fe010990 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## [next] +- fix(IText): cursor width under group [#9341](https://github.com/fabricjs/fabric.js/pull/9341) + ## [6.0.0-b3] - fix(Textbox): implemente a fix for the style shifting issues on new lines [#9197](https://github.com/fabricjs/fabric.js/pull/9197) From 3d1c76b5b91af3af0ec933960a64f94c725f9de5 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 18 Sep 2023 00:02:00 +0200 Subject: [PATCH 4/4] more variegated and clear snaps --- src/shapes/IText/IText.test.ts | 60 +++++++------ .../IText/__snapshots__/IText.test.ts.snap | 84 +++++++++---------- 2 files changed, 74 insertions(+), 70 deletions(-) diff --git a/src/shapes/IText/IText.test.ts b/src/shapes/IText/IText.test.ts index d13e76877de..6317dfa0bb5 100644 --- a/src/shapes/IText/IText.test.ts +++ b/src/shapes/IText/IText.test.ts @@ -3,30 +3,40 @@ import { Group } from '../Group'; import { IText } from './IText'; describe('IText', () => { - test.each([ - { scale: 1, zoom: 1 }, - { scale: 1, zoom: 50 }, - { scale: 200, zoom: 1 }, - { scale: 200, zoom: 50 }, - { scale: 200, zoom: 1 / 200 }, - ])( - 'cursor width under a group scaled by $scale and canvas zoomed by $zoom', - ({ scale, zoom }) => { - const text = new IText('testing', { cursorWidth: 100 }); - const group = new Group([text]); - group.set({ scaleX: scale, scaleY: scale }); - 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); + 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); - expect(fillRect.mock.calls).toMatchSnapshot({ - cloneDeepWith: (value) => - typeof value === 'number' ? Math.round(value * 10) / 10 : undefined, - }); - } - ); + 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, + }); + } + ); + }); }); diff --git a/src/shapes/IText/__snapshots__/IText.test.ts.snap b/src/shapes/IText/__snapshots__/IText.test.ts.snap index 218bcc90767..1f1b2ccc955 100644 --- a/src/shapes/IText/__snapshots__/IText.test.ts.snap +++ b/src/shapes/IText/__snapshots__/IText.test.ts.snap @@ -1,56 +1,50 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`IText cursor width under a group scaled by 1 and canvas zoomed by 1 1`] = ` -[ - [ - -92.2, - -18.6, - 100, - 40, - ], -] +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 width under a group scaled by 1 and canvas zoomed by 50 1`] = ` -[ - [ - -43.2, - -18.6, - 2, - 40, - ], -] +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 width under a group scaled by 200 and canvas zoomed by 0.005 1`] = ` -[ - [ - -92.2, - -18.6, - 100, - 40, - ], -] +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 width under a group scaled by 200 and canvas zoomed by 1 1`] = ` -[ - [ - -42.5, - -18.6, - 0.5, - 40, - ], -] +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 width under a group scaled by 200 and canvas zoomed by 50 1`] = ` -[ - [ - -42.2, - -18.6, - 0, - 40, - ], -] +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", +} `;