fix(Controls): allow for smooth scaling fo text at any zoom level (#1…

…0186)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Controls): changeWidth can change width with decimals [#10186](https://github.com/fabricjs/fabric.js/pull/10186)
 - ci(): Add some prebuilt fabric in the dist folder [#10178](https://github.com/fabricjs/fabric.js/pull/10178)
 - chore(): Add more generic font families to FabricText.genericFonts [#10167](https://github.com/fabricjs/fabric.js/pull/10167)
 

src/controls/changeWidth.test.ts

@@ -43,6 +43,15 @@ describe('changeWidth', () => {
     expect(target.top).toBe(0);
   });
 
+  test('changeWidth changes the width with decimals', () => {
+    expect(target.width).toBe(100);
+    const changed = changeWidth(eventData, transform, 200.2, 300);
+    expect(changed).toBe(true);
+    expect(target.width).toBe(199.2);
+    expect(target.left).toBe(0);
+    expect(target.top).toBe(0);
+  });
+
   test('changeWidth does not change the width', () => {
     const target = new Rect({ width: 100, height: 100, canvas });
     jest.spyOn(target, '_set').mockImplementation(function _set(this: Rect) {

src/controls/changeWidth.ts

@@ -40,10 +40,9 @@ export const changeObjectWidth: TransformActionHandler = (
         target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),
       multiplier = isTransformCentered(transform) ? 2 : 1,
       oldWidth = target.width,
-      newWidth = Math.ceil(
-        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding,
-      );
-    target.set('width', Math.max(newWidth, 0));
+      newWidth =
+        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding;
+    target.set('width', Math.max(newWidth, 1));
     //  check against actual target width in case `newWidth` was rejected
     return oldWidth !== target.width;
   }