Draw text proposal

[bpioge]

/**

• Draw the text tag on the top left of the shape
  */
  public drawText() {

this.clearText();
const content = this.data['text'] || null;

if (!content) {
  return;
}

let highestVertice = this.topLeftVertice(this.data.geometry.vertices);

let textPositionX = highestVertice[0] * this.scaleX;
let textPositionY = highestVertice[1] * this.scaleY;

const textSize = 10;

const style = new PIXITextStyle({
  fontFamily: 'Arial',
  fontSize: textSize,
  fill: 0x444444
});

let textMetrics = PIXITextMetrics.measureText(content, style)

const boxWidth = Math.round(textMetrics.width + 5);
const boxHeight = Math.round(textMetrics.height + 3);

this.textGraphic.beginFill(0xFFFFFF, 0.80);
this.textGraphic.lineStyle(1, this.hex, 1, 0.5, true);
this.textGraphic.drawRect(
  0, 0,
  boxWidth,
  boxHeight
);


const parent = this.getHigherParent();
if (parent) {
  this.textGraphic.scale.x = 1.5 / parent.scale.x;
  this.textGraphic.scale.y = 1.5 / parent.scale.y;
}

let textNode = new PIXIText(content, style);
textNode.roundPixels = true;
textNode.resolution = 3;
textNode.anchor.x = 0.5;
textNode.anchor.y = 0.6;
textNode.x = Math.round(boxWidth / 2);
textNode.y = Math.round(boxHeight / 2);

this.textGraphic.addChild(textNode);
this.textGraphic.pivot.set(boxWidth, boxHeight);
this.textGraphic.x = textPositionX;
this.textGraphic.y = textPositionY;
this.textGraphic.endFill();

}