Adjust Text Box dimensions according React when it is scaled

I wanted the TextBox to adjust or fit exactly with the dimensions of react on scaling the react object in fabricjs

I'm calling the "calculateTextboxWidth" function on scaling the react object to update the dimensions of the Textbox. In the function I'm using the react translateX and translateY properties to get the new dimensions after scaling and then updating it to the TextBox Object width and height

I'm not able to find any solution even in the fabricjs docs

const canvas = new fabric.Canvas('canvas')

fabric.RectWithText = fabric.util.createClass(fabric.Rect, {
  type: 'rectWithText',
  text: null,
  textOffsetLeft: 0,
  textOffsetTop: 0,
  _prevObjectStacking: null,
  _prevAngle: 0,

  recalcTextPosition: function () {
    const sin = Math.sin(fabric.util.degreesToRadians(this.angle))
    const cos = Math.cos(fabric.util.degreesToRadians(this.angle))
    const newTop = sin * this.textOffsetLeft + cos * this.textOffsetTop
    const newLeft = cos * this.textOffsetLeft - sin * this.textOffsetTop
    const rectLeftTop = this.getPointByOrigin('left', 'top')
    this.text.set('left', rectLeftTop.x + newLeft)
    this.text.set('top', rectLeftTop.y + newTop)
  },


  calculateTextboxWidth: function (react) {
    const { translateX, translateY } = react;
    let width = translateX;
    let height = translateY;
    const setCords = { width, height } //translateY, translateX

    this.text.set(setCords);
    this.canvas.set('dirty', true);
    this.canvas.renderAll();
    console.log(react);
  },

  initialize: function (rectOptions, textOptions, text) {
    this.callSuper('initialize', rectOptions)
    this.text = new fabric.Textbox(text, {
      ...textOptions,
      selectable: false,
      evented: false,
    })
    this.textOffsetLeft = this.text.left - this.left
    this.textOffsetTop = this.text.top - this.top
    this.on('moving', () => {
      this.recalcTextPosition()
    })
    this.on('rotating', () => {
      this.text.rotate(this.text.angle + this.angle - this._prevAngle)
      this.recalcTextPosition()
      this._prevAngle = this.angle
    })
    this.on('scaling', (e) => {
      this.calculateTextboxWidth(e.target);
      this.recalcTextPosition()
    })
    this.on('added', () => {
      this.canvas.add(this.text)
    })
    this.on('removed', () => {
      this.canvas.remove(this.text)
    })
    this.on('mousedown:before', () => {
      this._prevObjectStacking = this.canvas.preserveObjectStacking
      this.canvas.preserveObjectStacking = true
    })
    this.on('mousedblclick', () => {
      this.text.selectable = true
      this.text.evented = true
      this.canvas.setActiveObject(this.text)
      this.text.enterEditing()
      this.selectable = false
    })
    this.on('deselected', () => {
      this.canvas.preserveObjectStacking = this._prevObjectStacking
    })
    this.text.on('editing:exited', () => {
      this.text.selectable = false
      this.text.evented = false
      this.selectable = true
    })
  }
})

const rectOptions = {
  left: 10,
  top: 10,
  width: 200,
  height: 75,
  backgroundColor: '#FFFFA5',
}
const textOptions = {
  left: 10,
  top: 10,
  width: 200,
  height: 75,
  fontSize: 20,
  backgroundColor: '#FFFFA9',
}
const rectWithText = new fabric.RectWithText(rectOptions, textOptions, 'Some text')
canvas.add(rectWithText)
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum