Textbox resize (horizontally) doesn't update the event inspector like it should

[antoine-nedelec]

Version

2.4.6

Steps to reproduce

PASTE IN JS FIDDLE: http://jsfiddle.net/fabricjs/Da7SP/

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 300 }));

canvas.add(new fabric.Textbox('TEST', {
	left: 100,
	top: 100,
	fill: '#880E4F',
}));

canvas.on('object:modified', function(e) {
  console.log(e.transform.action);
  if("scale" === e.transform.action) {
      console.log("OLD SCALE: " + e.transform.original.scaleX);
      console.log("NEW SCALE: " + e.transform.newScaleX);
      console.log("OLD WIDTH: " + (e.target.width * e.transform.scaleX));
      console.log("NEW WIDTH: " + (e.target.width * e.transform.newScaleX));
      console.log("OLD HEIGHT: " + (e.target.width * e.transform.scaleY));
      console.log("NEW HEIGHT: " + (e.target.width * e.transform.newScaleY));
  }
  else if("scaleX" === e.transform.action) {
      console.log("OLD SCALE: " + e.transform.original.scaleX);
      console.log("NEW SCALE: " + e.transform.newScaleX);
      console.log("OLD WIDTH: " + (e.target.width * e.transform.scaleX));
      console.log("NEW WIDTH: " + (e.target.width * e.transform.newScaleX));
  }
  else if("scaleY" === e.transform.action) {
      console.log("OLD SCALE: " + e.transform.original.scaleY);
      console.log("NEW SCALE: " + e.transform.newScaleY);
      console.log("OLD HEIGHT: " + (e.target.width * e.transform.scaleY));
      console.log("NEW HEIGHT: " + (e.target.width * e.transform.newScaleY));
  }
});

Resize horizontally / vertically, and then watch console.

Expected Behavior

• For the Circle, everything works fine
• For the textbox, it works fine vertically
• For the textbox, you get a "not a number" when changing horizontally (missing "e.transform.newScaleX")

All the other resizes works. This is probably due to the fact that the Textbox doesn't "really" rescale as the text is going to fit in the box (object.scaleX always equal to the original given value). But the event launched is still "scaleX", so there is a bug somewhere.

Actual Behavior

At least get a value in "e.transform.newScaleX" ? (so it is possible to calculate the difference of size though this event).

[asturur]

i do not have a newScaleX for this event, i have just a variation of width.
Unsure how to insert the information and mantain consistency

[antoine-nedelec]

Yep, I did a workaround checking if the element that is passed is a Textbox, then specifically in this case use the width instead to calculate the value I need. But this is not very clean..

[asturur]

is more or less what i can do. i can populate newScaleX with the ratio of new and old width.

[antoine-nedelec]

sure, it would be coherent with the event triggered (scaleX), for further use