Fabri c. js - текст со свободным прямоугольником angular, ограничивающий прямоугольник, как слайды Google

Question

Я делаю редактор чертежей, используя Fabri c. js. Одним из требований является создание гибкого компонента текстового поля (например, Goole Slides или Power Point), ограничивающий прямоугольник которого можно настроить без ущерба для размера текста и других текстовых элементов управления, таких как масштабирование, изменение положения ... В настоящее время, что fabri c. js обеспечивает fabric.Text недостаточно для этой задачи. Так что я использую fabric.Group, но я стека на вопрос выбора. Я не могу выбрать подобъекты группы. Как я могу go об этой проблеме. Любая информация приветствуется

Это я хочу достичь:

Это то, что у меня сейчас с необработанным fabric.Text объектом

Это то, чего я достиг с fabric.Group

Вот мой класс, который предназначен для Textbox

class Text extends fabric.Group {
  constructor(options) {
    super([], Object.assign(options));
    this.class = 'textbox';

    this.init();
  }

  init() {
    const left = this.left;
    const top = this.top;
    const width = this.width || 100;
    const height = this.height || 40;

    this.rect = new fabric.Rect({
      left,
      top,
      width,
      height,
      fill: 'rgba(0,0,0,0)',
      stroke: this.stroke,
      type: 'rect',
      originX: 'left',
      originY: 'top',
      strokeWidth: this.strokeWidth
    });

    this.text = new fabric.IText(this.text, {
      left: left + 20,
      top: top + 12,
      fontSize: this.fontSize,
      fontFamily: this.fontFamily,
      fontColor: this.fontColor,
      selectable: true
    });
    this.text.setCoords();

    this.text.setControlsVisibility({
      br: false, // middle top disable
      bl: false, // midle bottom
      tl: false, // middle left
      tr: false, // I think you get it,
      mb: false,
      ml: false,
      mt: false,
      mr: false,
      mtr: false
    });

    this.addWithUpdate(this.rect);
    this.addWithUpdate(this.text);
  }

  toObject() {
    const obj = super.toObject();
    return Object.assign(obj, {
      class: this.class
    });
  }
}

export default Text;