创建新的图标类型

如要创建自定义图标，您需要实现 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();
}