替换内置图标

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