コメントのオーバーライド アイコン

組み込みのコメント アイコンをオーバーライドできます。たとえば、コメントのポップアップ バブルの見た目を変更できます。

コメント アイコンがハイライト表示されたブロック

コメント アイコンをオーバーライドするには、CommentIcon を拡張し、ICommentIcon で選択したメソッドをオーバーライドして、新しいアイコンを登録します。

Extend CommentIcon

まず、CommentIcon を拡張します。

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

ICommentIcon と Icon のメソッドをオーバーライド

アイコンをカスタマイズするには、ICommentIcon（次のセクションで説明）と Blockly.icons.Icon（カスタム アイコンを作成するで説明）のメソッドをオーバーライドします。getType はオーバーライドしないでください。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();
}

ICommentIcon には、ワークスペース内のバブルの位置を取得して設定する getBubbleLocation メソッドと setBubbleLocation メソッドも必要です。

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

保存と読み込み

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

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

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

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

アイコンを登録する

最後に、既存のコメント アイコンの登録を解除し、Blockly がインスタンス化できるようにコメント アイコンを登録します。登録解除には文字列 'comment' を、登録には IconTypes.COMMENT を使用します。

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

アイコンを登録すると、Blockly は組み込みのコメント アイコンの代わりにそのアイコンを使用します。たとえば、ユーザーがコンテキスト メニューで [コメントを追加] をクリックした場合や、myBlock.setCommentText() を呼び出した場合などです。