Main Flow LiveComponent for LiveFlow.
This is the primary component that renders the entire flow diagram, including nodes, edges, background, and overlays.
Usage
<.live_component
module={LiveFlow.Components.Flow}
id="my-flow"
flow={@flow}
opts={%{minimap: true, controls: true}}
node_types={%{custom: MyApp.CustomNode}}
/>Attributes
:id- Unique ID for the component (required):flow-LiveFlow.Statestruct (required):opts- Configuration options map:node_types- Map of node type atoms to renderers (function component or LiveComponent module):node_renderer- Fallback function component for nodes not matched bynode_types:on_nodes_change- Callback for node changes:on_edges_change- Callback for edge changes:on_connect- Callback when connection is made:on_selection_change- Callback for selection changes
Options
:pan_on_drag- Enable panning by dragging canvas (default: true):zoom_on_scroll- Enable zooming with scroll wheel (default: true):min_zoom- Minimum zoom level (default: 0.1):max_zoom- Maximum zoom level (default: 4.0):snap_to_grid- Snap node positions to grid (default: false):snap_grid- Grid size {x, y} (default: {15, 15}):fit_view_on_init- Fit view to content on mount (default: false):background- Background pattern (:dots, :lines, :cross, nil):minimap- Show minimap (default: false):controls- Show zoom controls (default: false):theme- LiveFlow theme name (default: nil, uses default theme or inherits from app):cursors- Enable built-in remote cursor rendering for collaboration (default: false):helper_lines- Show alignment guide lines when dragging nodes (default: false)