Node Editor

画面

同梱のNode Editor Galleryにある画面です。Node Editorはグラフを描画して編集操作を受け付ける部品で、データの評価や保存はアプリ側で行います。

用途

アプリ側にグラフのデータがあり、その上へズーム可能なキャンバス、入出力端子、接続線、選択や編集のUIを加える場合に使います。imkit::node_editor はグラフの参照データを描画し、アプリ側へ型付きの編集要求を返します。テーマやDear ImGuiの入力部品、アプリ固有のパネルと組み合わせられます。

シンプルな入力欄だけで足りる場合は、通常のDear ImGui部品を使えます。ImKitは独自のグラフ形式、取り消し機能、評価処理、ファイル形式を提供しません。

最小描画例

#include <imkit/node_editor.h>

namespace ne = imkit::node_editor;

// 既存アプリのImGuiフレームから呼び出す関数例。
void DrawNodeSurface(ne::GraphView graph, ne::EditorState& state,
                     ne::RequestBuffer& requests, const ne::NodeStyle& style) {
    auto frame = ne::BeginEditor("material-graph", graph, state, requests, style);
    ne::DrawLinks(frame); // 接続線の描画を一度予約し、node rowの後に描画します。
    if (frame.visible) {
        ne::DrawNodes(frame);
    }
    ne::EndEditor(frame); // frame.visibleがfalseでも必ず呼びます。
}

例の種別: 既存アプリから呼び出す関数です。呼び出し元でグラフからGraphViewを作り、フレームをまたぐEditorState、容量を決めておくRequestBuffer、MakeNodeStyle(theme)で作るstyleを用意します。Dear ImGuiのNewFrameからRenderまでの間に呼んでください。

呼び出し順は、参照データの用意、BeginEditor、接続線の描画予約、nodeの描画、EndEditor、操作要求の読み取りです。接続線やnode rowを独自に描く場合も同じEditorFrameを使います。

ホストモデルへ統合する

GraphViewはnode／pin／linkをstd::span経由で参照します。NodeViewの文字列、styleへのポインター、callbackとuserデータもアプリ側が所有します。配列や文字列を再確保せず、Inspectorや別表示など関連する描画が終わるまで参照先を保ってください。

RequestBuffer::Requests()から読み取った操作は、アプリ側でグラフIDとrevisionを照合し、すべて検証してからまとめて適用するか、変更せず拒否します。受理後にrevisionを進めます。取り消し、コピー＆ペースト、保存、評価処理、worker、Contextとbackendはアプリ側の責務です。

canConnectで型変換や製品固有の制約を事前に確認できますが、適用直前の検証も必要です。callbackがない場合、異なる0以外の型は接続できず、0は型未指定を表します。循環を許可するかもアプリ側で決めます。

注意点

node／pin／link／graphのIDは種類ごとに異なる64bit値です。0は予約値として、同じグラフ内で一意にします。
非表示の場合もEndEditorが必要です。BeginNodeがtrueを返した場合だけEndNodeを呼びます。EditorStateはeditorごとに同じDear ImGui Contextで保持し、EditorFrameは保存しません。
容量不足やrevision不一致の操作を一部だけ適用しないでください。連続操作中のBegin／Updateは仮状態として扱い、Commit時にデータへ反映します。

Node Editor

画面

用途

最小描画例

ホストモデルへ統合する

注意点

関連API