コールバック

Pivotick を使用すると、callbacks オプションを通じてユーザー インタラクションやシミュレーション イベントに接続できます。 キャンバス、ノード、エッジ上のさまざまなイベントに関数を提供できます。

キャンバスコールバック

コールバック	パラメータ	説明
onCanvasClick	(event: PointerEvent)	キャンバスをクリックすると発生します。
onCanvasContextmenu	(event: PointerEvent)	キャンバス上で右クリックすると起動されます。
onCanvasMousemove	(event: MouseEvent)	マウスがキャンバス上を移動すると発生します。
onCanvasZoom	(event: unknown)	キャンバスのズーム レベルが変更されると発生します。

ノードのコールバック

コールバック	パラメータ	説明
onNodeClick	(event: PointerEvent, node: Node, element: TElement)	ノードがクリックされると発生します。
onNodeDbclick	(event: PointerEvent, node: Node, element: TElement)	ノードがダブルクリックされると発生します。
onNodeContextmenu	(event: PointerEvent, node: Node, element: TElement)	ノードを右クリックすると起動されます。
onNodeHoverIn	(event: PointerEvent, node: Node, element: TElement)	マウスがノードに入ると発生します。
onNodeHoverOut	(event: PointerEvent, node: Node, element: TElement)	マウスがノードから離れると発生します。
onNodeSelect	(node: Node, element: TElement)	ノードが選択されると発生します。
onNodeBlur	(node: Node, element: TElement)	ノードがフォーカス/選択を失ったときに発生します。
onNodeDragging	(event: MouseEvent, node: Node)	ノードがドラッグされている間、継続的に発生します。
onNodeExpansion	(event: PointerEvent, edge: Edge, element: TElement)	ノードが展開または折りたたまれたときに発生します。

エッジコールバック

コールバック	パラメータ	説明
onEdgeClick	(event: PointerEvent, edge: Edge, element: TElement)	エッジをクリックすると発生します。
onEdgeDbclick	(event: PointerEvent, edge: Edge, element: TElement)	エッジがダブルクリックされると発生します。
onEdgeContextmenu	(event: PointerEvent, edge: Edge, element: TElement)	エッジの右クリックで起動されます。
onEdgeHoverIn	(event: PointerEvent, edge: Edge, element: TElement)	マウスがエッジに入ると発生します。
onEdgeHoverOut	(event: PointerEvent, edge: Edge, element: TElement)	マウスがエッジから離れると発生します。
onEdgeSelect	(edge: Edge, element: TElement)	エッジが選択されると発生します。
onEdgeBlur	(edge: Edge, element: TElement)	エッジがフォーカス/選択を失ったときに発生します。

書き込みパスのライフサイクル フック

ユーザーが実行できるすべてのミューテーションは、before-hook を通過します: ライブラリが提案します。 コードが非同期的に決定するため、決定が失敗する可能性があります。フックがない場合、 動作は変化せず、プログラムによる 突然変異 (graph.addNode()、 graph.removeNode()、graph.removeEdge()) は決して呼び出されないため、独自のコード駆動 モデルは独自のフックによってゲートされません。

コールバック	いつ解雇されるか	戻る
onBeforeDelete	ユーザーは、何かが削除される前に、ノード/エッジ/ノートを削除するように要求します。	false 拒否する場合、true リクエストを削除する場合、{ accept, nodes, edges, notes } リクエストを絞り込む場合
onBeforeNodeCreate	ユーザーがノードを作成します (作成 ▸ ノードの追加、キャンバス ▸ ここにノードを追加)	false で拒否権を発動するか、{ accept, id, data, style }
onBeforeEdgeCreate	エッジが存在する前に、接続ジェスチャによってターゲットが解決されました	false で拒否権を発動するか、{ accept, data, style, id, directed }
isValidConnection	接続中のホバーごとにライブ (同期 + 安価である必要があります)	false はターゲットを無効としてマークします。作成前フックは参照されません。
onBeforeNodeEditCommit	ノード編集がコミットされました	false はコミットを拒否し、ノードのデータはそのまま残します
onBeforeEdgeEditCommit	エッジ編集がコミットされました	false はコミットを拒否し、エッジのデータはそのまま残します

受け入れられた編集コミットはデータ バス上でアナウンスされます — nodeChange / edgeChange、 previousData と nextData では、すぐに再描画されます。拒否された人は変わる 何もありません。

