Create by drag

The connect by drag tutorial dragged from a pin onto another pin to make a link. Release that same drag in empty canvas instead and the editor offers to create a node there, pre-wired to the pin you started from. The create scope reports it through show_new_node_drag: it hands back the source pin and the canvas-space drop point, the app opens its create-node menu, and on a pick it spawns the node at the drop point and enqueue_new_link connects the source to it.

var drag_fired = false
begin_create(g_ed) {
    var a = 0
    var b = 0
    if (query_new_link(g_ed, a, b)) {                  // pin -> pin: commit a link
        if (a != 0 && b != 0 && a != b && accept_new_item(g_ed)) {
            commit_link(a, b)
        }
    }
    if (show_new_node_drag(g_ed, g_drag_pin, g_drop_pos)) {   // pin -> empty
        drag_fired = true                              // remember source + drop point
    }
}
with_suspended() {                                     // the menu is screen-space ImGui
    if (drag_fired) {
        open_popup("ne_create")
    }
    popup_window(CREATE_MENU, (str_id = "ne_create")) {
        if (menu_label(ADD_MUL, (text = "Multiply"))) {
            spawn_and_connect("Multiply")              // spawn + enqueue_new_link
        }
    }
}

Source: examples/tutorial/create_by_drag.das.

Walkthrough

The recording is voiced and self-verifying: a real synthetic pin-drag released in empty canvas must open the create menu, and the menu pick must spawn the node and commit the auto-link (a no-op aborts at teardown). It closes by pulsing the freshly enqueued link with flow() to show the editor-made wire is live.

options gen2
options _comment_hygiene = true

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

// =============================================================================
// TUTORIAL: create_by_drag — drag from a pin into EMPTY canvas to create + connect.
//
//   begin_create(ed) {
//       if (query_new_link(ed, a, b)) { ... accept_new_item ... }   -- pin -> pin
//       if (show_new_node_drag(ed, from_pin, drop_pos)) {           -- pin -> empty
//           drag_fired = true                                        -- (remember source + pos)
//       }
//   }
//   with_suspended() {                                              -- popups in screen space
//       if (drag_fired) open_popup("...")
//       popup_window(...) { ... menu_label(...) -> spawn + enqueue_new_link ... }
//   }
//
// connect_by_drag taught the pin -> pin gesture. Releasing the SAME drag in empty
// canvas instead is the "create + connect" gesture: show_new_node_drag hands back the
// source pin + the canvas-space drop point, the app opens its create-node menu, and on
// a pick it spawns at the drop point and enqueue_new_link's the source to the new pin.
// The enqueued link replays through begin_create's query_new_link a frame later — the
// same path a hand-dragged link takes — so commit_link stores it once.
//
// STANDALONE: daslang.exe modules/dasImguiNodeEditor/examples/tutorial/create_by_drag.das
// LIVE:       daslang-live modules/dasImguiNodeEditor/examples/tutorial/create_by_drag.das
// =============================================================================

struct Nd {
    id      : int
    title   : string
    in_pin  : int
    out_pin : int
    pos     : float2
}

struct Lk {
    id       : int
    from_pin : int
    to_pin   : int
}

var g_nodes    : table<int; Nd>
var g_links    : table<int; Lk>
var g_ed       : imgui_node_editor::EditorContext? = null
var g_seeded   : bool = false
var g_next_id  : int = 200      // ids for drag-created nodes (pins follow: in = id+1, out = id+2)
var g_next_link : int = 100
var g_drag_pin : int = 0        // source pin of a pin->empty drag (0 = none pending)
var g_drop_pos : float2         // canvas pos where the drag released

var NODE_TITLE : table<int; NarrativeState>   // per-id title slot (data-driven node idiom)

def seed() {
    // One source node with a single output pin to drag from.
    g_nodes[1] = Nd(id = 1, title = "Source", in_pin = 0, out_pin = 11, pos = float2(140.0, 230.0))
}

def commit_link(from_out : int; to_in : int) {
    let lid = g_next_link
    g_next_link ++
    g_links[lid] = Lk(id = lid, from_pin = from_out, to_pin = to_in)
}

