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

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

コメントアイコンはオーバーライド可能です。つまり、Blockly に特定のリソースのインスタンスを独自のコメントアイコンクラスを使用できます。 myBlock.setCommentText()。これは、たとえばコメントのポップアップバブルが異なって表示されます。

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

コメントアイコン

コメントアイコンをオーバーライドするには、 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);