建立新的圖示類型

如要建立自訂圖示，您必須實作 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;
}

實作 Click 行為

許多圖示具有互動性質，使用者按下圖示時會執行特定操作。舉例來說，使用者點選內建圖示時，全都會顯示對話框。您可以使用 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.
}

圖示處置

圖示放置時應清除任何隨機元素或外部參照。根據預設，附加至 this.svgRoot 的所有內容都會遭到刪除，但您必須手動清理其他參照。請在 dispose 方法中完成這項操作。

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

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