Pop-up-Infofelder verwenden

Die integrierten Symbole verwenden eine Pop-up-Bubble-Oberfläche, um zusätzliche Informationen oder Editoren anzuzeigen. Dieses Verhalten kann auch mit benutzerdefinierten Symbolen nachgebildet werden, um ein einheitliches Erscheinungsbild zu erhalten.

Wenn Ihr Symbol eine Sprechblase enthalten soll, müssen Sie die Schnittstelle IHasBubble implementieren.

Infofeld ein- oder ausblenden

Bei Symbolen mit Infofeldern sollte die Methode setBubbleVisible implementiert werden, 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);
}

Block ziehen

Wenn sich das Symbol bewegt, wird die Blase nicht automatisch mitverschoben. Sie müssen entweder den Standort der Blase aktualisieren oder sie ausblenden. Das kann in der Methode onLocationChange der Schnittstelle IIcon erfolgen.

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

Sichtbarkeit der Blase zurückgeben

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

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