fix(workflow): improve selected edge visibility

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -757,6 +757,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
               edge.source,
               edge.target
             ),
+            isEdgeSelected: (edge.data as { isSelected?: boolean } | undefined)?.isSelected,
           })
           if (!isHighlighted) continue
           if (edge.source === id) keys.push(edge.sourceHandle || 'source')

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx

@@ -64,9 +64,11 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
     source,
     target
   )
+  const isEdgeSelected = Boolean((data as { isSelected?: boolean } | undefined)?.isSelected)
   const shouldHighlightEdge = isEdgeHighlighted({
     isEndpointSelected: isConnectedToSelection,
     isConnectedToEditor,
+    isEdgeSelected,
   })
 
   const previewExecutionStatus = (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-shift-selection-lock.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { useShiftSelectionLock } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-shift-selection-lock'
+
+function renderShiftSelectionLock() {
+  let api: ReturnType<typeof useShiftSelectionLock> | null = null
+  const host = document.createElement('div')
+  const root: Root = createRoot(host)
+
+  function Probe() {
+    api = useShiftSelectionLock({ isHandMode: false })
+    return null
+  }
+
+  act(() => root.render(<Probe />))
+  if (!api) throw new Error('hook did not render')
+
+  return { api, unmount: () => act(() => root.unmount()) }
+}
+
+describe('useShiftSelectionLock', () => {
+  it('does not swallow Shift clicks on selectable elements inside the pane', () => {
+    const { api, unmount } = renderShiftSelectionLock()
+    const pane = document.createElement('div')
+    pane.className = 'react-flow__pane'
+    const edge = document.createElement('path')
+    edge.classList.add('react-flow__edge-interaction')
+    pane.appendChild(edge)
+    const preventDefault = vi.fn()
+
+    api.handleCanvasMouseDown({
+      shiftKey: true,
+      target: edge,
+      preventDefault,
+    } as unknown as React.MouseEvent)
+
+    expect(preventDefault).not.toHaveBeenCalled()
+    unmount()
+  })
+
+  it('still prevents native selection when Shift-drag starts on the pane background', () => {
+    const { api, unmount } = renderShiftSelectionLock()
+    const pane = document.createElement('div')
+    pane.className = 'react-flow__pane'
+    const preventDefault = vi.fn()
+
+    api.handleCanvasMouseDown({
+      shiftKey: true,
+      target: pane,
+      preventDefault,
+    } as unknown as React.MouseEvent)
+
+    expect(preventDefault).toHaveBeenCalledOnce()
+    unmount()
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-shift-selection-lock.ts

@@ -31,7 +31,7 @@ export function useShiftSelectionLock({
       if (!event.shiftKey) return
 
       const target = event.target as HTMLElement | null
-      const isPaneTarget = Boolean(target?.closest('.react-flow__pane, .react-flow__selectionpane'))
+      const isPaneTarget = Boolean(target?.matches('.react-flow__pane, .react-flow__selectionpane'))
 
       if (isPaneTarget && isHandMode) {
         setIsShiftSelecting(true)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/edge-highlight.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { isEdgeHighlighted } from './edge-highlight'
+
+describe('isEdgeHighlighted', () => {
+  it('highlights a directly selected edge', () => {
+    expect(isEdgeHighlighted({ isEdgeSelected: true })).toBe(true)
+  })
+
+  it('leaves an unrelated edge idle', () => {
+    expect(isEdgeHighlighted({})).toBe(false)
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.test.ts

@@ -3,13 +3,60 @@
  */
 import { describe, expect, it } from 'vitest'
 import {
+  applyEdgeSelectionChanges,
   getArrowNavigationDirection,
+  getEdgeSelectionMapKey,
   isPositionalTriggerBlock,
   reconcileCanvasEdges,
   reconcileCanvasNodes,
   shouldHighlightContainerDropTarget,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers'
 
+describe('edge selection helpers', () => {
+  it('keeps modifier selections and removes deselected edges', () => {
+    const selected = new Map([['edge-1-loop-1', 'edge-1']])
+    const selectionKeys = new Map([
+      ['edge-1', 'edge-1-loop-1'],
+      ['edge-2', 'edge-2-loop-1'],
+    ])
+
+    const withSecondEdge = applyEdgeSelectionChanges(
+      selected,
+      [{ id: 'edge-2', type: 'select', selected: true }],
+      (edgeId) => selectionKeys.get(edgeId) ?? null
+    )
+    expect([...withSecondEdge]).toEqual([
+      ['edge-1-loop-1', 'edge-1'],
+      ['edge-2-loop-1', 'edge-2'],
+    ])
+
+    const withoutFirstEdge = applyEdgeSelectionChanges(
+      withSecondEdge,
+      [{ id: 'edge-1', type: 'select', selected: false }],
+      (edgeId) => selectionKeys.get(edgeId) ?? null
+    )
+    expect([...withoutFirstEdge]).toEqual([['edge-2-loop-1', 'edge-2']])
+  })
+
+  it('uses nested context keys and ignores temporary edges', () => {
+    const key = getEdgeSelectionMapKey(
+      { id: 'edge-1', source: 'source', target: 'target' },
+      [{ id: 'source', parentId: 'loop-1' }, { id: 'target' }],
+      {}
+    )
+    expect(key).toBe('edge-1-loop-1')
+
+    const selected = new Map<string, string>()
+    expect(
+      applyEdgeSelectionChanges(
+        selected,
+        [{ id: 'connection-block-selector-edge', type: 'select', selected: true }],
+        () => null
+      )
+    ).toBe(selected)
+  })
+})
+
 describe('getArrowNavigationDirection', () => {
   it('moves once for a fresh horizontal arrow press', () => {
     expect(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts

@@ -1,6 +1,6 @@
 import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS, getNoteBlockHeight } from '@sim/workflow-renderer'
 import { isEqual } from 'es-toolkit'
-import type { Edge, Node } from 'reactflow'
+import type { Edge, EdgeChange, Node } from 'reactflow'
 import { TriggerUtils } from '@/lib/workflows/triggers/triggers'
 import { clampPositionToContainer } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils'
 import type { BlockState } from '@/stores/workflows/workflow/types'
@@ -313,6 +313,44 @@ export function getEdgeSelectionContextId(
   return null
 }
 
+/** Stable key for transient edge selection, including a nested subflow context when present. */
+export function getEdgeSelectionMapKey(
+  edge: Pick<Edge, 'id' | 'source' | 'target'>,
+  nodes: Array<Pick<Node, 'id' | 'parentId'>>,
+  blocks: Record<string, { data?: { parentId?: string } }>
+): string {
+  const contextId = getEdgeSelectionContextId(edge, nodes, blocks)
+  return contextId ? `${edge.id}-${contextId}` : edge.id
+}
+
+type EdgeSelectChange = Extract<EdgeChange, { type: 'select' }>
+
+/** Applies React Flow selection changes to the canvas' transient edge-selection map. */
+export function applyEdgeSelectionChanges(
+  current: Map<string, string>,
+  changes: EdgeSelectChange[],
+  getSelectionKey: (edgeId: string) => string | null
+): Map<string, string> {
+  let next: Map<string, string> | null = null
+  const writable = () => (next ??= new Map(current))
+
+  for (const change of changes) {
+    if (change.selected) {
+      const selectionKey = getSelectionKey(change.id)
+      if (selectionKey && (next ?? current).get(selectionKey) !== change.id) {
+        writable().set(selectionKey, change.id)
+      }
+      continue
+    }
+
+    for (const [selectionKey, edgeId] of next ?? current) {
+      if (edgeId === change.id) writable().delete(selectionKey)
+    }
+  }
+
+  return next ?? current
+}
+
 export function resolveSelectionContextConflicts(
   nodes: Node[],
   blocks: Record<string, { data?: { parentId?: string } }>,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts

@@ -44,6 +44,7 @@ export const reactFlowStyles = [
   '[&_.react-flow__selectionpane]:select-none',
   String.raw`[&_.react-flow\_\_selection]:!border-[var(--text-secondary)]`,
   String.raw`[&_.react-flow\_\_selection]:!bg-[color-mix(in_oklch,var(--text-secondary)_8%,transparent)]`,
+  String.raw`[&_.react-flow\_\_edge:focus-visible_.react-flow\_\_edge-path]:drop-shadow-[0_0_2px_var(--text-secondary)]`,
   '[&_.react-flow__background]:hidden',
   '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
 ].join(' ')