Benutzerdefinierte Blasen erstellen

Eine Blase ist eine Pop-up-UI, die wie eine Sprechblase in einem Comic aussieht. Sie haben einen "Ende", der auf einen Block zeigt, und einen "Kopf", der beliebige svg-Elemente enthält.

Wenn die integrierten Bubbles für Ihren Anwendungsfall nicht funktionieren, können Sie eine benutzerdefinierte Bubble erstellen. Dazu erstellen Sie abgeleitete Klassen der Bubble-Klasse.

Ansicht erstellen

In der Blasenansicht befinden sich alle SVG-Elemente, die sich im Kopfbereich der Blase befinden. Diese Elemente werden im Konstruktor der Blase erstellt und sollten dem Element this.contentContainer untergeordnet sein, damit sie beim Löschen des Symbols automatisch bereinigt werden.

Das Modul Blockly.utils.dom bietet eine übersichtliche Schnittstelle zum Instanziieren von SVG-Dateien.

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

Größe festlegen

Die Größe des Infofelds muss mit setSize festgelegt werden, damit der äußere Rahmen den Inhalt des Infofelds richtig umrandet. Sie sollte während der Erstellung und immer dann festgelegt werden, wenn sich die Größe der UI-Elemente ändert.

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

Blase entsorgen

Blasen sollten bei der Entsorgung dom-Elemente oder externe Verweise bereinigen. Standardmäßig wird alles gelöscht, was an this.contentContainer angehängt ist. Andere Verweise müssen jedoch manuell bereinigt werden. Dies sollte in der Methode dispose erfolgen.

dispose() {
  super.dispose();

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