pub fn Flow<T: Clone + PartialEq + 'static>(_: FlowProps<T>) -> ElementExpand description
An interactive node-graph canvas, in the spirit of react-flow.
Nodes and edges are owned by the caller as signals; the flow mutates them in response to user interaction (dragging, selection, connecting) and the caller can mutate them at any time (adding nodes, changing data…).
let nodes = use_signal(|| vec![
Node::new("1", "Input", (0.0, 0.0)).node_type("input"),
Node::new("2", "Process", (0.0, 120.0)),
]);
let edges = use_signal(|| vec![Edge::new("1", "2").animated(true)]);
rsx! {
Flow { nodes, edges, fit_view: true,
Background {}
Controls {}
MiniMap {}
}
}§Props
For details, see the props struct definition.
nodes:Signal<Vec<Node<T>>>The nodes, owned by the caller.
edges:Signal<Vec<Edge>>The edges, owned by the caller.
anchor:AnchorModeHow edges find their endpoints:
AnchorMode::Handles(default) orAnchorMode::Seats— solver-packed positions around each node’s rim, drawn with rim-aware curves and beads.min_zoom:f64max_zoom:f64pan_on_drag:boolPan the canvas by dragging empty space.
zoom_on_scroll:boolZoom with the mouse wheel / trackpad.
pan_on_scroll:boolScrolling pans instead of zooming (ctrl/meta or a pinch zooms).
nodes_draggable:boolMaster switch for node dragging (individual nodes can also opt out).
drag_threshold:f64How far (screen px) a press on a node must travel before it moves the node, so a sloppy click never nudges one.
connection_radius:f64Snap radius (screen px) for completing a connection near a handle.
fit_view:boolFit all nodes into view once nodes are measured after mount.
fit_view_padding:f64delete_key:boolDelete selected nodes/edges with Delete/Backspace.
id:Option<String>idattribute for the root element.class:Option<String>Extra classes for the root element.
node_view:Option<Callback<NodeViewCtx<T>,Element>>Custom renderer for node contents. Receives a
NodeViewCtx; fall back tocrate::DefaultNodeViewfor types you don’t customize.edge_view:Option<Callback<EdgeViewCtx,Element>>Custom renderer for edges (SVG content).
on_connect:Option<EventHandler<Connection>>Called when the user completes a connection between two handles. When absent, the edge is added automatically.
on_connect_start:Option<EventHandler<HandleKey>>A connection drag has left a handle (started, not completed).
on_connect_end:Option<EventHandler<ConnectEnd>>A connection drag ended — wherever it ended.
connectionisNonewhen the release was over nothing, and the point says where: the hook for “drop on empty canvas to create the node there”.is_valid_connection:Option<Callback<Connection,bool>>The application’s say over which connections may complete. A target that fails is never offered as a snap and never completes.
on_node_drag_start:Option<EventHandler<Vec<Id>>>A node drag actually began (the press travelled past
drag_threshold), with the ids being dragged: the moment to snapshot for undo.on_node_drag_stop:Option<EventHandler<Vec<Id>>>A node drag ended, with the ids that were dragged. Positions are already final in the node list: the moment to snap, settle, persist.
on_delete:Option<EventHandler<DeleteRequest>>Called when Delete/Backspace is pressed with a selection. When absent, the selection (plus connected edges) is deleted automatically; when present, nothing is deleted — call
FlowHandle::delete_selectedfrom the handler to perform the default cascade (after confirming, snapshotting for undo…).on_node_click:Option<EventHandler<Id>>on_edge_click:Option<EventHandler<Id>>on_pane_click:Option<EventHandler<Point>>Click on empty canvas; the point is in flow coordinates.
on_pane_double_click:Option<EventHandler<Point>>Double-click on the canvas; the point is in flow coordinates.
handle:Option<FlowHandle<T>>Attach a
FlowHandle(fromcrate::use_flow_handle) for programmatic control: fit view, zoom, auto-layout…children:ElementOverlays such as
crate::Background,crate::Controls,crate::MiniMap, or your own (they can callcrate::use_flow).