替换内置图标

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