Symbol „Kommentar überschreiben“

Sie können das integrierte Kommentarsymbol überschreiben. Sie möchten beispielsweise, dass die Pop-up-Blase des Kommentars anders aussieht.

Wenn Sie das Kommentarsymbol überschreiben möchten, erweitern Sie CommentIcon, überschreiben Sie ausgewählte Methoden in ICommentIcon und registrieren Sie das neue Symbol.

Hinweis :Blockly hat drei Arten von integrierten Symbolen: Kommentare, Warnungen und Mutatoren. Nur das Kommentarsymbol kann überschrieben werden.

Extend CommentIcon

Beginnen Sie mit der Erweiterung von CommentIcon.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Methoden in ICommentIcon und Icon überschreiben

Wenn Sie das Symbol anpassen möchten, können Sie Methoden in ICommentIcon (siehe die folgenden Abschnitte) und Blockly.icons.Icon (siehe Benutzerdefinierte Symbole erstellen) überschreiben. Überschreiben Sie getType nicht. Diese Funktion muss Blockly.icons.IconType.COMMENT zurückgeben.

Text

Bei der ICommentIcon-Schnittstelle muss der Kommentar Text enthalten. Die getText-Methode muss den Text des Kommentars zurückgeben. Mit der 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

Ihr benutzerdefiniertes Kommentarsymbol muss die Schnittstelle IHasBubble implementieren, um die Serialisierung zu unterstützen. Auch wenn Ihr Symbol technisch keine Blase hat, sollten Sie die Sichtbarkeitsinformationen in Ihrer Klasse speichern, damit der gespeicherte Status beibehalten wird. Andernfalls gehen Informationen zum Nutzer verloren, wenn Sie einen Speicherstand laden, der angibt, ob der Kommentar geöffnet war oder nicht.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

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

Die ICommentIcon-Schnittstelle erfordert eine getBubbleSize-Methode, die eine Größe zurückgibt, und eine setBubbleSize-Methode, die sie festlegt. Die gleiche Argumentation wie oben, den Status auch dann zu speichern, wenn Ihr Symbol technisch gesehen keine Blase hat, gilt auch hier.

getBubbleSize() {
  return this.bubbleSize;
}

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

Für ICommentIcon sind auch die Methoden getBubbleLocation und setBubbleLocation erforderlich, mit denen die Position der Blase im Arbeitsbereich abgerufen und festgelegt wird.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

Speichern und laden

Ihr benutzerdefiniertes Kommentarsymbol muss die ISerializable-Schnittstelle implementieren. Der Status muss der CommentState-Schnittstelle entsprechen.

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

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

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

Symbol registrieren

Heben Sie schließlich die Registrierung des vorhandenen Kommentarsymbols auf und registrieren Sie Ihr Kommentarsymbol, damit es von Blockly instanziiert werden kann. Verwenden Sie den String 'comment' für die Abmeldung und IconTypes.COMMENT für die Registrierung.

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

Nachdem Sie Ihr Symbol registriert haben, verwendet Blockly es anstelle des integrierten Kommentarsymbols, z. B. wenn der Nutzer im Kontextmenü auf „Kommentar hinzufügen“ klickt oder Sie myBlock.setCommentText() aufrufen.