対応する UI — onNodeEdit / onEdgeEdit (モーダル本体を返す) および onNodeEditCancel / onEdgeEditCancel — エディターをゲートするのではなく、置き換えることができます。 それが足りない場合は、editors.nodeEditor.fields / editors.edgeEditor.fields を宣言します。 デフォルトのモーダル ビルドを形成します (フリーテキスト フィールドの代わりにリレーションシップ ドロップダウン、 言う）;これらがないと、データ キーごとに 1 つのテキスト フィールドが推論されます。カスタム ボディが所有するのは、 ドラフト — 読み取るフォームがないため、ユーザーが入力するときに session.draft を変更します。 提出する。

削除中

onBeforeDelete は、ジェスチャの 全体的な結果 を受け取り、 ライブラリ: ユーザーが名前を付けた要素、プラス cascadingEdges — 削除するエッジ それらのノードは破壊されます (graph.removeNode カスケード)。この 2 つは決して重なりませんので、それぞれ 1 回だけ永続化できます。

絞り込みは種類ごとに行われます。提供された配列はその種類の要求されたセットを置き換えます。 キーは要求されたままになります (つまり、{ accept: true } は true と一致し、 { accept: true, nodes: [] } はノードを削除しません)。拒否権は何も削除せず、発砲もしない nodeRemove / edgeRemove / noteRemove を選択し、選択範囲をそのままにします。

callbacks: {
    onBeforeDelete: async ({ nodes, edges, cascadingEdges, origin, confirm }) => {
        if (!await confirm({
            title: 'Delete from event?',
            body: `${nodes.length} element(s) and ${edges.length + cascadingEdges.length} link(s).`,
        })) return false

        const saved = await deleteServerSide(nodes, [...edges, ...cascadingEdges])
        // Keep exactly what the server actually deleted.
        return { accept: true, nodes: nodes.filter((n) => saved.has(n.id)) }
    },
}

ctx.confirm(options) はライブラリの確認モーダルを開き、すべての場合に false を解決します パスをキャンセルします。 ctx.origin はどのアフォーダンスが要求したかを示します ('bulk-action' または 'context-menu'）。

フックが {#busy-indicator}を決める間

応答する前にフックを取得または保存すると、ユーザーは待たされたままになります。 200ミリ秒後 応答がない場合、グラフは待機中であることを示します。進行状況カーソルと小さなカーソルが表示されます。 プレビュー エッジ (onBeforeEdgeCreate) の端、ドロップ ポイントにあるスピナー (onBeforeNodeCreate)、またはキャンバスの下部にある「待機中…」の錠剤として (削除、 コミットを編集します、onBeforeIngest)。より早く応答するフックには何も表示されません。

コンテキストを通じてフックが開くプロンプト (promptLabel、promptData、confirm) キューが画面上にある間はキューを削除し、閉じた後の待機時間も同じになります したがって、要求して保存するフックは、ビジー状態の間のみ読み取りをビジーとして読み取ります。 接続ジェスチャの待機中にエスケープすると、接続モードが終了し、キューがダウンします。フック すでに保存されている可能性があるため、その後も受け入れる側が優位性を維持します。

UI: {
    busyIndicator: { delay: 300, label: 'Saving…' }, // or false, to draw your own
}

キューが表示されている間、グラフのルート要素は data-pvt-busy を保持します。

代わりにアフォーダンスを削除する

統合の場合、操作が 決して 許可されない場合、拒否権は間違った答えです グラフが構築される前に ACL チェックがわかっている場合は、アフォーダンスを削除します。それぞれ editors.<editor>.enabled フラグ (明示的に false を除いてオン) はボタンを削除し、 メニューエントリ:

旗	削除します
editors.deletion.enabled	サイドバーの一括削除、およびノード/エッジ/ノート削除エントリ
editors.nodeCreator.enabled	作成▸ノードの追加とキャンバスメニューのここにノードを追加
editors.nodeEditor.enabled	作成 ▸ ノードの編集
editors.edgeEditor.enabled	エッジメニューのエッジ編集

削除、編集、作成の永続化 を参照してください。 スタンドイン バックエンドに対する 3 つのフックすべてのギャラリー カード。

シミュレーションコールバック

コールバック	パラメータ	説明
onSimulationTick	()	シミュレーション ティックごとに発生します。
onSimulationSlowTick	()	シミュレーション中に時々発生します (simulationTick の 10 分の 1 ごと)。

情報

element タイプは、オプション render.type == "svg" の場合のみ svg になります。

例

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)