Fabric.js: Ability to toggle the vertical stretching of text when using the bottom middle and top middle object controls

[kylekirkby]

Is your feature request related to a problem? Please describe.
It would be great if we can disable the vertical stretching of text inside a textbox when using the bottom middle and top middle controls. I haven't been able to find a solution to this.

Describe the solution you'd like
A textbox setting that allows users to disable the textbox stretching vertically.

Describe alternatives you've considered
I've looked at customizing the textbox via prototypes but cannot find where I can toggle the stretching of text.

@asturur is this doable?

Best,

Kyle

[melchiar]

Have you tried just disabling those controls using setControlsVisibility()? Or is there something else you'd prefer those controls do other than scaling?

[kylekirkby]

@melchiar I've removed the control points for now but I'd love to be able to resize the textbox without scaling the text inside it. This is so I can allow users to set a max height for their textboxes using the controls instead of a maxHeight input field.

[asturur]

@kylekirkby the custom control api should sole this problem.
look how the custom action handle for textbox width is done:

  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),
        newWidth = Math.abs(localPoint.x / target.scaleX) - strokePadding;
    target.set('width', Math.max(newWidth, 0));
    return true;
  }

You can easily create a changeHeight from this.

You have then to consider that textbox height depends from width + the text.
So unless you customized those functions somehow, setting the height is not useful since it will get back to the correct height every time you change text.

[kylekirkby]

@kylekirkby the custom control api should sole this problem.
look how the custom action handle for textbox width is done:

  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),
        newWidth = Math.abs(localPoint.x / target.scaleX) - strokePadding;
    target.set('width', Math.max(newWidth, 0));
    return true;
  }

You can easily create a changeHeight from this.

You have then to consider that textbox height depends from width + the text.
So unless you customized those functions somehow, setting the height is not useful since it will get back to the correct height every time you change text.

Thank you @asturur - I’ll give this a go!!!

[kylekirkby]

@asturur I'm still getting the text stretched with the following changes:

fabric.CustomTextBox.changeHeight = function (eventData, transform, x, y) {
  var target = transform.target,
    localPoint = this.getLocalPoint(
      transform,
      transform.originX,
      transform.originY,
      x,
      y
    ),
    strokePadding =
      target.strokeHeight / (target.strokeUniform ? target.scaleY : 1),
    newHeight = Math.abs(localPoint.y / target.scaleY) - strokePadding;
  target.set("height", Math.max(newHeight, 0));
  return true;
};

Could you point me to where the changeWidth function is in the fabric js source code that handles the TextBox Width? I need what the TextBox does for width but for the height :)

[asturur]

is in version 4 beta, and is on the controls:

first wrapped here

Hooked up here: https://github.com/fabricjs/fabric.js/blob/master/src/mixins/default_controls.js#L101

fabric.CustomTextBox.prototype.controls.mb.actionHandler = changeHeight;
fabric.CustomTextBox.prototype.controls.mt.actionHandler = changeHeight;

I m writing an introduction to custom controls right now, also please look at the 2 available examples on fabricjs.com/demos/

[kylekirkby]

@asturur thank you for this I'll take a look now!

[kylekirkby]

Hi @asturur,

So the control works - sort of! Basically, the height/maxHeight of the TextBox changes however the object is not re-rendered to show this change. Upon clicking the TextBox to vertically again the height resets to what it is to begin with (because it hasn't re-rendered). I'm calling canvas.renderAll() and the TextBox doesn't change height. Any ideas?

[asturur]

Well, depending what the customObject is doing, remember that text is built to reset the height with the text content each time it feels like is necessary.

What is your custom object doing? can you paste the custom class somewhere?

[kylekirkby]

After months of trying to get this to work I have finally got it working!!! Thank you so much for getting the custom control features added! My custom TextBox class was setting the height to the height of the text using calcTextHeight

[kylekirkby]

It's more or less perfect! @asturur any idea as to how I could get the textbox to scale from the drop when clicking and draggin the mt control? I was thinking something like your reply to this SO post:
https://stackoverflow.com/questions/47590126/fabric-js-is-there-a-way-to-identify-the-direction-of-scaling

[asturur]

The WrapWithAnchor function should be solving that. I mentioned it in my answers, are you using it?

[asturur]

Ah my bad, i wrote first wrapped here but i did not past the link after it.
https://github.com/fabricjs/fabric.js/blob/master/src/controls.actions.js#L496

Look here, there is a utility function called wrapWithFixedAnchor that is made to solve this problem in a sort of general way.
Wrap your changeHeight with that, and should work.

I see is not exposed in the fabric object, for now just copy paste it, i will expose it somewhere.

[kylekirkby]

Arhh sweet thanks @asturur let me try it out! I did see that function on my searches through the almight source code and thought it looked like it was used to solve that (worked my way back from the changeWidth function since that works nicely!)

[kylekirkby]

Also getLocalPoint isn't exposed so I had to copy that utility over aswell! couldn't actually access it straight from the changeHeight function

[melchiar]

nice ui @kylekirkby 👍

[kylekirkby]

Thank you @melchiar - I've been working on this SaaS product for months trying to get it just right! This TextBox functionality is just what I've been looking for. All built with react / bootstrap

[asturur]

Can you open a new issue, that asks to make usable the utility functions used to create the default action handlers?

[CookedApps]

@kylekirkby Would you mind sharing the source code for your custom TextBox? I have the exact same use case and would really appreciate it!

[kylekirkby]

@CookedApps sorry but I can’t share this code!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[proYang]

@CookedApps sorry but I can’t share this code!

Would you share some ideas for solving this problem? Please 🥺