Переопределить встроенные значки

Blockly имеет три типа встроенных значков: комментарии, предупреждения и мутаторы.

Значки комментариев можно переопределить. Это означает, что вы можете указать Blockly создать экземпляр вашего собственного класса значков комментариев при вызове таких методов, как myBlock.setCommentText() . Это может потребоваться, например, если вы хотите, чтобы всплывающее окно комментария выглядело по-другому.

Значки предупреждений и мутаторов не подлежат переопределению.

Значок комментария

Чтобы переопределить значок комментария, необходимо создать собственный значок, реализующий интерфейс ICommentIcon , а затем зарегистрировать его.

Базовая реализация

Прежде чем добавлять логику для комментариев, завершите базовую реализацию собственного значка.

Тип

Метод getType должен возвращать значок комментария IconType .

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

Текст

Интерфейс ICommentIcon требует, чтобы комментарий содержал текст. Метод getText должен возвращать текст комментария. Метод setText должен установить текст комментария и обновить все визуальные элементы.

getText() {
  return this.text;
}

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

Пузырь

Ваш собственный значок комментария должен реализовывать интерфейс IHasBubble для поддержки сериализации. Даже если ваш значок технически не имеет пузырька, вам следует сохранить информацию о видимости в своем классе, чтобы сохранить сохраненное состояние. В противном случае вы потеряете информацию от пользователя, если загрузите сохранение, в котором указано, был ли комментарий открыт или нет.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Дополнительную информацию о всплывающих окнах см. в разделе Использование всплывающих всплывающих окон .

Интерфейс ICommentIcon также требует метода getBubbleSize , который возвращает размер, и метода setBubbleSize , который его устанавливает. Те же рассуждения о сохранении состояния, что и ранее, даже если на вашем значке технически нет пузырька, применимы и здесь.

getBubbleSize() {
  return this.bubbleSize;
}

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

Сохранить и загрузить

Значок пользовательского комментария должен реализовывать интерфейс ISerializable . Состояние должно соответствовать интерфейсу 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));
}

Дополнительные сведения о сериализации значков см. в разделе Сохранение и загрузка значков .

Постановка на учет

Наконец, вам необходимо зарегистрировать свой значок, чтобы Blockly мог создать его экземпляр. Обязательно используйте тип IconTypes.COMMENT .

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