Repository: fabricjs/fabric.js
Pull request #10186 (2024-09-27 20:37:19)

fix(Controls): allow for smooth scaling fo text at any zoom level 
## Description

Removed a call to Math.ceil when calculating new width in the mr and ml control resize handlers.

codesandbox[bot]: #### Review or Edit in CodeSandbox

Open the branch in <a href="https://codesandbox.io/p/github/Soldier-B/fabric.js/change-width-ceil-fix?mode=review&utm_source=gh_app">Web Editor</a> &bull; <a href="https://codesandbox.io/p/vscode?owner=Soldier-B&repo=fabric.js&branch=change-width-ceil-fix&utm_source=gh_app">VS Code</a> &bull; <a href="https://codesandbox.io/p/vscode?owner=Soldier-B&repo=fabric.js&branch=change-width-ceil-fix&insiders=true&utm_source=gh_app">Insiders</a><br>
Open <a href="https://codesandbox.io/p/devtool/preview/Soldier-B/fabric.js/change-width-ceil-fix?task=preview&port=51423&redirect=true&utm_source=gh_app">Preview</a>

<!-- open-in-codesandbox:complete -->

Soldier-B: fixes #10180 

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61bc62800..79c10c1b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,9 @@
 
 ## [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)
 
 ## [6.4.2]
 
diff --git a/src/controls/changeWidth.ts b/src/controls/changeWidth.ts
index a00108e12..3323019d7 100644
--- a/src/controls/changeWidth.ts
+++ b/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;
   }
diff --git a/src/shapes/Text/Text.ts b/src/shapes/Text/Text.ts
index ee62af760..5f0e4049a 100644
--- a/src/shapes/Text/Text.ts
+++ b/src/shapes/Text/Text.ts
@@ -1790,12 +1790,24 @@ export class FabricText<
     return 1;
   }
 
+  /**
+   * List of generic font families
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
+   */
   static genericFonts = [
-    'sans-serif',
     'serif',
+    'sans-serif',
+    'monospace',
     'cursive',
     'fantasy',
-    'monospace',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded',
+    'math',
+    'emoji',
+    'fangsong',
   ];
 
   /* _FROM_SVG_START_ */


Test patch:
diff --git a/src/controls/changeWidth.test.ts b/src/controls/changeWidth.test.ts
index 50e9df1f9..f5d201dea 100644
--- a/src/controls/changeWidth.test.ts
+++ b/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) {