Crate dioxus_flow

Expand description

§dioxus-flow

A react-flow-style node graph component library for Dioxus: pannable/zoomable canvas, draggable nodes, connectable handles, selectable animated edges, automatic layered layout, minimap, controls and background — with fully customizable node and edge rendering.

use dioxus::prelude::*;
use dioxus_flow::prelude::*;

#[component]
fn App() -> Element {
    let nodes = use_signal(|| vec![
        Node::new("1", "Source", (0.0, 0.0)).node_type("input"),
        Node::new("2", "Sink", (0.0, 140.0)).node_type("output"),
    ]);
    let edges = use_signal(|| vec![Edge::new("1", "2").animated(true)]);

    rsx! {
        div { style: "width: 100vw; height: 100vh;",
            Flow { nodes, edges, fit_view: true,
                Background {}
                Controls {}
                MiniMap {}
            }
        }
    }
}

Re-exports§

pub use background::Background;
pub use background::Background;
pub use controls::Controls;
pub use controls::Controls;
pub use edge::SeatEdgeLabels;
pub use edge::SeatEdgeLabels;
pub use edge::SeatEdges;
pub use edge::SeatEdges;
pub use flow::Flow;
pub use flow::Flow;
pub use flow::WorldLayer;
pub use flow::WorldLayer;
pub use minimap::MiniMap;
pub use minimap::MiniMap;
pub use node::DefaultNodeView;
pub use node::DefaultNodeView;
pub use node::Handle;
pub use node::Handle;

Modules§

paper: The graph paper behind the map: dots on the snap grid, with a heavier mark every fifth one.
place: Where something new goes when nothing said exactly where.
ports: Seat-based ports: discrete connection points packed around a node’s rounded rim, and the curves between them.
prelude: Everything you typically need.
press: When a press has become a drag.
settle: Turns transient rectangle geometry into a valid resting layout.

Structs§

ConnectEnd: How a connection gesture ended, whatever it ended on. Passed to on_connect_end; connection is None when the drag was released over nothing — the hook for “drop on empty canvas to create a node there”.
Connection: A pending or completed connection between two handles.
DeleteRequest: What a Delete/Backspace press would remove: the selected nodes, plus edges that are selected or touch a selected node. Passed to Flow’s on_delete so apps can confirm, snapshot for undo, or veto.
Edge: An edge connecting two nodes.
EdgeGeometry: Inputs for building an edge path between two handle anchors.
EdgePath: A rendered edge path: the SVG d attribute and a label anchor point.
EdgeViewCtx: Everything a custom edge view needs: the edge, its resolved anchors, and the default path (so custom edges can restyle without redoing the math).
FlowCore: The non-generic heart of a flow, shared through context with every child (layers, handles, Background, Controls, MiniMap, and user components). All fields are Copy handles to reactive state.
FlowHandle: A handle for controlling a crate::Flow from the component that owns it.
Grid: The lattice positions come to rest on. Snapping is the plane’s business — the background draws this grid, and a release lands on it — while what may occupy a cell is the application’s.
HandleGeom: Geometry of a registered handle, relative to its node.
HandleKey: Uniquely identifies a handle within a flow.
LayoutNode: Node input to compute_layout.
LayoutOptions: Options for compute_layout.
Node: A node in the flow graph.
NodeGeom: Lightweight per-node geometry snapshot used by edges, minimap and fit-view. Derived reactively from the node list.
NodeViewCtx: Context available to custom node views.
Point: A point (or vector) in 2D space. Flow coordinates unless stated otherwise.
Rect: An axis-aligned rectangle.
SeatEdgeViewCtx: Everything a seat-anchored custom edge (or label) view needs: the edge, its solved anchors (point and outward normal at each end), and the full rim-aware geometry — trimmed path, untrimmed outline for halos and grab bands, arrowhead polygons, the label point, and point_at/ nearest_label_position for label interactions. Computed once per edge with the edge’s own weight, label_position and markers, so a custom view never redoes the math.
Size: A width/height pair.
Viewport: The pan/zoom state of the flow canvas.

Enums§

AnchorMode: How a crate::Flow’s edges find their endpoints on nodes.
BackgroundVariant
EdgeKind: How an edge’s path is drawn.
HandleKind: Whether a handle is a source (edges start here) or a target (edges end here).
Interaction: Coarse interaction state. Per-frame details (drag offsets, last pointer position) live in the non-reactive [DragState] so pointer-move frames don’t invalidate subscribers of this signal.
LayoutDirection: Direction of rank progression.
MarkerKind: Arrowhead marker at the end of an edge.
Side: A side of a node, used for handle placement, seat naming and edge routing.

Statics§

STYLESHEET: The component styles Canvas injects at runtime, public so that tests and server-side renderers can install the same sheet themselves.

Functions§

Background: A pan/zoom-aware background pattern. Render as a child of crate::Flow.
Canvas: The pannable/zoomable surface every flow is drawn on.
Controls: Zoom-in, zoom-out and fit-view buttons. Render as a child of crate::Flow; add extra buttons as children.
DefaultNodeView: The built-in node view: a simple labeled box. Nodes typed "input" omit the target handle, "output" omits the source handle.
Flow: An interactive node-graph canvas, in the spirit of react-flow.
Handle: A connection point on a node. Place handles anywhere inside a custom node view; edges anchor to them and new connections can be dragged out of them.
MiniMap: A minimap showing all nodes and the visible viewport. Click to jump. Render as a child of crate::Flow.
SeatEdgeLabels: The labels of seat-anchored edges, as one world-space layer over every curve — so a connection crossing another never draws through its words.
SeatEdges: The curves of seat-anchored edges, as one world-space layer.
WorldLayer: A layer inside the canvas that shares the viewport transform: children are laid out in flow coordinates. Render as a child of Canvas or Flow for world-space overlays (annotations, guides, custom edge layers…).
bezier_path: Cubic bezier between the anchors, curving out of each side.
compute_layout: Compute positions (top-left corners) for nodes given directed edges (pairs of node ids). Unknown ids in edges are ignored; cycles are fine.
edge_path: Build the path for the given edge kind.
side_point: The point on the boundary of rect at fraction frac (0..=1) along side.
smooth_step_path: Orthogonal path with rounded corners.
straight_path: A straight line between the anchors.
use_flow: Access the surrounding flow’s state from any component rendered inside a crate::Flow (custom nodes, edges, controls, overlays…).
use_flow_handle: Create a FlowHandle to pass to a crate::Flow’s handle prop.
use_overlay_inset: Reserve a screen-space band of thickness pixels along side of the container, from inside an overlay component (the built-in crate::Controls and crate::MiniMap do this). Fit-view centers the graph in the remaining area so nodes don’t land underneath overlay panels.

Type Aliases§

Id: Identifier for nodes, edges and handles.

Crate dioxus_flow

Crate dioxus_flow Copy item path

§dioxus-flow

Re-exports§

Modules§

Structs§

Enums§

Statics§

Functions§

Type Aliases§

Crate dioxus_flow