canvas

Pre-built node-graph canvas shell — Z.shell.canvas { width, height, background?, nodes, connections, onSelectNode?, onMoveNode?, onConnect? }. Maps a node-graph state into Z.canvas paint commands (background, bezier connections, rounded rect nodes with labels). The module returns the shell function directly.

Exports

• canvasShell(opts: CanvasOpts?) -> canvas-widget — render a node-graph canvas from a node/connection state.

Types:

• Node = { id: string, x: number, y: number, label: string?, color: string? }
• Connection = { fromId: string, toId: string, color: string?, width: number? }
• CanvasOpts = { id?, width?, height?, background?, nodes?, connections?, onSelectNode?, onMoveNode?, onConnect? }

Usage

local canvasShell = require("@builtin::modules.zui.shell.canvas")

local widget = canvasShell {
    width  = 800,
    height = 600,
    nodes  = { { id = "a", x = 10, y = 20 } },
    connections = {},
    onSelectNode = "graph:select",
}

Notes

• Pointer events come through onClick / onPointerMove with the widget-local "x,y" value. The caller is responsible for hit-testing against opts.nodes in the App's onCallback to map the click to a node id.
• onConnect (drag-from-A-to-B) is not yet wired — the canvas widget doesn't surface drag-completion events. Tracked for a future update.
• Bezier connections use horizontal-tangent control points on the mid-x line, producing smooth left-to-right flow between nodes.