diff --git a/src/components/shared/ReactFlow/FlowCanvas/Edges/SmoothEdge.tsx b/src/components/shared/ReactFlow/FlowCanvas/Edges/SmoothEdge.tsx index e771cb702..5f29f2c7a 100644 --- a/src/components/shared/ReactFlow/FlowCanvas/Edges/SmoothEdge.tsx +++ b/src/components/shared/ReactFlow/FlowCanvas/Edges/SmoothEdge.tsx @@ -1,5 +1,5 @@ import type { EdgeProps } from "@xyflow/react"; -import { getBezierPath, useEdges } from "@xyflow/react"; +import { getBezierPath, useEdges, useNodes } from "@xyflow/react"; import { EdgeColor } from "./utils"; @@ -15,7 +15,15 @@ const SmoothEdge = ({ selected, }: EdgeProps) => { const edges = useEdges(); - const hasAnySelectedEdge = edges.some((edge) => edge.selected); + const nodes = useNodes(); + + const selectedNodes = nodes.filter((node) => node.selected); + const isMultiSelect = selectedNodes.length > 1; + + // Don't highlight edges during multi-select to avoid visual clutter + const effectiveSelected = selected && !isMultiSelect; + const hasAnySelectedEdge = + !isMultiSelect && edges.some((edge) => edge.selected); const [edgePath] = getBezierPath({ sourceX, @@ -27,13 +35,13 @@ const SmoothEdge = ({ }); const getEdgeColor = () => { - if (selected) return EdgeColor.Selected; + if (effectiveSelected) return EdgeColor.Selected; if (hasAnySelectedEdge) return EdgeColor.Muted; return EdgeColor.Neutral; }; const edgeColor = getEdgeColor(); - const markerIdSuffix = selected + const markerIdSuffix = effectiveSelected ? "selected" : hasAnySelectedEdge ? "muted" diff --git a/src/hooks/useEdgeSelectionHighlight.ts b/src/hooks/useEdgeSelectionHighlight.ts index ac04aa1d0..638d74d76 100644 --- a/src/hooks/useEdgeSelectionHighlight.ts +++ b/src/hooks/useEdgeSelectionHighlight.ts @@ -1,7 +1,16 @@ -import { useEdges } from "@xyflow/react"; +import { useEdges, useNodes } from "@xyflow/react"; export function useEdgeSelectionHighlight(nodeId: string) { const edges = useEdges(); + const nodes = useNodes(); + + const selectedNodes = nodes.filter((node) => node.selected); + + // Disable edge highlighting when multiple nodes are selected (multi-select scenario) + // to avoid highlighting nodes outside the selection + if (selectedNodes.length > 1) { + return false; + } const selectedEdges = edges.filter((edge) => edge.selected); const hasAnySelectedEdge = selectedEdges.length > 0;