def spawn_node(kind : string; pos : float2) : int {
    // Each drag-created node is a downstream sink: one input pin (id+1), one output (id+2).
    let nid = g_next_id
    g_next_id += 10
    g_nodes[nid] = Nd(id = nid, title = kind, in_pin = nid + 1, out_pin = nid + 2, pos = pos)
    imgui_node_editor::SetNodePosition(nid, pos)   // inside the editor block -> raw SetNodePosition
    return nid
}

def spawn_and_connect(kind : string) {
    let nid = spawn_node(kind, g_drop_pos)
    // Auto-connect: enqueue source -> new input. The link replays through begin_create's
    // query_new_link next frame (commit_link stores it) — never added to g_links directly.
    if (g_drag_pin != 0) {
        enqueue_new_link(g_ed, g_drag_pin, g_nodes[nid].in_pin)
        g_drag_pin = 0
    }
}

def draw_editor() {
    node_editor("graph", (editor = g_ed)) {
        if (!g_seeded) {
            for (n in values(g_nodes)) {
                imgui_node_editor::SetNodePosition(n.id, n.pos)
            }
            g_seeded = true
        }
        for (n in values(g_nodes)) {
            node(n.id) {
                text(NODE_TITLE[n.id], (text = n.title))
                if (n.in_pin != 0) {
                    pin(n.in_pin, PinKind.Input) {
                        text("-> in")
                    }
                }
                if (n.out_pin != 0) {
                    pin(n.out_pin, PinKind.Output) {
                        text("out ->")
                    }
                }
            }
        }
        for (l in values(g_links)) {
            link(l.id, l.from_pin, l.to_pin)
        }
        // The create scope serves both gestures. Pins arrive output-first (a = output,
        // b = input) for a live pin->pin drag AND for the enqueue_new_link replay, so the
        // auto-link from a menu pick lands here too.
        var drag_fired = false
        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)) {
                    commit_link(a, b)
                }
            }
            if (show_new_node_drag(g_ed, g_drag_pin, g_drop_pos)) {
                drag_fired = true
            }
        }
        // The create-node menu is plain ImGui (screen space) -> Suspend/Resume island.
        with_suspended() {
            if (drag_fired) {
                open_popup("ne_create")
            }
            popup_window(CREATE_MENU, (str_id = "ne_create", flags = ImGuiWindowFlags.None)) {
                text("Create + connect")
                if (menu_label(ADD_MUL, (text = "Multiply"))) {
                    spawn_and_connect("Multiply")
                }
                if (menu_label(ADD_OUT, (text = "Output"))) {
                    spawn_and_connect("Output")
                }
            }
        }
    }
}

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

[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 = "Create 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) { ... } is the same scope that commits a hand-dragged link, and it serves both gestures of a pin-drag:

• query_new_link(ed, a, b) reports the pins when the drag is released on a pin — commit a link, exactly as in connect by drag.

• show_new_node_drag(ed, from_pin, drop_pos) is true the frame the drag is released in empty canvas. It hands back the source pin and the canvas-space drop point, and is an event (one frame), not a scope — open the create-node UI in response.

The popup is plain ImGui, so it lives in a with_suspended island (screen space) just like the context menus.

The auto-connect

A menu pick spawns the node at the drop point and calls enqueue_new_link(ed, source_pin, new_input_pin). That queued link is not added to the graph directly — it replays through begin_create’s query_new_link on the next frame, the same path a mouse-dragged link takes, so commit_link stores it once. The app gets one code path for “a link appeared”, whether the user dragged it or the editor created it.

Driving it from a test

The recording is a real synthetic pin-drag (see tests/integration/record_create_by_drag.das): press on the output pin, travel to an empty point, release. Because the tutorial’s pins render a real screen-space bbox, the drag targets the pin center directly — a genuine gesture, not an injected one. (shader_graph’s pins have no queryable bbox, so its test_new_node_drag reaches for the ne_new_node_drag injection rail instead.) The menu pick is then an ordinary click resolved from the item’s bbox.

set_user_control(false) hands IO to the synthetic timeline so the real OS cursor can’t race the synth and eat the drag or the menu click.