diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx index 22fe3c8ce..057d87b45 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx @@ -2302,33 +2302,12 @@ const WorkflowContent = React.memo(() => { window.removeEventListener('remove-from-subflow', handleRemoveFromSubflow as EventListener) }, [blocks, edgesForDisplay, getNodeAbsolutePosition, collaborativeBatchUpdateParent]) - /** Handles node changes - applies changes and resolves parent-child selection conflicts. */ - const onNodesChange = useCallback( - (changes: NodeChange[]) => { - selectedIdsRef.current = null - setDisplayNodes((nds) => { - const updated = applyNodeChanges(changes, nds) - const hasSelectionChange = changes.some((c) => c.type === 'select') - if (!hasSelectionChange) return updated - const resolved = resolveParentChildSelectionConflicts(updated, blocks) - selectedIdsRef.current = resolved.filter((node) => node.selected).map((node) => node.id) - return resolved - }) - const selectedIds = selectedIdsRef.current as string[] | null - if (selectedIds !== null) { - syncPanelWithSelection(selectedIds) - } - }, - [blocks] - ) - /** - * Updates container dimensions in displayNodes during drag. - * This allows live resizing of containers as their children are dragged. + * Updates container dimensions in displayNodes during drag or keyboard movement. */ - const updateContainerDimensionsDuringDrag = useCallback( - (draggedNodeId: string, draggedNodePosition: { x: number; y: number }) => { - const parentId = blocks[draggedNodeId]?.data?.parentId + const updateContainerDimensionsDuringMove = useCallback( + (movedNodeId: string, movedNodePosition: { x: number; y: number }) => { + const parentId = blocks[movedNodeId]?.data?.parentId if (!parentId) return setDisplayNodes((currentNodes) => { @@ -2336,7 +2315,7 @@ const WorkflowContent = React.memo(() => { if (childNodes.length === 0) return currentNodes const childPositions = childNodes.map((node) => { - const nodePosition = node.id === draggedNodeId ? draggedNodePosition : node.position + const nodePosition = node.id === movedNodeId ? movedNodePosition : node.position const { width, height } = getBlockDimensions(node.id) return { x: nodePosition.x, y: nodePosition.y, width, height } }) @@ -2367,6 +2346,34 @@ const WorkflowContent = React.memo(() => { [blocks, getBlockDimensions] ) + /** Handles node changes - applies changes and resolves parent-child selection conflicts. */ + const onNodesChange = useCallback( + (changes: NodeChange[]) => { + selectedIdsRef.current = null + setDisplayNodes((nds) => { + const updated = applyNodeChanges(changes, nds) + const hasSelectionChange = changes.some((c) => c.type === 'select') + if (!hasSelectionChange) return updated + const resolved = resolveParentChildSelectionConflicts(updated, blocks) + selectedIdsRef.current = resolved.filter((node) => node.selected).map((node) => node.id) + return resolved + }) + const selectedIds = selectedIdsRef.current as string[] | null + if (selectedIds !== null) { + syncPanelWithSelection(selectedIds) + } + + // Handle position changes (e.g., from keyboard arrow key movement) + // Update container dimensions when child nodes are moved + for (const change of changes) { + if (change.type === 'position' && 'position' in change && change.position) { + updateContainerDimensionsDuringMove(change.id, change.position) + } + } + }, + [blocks, updateContainerDimensionsDuringMove] + ) + /** * Effect to resize loops when nodes change (add/remove/position change). * Runs on structural changes only - not during drag (position-only changes). @@ -2611,7 +2618,7 @@ const WorkflowContent = React.memo(() => { // If the node is inside a container, update container dimensions during drag if (currentParentId) { - updateContainerDimensionsDuringDrag(node.id, node.position) + updateContainerDimensionsDuringMove(node.id, node.position) } // Check if this is a starter block - starter blocks should never be in containers @@ -2728,7 +2735,7 @@ const WorkflowContent = React.memo(() => { blocks, getNodeAbsolutePosition, getNodeDepth, - updateContainerDimensionsDuringDrag, + updateContainerDimensionsDuringMove, highlightContainerNode, ] )