コンテキスト メニュー

コンテキスト メニューには、ワークスペース内の要素に関連して実行できるアクションのリストが含まれています。右クリックまたは長押しするとコンテキスト メニューが表示されます。

ブロックのデフォルトのコンテキスト メニュー

ユーザーが実行できる新しい種類のアクションを追加する場合は、カスタムのコンテキスト メニュー オプションを作成することをおすすめします。たとえば、ワークスペース内のすべてのブロックを整理したり、ブロックのイメージをダウンロードしたりできます。アクションの使用頻度が低いと思われる場合は、コンテキスト メニューを配置することをおすすめします。それ以外の場合は、アクションにアクセスする、より見つけやすい方法を作成することをおすすめします。

新しいオプションを実装する

新しいコンテキスト メニュー オプションを実装するには、RegistryItem インターフェースを実装する必要があります。

ID

id プロパティは、コンテキスト メニュー オプションの動作を示す一意の文字列にする必要があります。

const deleteOption = {
  id: 'deleteElement',
};

範囲

scopeType プロパティは、メニュー オプションが表示されるコンテキストと、displayText、preconditionFn、callback に渡す情報を Blockly に指示します。コンテキスト メニューのスコープは、ブロック、ワークスペースのコメント、ワークスペースに設定できます。

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

コンテキスト メニューを複数のスコープで機能させるには、コンテキスト メニュー オプションを複製し、各スコープの scope パラメータを再定義する必要があります。

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

表示テキスト

displayText は、メニュー オプションの一部としてユーザーに表示するものです。表示テキストには、文字列、HTML、または文字列または HTML を返す関数を指定できます。

const deleteOption = {
  displayText: 'Delete block',
};

Blockly.Msg からの翻訳を表示するには、関数を使用する必要があります。値を直接割り当てようとすると、メッセージが読み込まれず、代わりに undefined の値が返されます。

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

関数を使用すると、コンテキスト メニューが関連付けられている要素（ブロックやワークスペースなど）にアクセスするための Scope 値も渡されます。これを使用して、要素に関する情報を表示テキストに追加できます。

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

重み

weight により、コンテキスト メニュー項目が表示される順序が決まります。リスト内で、正の値が高いほど、正の値が低いほど表示されます。（重みが高いオプションほど「重く」なるため、下方向に落ちることが想像できます）。

const deleteOption = {
  weight: 10;
}

組み込みのコンテキスト メニュー オプションの重みは、1 から 1 の昇順で表示されます。

Precondition

scopeType に加えて、preconditionFn を使用して、コンテキスト メニュー オプションを表示するタイミングと方法を制限できます。

文字列のセット（'enabled'、'disabled'、'hidden'）のいずれかを返す必要があります。

値 説明 画像
有効 オプションが有効であることを示します。 有効なオプション
無効 オプションが有効でないことを示します。 無効なオプション
隠し オプションを非表示にします。

preconditionFn には Scope も渡されます。これを使用してオプションの状態を判断できます。

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

コールバック

callback プロパティは、コンテキスト メニュー項目のアクションを実行します。これには Scope と PointerEvent が渡されます。PointerEvent はコンテキスト メニューを開くトリガーとなった元のイベントであり、オプションを選択したイベントではありません。このイベントを使用して、クリックが発生した場所を特定できます。たとえば、クリックした場所に新しいブロックを作成できます。

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

登録

コンテキスト メニュー オプションを使用するには、それを登録する必要があります。この操作はページの読み込み時に 1 回行う必要があります。これは、ワークスペースを挿入する前後に行われます。

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

ブロックタイプごとにオプションを変更する

ブロックには、customContextMenu プロパティを上書きするという方法で、コンテキスト メニューを変更することもできます。このメソッドは、ContextMenuOption オブジェクトの配列（登録されたメニュー項目から照合される）を受け取り、その配列をその場で変更して、表示される最終的なオプション セットを決定します。

詳しくは、ブロック、カスタム コンテキスト メニューを定義するをご覧ください。

ワークスペースには、同様に動作する configureContextMenu メソッドもあります。

オプションを削除する

ID で登録を解除すると、コンテキスト メニューからオプションを削除できます。

Blockly.ContextMenuRegistry.registry.unregister('someID');

デフォルト オプションの ID は contextmenu_items.ts にあります。

オプションを変更する

既存のオプションを変更するには、レジストリからアイテムを取得してインプレースで変更します。

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';