fix(workflow): restyle loop drop target outline

Author: andresdjasso

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

@@ -4,6 +4,8 @@ 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'
 
+export const SUBFLOW_DROP_TARGET_CLASS = 'subflow-node-drop-target'
+
 /**
  * Collects all descendant block IDs for container blocks (loop/parallel) in the given set.
  * Used to treat a nested subflow as one unit when computing boundary edges (e.g. remove-from-subflow).
@@ -124,8 +126,8 @@ export function shouldHighlightContainerDropTarget(
  * Used when drag operations end or are cancelled.
  */
 export function clearDragHighlights(): void {
-  document.querySelectorAll('.loop-node-drag-over, .parallel-node-drag-over').forEach((el) => {
-    el.classList.remove('loop-node-drag-over', 'parallel-node-drag-over')
+  document.querySelectorAll(`.${SUBFLOW_DROP_TARGET_CLASS}`).forEach((el) => {
+    el.classList.remove(SUBFLOW_DROP_TARGET_CLASS)
   })
   document.body.style.cursor = ''
 }

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

@@ -81,6 +81,7 @@ import {
   isInEditableElement,
   isPositionalTriggerBlock,
   resolveSelectionConflicts,
+  SUBFLOW_DROP_TARGET_CLASS,
   shouldHighlightContainerDropTarget,
   validateTriggerPaste,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
@@ -503,19 +504,14 @@ const WorkflowContent = React.memo(
     )
 
     /** Applies highlight styling to a container node during drag operations. */
-    const highlightContainerNode = useCallback(
-      (containerId: string, containerKind: 'loop' | 'parallel') => {
-        clearDragHighlights()
-        const containerElement = document.querySelector(`[data-id="${containerId}"]`)
-        if (containerElement) {
-          containerElement.classList.add(
-            containerKind === 'loop' ? 'loop-node-drag-over' : 'parallel-node-drag-over'
-          )
-          document.body.style.cursor = 'copy'
-        }
-      },
-      []
-    )
+    const highlightContainerNode = useCallback((containerId: string) => {
+      clearDragHighlights()
+      const containerElement = document.querySelector(`[data-id="${containerId}"]`)
+      if (containerElement) {
+        containerElement.classList.add(SUBFLOW_DROP_TARGET_CLASS)
+        document.body.style.cursor = 'copy'
+      }
+    }, [])
 
     const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null, {
       embedded,
@@ -2388,7 +2384,7 @@ const WorkflowContent = React.memo(
             if (containerNode?.type === 'subflowNode') {
               const kind = (containerNode.data as SubflowNodeData)?.kind
               if (kind === 'loop' || kind === 'parallel') {
-                highlightContainerNode(containerInfo.loopId, kind)
+                highlightContainerNode(containerInfo.loopId)
               }
             }
           } else {
@@ -3516,7 +3512,7 @@ const WorkflowContent = React.memo(
             } else {
               const kind = (bestContainerMatch.container.data as SubflowNodeData)?.kind
               if (kind === 'loop' || kind === 'parallel') {
-                highlightContainerNode(bestContainerMatch.container.id, kind)
+                highlightContainerNode(bestContainerMatch.container.id)
               }
             }
           } else {
@@ -3987,7 +3983,7 @@ const WorkflowContent = React.memo(
             if (shouldHighlightContainer) {
               const kind = (bestMatch.container.data as SubflowNodeData)?.kind
               if (kind === 'loop' || kind === 'parallel') {
-                highlightContainerNode(bestMatch.container.id, kind)
+                highlightContainerNode(bestMatch.container.id)
               }
             }
           }

apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx

@@ -323,6 +323,13 @@ describe('WorkflowBlockBorder mount', () => {
     expect(host.querySelector('[data-handleid="loop-end-source"]')).toHaveStyle({ top: '69px' })
     expect(host.querySelector('svg')).toHaveAttribute('viewBox', '-36 -36 572 372')
     expect(host.querySelector('svg rect[fill="var(--surface-3)"]')).toBeTruthy()
+    const dropTargetOutline = host.querySelector('[data-subflow-drop-target-outline]')
+    expect(dropTargetOutline).toHaveClass(
+      'rounded-2xl',
+      'ring-[1.5px]',
+      'ring-[var(--text-secondary)]',
+      '[.subflow-node-drop-target_&]:opacity-100'
+    )
   })
 
   it('retracts a selected loop action swell after hover ends', () => {

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -409,6 +409,12 @@ export function SubflowNodeView({
         data-nesting-level={nestingLevel}
         data-subflow-selected={isNodeSelected}
       >
+        <div
+          aria-hidden='true'
+          className='pointer-events-none absolute inset-0 z-40 rounded-2xl opacity-0 ring-[1.5px] ring-[var(--text-secondary)] transition-opacity duration-100 [.subflow-node-drop-target_&]:opacity-100'
+          data-subflow-drop-target-outline=''
+        />
+
         <WorkflowBlockBorder
           nodeId={id}
           getConnectionNodeId={getConnectionNodeId}