Pop-up-Infofelder mit Symbolen verwenden

Für die integrierten Symbole wird eine Benutzeroberfläche im Pop-up-Stil mit Blasen verwendet, um zusätzliche Informationen oder Bearbeiter anzuzeigen. Benutzerdefinierte Symbole können dieses Verhalten ebenfalls replizieren und so für ein einheitliches Erscheinungsbild sorgen.

Wenn für das Symbol ein Infofeld angezeigt werden soll, müssen Sie die Schnittstelle IHasBubble implementieren.

Infofeld ein- oder ausblenden

Für Symbole, die Infofelder verwenden, sollte die Methode setBubbleVisible implementiert werden, um das Infofeld ein- oder auszublenden.

// Implement the setBubbleVisible method of the IHasBubble interface.
setBubbleVisible(visible) {
  // State is already correct.
  if (!!this.myBubble === visible) return;

  if (visible) {
    this.myBubble = new MyBubble(this.getAnchorLocation(), this.getOwnerRect());
  } else {
    this.myBubble?.dispose();
  }
}

// Implement helper methods for getting the anchor location and bounds.

// Returns the location of the middle of this icon in workspace coordinates.
getAnchorLocation() {
  const size = this.getSize();
  const midIcon = new Blockly.utils.Coordinate(size.width / 2, size.height / 2);
  return Blockly.utils.Coordinate.sum(this.workspaceLocation, midIcon);
}

// Returns the rect the bubble should avoid overlapping, i.e. the block this
// icon is appended to.
getOwnerRect() {
  const bbox = this.sourceBlock.getSvgRoot().getBBox();
  return new Blockly.utils.Rect(
      bbox.y, bbox.y + bbox.height, bbox.x, bbox.x + bbox.width);
}

Durch Ziehen des Blocks umgehen

Ändert sich die Position des Symbols, bewegt sich das Infofeld nicht automatisch mit. Sie müssen entweder die Position des Infofelds aktualisieren oder es ausblenden. Dazu können Sie die Methode onLocationChange der IIcon-Schnittstelle verwenden.

onLocationChange(blockOrigin) {
  super.onLocationChange(blockOrigin);
  this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}

Sichtbarkeit des Infofelds zurückgeben

Für die Schnittstelle IHasBubble müssen Sie außerdem eine isBubbleVisible-Methode implementieren, die zurückgibt, ob das Infofeld sichtbar ist oder nicht.

isBubbleVisible() {
  return !!this.myBubble;
}