fix(controls) textbox changeWidth control handler

CHANGELOG.md

@@ -1,7 +1,8 @@
 # Changelog
 
 ## [4.0.0-beta.8]
-
+- fix(controls): Handle textbox width change properly [#6219](https://github.com/fabricjs/fabric.js/pull/6219)
+- fix(controls): correctly handling the uniform scaling option [#6218](https://github.com/fabricjs/fabric.js/pull/6218)
 - fix(fabric.Object): fix activeSelection toDataURL canvas restore [#6216](https://github.com/fabricjs/fabric.js/pull/6216)
 - fix(svg_parsers): Add support for empty <style/> tags [#6169](https://github.com/fabricjs/fabric.js/pull/6169)
 - fix(SVG_export, text): Check font faces markup for objects within groups [#6195](https://github.com/fabricjs/fabric.js/pull/6195)

src/controls.actions.js

@@ -443,8 +443,10 @@
 
   // currently unusued, needed for the textbox.
   function changeWidth(eventData, transform, x, y) {
-    var target = transform.target, localPoint = getLocalPoint(target, transform.originX, transform.originY, x, y);
-    transform.target.set('width', Math.abs(localPoint.x));
+    var target = transform.target, localPoint = getLocalPoint(target, transform.originX, transform.originY, x, y),
+        strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),
+        newWidth = Math.abs(localPoint.x / target.scaleX) - strokePadding;
+    target.set('width', Math.max(newWidth, 0));
     return true;
   }
 

test/unit/controls_handlers.js

@@ -0,0 +1,49 @@
+(function(){
+  QUnit.module('fabric.controlHandlers', function(hooks) {
+    var eventData, transform;
+    var canvas = new fabric.Canvas(null);
+    hooks.beforeEach(function() {
+      var target = new fabric.Rect({ width: 100, height: 100 });
+      canvas.add(target);
+      eventData = {
+      };
+      transform = {
+        originX: 'left',
+        orginY: 'top',
+        target: target,
+      };
+    });
+    hooks.afterEach(function() {
+      canvas.clear();
+    });
+    QUnit.test('changeWidth changes the width', function(assert) {
+      assert.equal(transform.target.width, 100);
+      fabric.controlHandlers.changeWidth(eventData, transform, 200, 300);
+      assert.equal(transform.target.width, 199);
+    });
+    QUnit.test('changeWidth changes the width with big strokeWidth', function(assert) {
+      transform.target.strokeWidth = 15;
+      fabric.controlHandlers.changeWidth(eventData, transform, 200, 300);
+      assert.equal(transform.target.width, 185);
+    });
+    QUnit.test('changeWidth changes the width with big strokeWidth and strokeUniform', function(assert) {
+      transform.target.strokeWidth = 15;
+      transform.target.strokeUniform = true;
+      fabric.controlHandlers.changeWidth(eventData, transform, 200, 300);
+      assert.equal(transform.target.width, 185);
+    });
+    QUnit.test('changeWidth changes the width with big strokeWidth and strokeUniform + scaling', function(assert) {
+      transform.target.strokeWidth = 15;
+      transform.target.strokeUniform = true;
+      transform.target.scaleX = 3;
+      fabric.controlHandlers.changeWidth(eventData, transform, 200, 300);
+      assert.equal(Math.floor(transform.target.width), 61);
+    });
+    QUnit.test('changeWidth changes the width with big strokeWidth + scaling', function(assert) {
+      transform.target.strokeWidth = 15;
+      transform.target.scaleX = 3;
+      fabric.controlHandlers.changeWidth(eventData, transform, 200, 300);
+      assert.equal(Math.floor(transform.target.width), 51);
+    });
+  });
+})();