Pop-up-Infofelder mit Symbolen verwenden

Die integrierten Symbole nutzen eine Benutzeroberfläche im Pop-up-Stil mit Blasen zur Anzeige zusätzlicher Informationen oder Redakteure. Benutzerdefinierte Symbole können dieses Verhalten ebenfalls reproduzieren, um eine ein einheitliches Erscheinungsbild.

Wenn bei Ihrem Symbol ein Infofeld angezeigt werden soll, müssen Sie das Tag IHasBubble-Schnittstelle.

Infofeld ein- oder ausblenden

Symbole, die Blasen enthalten, sollten das setBubbleVisible, um das Infofeld ein- oder auszublenden.

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

  // Wait for queued renders to finish so that the icon will be correctly
  // positioned before displaying the bubble.
  await Blockly.renderManagement.finishQueuedRenders();

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

Das Verschieben von Blöcken

Wenn sich die Position des Symbols ändert, bewegt sich das Infofeld nicht automatisch mit. Sie müssen entweder die Position der Blase aktualisieren oder sie ausblenden. Dabei kann es sich um onLocationChange-Methode der IIcon-Oberfläche.

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

Sichtbarkeit der Blase zurückgeben

Für die Schnittstelle IHasBubble muss außerdem ein isBubbleVisible-Methode, die angibt, ob die Blase sichtbar sind oder nicht.

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