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 types;
49
50pub use background::{Background, BackgroundVariant};
51pub use controls::Controls;
52pub use edge::{EdgeViewCtx, SeatEdgeLabels, SeatEdgeViewCtx, SeatEdges};
53pub use flow::{Canvas, Flow, WorldLayer, STYLE as STYLESHEET};
54pub use layout::{compute_layout, LayoutDirection, LayoutNode, LayoutOptions};
55pub use minimap::MiniMap;
56pub use node::{DefaultNodeView, Handle, NodeViewCtx};
57pub use path::{bezier_path, edge_path, smooth_step_path, straight_path, EdgeGeometry, EdgePath};
58pub use state::{use_flow, use_flow_handle, use_overlay_inset, FlowCore, FlowHandle, Interaction};
59pub use types::{
60    side_point, AnchorMode, ConnectEnd, Connection, DeleteRequest, Edge, EdgeKind, Grid,
61    HandleGeom, HandleKey, HandleKind, Id, MarkerKind, Node, NodeGeom, Point, Rect, Side, Size,
62    Viewport,
63};
64
65/// Everything you typically need.
66pub mod prelude {
67    pub use crate::{
68        use_flow, use_flow_handle, use_overlay_inset, AnchorMode, Background, BackgroundVariant,
69        ConnectEnd, Connection, Controls, DefaultNodeView, DeleteRequest, Edge, EdgeKind,
70        EdgeViewCtx, Flow, FlowHandle, Handle, HandleKind, LayoutDirection, LayoutOptions,
71        MarkerKind, MiniMap, Node, NodeViewCtx, Point, Rect, Side, Size, Viewport,
72    };
73}