Creare bolle personalizzate

Un fumetto è un'interfaccia utente popup che assomiglia a un fumetto che vedi in un fumetto. Hanno una "coda" che punta verso un blocco e una "testa" che contiene elementi svg arbitrari.

Se le bolle integrate non funzionano per il tuo caso d'uso, puoi crearne uno personalizzato sottoclassificando la classe Bubble.

Crea la vista

La visualizzazione di una bolla contiene tutti gli elementi SVG che si trovano all'interno della "testa" della bolla. Questi elementi sono creati all'interno del costruttore della bolla e devono essere elementi secondari dell'elemento this.contentContainer in modo che vengano ripuliti automaticamente quando l'icona viene eliminata.

Il modulo Blockly.utils.dom fornisce un'interfaccia semplice per creare istanze di file 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);
  }
}

Imposta le dimensioni

Le dimensioni della bolla devono essere impostate utilizzando setSize in modo che il bordo esterno possa circondare correttamente i contenuti della bolla. Deve essere impostato durante la costruzione e ogni volta che le dimensioni degli elementi dell'interfaccia utente cambiano.

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
  );
}

Smaltisci la bolla

Quando vengono smaltiti, le bolle dovrebbero ripulire eventuali elementi dom o riferimenti esterni. Per impostazione predefinita, tutto ciò che viene aggiunto a this.contentContainer viene eliminato, ma gli altri riferimenti devono essere eliminati manualmente. Questa operazione deve essere eseguita all'interno del metodo dispose.

dispose() {
  super.dispose();

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