fix: Use strokeOpacity and stroke color for SVG hit detection

The invisible path needs an actual stroke color (just made invisible via strokeOpacity=0) for SVG to register pointer events on the stroke area. Also added react-flow__edge-interaction class for consistency with the legacy builder pattern.
Merge branch 'dev' into fix/edge-hover-x-button-SECRT-1943
2026-02-12 07:45:14 -05:00 · 2026-02-12 09:43:16 +00:00 · 2026-02-12 18:07:43 +09:00 · 2026-02-12 08:25:56 +00:00
1 changed files with 11 additions and 0 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx
@@ -63,6 +63,17 @@ const CustomEdge = ({

  return (
    <>
+      {/* Invisible interaction path - wider hit area for hover detection */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="black"
+        strokeOpacity={0}
+        strokeWidth={20}
+        className="react-flow__edge-interaction cursor-pointer"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      />
      <BaseEdge
        path={edgePath}
        markerEnd={markerEnd}