Integrierte Symbole überschreiben

Blockly hat drei Arten von integrierten Symbolen: Kommentare, Warnungen und Mutatoren.

Kommentarsymbole können überschrieben werden. Sie können Blockly also anweisen, Ihre eigene Kommentarsymbolklasse, wenn Sie Methoden wie myBlock.setCommentText() Das ist beispielsweise sinnvoll, wenn Sie im Pop-up-Infofeld des Kommentars.

Warn- und Mutator-Symbole können nicht überschrieben werden.

Kommentarsymbol

Um das Kommentarsymbol zu überschreiben, müssen Sie ein benutzerdefiniertes Symbol erstellen, der ICommentIcon-Schnittstelle und registrieren Sie sie dann.

Einfache Implementierung

Bevor Sie eine kommentierende Logik hinzufügen, einfachen Implementierung deines benutzerdefinierten Symbols.

Typ

Die Methode getType muss das Kommentarsymbol IconType zurückgeben.

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

Text

Die ICommentIcon-Oberfläche erfordert, dass der Kommentar Text enthält. Die Methode getText muss den Text des Kommentars zurückgeben. Die Methode setText muss der Text des Kommentars festgelegt und alle visuellen Elemente aktualisiert werden.

getText() {
  return this.text;
}

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

Bubble

Über Ihr benutzerdefiniertes Kommentarsymbol muss die IHasBubble-Oberfläche implementiert werden. um die Serialisierung zu unterstützen. Auch wenn Ihr Symbol eigentlich keine Blase hat, sollten Sie die Sichtbarkeit für Ihren Kurs speichern, damit die beibehalten wird. Andernfalls gehen Informationen vom Nutzer verloren, wenn Sie eine Speicherung, in der angegeben wird, ob der Kommentar geöffnet war oder nicht.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

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

Die ICommentIcon-Schnittstelle erfordert auch eine getBubbleSize-Methode, die eine Größe und ein setBubbleSize, das sie festlegt. Dieselbe Begründung von auch wenn Ihr Symbol eigentlich keine Blase hat, gilt hier als gut.

getBubbleSize() {
  return this.bubbleSize;
}

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

Speichern und laden

Durch dein benutzerdefiniertes Kommentarsymbol muss die ISerializable implementiert werden. . Der Bundesstaat muss den 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. Seien verwenden Sie den Typ IconTypes.COMMENT.

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