Crear burbujas personalizadas

Una burbuja es una interfaz de usuario emergente similar a un globo de diálogo que verías en una cómic Tienen "cola". que apunta a un bloque, y una "cabeza" que contenga elementos SVG arbitrarios.

Si las burbujas integradas no funcionan en tu caso de uso, puedes Puedes crear una burbuja personalizada subclasificando la clase Bubble.

Crea la vista

La vista de una burbuja incluye todos los elementos SVG que se encuentran dentro de la “cabeza” de los burbuja. Estos elementos se crean dentro del constructor de la burbuja y se deben ser elementos secundarios del elemento this.contentContainer para que obtengan se limpia automáticamente cuando se destruye el ícono.

El módulo Blockly.utils.dom proporciona una interfaz limpia para crear instancias de SVG.

class MyBubble extends Blockly.bubbles.Bubble {
  // See the Blockly.bubbles.Bubble class for information about what these
  // parameters are.
  constructor(workspace, anchor, ownerRect) {
    super(workspace, anchor, ownerRect);

    this.text = Blockly.utils.dom.createSvgElement(
          Blockly.utils.Svg.TEXT,
          {'class': 'my-bubble-class'},
          this.contentContainer);
    const node = Blockly.utils.dom.createTextNode('some text');
    this.text.appendChild(node);
  }
}

Configura el tamaño

Debes establecer el tamaño de la burbuja usando setSize de manera que el exterior puede rodear correctamente el contenido de la burbuja. Se debe establecer durante la construcción y siempre que cambie el tamaño de los elementos de la IU.

constructor(workspace, anchor, ownerRect) {
  // Create the view elements... (see above)

  const bbox = this.text.getBBox();
  this.setSize(
    new Blockly.utils.Size(
      bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
      bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
    ),
    true
  );
}

Cómo desechar la burbuja

Los cuadros deben borrar los elementos del dominio o las referencias externas cuando están desechar. De forma predeterminada, todo lo que se agregue a this.contentContainer se obtiene y destruir, pero otras referencias deben limpiarse manualmente. Debe ser dentro del método dispose.

dispose() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}