fixes

Author: LineIndent

docs/enterprise/react_flow/edges.md

@@ -106,38 +106,14 @@ import reflex as rx
 import reflex_enterprise as rxe
 from reflex_enterprise.components.flow.types import Node, Edge
 
-class EdgeExampleState(rx.State):
+class FlowState(rx.State):
     nodes: list[Node] = [
-        {"id": "1", "type": "input", "position": {"x": 100, "y": 50}, "data": {"label": "Input"}},
-        {"id": "2", "type": "default", "position": {"x": 300, "y": 150}, "data": {"label": "Process"}},
-        {"id": "3", "type": "output", "position": {"x": 500, "y": 50}, "data": {"label": "Output"}},
-        {"id": "4", "type": "default", "position": {"x": 300, "y": 300}, "data": {"label": "Branch"}},
+        {"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",
-            "type": "bezier",
-            "animated": True,
-            "label": "Input Flow"
-        },
-        {
-            "id": "e2-3",
-            "source": "2",
-            "target": "3",
-            "type": "straight",
-            "style": {"stroke": "#ff6b6b", "strokeWidth": 3}
-        },
-        {
-            "id": "e2-4",
-            "source": "2",
-            "target": "4",
-            "type": "step",
-            "label": "Branch",
-            "style": {"stroke": "#4dabf7"}
-        },
+        {"id": "e1-2", "source": "1", "target": "2", "animated": True, "type": "buttonedge"},
     ]
 
     @rx.event
@@ -152,37 +128,95 @@ class EdgeExampleState(rx.State):
     def on_connect(self, connection: dict):
         self.edges = rxe.flow.util.add_edge(connection, self.edges)
 
-def edge_example_flow():
+    @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=EdgeExampleState.nodes,
-            edges=EdgeExampleState.edges,
-
-            on_nodes_change=lambda node_changes: EdgeExampleState.set_nodes(
-                rxe.flow.util.apply_node_changes(EdgeExampleState.nodes, node_changes)
+            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 edge_changes: EdgeExampleState.set_edges(
-                rxe.flow.util.apply_edge_changes(EdgeExampleState.edges, edge_changes)
+            on_edges_change=lambda changes: FlowState.set_edges(
+                rxe.flow.util.apply_edge_changes(FlowState.edges, changes)
             ),
-            on_connect=lambda connection: EdgeExampleState.set_edges(
-                rxe.flow.util.add_edge(connection, EdgeExampleState.edges)
+            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",
     )
 ```
-
-This example demonstrates:
-- Multiple edge types (bezier, straight, step)
-- Animated edges
-- Styled edges with custom colors
-- Edge labels
-- Interactive edge creation and modification

docs/enterprise/react_flow/hooks.md

@@ -31,40 +31,3 @@ The `rxe.flow.api` module provides hooks to interact with the Flow instance. The
 - `get_intersecting_nodes(node, partially=True, nodes=None)`: Find all the nodes currently intersecting with a given node or rectangle.
 - `get_node_connections(id=None, handle_type=None, handle_id=None)`: This hook returns an array of connections on a specific node, handle type ("source", "target") or handle ID.
 - `get_connection()`: Returns the current connection state when there is an active connection interaction.
-
-## Example
-
-Here is an example of how to use the `screen_to_flow_position` hook to add a node at the position of a drop event.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-from reflex_enterprise.components.flow.types import Node, XYPosition
-
-class AddNodeOnDropState(rx.State):
-    nodes: list[Node] = []
-
-    def handle_drop(self, event: rx.event.Event, flow_position: XYPosition):
-        # Logic to add a new node at flow_position
-        new_node = {
-            "id": f"node_{len(self.nodes) + 1}",
-            "position": flow_position,
-            "data": {"label": "New Node"},
-        }
-        self.nodes.append(new_node)
-
-def add_node_on_drop_example():
-    return rxe.flow.provider(
-        rxe.flow(
-            nodes=AddNodeOnDropState.nodes,
-            on_drop=lambda event: AddNodeOnDropState.handle_drop(
-                event,
-                rxe.flow.api.screen_to_flow_position(
-                    x=event.client_x,
-                    y=event.client_y,
-                ),
-            ),
-            # ... other props
-        )
-    )
-```

docs/enterprise/react_flow/nodes.md

@@ -275,10 +275,3 @@ def custom_node():
     )
 
 ```
-
-This example demonstrates:
-- Built-in node types (input, output)
-- Custom calculator node with multiple handles
-- Handle positioning and IDs
-- Node data management
-- Complete flow with interactive connections