more updates to flow docs

Author: LineIndent

docs/enterprise/react_flow/basic_flow.md

@@ -28,30 +28,41 @@ This example demonstrates a simple flow diagram with three nodes and two edges,
 
 ### Example Flow
 
-```python
+```python demo exec
 import reflex as rx
 import reflex_enterprise as rxe
 from reflex_enterprise.components.flow.types import Node, Edge
 
+# Common style for all nodes
+node_style = {
+    "backgroundColor": "#ffcc00",  # Background color
+    "color": "#000000",            # Text color
+    "padding": "10px",
+    "borderRadius": "5px"
+}
+
 class FlowState(rx.State):
     nodes: list[Node] = [
         {
             "id": "1",
             "type": "input",
             "position": {"x": 100, "y": 100},
-            "data": {"label": "Input Node"}
+            "data": {"label": "Input Node"},
+            "style": node_style
         },
         {
             "id": "2",
             "type": "default",
             "position": {"x": 300, "y": 200},
-            "data": {"label": "Default Node"}
+            "data": {"label": "Default Node"},
+            "style": node_style
         },
         {
             "id": "3",
             "type": "output",
             "position": {"x": 500, "y": 100},
-            "data": {"label": "Output Node"}
+            "data": {"label": "Output Node"},
+            "style": node_style
         },
     ]
 
@@ -89,38 +100,12 @@ def flow_example():
             on_edges_change=lambda edge_changes: FlowState.set_edges(
                 rxe.flow.util.apply_edge_changes(FlowState.edges, edge_changes)
             ),
-            fit_view=True,
 
             # Visual settings
-            color_mode="light",
+            fit_view=True,
             attribution_position="bottom-right",
         ),
         height="100vh",
         width="100vw",
     )
 ```
-
-
-```python exec
-import reflex as rx
-from reflex_image_zoom import image_zoom
-
-def render_image():
-    return rx.el.div(
-        image_zoom(
-            rx.image(
-                src="/enterprise/flow-simple.gif",
-                class_name="p-2 rounded-md h-auto",
-                border=f"0.81px solid {rx.color('slate', 5)}",
-            ),
-            class_name="rounded-md overflow-hidden",
-        ),
-        class_name="w-full flex flex-col rounded-md cursor-pointer",
-    )
-```
-
-```python eval
-
-rx.el.div(render_image(), class_name="py-4")
-
-```

docs/enterprise/react_flow/edges.md

@@ -94,129 +94,3 @@ edges: list[Edge] = [
     }
 ]
 ```
-
-## Custom Edges
-
-For advanced use cases, you can create custom edge components that render additional controls or styling.
-
-Here's a complete example showing various edge types and interactions:
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-from reflex_enterprise.components.flow.types import Node, Edge
-
-class FlowState(rx.State):
-    nodes: list[Node] = [
-        {"id": "1", "type": "input", "position": {"x": 100, "y": 100}, "data": {"label": "Edge 1"}},
-        {"id": "2", "type": "default", "position": {"x": 300, "y": 200}, "data": {"label": "Edge 2"}},
-    ]
-
-    edges: list[Edge] = [
-        {"id": "e1-2", "source": "1", "target": "2", "animated": True, "type": "buttonedge"},
-    ]
-
-    @rx.event
-    def on_nodes_change(self, changes: list[dict]):
-        self.nodes = rxe.flow.util.apply_node_changes(self.nodes, changes)
-
-    @rx.event
-    def on_edges_change(self, changes: list[dict]):
-        self.edges = rxe.flow.util.apply_edge_changes(self.edges, changes)
-
-    @rx.event
-    def on_connect(self, connection: dict):
-        self.edges = rxe.flow.util.add_edge(connection, self.edges)
-
-    @rx.event
-    def remove_edge(self, edge_id: str):
-        self.edges = [e for e in self.edges if e["id"] != edge_id]
-
-@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[str],
-    targetPosition: rx.Var[str],
-    style: rx.Var[dict] = {},
-    markerEnd: rx.Var[str] = None,
-):
-
-    edge_path, labelX, labelY = rxe.flow.util.get_bezier_path(
-        sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition
-    )
-
-    return rx.fragment(
-        rxe.flow.edge(path=edge_path, marker_end=markerEnd, style=style),
-        rxe.flow.edge_label(
-            x=labelX,
-            y=labelY,
-            child=rx.button(
-                "×",
-                on_click=lambda: FlowState.remove_edge(id),
-                class_name="nodrag nopan",
-            ),
-        ),
-    )
-
-
-def flow_with_button_edge():
-    return rx.box(
-        rxe.flow(
-            rxe.flow.controls(),
-            rxe.flow.background(),
-            rxe.flow.mini_map(),
-
-            nodes=FlowState.nodes,
-            edges=FlowState.edges,
-            on_nodes_change=lambda changes: FlowState.set_nodes(
-                rxe.flow.util.apply_node_changes(FlowState.nodes, changes)
-            ),
-            on_edges_change=lambda changes: FlowState.set_edges(
-                rxe.flow.util.apply_edge_changes(FlowState.edges, changes)
-            ),
-            on_connect=lambda connection: FlowState.set_edges(
-                rxe.flow.util.add_edge(connection, FlowState.edges)
-            ),
-
-            edge_types={
-                "buttonedge": rx.vars.function.ArgsFunctionOperation.create(
-                    (
-                        rx.vars.function.DestructuredArg(
-                            fields=(
-                                "id",
-                                "sourceX",
-                                "sourceY",
-                                "targetX",
-                                "targetY",
-                                "sourcePosition",
-                                "targetPosition",
-                                "style",
-                                "markerEnd",
-                            )
-                        ),
-                    ),
-                    button_edge(
-                        id=rx.Var("id"),
-                        sourceX=rx.Var("sourceX"),
-                        sourceY=rx.Var("sourceY"),
-                        targetX=rx.Var("targetX"),
-                        targetY=rx.Var("targetY"),
-                        sourcePosition=rx.Var("sourcePosition"),
-                        targetPosition=rx.Var("targetPosition"),
-                        style=rx.Var("style"),
-                        markerEnd=rx.Var("markerEnd"),
-                    ),
-                )
-            },
-            fit_view=True,
-            color_mode="light",
-            attribution_position="bottom-right",
-        ),
-        height="100vh",
-        width="100vw",
-    )
-```