Skip to main content

dioxus_flow/
lib.rs

1//! # dioxus-flow
2//!
3//! A [react-flow](https://reactflow.dev)-style node graph component library
4//! for [Dioxus](https://dioxuslabs.com): pannable/zoomable canvas, draggable
5//! nodes, connectable handles, selectable animated edges, automatic layered
6//! layout, minimap, controls and background — with fully customizable node
7//! and edge rendering.
8//!
9//! ```ignore
10//! use dioxus::prelude::*;
11//! use dioxus_flow::prelude::*;
12//!
13//! #[component]
14//! fn App() -> Element {
15//!     let nodes = use_signal(|| vec![
16//!         Node::new("1", "Source", (0.0, 0.0)).node_type("input"),
17//!         Node::new("2", "Sink", (0.0, 140.0)).node_type("output"),
18//!     ]);
19//!     let edges = use_signal(|| vec![Edge::new("1", "2").animated(true)]);
20//!
21//!     rsx! {
22//!         div { style: "width: 100vw; height: 100vh;",
23//!             Flow { nodes, edges, fit_view: true,
24//!                 Background {}
25//!                 Controls {}
26//!                 MiniMap {}
27//!             }
28//!         }
29//!     }
30//! }
31//! ```
32
33mod anim;
34mod background;
35mod controls;
36mod edge;
37mod flow;
38mod layout;
39mod minimap;
40mod node;
41pub mod paper;
42mod path;
43pub mod place;
44pub mod ports;
45pub mod press;
46pub mod settle;
47mod state;
48mod tile;
49mod types;
50
51pub use background::{Background, BackgroundVariant};
52pub use controls::Controls;
53pub use edge::{EdgeViewCtx, SeatEdgeLabels, SeatEdgeViewCtx, SeatEdges};
54pub use flow::{Canvas, Flow, WorldLayer, STYLE as STYLESHEET};
55pub use layout::{compute_layout, LayoutDirection, LayoutNode, LayoutOptions};
56pub use minimap::MiniMap;
57pub use node::{DefaultNodeView, Handle, NodeViewCtx};
58pub use path::{bezier_path, edge_path, smooth_step_path, straight_path, EdgeGeometry, EdgePath};
59pub use state::{use_flow, use_flow_handle, use_overlay_inset, FlowCore, FlowHandle, Interaction};
60pub use types::{
61    side_point, AnchorMode, ConnectEnd, Connection, DeleteRequest, Edge, EdgeKind, Grid,
62    HandleGeom, HandleKey, HandleKind, Id, MarkerKind, Node, NodeGeom, Point, Rect, Side, Size,
63    Viewport,
64};
65
66/// Everything you typically need.
67pub mod prelude {
68    pub use crate::{
69        use_flow, use_flow_handle, use_overlay_inset, AnchorMode, Background, BackgroundVariant,
70        ConnectEnd, Connection, Controls, DefaultNodeView, DeleteRequest, Edge, EdgeKind,
71        EdgeViewCtx, Flow, FlowHandle, Handle, HandleKind, LayoutDirection, LayoutOptions,
72        MarkerKind, MiniMap, Node, NodeViewCtx, Point, Rect, Side, Size, Viewport,
73    };
74}