创建新的图标类型

如需创建自定义图标，您需要实现 IIcon 接口。这会告知 Blockly 您希望图标如何呈现，以及图标的呈现方式执行什么操作

我们建议为 Icon 抽象类创建子类，因为它已经在 IIcon 中提供许多方法的默认实现界面。

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

指定图标类型

getType 方法会返回一个值，该值表示图标。它用于注册图标以进行序列化，以及从 getIcon 检索图标。

JavaScript

  getType() {
    return new Blockly.icons.IconType('my_icon');
  }

TypeScript

  getType(): Blockly.icons.IconType<MyIcon> {
    return new Blockly.icons.IconType<MyIcon>('my_icon');
  }

创建图标的视图

图标的视图是指位于图块上的 SVG 元素。

初始化视图

您可以使用 initView 方法创建 SVG 元素一个小图标。新元素应为 this.svgRoot 元素，以便在应用图标将被销毁

Blockly.utils.dom 模块提供了一个简洁的接口用于实例化 SVG。

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

返回尺寸

getSize 方法会返回图标的尺寸，渲染程序可以让区块具有足够的宽度。

大小在任意“工作区单元”中（不会随着工作区的变化更改缩放比例）。

getSize() {
  return new Blockly.utils.Size(16, 16);
}

设置顺序

图标在块中具有静态顺序。例如，内置的赋值函数始终显示在评论图标的前面，而评论图标则位于警告图标。

顺序由 getWeight 返回的值控制方法。权重较高的图标会排在权重较小的图标之后正权重。

getWeight() {
  return 10;
}

实现 onClick 行为

许多图标都是互动式的，可以在用户点击它们时执行某些操作。例如：当用户点击内置图标时，它们会显示一个气泡。您可以请使用 onClick 方法实现这一点。

onClick() {
  // Do something when clicked.
}

响应屏蔽更改

一些图标还希望响应区块中的更改，特别是更改以及可编辑性和收起状态

可编辑性

如果区块的显示位置不同，可修改或不可修改（例如，当屏蔽设置无效时，相应属性无法点击）可修改），请实现 updateEditable 方法。此方法在块的可修改状态更改时自动调用。

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

收起状态

有些图标会在方块收起后显示，但默认情况下错误。如果您想要显示图标，请替换 isShownWhenCollapsed 方法，用于返回 true。

isShownWhenCollapsed() {
  return true;
}

然后替换 updateCollapsed 方法。

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

处置图标

使用图标时，应清理所有 dom 元素或外部引用处理。默认情况下，附加到 this.svgRoot 的所有内容都会获得但其他引用需要手动清理。此值应为在 dispose 方法中完成。

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}