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