Ikona zastępowania komentarza

Możesz zastąpić wbudowaną ikonę komentarza. Możesz na przykład zmienić wygląd wyskakującego dymka komentarza.

Aby zastąpić ikonę komentarza, rozwiń CommentIcon, zastąp wybrane metody w ICommentIcon i zarejestruj nową ikonę.

Uwaga: Blockly ma 3 rodzaje wbudowanych ikon: komentarze, ostrzeżenia i mutatory. Można zastąpić tylko ikonę komentarza.

Extend CommentIcon

Zacznij od przedłużenia CommentIcon.

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

Zastępowanie metod w interfejsach ICommentIcon i Icon

Aby dostosować ikonę, możesz zastąpić metody w klasie ICommentIcon (opisane w kolejnych sekcjach) i Blockly.icons.Icon (opisane w artykule Tworzenie ikon niestandardowych). Nie zastępuj funkcji getType, która musi zwracać wartość 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ć wszystkie elementy wizualne.

getText() {
  return this.text;
}

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

Dymek

Ikona komentarza niestandardowego musi implementować interfejs IHasBubble, aby obsługiwać serializację. Nawet jeśli ikona nie ma dymku, informacje o widoczności należy przechowywać w klasie, aby zachować zapisany stan. W przeciwnym razie utracisz informacje o użytkowniku, jeśli wczytasz zapisany stan, który zawiera informację o tym, czy komentarz był otwarty.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

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

Interfejs ICommentIcon wymaga metody getBubbleSize, która zwraca rozmiar, oraz metody setBubbleSize, która go ustawia. To samo uzasadnienie, które podaliśmy wcześniej w przypadku zapisywania stanu, nawet jeśli ikona nie ma dymku, ma zastosowanie również tutaj.

getBubbleSize() {
  return this.bubbleSize;
}

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

ICommentIcon wymaga też metod getBubbleLocation i setBubbleLocation, które pobierają i ustawiają lokalizację dymku w obszarze roboczym.

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

getBubbleLocation() {
  return this.bubbleLocation;
}

Zapisywanie i wczytywanie

Ikona komentarza niestandardowego 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,
    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));
}

Więcej informacji o serializacji ikon znajdziesz w artykule Zapisywanie i wczytywanie ikon.

Zarejestruj ikonę

Na koniec wyrejestruj istniejącą ikonę komentarza i zarejestruj swoją ikonę komentarza, aby Blockly mogło ją utworzyć. Użyj ciągu znaków 'comment', aby wyrejestrować urządzenie, i IconTypes.COMMENT, aby je zarejestrować.

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

Po zarejestrowaniu ikony Blockly będzie jej używać zamiast wbudowanej ikony komentarza, np. gdy użytkownik kliknie „Dodaj komentarz” w menu kontekstowym lub wywołasz funkcję myBlock.setCommentText().