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