patch flow docs (#1625)

* patch flow docs

* ..

* remove rx.page

* clean up flow

Author: LineIndent

docs/enterprise/react_flow/basic_flow.md

@@ -72,32 +72,19 @@ class FlowState(rx.State):
     ]
 
 
-    @rx.event
-    def set_nodes(self, nodes: list[Node]):
-        self.nodes = nodes
-
-    @rx.event
-    def set_edges(self, edges: list[Edge]):
-        self.edges = edges
-
-
 def flow_example():
     return rx.box(
         rxe.flow(
             # Core flow components
-            rxe.flow.controls(),  # Zoom and pan controls
-            rxe.flow.background(),  # Grid background
-            rxe.flow.mini_map(),  # Mini map for navigation
+            rxe.flow.controls(),
+            rxe.flow.background(),
+            rxe.flow.mini_map(),
 
             # Flow configuration
+            default_nodes=FlowState.nodes,
+            default_edges=FlowState.edges,
             nodes=FlowState.nodes,
             edges=FlowState.edges,
-            on_nodes_change=lambda node_changes: FlowState.set_nodes(
-                rxe.flow.util.apply_node_changes(FlowState.nodes, node_changes)
-            ),
-            on_edges_change=lambda edge_changes: FlowState.set_edges(
-                rxe.flow.util.apply_edge_changes(FlowState.edges, edge_changes)
-            ),
 
             # Visual settings
             fit_view=True,

docs/enterprise/react_flow/edges.md

@@ -2,7 +2,7 @@
 
 Edges connect nodes together in a flow. This page explains how to define, customize, and interact with edges in Reflex Flow.
 
-## The `Edge` Type
+## The **Edge** Type
 
 An edge is represented as a Python dictionary with the following fields:
 
@@ -94,3 +94,124 @@ edges: list[Edge] = [
     }
 ]
 ```
+
+# Custom Edges
+
+React Flow in Reflex also allows you to define custom edge types. This is useful when you want edges to carry extra functionality (like buttons, labels, or dynamic styling) beyond the default straight or bezier connectors.
+
+```python demo exec
+import reflex as rx
+import reflex_enterprise as rxe
+from reflex_enterprise.components.flow.types import (
+    ConnectionInProgress,
+    Edge,
+    NoConnection,
+    Node,
+    Position,
+)
+
+class SimpleEdgeDemoState(rx.State):
+    nodes: list[Node] = [
+        {"id": "1", "position": {"x": 0, "y": 0}, "data": {"label": "Node A"}, "style": {"color": "#000000",}},
+        {"id": "2", "position": {"x": 250, "y": 150}, "data": {"label": "Node B"}, "style": {"color": "#000000",}},
+    ]
+    edges: list[Edge] = [
+        {"id": "e1-2", "source": "1", "target": "2", "type": "button"}
+    ]
+
+    @rx.event
+    def set_nodes(self, nodes: list[Node]):
+        self.nodes = nodes
+
+    @rx.event
+    def set_edges(self, edges: list[Edge]):
+        self.edges = edges
+
+    @rx.event
+    def handle_connect_end(
+        self,
+        connection_status: NoConnection | ConnectionInProgress,
+    ):
+        if not connection_status["isValid"]:
+            new_edge = {
+                "id": f"{connection_status['fromNode']['id']}-{connection_status['toNode']['id']}",
+                "source": connection_status["fromNode"]["id"],
+                "target": connection_status["toNode"]["id"],
+                "type": "button",
+            }
+            self.edges.append(new_edge)
+
+
+
+@rx.memo
+def button_edge(
+    id: rx.Var[str],
+    sourceX: rx.Var[float],
+    sourceY: rx.Var[float],
+    targetX: rx.Var[float],
+    targetY: rx.Var[float],
+    sourcePosition: rx.Var[Position],
+    targetPosition: rx.Var[Position],
+    markerEnd: rx.Var[str],
+):
+    bezier_path = rxe.components.flow.util.get_bezier_path(
+        source_x=sourceX,
+        source_y=sourceY,
+        target_x=targetX,
+        target_y=targetY,
+        source_position=sourcePosition,
+        target_position=targetPosition,
+    )
+
+    mid_x = bezier_path.label_x
+    mid_y = bezier_path.label_y
+
+    return rx.fragment(
+        rxe.flow.base_edge(path=bezier_path.path, markerEnd=markerEnd),
+        rxe.flow.edge_label_renderer(
+            rx.el.div(
+                rx.el.button(
+                    "×",
+                    class_name=("w-[30px] h-[30px] border-2 border-gray-200 bg-gray-200 text-black rounded-full text-[12px] pt-0 cursor-pointer hover:bg-gray-400 hover:text-white"),
+                    on_click=rx.run_script(
+                        rxe.flow.api.set_edges(
+                            rx.vars.FunctionStringVar.create(
+                                "Array.prototype.filter.call"
+                            ).call(
+                                rxe.flow.api.get_edges(),
+                                rx.Var(f"((edge) => edge.id !== {id})"),
+                            ),
+                        )
+                    ),
+                    style={
+                        "position": "absolute",
+                        "left": f"{mid_x}px",
+                        "top": f"{mid_y}px",
+                        "transform": "translate(-50%, -50%)",
+                        "pointerEvents": "all",
+                    },
+                ),
+            )
+        ),
+    )
+
+def very_simple_custom_edge_example():
+    return rx.box(
+        rxe.flow(
+            rxe.flow.background(),
+            default_nodes=SimpleEdgeDemoState.nodes,
+            default_edges=SimpleEdgeDemoState.edges,
+            nodes=SimpleEdgeDemoState.nodes,
+            edges=SimpleEdgeDemoState.edges,
+            on_connect=lambda connection: SimpleEdgeDemoState.set_edges(
+                rxe.flow.util.add_edge(connection, SimpleEdgeDemoState.edges)
+            ),
+            on_connect_end=lambda status, event: SimpleEdgeDemoState.handle_connect_end(status),
+            edge_types={"button": button_edge},
+            fit_view=True,
+        ),
+        height="100vh",
+        width="100%",
+    )
+
+```

docs/enterprise/react_flow/examples.md

@@ -103,6 +103,8 @@ def add_node_on_edge_drop():
                 ),
                 nodes=AddNodesOnEdgeDropState.nodes,
                 edges=AddNodesOnEdgeDropState.edges,
+                default_nodes=AddNodesOnEdgeDropState.nodes,
+                default_edges=AddNodesOnEdgeDropState.edges,
                 on_nodes_change=lambda changes: AddNodesOnEdgeDropState.set_nodes(
                     rxe.flow.util.apply_node_changes(
                         AddNodesOnEdgeDropState.nodes, changes
@@ -208,6 +210,8 @@ def connection_limit():
             rxe.flow.background(),
             nodes=ConnectionLimitState.nodes,
             edges=ConnectionLimitState.edges,
+            default_nodes=ConnectionLimitState.nodes,
+            default_edges=ConnectionLimitState.edges,
             on_nodes_change=lambda changes: ConnectionLimitState.set_nodes(
                 rxe.flow.util.apply_node_changes(ConnectionLimitState.nodes, changes)
             ),

docs/enterprise/react_flow/interactivity.md

@@ -53,7 +53,6 @@ def interactive_flow():
             rxe.flow.controls(),
             rxe.flow.background(),
             rxe.flow.mini_map(),
-
             nodes=FlowState.nodes,
             edges=FlowState.edges,
             on_nodes_change=lambda node_changes: FlowState.set_nodes(
@@ -62,7 +61,6 @@ def interactive_flow():
             on_edges_change=lambda edge_changes: FlowState.set_edges(
                 rxe.flow.util.apply_edge_changes(FlowState.edges, edge_changes)
             ),
-            on_connect=FlowState.on_connect,
             fit_view=True,
 
             attribution_position="bottom-right",