Zastąp ikony wbudowane

Blockly ma 3 rodzaje wbudowanych ikon: komentarze, ostrzeżenia i mutatory.

Ikony komentarzy można zastąpić. Oznacza to, że możesz zezwolić Blockly na tworzenie instancji własnej klasy ikony komentarza podczas wywoływania metod takich jak myBlock.setCommentText(). Możesz to zrobić, jeśli na przykład chcesz, aby wyskakujący dymek z komentarzem wyglądał inaczej.

Ikony ostrzeżeń i mutatorów nie można zastąpić.

Ikona komentarza

Aby zastąpić ikonę komentarza, musisz utworzyć ikonę niestandardową, która implementuje interfejs ICommentIcon, a następnie ją zarejestrować.

Implementacja podstawowa

Zanim dodasz funkcje logiczne odnoszące się do komentarzy, przeprowadź podstawową implementację ikony niestandardowej.

Typ

Metoda getType musi zwracać ikonę komentarza IconType.

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

Tekst

Interfejs ICommentIcon wymaga, aby komentarz zawierał tekst. Metoda getText musi zwracać tekst komentarza. Metoda setText musi ustawiać tekst komentarza i aktualizować wszelkie treści wizualne.

getText() {
  return this.text;
}

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

Dymek

Niestandardowa ikona komentarza musi implementować interfejs IHasBubble, aby obsługiwała serializację. Nawet jeśli w zasadzie nie ma dymka, zapisz informacje o widoczności w klasie, aby zachować zapisany stan. Jeśli nie zapiszesz żadnego z użytkowników, utracisz informacje o tym, czy komentarz był otwarty czy nie.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Więcej informacji o dymkach znajdziesz w artykule Korzystanie z wyskakujących dymków.

Interfejs ICommentIcon wymaga też metody getBubbleSize, która zwraca rozmiar, i metody setBubbleSize, która go ustawia. Tutaj również zastosowanie ma to samo uzasadnienie co podczas zapisywania stanu, nawet jeśli z technicznego punktu widzenia nie ma dymka.

getBubbleSize() {
  return this.bubbleSize;
}

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

Zapisz i wczytaj

Niestandardowa ikona komentarza musi implementować interfejs ISerializable. Stan powinien być zgodny z interfejsem CommentState.

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

Więcej informacji o serializacji ikon znajdziesz w artykule o zapisywaniu i ładowaniu ikon.

Rejestracja

Na koniec musisz zarejestrować swoją ikonę, żeby można było utworzyć jej wystąpienie. Pamiętaj, aby używać typu IconTypes.COMMENT.

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