Integrierte Symbole überschreiben

Blockly verfügt über drei Arten von integrierten Symbolen: Kommentare, Warnungen und Mutatoren.

Kommentarsymbole können überschrieben werden. Das bedeutet, dass Sie Blockly anweisen können, Ihre eigene Kommentarsymbolklasse zu instanziieren, wenn Sie Methoden wie myBlock.setCommentText() aufrufen. Das ist beispielsweise sinnvoll, wenn das Pop-up-Infofeld des Kommentars anders aussehen soll.

Warn- und Mutatorsymbole können nicht überschrieben werden.

Kommentarsymbol

Wenn Sie das Kommentarsymbol überschreiben möchten, müssen Sie ein benutzerdefiniertes Symbol erstellen, das die ICommentIcon-Schnittstelle implementiert, und es dann registrieren.

Einfache Implementierung

Schließen Sie die grundlegende Implementierung des benutzerdefinierten Symbols ab, bevor Sie eine kommentierende Logik hinzufügen.

Typ

Die Methode getType muss das Kommentarsymbol IconType zurückgeben.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

Text

Für die Benutzeroberfläche von ICommentIcon muss der Kommentar Text enthalten. Die Methode getText muss den Text des Kommentars zurückgeben. Die Methode setText muss den Text des Kommentars festlegen und alle visuellen Elemente aktualisieren.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Bubble

Das benutzerdefinierte Kommentarsymbol muss die Schnittstelle IHasBubble implementieren, um die Serialisierung zu unterstützen. Auch wenn Ihr Symbol technisch kein Infofeld hat, sollten Sie die Sichtbarkeitsinformationen in Ihrer Klasse speichern, damit der gespeicherte Status erhalten bleibt. Andernfalls gehen Nutzerinformationen verloren, wenn Sie einen Speichervorgang laden, in dem angegeben wird, ob der Kommentar geöffnet war oder nicht.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

Weitere Informationen zu Info-Pop-ups finden Sie unter Pop-up-Bubbles verwenden.

Die ICommentIcon-Schnittstelle erfordert außerdem eine getBubbleSize-Methode, die eine Größe zurückgibt, und eine setBubbleSize, die sie festlegt. Die gleiche Begründung wie beim Speichern des Zustands, auch wenn Ihr Symbol technisch kein Infofeld hat, gilt hier auch.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Speichern und laden

Das benutzerdefinierte Kommentarsymbol muss die Schnittstelle ISerializable implementieren. Der Status sollte der Schnittstelle CommentState entsprechen.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

Weitere Informationen zur Symbolserialisierung finden Sie unter Symbole speichern und laden.

Anmeldung

Schließlich müssen Sie Ihr Symbol registrieren, damit Blockly es instanziieren kann. Verwenden Sie unbedingt den Typ IconTypes.COMMENT.

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);