新しいアイコンタイプを作成する

カスタム アイコンを作成するには、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;
}

Optimize の動作を実装する

多くのアイコンはインタラクティブで、クリックするとなんらかの動作をします。たとえば、組み込みのアイコンはすべて、クリックするとバブルが表示されます。これを実装するには 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();
}