建立新的圖示類型

如要建立自訂圖示，您需實作 IIcon 介面。這會讓 Blockly 知道您希望圖示如何呈現，以及您希望呈現什麼內容點擊與付費點擊等

建議您將 Icon 抽象類別設為子類別，因為該類別已存在提供了 IIcon 中許多方法的預設實作方式存取 API

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 方法可讓您建立方塊上的圖示新元素應為 this.svgRoot 元素，讓其在圖示時自動清理

Blockly.utils.dom 模組提供簡潔的介面將可擴充向量圖形執行個體化

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

導入 OpenGL 行為

許多圖示都是互動式圖示，點選後即會執行動作。例如：使用者按一下內建圖示後，內建圖示都會顯示對話框。你可以請使用 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.
}

丟棄圖示

圖示應清理任何 Pod 元素或外部參照處理。根據預設，附加至 this.svgRoot 的任何內容都會獲得已刪除，但其他參照需要手動清理。這應該是是在 dispose 方法內完成。

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

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