Navigation

The editor separates the graph (node positions, in canvas space) from the view (the pan + zoom that maps canvas to screen). Two of these ops change only the view — fit the whole graph, or frame the selection. The third, center_node_on_screen, is a footgun: despite the name it moves the node to the view center.

if (button(FIT_ALL, (text = "Fit All"))) {
    g_fit = true                                  // serviced inside the editor block
}
if (button(FRAME_SEL, (text = "Frame Selection"))) {
    navigate_to_selection(g_ed, false, -1.0)      // bracketed wrapper → safe out here
}
if (button(CENTER_FIRST, (text = "Center #1"))) {
    center_node_on_screen(g_ed, 1)
}

node_editor("graph", (editor = g_ed)) {
    ...
    if (g_fit) {
        imgui_node_editor::NavigateToContent(0.0)  // must run with the editor current
        g_fit = false
    }
}

Source: examples/tutorial/navigation.das.

Walkthrough

options gen2

require imgui/imgui_harness
require imgui/imgui_node_editor_boost_v2
require imgui/imgui_node_editor_live

// =============================================================================
// TUTORIAL: navigation — the view ops, and the one that fools you.
//
//   NavigateToContent(duration)            -- fit the whole graph to the viewport (VIEW)
//   navigate_to_selection(ed, zoomIn, dur) -- frame just the selected nodes        (VIEW)
//   center_node_on_screen(ed, nodeId)      -- MOVES the node to the view center    (GRAPH!)
//
// The editor separates the GRAPH (node positions, in canvas space) from the VIEW
// (the pan + zoom that maps canvas to screen). Fit All and Frame Selection change only
// the view — no node moves. center_node_on_screen is the footgun: despite the name,
// upstream CenterNodeOnScreen MOVES the node to the view center, it does not pan.
// Placement also matters: NavigateToContent must run INSIDE the node_editor block with
// the editor current, so the app raises a flag and services it there;
// navigate_to_selection / center_node_on_screen are bracketed wrappers that set the
// editor current themselves, so the toolbar buttons call them directly.
//
// STANDALONE: daslang.exe modules/dasImguiNodeEditor/examples/tutorial/navigation.das
// LIVE:       daslang-live modules/dasImguiNodeEditor/examples/tutorial/navigation.das
// =============================================================================

var g_ed : imgui_node_editor::EditorContext? = null
var g_seeded : bool = false
var g_fit : bool = false   // "Fit All" raises this; serviced inside the editor block

// Spread wide so a fit visibly zooms out and recenters.
struct Nd {
    id  : int
    pos : float2
}
let NODES = [
    Nd(id = 1, pos = float2(40.0,   40.0)),
    Nd(id = 2, pos = float2(560.0,  300.0)),
    Nd(id = 3, pos = float2(1180.0, 560.0))
]

def toolbar() {
    if (button(FIT_ALL, (text = "Fit All"))) {
        g_fit = true   // NavigateToContent runs inside the block (editor must be current)
    }
    same_line()
    if (button(FRAME_SEL, (text = "Frame Selection"))) {
        navigate_to_selection(g_ed, false, -1.0)   // bracketed wrapper → safe outside the block
    }
    same_line()
    if (button(CENTER_FIRST, (text = "Center #1"))) {
        center_node_on_screen(g_ed, 1)   // NB: MOVES node 1 to the view center - not a view op
    }
}

def draw_editor() {
    node_editor("graph", (editor = g_ed)) {
        if (!g_seeded) {
            for (n in NODES) {
                imgui_node_editor::SetNodePosition(n.id, n.pos)
            }
            g_seeded = true
        }
        for (n in NODES) {
            node(n.id) {
                text("Node {n.id}")
                pin(n.id * 10 + 1, (kind = PinKind.Output, pivot_alignment = float2(1.0, 0.5))) {
                    text("out ->")
                }
            }
        }
        // Service "Fit All" here, with the editor current. NavigateToContent(0) snaps
        // instantly; pass a duration (seconds) for an animated fly-to instead.
        if (g_fit) {
            imgui_node_editor::NavigateToContent(0.0)
            g_fit = false
        }
    }
}

[export]
def init() {
    harness_init("Navigation", 1000, 600)
    g_ed = create_node_editor()
}

[export]
def update() {
    if (!harness_begin_frame()) return
    harness_new_frame()
    let io & = unsafe(GetIO())
    SetNextWindowPos(float2(0.0, 0.0), ImGuiCond.Always)
    SetNextWindowSize(io.DisplaySize, ImGuiCond.Always)
    let flags = (ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize |
                 ImGuiWindowFlags.NoMove | ImGuiWindowFlags.NoScrollbar |
                 ImGuiWindowFlags.NoScrollWithMouse | ImGuiWindowFlags.NoSavedSettings |
                 ImGuiWindowFlags.NoBringToFrontOnFocus)
    window(MAIN_WIN, (text = "Navigation", closable = false, flags = flags)) {
        toolbar()
        draw_editor()
    }
    harness_end_frame()
}

[export]
def shutdown() {
    destroy_node_editor(g_ed)
    harness_shutdown()
}

[export]
def main() {
    init()
    while (!exit_requested()) {
        update()
    }
    shutdown()
}

Two view ops and one node move

• NavigateToContent(duration) — view: fit the whole graph to the viewport. 0.0 snaps instantly; a positive duration (seconds) animates a fly-to.

• navigate_to_selection(ed, zoomIn, duration) — view: frame just the selected nodes.

• center_node_on_screen(ed, nodeId) — moves the node, not the view. Despite the name, upstream CenterNodeOnScreen translates the node’s bounds to the view center (and marks a user position change). Reach for it to recall a stray node, not to navigate.

Placement: inside vs outside the block

NavigateToContent must run with the editor current — i.e. inside the node_editor block. So the “Fit All” button raises a flag and the block services it, the same flag-then-act pattern the context menus use for deferred work. navigate_to_selection and center_node_on_screen are bracketed wrappers that set the editor current themselves, so the toolbar buttons — which run outside the block — call them directly.

Driving it from a test

A view op shifts a node’s screen-space bbox while its canvas position holds; center_node_on_screen is the mirror image — it leaves the view alone and changes the canvas position. The recording (record_navigation.das) and the headless regression (test_navigation.das) exploit both: they assert Fit All and Frame Selection move the screen bbox but leave the canvas bbox put (record_check_changed + record_check_unchanged), then assert Center #1 moves the canvas bbox — proof it relocates the node, not the view. The recording app holds set_user_control(false) so the real OS cursor can’t race the synth and eat a click.