fix(workflow): hide idle nested subflow end handles

Author: Bill Leoutsakos

apps/docs/components/workflow-preview/docs-container-node.tsx

@@ -8,6 +8,7 @@ interface DocsContainerData {
   name: string
   blockType: string
   size?: { width: number; height: number }
+  parentId?: string
 }
 
 /**
@@ -24,6 +25,7 @@ export const DocsContainerNode = memo(function DocsContainerNode({
     name: data.name,
     width: data.size?.width,
     height: data.size?.height,
+    parentId: data.parentId,
     isPreview: true,
   }
 

apps/docs/components/workflow-preview/workflow-data.ts

@@ -103,6 +103,7 @@ export function toReactFlowElements(
         tools: block.tools,
         hideTargetHandle: block.hideTargetHandle,
         size: block.size,
+        parentId: block.parentId,
         index,
         animate,
         isHighlighted: highlightBlock === block.id || selectedBlock === block.id,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { act } from 'react'
-import { CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import { CONTAINER_CHILD_MIN_POSITION } from '@sim/workflow-renderer'
 import { createRoot } from 'react-dom/client'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -38,10 +38,7 @@ function renderNodeUtilities(blockMap: Parameters<typeof useNodeUtilities>[0]) {
  * body — exactly where `clampPositionToContainer` floors a child.
  */
 const CONTAINER_POSITION = { x: 1000, y: 500 }
-const CHILD_POSITION = {
-  x: CONTAINER_DIMENSIONS.LEFT_PADDING,
-  y: CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING,
-}
+const CHILD_POSITION = CONTAINER_CHILD_MIN_POSITION
 
 const blocks: Parameters<typeof useNodeUtilities>[0] = {
   loop: { id: 'loop', type: 'loop', position: CONTAINER_POSITION, data: {} },
@@ -93,3 +90,33 @@ describe('getNodeAbsolutePosition', () => {
     expect({ x: absolute.x - container.x, y: absolute.y - container.y }).toEqual(CHILD_POSITION)
   })
 })
