Переопределить значок комментария

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

Блок с выделенным значком комментария

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

Расширенный комментарийIcon

Начните с расширения CommentIcon .

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

Переопределение методов в ICommentIcon и Icon

Чтобы настроить значок, вы можете переопределить методы в ICommentIcon (описано в следующих разделах) и Blockly.icons.Icon (описано в разделе Создание пользовательских значков ). Не переопределяйте getType , который должен возвращать 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();
}

ICommentIcon также требует методы getBubbleLocation и setBubbleLocation , которые получают и задают местоположение пузырька в рабочей области.

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

getBubbleLocation() {
  return this.bubbleLocation;
}

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

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

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

Зарегистрируйте свой значок

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

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

После регистрации значка Blockly будет использовать его вместо встроенного значка комментария, например, когда пользователь нажимает «Добавить комментарий» в контекстном меню или вы вызываете myBlock.setCommentText() .