Connecting by drag

The signature node-editor gesture: drag from an output pin to an input pin and a link is created. The interaction lives in a begin_create scope — query_new_link reports the pinned pair while the drag hovers a target, and accept_new_item commits it on release.

begin_create(g_ed) {
    var a = 0
    var b = 0
    if (query_new_link(g_ed, a, b)) {       // a pin-drag is over a target pin
        if (a != 0 && b != 0 && a != b && accept_new_item(g_ed)) {
            // released on a compatible pin — commit the link
            g_connected = true
        }
    }
}

The model here is intentionally trivial — one output pin, one input pin, and a single bool. A real graph validates pin kinds, dedupes, rejects cycles, and stores a list of links; this just teaches the gesture and the create scope.

Source: examples/tutorial/connect_by_drag.das.

Walkthrough

The recording is voiced and self-verifying: a real synthetic pin-drag commits the link, the recording asserts it committed (a no-op aborts at teardown), then pulses the new link with flow() to show data running output pin 11 -> input pin 21.

options gen2

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

// =============================================================================
// TUTORIAL: connect_by_drag — the signature node-editor gesture. Drag from an
// output pin to an input pin and a link is created.
//
//   begin_create(ed) {                    -- open the create-interaction scope
//       if (query_new_link(ed, a, b)) {   -- a pin-drag is hovering a target pin
//           if (accept_new_item(ed)) {    -- the user released: commit the link
//               ... add the link ...
//           }
//       }
//   }
//
// The model here is intentionally trivial — one output pin, one input pin, and a
// single bool tracking whether they are joined. A real graph would validate kinds,
// dedupe, and store a list; this just teaches the gesture and the create scope.
//
// STANDALONE: daslang.exe modules/dasImguiNodeEditor/examples/tutorial/connect_by_drag.das
// LIVE:       daslang-live modules/dasImguiNodeEditor/examples/tutorial/connect_by_drag.das
// =============================================================================

var g_ed : imgui_node_editor::EditorContext? = null
var g_seeded : bool = false
var g_connected : bool = false

let OUT_PIN = 11
let IN_PIN  = 21
let LINK_ID = 100

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

def draw_editor() {
    node_editor("graph", (editor = g_ed)) {
        // Seed two nodes side by side, once.
        if (!g_seeded) {
            imgui_node_editor::SetNodePosition(1, float2(120.0, 160.0))
            imgui_node_editor::SetNodePosition(2, float2(560.0, 160.0))
            g_seeded = true
        }
        node(1) {
            text("Source")
            pin(OUT_PIN, PinKind.Output) {
                text("value ->")
            }
        }
        node(2) {
            text("Sink")
            pin(IN_PIN, PinKind.Input) {
                text("-> value")
            }
        }
        // The one link, drawn once it has been made.
        if (g_connected) {
            link(LINK_ID, OUT_PIN, IN_PIN)
        }
        // The hero gesture: a pin-drag released on a compatible pin commits a link.
        // With exactly one output + one input, any cross-pin drag IS the connection.
        begin_create(g_ed) {
            var a = 0
            var b = 0
            if (query_new_link(g_ed, a, b)) {
                if (a != 0 && b != 0 && a != b && accept_new_item(g_ed)) {
                    g_connected = true
                }
            }
        }
    }
}

[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 = "Connect by drag", closable = false, flags = flags)) {
        draw_editor()
    }
    harness_end_frame()
}

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

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

The create scope

begin_create(ed) { ... } opens the editor’s create-interaction scope for the frame. Inside it:

• query_new_link(ed, a, b) returns true while a pin-drag is hovering a candidate target pin, writing the two pin ids into a (the drag source) and b (the hovered target). Pins come in drag order, so a real handler normalizes them to output/input and validates the pair every frame.

• accept_new_item(ed) returns true on the frame the user releases over a valid target — that is where the link is committed. reject_new_item is its counterpart for an invalid pair (it shows the reject cursor).

Driving it from a test

The recording above is produced by a synthetic mouse drag (see tests/integration/record_connect_by_drag.das); the headless regression test_connect_drag.das drives the same gesture and asserts the link commits. Grabbing a small pin needs the press to land exactly on it, so the synthetic timeline parks the cursor on the source pin through the press, travels the full distance with the button held, then parks on the target pin through the release.

For programmatic link creation that bypasses the mouse entirely (validity-rule tests), the harness also exposes ne_add_link, which queues a link the same create handler validates.