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 nakazać Blockly własnej klasy ikony komentarza przy wywoływaniu metod takich jak myBlock.setCommentText() Możesz to zrobić, jeśli na przykład chcesz dymek komentarza, aby wyglądał inaczej.

Ikony ostrzeżenia i mutatora nie można zastępować.

Ikona komentarza

Aby zastąpić ikonę komentarza, musisz utworzyć ikonę niestandardową, która będzie implementować interfejsu ICommentIcon, a potem go zarejestrować.

Implementacja podstawowa

Zanim dodasz reguły związane z komentarzami, wykonaj podstawowej implementacji 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 ustawić tekst komentarza i zaktualizować wszelkie treści wizualne.

getText() {
  return this.text;
}

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

Dymek

Niestandardowa ikona komentarza musi implementować interfejs IHasBubble na potrzeby serializacji. Nawet jeśli przy ikonie nie ma dymka, zapisz informacje o widoczności zajęć, aby zapisane przy zachowaniu stanu. W przeciwnym razie po załadowaniu strony utracisz informacje od użytkownika (w tym informacje o tym, czy komentarz był otwarty, czy nie).

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Więcej informacji na temat dymków znajdziesz w sekcji Korzystanie z dymków w wyskakujących okienkach.

Interfejs ICommentIcon wymaga również metody getBubbleSize, która zwraca rozmiar i setBubbleSize, który go ustawia. To samo rozumowanie z poprzednich zapisu stanu, nawet jeśli z technicznego punktu widzenia ikona nie jest wyświetlana, cóż.

getBubbleSize() {
  return this.bubbleSize;
}

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

Zapisz i wczytaj

Niestandardowa ikona komentarza musi zawierać element ISerializable za pomocą prostego interfejsu online. Stan powinien być zgodny z CommentState. za pomocą prostego interfejsu online.

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 na temat serializacji ikon znajdziesz w artykule Zapisywanie i wczytywanie ikon

Rejestracja

Na koniec musisz zarejestrować ikonę, aby umożliwić jej utworzenie przez Blockly. Bądź użyj typu IconTypes.COMMENT.

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