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

カスタムアイコンを作成するには、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 メソッドでは、HTML コードの 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 メソッドはアイコンのサイズを返すため、 renderer を使用すると、ブロックの幅を狭めることができます。

サイズは任意の「ワークスペースユニット」単位（ワークスペースの表示やスケールが変わります）。

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

順序を設定する

ブロック内のアイコンの順序は固定です。たとえば組み込みのミューテータはアイコンは常にコメントアイコンの前に表示されます。表示されます。

順序は、getWeight が返す値によって制御されます。メソッドを呼び出します。重みが正の大きいアイコンは、重みが小さいアイコンの後にレンダリングされる正の重みになります。

getWeight() {
  return 10;
}

クリック動作を実装する

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