コンテキストメニュー
コンテキスト メニュー オプション は、ノード、エッジ、キャンバスの右クリック メニューを構成します。
デフォルト:
- コンテキスト メニューが有効になります。
- 各メニュー (ノード、エッジ、キャンバス) には個別のアクションがあります。
- 追加のカスタム アクションは、デフォルト アクションの後、削除の上に追加されます。
ツールチップの無効化
enabled プロパティを false に設定するだけで非常に簡単です。
const options = {
UI: {
contextMenu: {
enabled: false
}
}
}追加のアクション
ノード、エッジ、またはキャンバスを右クリックしたときに表示されるアクションをカスタマイズできます。
各コンテキスト メニューは 2 つのセクションに分かれています。
topbarはクイックアクション (コンパクトアイコン) です。 MenuQuickActionItemOptions を受け入れます。menuは完全なメニュー操作です。 MenuActionItemOptions を受け入れます。
これらのスコープに対してこれらのメニューを構成できます。
menuNodemenuEdgemenuNotemenuSelectionmenuCanvas
デフォルトのアクション
| 範囲 | デフォルトのエントリ |
|---|---|
menuNode | ピン留め / ピン留め解除 / フォーカス / 非表示 (トップバー) · ピボット · グループから引き出す · グループに戻す · 画像の表示 · 近隣の選択 · 子を非表示 · 接続… · プロパティの検査 · ノードの削除 |
menuEdge | エッジ編集 · エッジ削除 |
menuNote | メモを非表示にする (トップバー) · メモを削除 |
menuSelection | ピン留めする / ピン留めを外す / 選択したノードを非表示にする (トップバー) · ピボット · 選択したノードをグループ化する · グループから外す · グループに戻す · グループを解除する · 隣接するノードを選択する · 選択項目を削除 |
menuCanvas | すべてピン留め / すべてピン留め解除 (トップバー) · ここにノードを追加 · メモを追加 · ピン留めされたノードを解放します (ノードがピン留めされている間) |
ノード、選択、およびグループ メニューは同じ順序で読み取られます。最初に Pivot ▸、次に グループ のエントリが該当し、次に他のエントリが適用されます。 あなたのものはその次にあり、削除は最後に行われます。グループのメニュー (ピボット · グループを開く · メンバーの選択 · テーブル内のメンバーを表示する · グループの名前を変更する · グループを解除する · ネイバーを選択する · メンバーを削除する) は、 ライブラリは独自のものであり、あなたのエントリは受け付けません。適用されないエントリは省略されます。 他のものを動かします。
書き込みパス エントリ (削除、編集、作成) は、その前フックを通過します — を参照してください。 書き込みパスのライフサイクルフック — そしてそれぞれが消えます editors.<editor>.enabled フラグが false の場合: deletion で 削除、 エッジを編集でedgeEditor、ここにノードを追加でnodeCreator、接続… edgeCreatorと。切り替え可能な機能への入り口であるエントリについても同様です。 メモを追加し、menuNote全体をUI.notesに続けます。 プロパティの検査はUI.inspectorに続きます。あなた自身のエントリがゲートされることはありません。 両方の「…here」エントリは、内容に関係なく、メニューを開いた場所に要素を配置します。 ズームまたはパンします。
選択内容に基づいて動作します
複数のノードの選択の一部であるノードを右クリックすると、menuSelection が開きます。 先頭には、動作するノードの数が表示されます。すべてのエントリは選択範囲全体に作用します。 サイドバーの一括アクションは実行しますが、エントリは 1 つのノードに対してのみ意味を持ちます (検査、 […に接続]、[画像を表示]) は省略されます。選択範囲外のノードを右クリックすると開きます そのノード自体のメニューが削除され、選択内容はそのまま残り、キャンバスは独自のメニューを保持します。 menuSelection のエントリは、選択されたノードを Node[] として、visible では次のように受け取ります。 onclick。
データテーブル の行は、その要素と同じメニューを開きます。 キャンバス。
Del は、選択したノードを非表示にします。非表示にはコストがかかるため、削除ではなく非表示になります。 元に戻すことは何もありません。 選択項目を削除 がメニューにあります。
const options = {
UI: {
contextMenu: {
menuNode: {
topbar: [
{
text: 'Delete Node',
variant: 'danger',
onclick: (evt, node) => console.log('Delete', node)
}
],
menu: [
{
text: 'Edit Node',
variant: 'success',
onclick: (evt, node) => console.log('Edit', node)
}
]
},
menuEdge: {
menu: [
{
text: 'Delete Edge',
variant: 'danger',
onclick: (evt, edge) =>
console.log('Delete edge', edge)
}
]
},
menuCanvas: {
topbar: [
{
text: 'Add Node',
variant: 'primary',
onclick: (evt) => console.log('Add Node')
}
]
}
},
tooltip: {
enabled: false,
},
}
}オプションまたはアクションアイテム
アクションアイテムのインターフェースはここで定義されています。
| オプション | 種類 | デフォルト | 説明 |
|---|---|---|---|
iconClass | IconClass | undefined | CSS クラスがアイコンとして使用されます。通常、fontawesome などのアイコン ライブラリで使用されます。例: fa-solid fa-edit |
iconUnicode | IconUnicode | undefined | Unicode 文字をアイコンとして使用します。 fontawesome などのアイコン ライブラリで使用される生の Unicode。例: \uf007 |
imagePath | ImagePath | undefined | アイコンとして使用される画像へのパス。 |
svgIcon | SVGIcon | undefined | アイコンとして使用されるインライン SVG オブジェクト。例: <svg>...</svg> |
text | string | 必須 | メニューとツールバーに表示されるアクションのラベル。 |
title | string | undefined | 項目の横に表示されるオプションのテキストラベル。 |
variant | UIVariant | outline-primary | メニュー項目の視覚的なバリアント (スタイル)。 |
visible | boolean | (element: Node | Node[] | Edge | null) => boolean | true | 項目を表示するかどうかを制御します。動的にすることができます。 |
onclick | (evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void | 必須 | ユーザーがメニュー項目をアクティブ化するとトリガーされます。 |