+
+describe('updateNodeParent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetNodes.mockReturnValue(nodes)
+  })
+
+  it('uses one prepared position for display and parent persistence updates', () => {
+    const api = renderNodeUtilities(blocks)
+    const position = CONTAINER_CHILD_MIN_POSITION
+    const batchUpdatePositions = vi.fn()
+    const batchUpdateBlocksWithParent = vi.fn()
+    const resize = vi.fn()
+
+    api.updateNodeParent(
+      'root',
+      'loop',
+      position,
+      batchUpdatePositions,
+      batchUpdateBlocksWithParent,
+      resize
+    )
+
+    expect(batchUpdatePositions).toHaveBeenCalledWith([{ id: 'root', position }])
+    expect(batchUpdateBlocksWithParent).toHaveBeenCalledWith([
+      { id: 'root', position, parentId: 'loop' },
+    ])
+    expect(resize).toHaveBeenCalledOnce()
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts

@@ -146,14 +146,12 @@ export function useNodeUtilities(blocks: Record<string, BlockState>) {
    * A child's position is relative to its container's own origin — React Flow
    * places it at the parent's origin plus its position, and
    * `clampPositionToContainer` is what holds it clear of the chrome, flooring it
-   * at `LEFT_PADDING` and `HEADER_HEIGHT + TOP_PADDING`. The container's header
-   * and padding are therefore already inside the child's coordinates, and
-   * adding them again here counted them twice: a nested node reported 16px
-   * right and 66px below where it actually is.
+   * at `CONTAINER_CHILD_MIN_POSITION`. The container's Start lane, header, and
+   * padding are therefore already inside the child's coordinates, and adding
+   * them again here would count them twice.
    *
-   * That is why callers wanting a relative position had to subtract the same
-   * three constants straight back off, and why `positionAbsolute` — React
-   * Flow's own answer, which carries no offset — disagreed with this one.
+   * React Flow's `positionAbsolute` follows the same rule and carries no extra
+   * chrome offset.
    *
    * @param nodeId ID of the node to check
    * @returns Absolute position coordinates {x, y}
@@ -368,6 +366,7 @@ export function useNodeUtilities(blocks: Record<string, BlockState>) {
    * Updates a node's parent with proper position calculation
    * @param nodeId ID of the node being reparented
    * @param newParentId ID of the new parent (or null to remove parent)
+   * @param newPosition Final position in the new parent's coordinate space
    * @param batchUpdatePositions Function to batch update positions of blocks
    * @param batchUpdateBlocksWithParent Function to batch update blocks with parent info
    * @param resizeCallback Function to resize loop nodes after parent update
@@ -376,6 +375,7 @@ export function useNodeUtilities(blocks: Record<string, BlockState>) {
     (
       nodeId: string,
       newParentId: string | null,
+      newPosition: { x: number; y: number },
       batchUpdatePositions: (
         updates: Array<{ id: string; position: { x: number; y: number } }>
       ) => void,
@@ -391,22 +391,16 @@ export function useNodeUtilities(blocks: Record<string, BlockState>) {
       if (newParentId === currentParentId) return
 
       if (newParentId) {
-        const relativePosition = calculateRelativePosition(nodeId, newParentId)
-
-        batchUpdatePositions([{ id: nodeId, position: relativePosition }])
-        batchUpdateBlocksWithParent([
-          { id: nodeId, position: relativePosition, parentId: newParentId },
-        ])
+        batchUpdatePositions([{ id: nodeId, position: newPosition }])
+        batchUpdateBlocksWithParent([{ id: nodeId, position: newPosition, parentId: newParentId }])
       } else if (currentParentId) {
-        const absolutePosition = getNodeAbsolutePosition(nodeId)
-
-        batchUpdatePositions([{ id: nodeId, position: absolutePosition }])
-        batchUpdateBlocksWithParent([{ id: nodeId, position: absolutePosition, parentId: '' }])
+        batchUpdatePositions([{ id: nodeId, position: newPosition }])
+        batchUpdateBlocksWithParent([{ id: nodeId, position: newPosition, parentId: '' }])
       }
 
       resizeCallback()
     },
-    [getNodes, blocks, calculateRelativePosition, getNodeAbsolutePosition]
+    [getNodes, blocks]
   )
 
   /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils.test.ts

@@ -1,11 +1,17 @@
 /**
  * @vitest-environment node
  */
-import { CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import {
+  BLOCK_DIMENSIONS,
+  CONTAINER_CHILD_MIN_POSITION,
+  CONTAINER_DIMENSIONS,
+} from '@sim/workflow-renderer'
 import { describe, expect, it } from 'vitest'
 import {
   calculateContainerDimensions,
   clampPositionToContainer,
+  getContainerChildExtent,
+  shiftPositionsToContainerBounds,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils'
 
 describe('calculateContainerDimensions', () => {
@@ -29,21 +35,53 @@ describe('calculateContainerDimensions', () => {
   })
 
   it('holds a child pinned to the top-left clear of the chrome', () => {
-    /* The floor `clampPositionToContainer` applies is what encodes the header
-       and leading padding into the child's own coordinates — the sizing math
-       reads them from there rather than adding them again. */
+    expect(CONTAINER_CHILD_MIN_POSITION.x).toBe(
+      BLOCK_DIMENSIONS.SUBFLOW_START_LEFT_OFFSET +
+        BLOCK_DIMENSIONS.SUBFLOW_START_WIDTH +
+        CONTAINER_DIMENSIONS.LEFT_PADDING
+    )
+    expect(CONTAINER_CHILD_MIN_POSITION.x).toBe(98)
+
     const pinned = clampPositionToContainer(
       { x: -999, y: -999 },
       { width: 900, height: 900 },
       { width: 250, height: 112 }
     )
 
     expect(pinned).toEqual({
-      x: CONTAINER_DIMENSIONS.LEFT_PADDING,
-      y: CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING,
+      x: CONTAINER_CHILD_MIN_POSITION.x,
+      y: CONTAINER_CHILD_MIN_POSITION.y,
     })
   })
 
+  it('uses the same leading floor for runtime dragging while leaving growth unconstrained', () => {
+    expect(getContainerChildExtent()).toEqual([
+      [CONTAINER_CHILD_MIN_POSITION.x, CONTAINER_CHILD_MIN_POSITION.y],
+      [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+    ])
+  })
+
+  it('moves a batch clear of the Start lane without changing its arrangement', () => {
+    const updates = [
+      { blockId: 'parallel', newPosition: { x: 24, y: 40 } },
+      { blockId: 'agent', newPosition: { x: 224, y: 140 } },
+    ]
+
+    expect(shiftPositionsToContainerBounds(updates)).toEqual([
+      {
+        blockId: 'parallel',
+        newPosition: CONTAINER_CHILD_MIN_POSITION,
+      },
+      {
+        blockId: 'agent',
+        newPosition: {
+          x: 224 + (CONTAINER_CHILD_MIN_POSITION.x - 24),
+          y: 140 + (CONTAINER_CHILD_MIN_POSITION.y - 40),
+        },
+      },
+    ])
+  })
+
   it('falls back to the default box when it holds nothing', () => {
     expect(calculateContainerDimensions([])).toEqual({
       width: CONTAINER_DIMENSIONS.DEFAULT_WIDTH,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils.ts

@@ -1,4 +1,9 @@
-import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS, getNoteBlockHeight } from '@sim/workflow-renderer'
+import {
+  BLOCK_DIMENSIONS,
+  CONTAINER_CHILD_MIN_POSITION,
+  CONTAINER_DIMENSIONS,
+  getNoteBlockHeight,
+} from '@sim/workflow-renderer'
 import { showsCanvasErrorRow } from '@/lib/workflows/blocks/canvas-rows'
 import { calculateWorkflowBlockDimensions } from '@/lib/workflows/blocks/deterministic-dimensions'
 import { getBlock } from '@/blocks/registry'
@@ -54,8 +59,7 @@ export function clampPositionToContainer(
   const { width: containerWidth, height: containerHeight } = containerDimensions
   const { width: blockWidth, height: blockHeight } = blockDimensions
 
-  const minX = CONTAINER_DIMENSIONS.LEFT_PADDING
-  const minY = CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING
+  const { x: minX, y: minY } = CONTAINER_CHILD_MIN_POSITION
   const maxX = containerWidth - CONTAINER_DIMENSIONS.RIGHT_PADDING - blockWidth
   const maxY = containerHeight - CONTAINER_DIMENSIONS.BOTTOM_PADDING - blockHeight
 
@@ -65,6 +69,42 @@ export function clampPositionToContainer(
   }
 }
 
+/**
+ * Runtime React Flow bounds for a nested node.
+ *
+ * The finite leading edge protects the header and Start lane. The trailing
+ * edge stays open because moving a child right or down expands its container.
+ * Persisted workflow data continues using `extent: 'parent'`.
+ */
+export function getContainerChildExtent(): [[number, number], [number, number]] {
+  return [
+    [CONTAINER_CHILD_MIN_POSITION.x, CONTAINER_CHILD_MIN_POSITION.y],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+  ]
+}
+
+/** Keeps a batch's relative arrangement while moving it clear of container chrome. */
+export function shiftPositionsToContainerBounds<
+  T extends { newPosition: { x: number; y: number } },
+>(rawUpdates: T[]): T[] {
+  if (rawUpdates.length === 0) return rawUpdates
+
+  const minX = Math.min(...rawUpdates.map((update) => update.newPosition.x))
+  const minY = Math.min(...rawUpdates.map((update) => update.newPosition.y))
+  const shiftX = Math.max(0, CONTAINER_CHILD_MIN_POSITION.x - minX)
+  const shiftY = Math.max(0, CONTAINER_CHILD_MIN_POSITION.y - minY)
+
+  if (shiftX === 0 && shiftY === 0) return rawUpdates
+
+  return rawUpdates.map((update) => ({
+    ...update,
+    newPosition: {
+      x: update.newPosition.x + shiftX,
+      y: update.newPosition.y + shiftY,
+    },
+  }))
+}
+
 /**
  * Calculates container dimensions based on child block positions.
  * Single source of truth for container sizing - ensures consistency between
@@ -73,11 +113,10 @@ export function clampPositionToContainer(
  * Child coordinates are relative to the container's own origin — React Flow
  * places a child at the parent's origin plus its position, and
  * {@link clampPositionToContainer} keeps them clear of the chrome by flooring
- * them at `LEFT_PADDING` and `HEADER_HEIGHT + TOP_PADDING`. A child's far edge
- * is therefore already the distance the container has to cover, and only the
- * trailing padding is owed on top. Adding the header and leading padding here
- * as well counted them twice, leaving every container 66px taller and 16px
- * wider than its contents.
+ * them at `CONTAINER_CHILD_MIN_POSITION`. A child's far edge is therefore
+ * already the distance the container has to cover, and only the trailing
+ * padding is owed on top. Adding the header and leading lane here as well would
+ * count them twice.
  *
  * @param childPositions - Array of child positions with their dimensions
  * @returns Calculated width and height for the container