組み込みのアイコンをオーバーライドする

Blockly には、コメント、警告、ミューテータという 3 種類の組み込みアイコンがあります。

コメント アイコンはオーバーライドできます。つまり、myBlock.setCommentText() などのメソッドを呼び出すときに、独自のコメント アイコンクラスをインスタンス化するよう Blockly に指示できます。たとえば、コメントのポップアップ バブルを異なるものにしたい場合などに便利です。

警告アイコンとミューテータ アイコンはオーバーライドできません。

コメント アイコン

コメント アイコンをオーバーライドするには、ICommentIcon インターフェースを実装するカスタム アイコンを作成して登録する必要があります。

基本的な実装

コメント固有のロジックを追加する前に、カスタム アイコンの基本的な実装を完了してください。

タイプ

getType メソッドはコメント アイコン IconType を返す必要があります。

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

テキスト

ICommentIcon インターフェースでは、コメントにテキストが必要です。getText メソッドはコメントのテキストを返す必要があります。setText メソッドでコメントのテキストを設定し、表示内容を更新する必要があります。

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

バブル

カスタム コメント アイコンには、シリアル化をサポートするために IHasBubble インターフェースを実装する必要があります。技術的にはアイコンにバブルがない場合でも、保存された状態が維持されるように、クラスに表示情報を保存する必要があります。そうしないと、コメントが開いているかどうかを含む保存を読み込むと、ユーザーの情報が失われます。

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

バブルの詳細については、ポップアップのバブルの使用をご覧ください。

ICommentIcon インターフェースには、サイズを返す getBubbleSize メソッドと、サイズを設定する setBubbleSize も必要です。技術的にはアイコンにバブルがない場合でも、前述の状態を保存したのと同じ理由がここでも当てはまります。

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

保存して読み込む

カスタム コメント アイコンは、ISerializable インターフェースを実装する必要があります。状態は CommentState インターフェースに準拠している必要があります。

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

アイコンのシリアル化の詳細については、アイコンの保存と読み込みをご覧ください。

登録

最後に、アイコンを登録して、Blockly がアイコンをインスタンス化できるようにする必要があります。必ず IconTypes.COMMENT タイプを使用してください。

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);