[Bug]: Problem with updating Textbox width when resize the textbox object.

[niketaOptimumnbrew]

CheckList

• [X] I agree to follow this project's Code of Conduct
• [X] I have read and followed the Contributing Guide
• [X] I have read and followed the Issue Tracker Guide
• [X] I have searched and referenced existing issues and discussions
• [X] I am filing a BUG report.
• [X] I have managed to reproduce the bug after upgrading to the latest version
• [X] I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Firefox, Chrome

Node Version (if applicable)

14.20.0

Link To Reproduction

http://fabricjs.com/kitchensink

Steps To Reproduce

1. Add below code to execute section of fabric.js demo which is linked above.
2. canvas.add(new fabric.Textbox("Hello World",{ left: 10, top: 10, fontFamily: 'Roboto-Regular', angle: 0, fontSize:37, width:200, splitByGrapheme: true, }));
3. resize the textbox width using middle-right control from right to left.
4. when mouse cursor move from right to left using middle right control then object width behave unexpected, it increase the width instead of decrease the width.

Expected Behavior

• when resize the object from right to left direction then object width should decrease , it shouldn't increase.

Actual Behavior

• when resize the object from right to left direction then don't increase object width ,it should decrease until and unless text set properly to the object.
• Please check the attached video. screen-capture (18).webm

Error Message & Stack Trace

Can you please tell me that why it's happening and what is the correct solution for that?

[asturur]

ok that is weird, could be interaction with scale flipping, i don't remember seeing that before. Does it happen also in v6.x?

Try to change the value of lockScalingFlip between either true and false and see if it avoids that?

[niketaOptimumnbrew]

@asturur I have tried lockScalingFlip with true and false value , but it's not working.

[mhieupham1]

function changeWidth(eventData, transform, x, y) { var target = transform.target, localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), multiplier = isTransformCentered(transform) ? 2 : 1, oldWidth = target.width, //before //newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding; //after newWidth = localPoint.x * multiplier / target.scaleX - strokePadding; target.set('width', Math.max(newWidth, 0)); return oldWidth !== newWidth; } I see the localPoint.x becomes negative when dragging the mouse from right to left. Math.abs makes it positive, and obj increase the width See example: https://jsfiddle.net/mhieupham/wgser7xv/5/