use shared constants everywhere

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -3,6 +3,7 @@ import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position, useReactFlow } from 'reactflow'
 import { Button, Trash } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { type DiffStatus, hasDiffStatus } from '@/lib/workflows/diff/types'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
@@ -119,7 +120,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
   }
 
   const getHandleStyle = () => {
-    return { top: '20px', transform: 'translateY(-50%)' }
+    return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
   }
 
   /**

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

@@ -28,6 +28,7 @@ import {
 import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
+  HANDLE_POSITIONS,
   useBlockDimensions,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { SELECTOR_TYPES_HYDRATION_REQUIRED, type SubBlockConfig } from '@/blocks/types'
@@ -716,7 +717,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
   const getHandleStyle = (position: 'horizontal' | 'vertical') => {
     if (position === 'horizontal') {
-      return { top: '20px', transform: 'translateY(-50%)' }
+      return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
     }
     return { left: '50%', transform: 'translateX(-50%)' }
   }
@@ -1030,7 +1031,9 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         {type === 'condition' && (
           <>
             {conditionRows.map((cond, condIndex) => {
-              const topOffset = 60 + condIndex * 29
+              const topOffset =
+                HANDLE_POSITIONS.CONDITION_START_Y +
+                condIndex * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
               return (
                 <Handle
                   key={`handle-${cond.id}`}
@@ -1052,7 +1055,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
               position={Position.Right}
               id='error'
               className={getHandleClasses('right', true)}
-              style={{ right: '-7px', top: 'auto', bottom: '17px', transform: 'translateY(50%)' }}
+              style={{
+                right: '-7px',
+                top: 'auto',
+                bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
+                transform: 'translateY(50%)',
+              }}
               data-nodeid={id}
               data-handleid='error'
               isConnectableStart={true}
@@ -1083,7 +1091,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                 position={Position.Right}
                 id='error'
                 className={getHandleClasses('right', true)}
-                style={{ right: '-7px', top: 'auto', bottom: '17px', transform: 'translateY(50%)' }}
+                style={{
+                  right: '-7px',
+                  top: 'auto',
+                  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
+                  transform: 'translateY(50%)',
+                }}
                 data-nodeid={id}
                 data-handleid='error'
                 isConnectableStart={true}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts

@@ -3,7 +3,7 @@ import { useUpdateNodeInternals } from 'reactflow'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 // Re-export for backwards compatibility
-export { BLOCK_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
+export { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 
 interface BlockDimensions {
   width: number

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

@@ -2,6 +2,7 @@
 
 import { memo, useMemo } from 'react'
 import { Handle, type NodeProps, Position } from 'reactflow'
+import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { getBlock } from '@/blocks/registry'
 
 interface WorkflowPreviewBlockData {
@@ -62,7 +63,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
           className={horizontalHandles ? horizontalHandleClass : verticalHandleClass}
           style={
             horizontalHandles
-              ? { left: '-7px', top: '24px' }
+              ? { left: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
               : { top: '-7px', left: '50%', transform: 'translateX(-50%)' }
           }
         />
@@ -122,7 +123,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         className={horizontalHandles ? horizontalHandleClass : verticalHandleClass}
         style={
           horizontalHandles
-            ? { right: '-7px', top: '24px' }
+            ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
             : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
         }
       />

apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx

@@ -3,6 +3,7 @@
 import { memo } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
+import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 
 interface WorkflowPreviewSubflowData {
   name: string
@@ -47,7 +48,11 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
         position={Position.Left}
         id='target'
         className={handleClass}
-        style={{ left: '-7px', top: '20px', transform: 'translateY(-50%)' }}
+        style={{
+          left: '-7px',
+          top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
+          transform: 'translateY(-50%)',
+        }}
       />
 
       {/* Header - matches actual subflow header */}
@@ -81,7 +86,11 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
         position={Position.Right}
         id={endHandleId}
         className={handleClass}
-        style={{ right: '-7px', top: '20px', transform: 'translateY(-50%)' }}
+        style={{
+          right: '-7px',
+          top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
+          transform: 'translateY(-50%)',
+        }}
       />
     </div>
   )

apps/sim/lib/workflows/autolayout/core.ts

@@ -1,6 +1,5 @@
 import { createLogger } from '@/lib/logs/console/logger'
 import {
-  BLOCK_DIMENSIONS,
   CONTAINER_LAYOUT_OPTIONS,
   DEFAULT_LAYOUT_OPTIONS,
   MAX_OVERLAP_ITERATIONS,
@@ -11,91 +10,54 @@ import {
   normalizePositions,
   prepareBlockMetrics,
 } from '@/lib/workflows/autolayout/utils'
+import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('AutoLayout:Core')
 
-/** Handle names that indicate edges from subflow end */
 const SUBFLOW_END_HANDLES = new Set(['loop-end-source', 'parallel-end-source'])
-
-/** Handle names that indicate edges from subflow start (inside the container) */
 const SUBFLOW_START_HANDLES = new Set(['loop-start-source', 'parallel-start-source'])
 
-/** Default handle Y offset from block top (matches workflow-block.tsx top: '20px') */
-const DEFAULT_HANDLE_Y_OFFSET = 20
-
-/** Error handle offset from block bottom (matches workflow-block.tsx bottom: '17px') */
-const ERROR_HANDLE_BOTTOM_OFFSET = 17
-
-/** Condition handle starting Y offset (matches workflow-block.tsx: 60 + condIndex * 29) */
-const CONDITION_HANDLE_START_Y = 60
-const CONDITION_HANDLE_ROW_HEIGHT = 29
-
-/**
- * Subflow start handle Y offset from subflow node top.
- * - Header height: 50px (from h-[calc(100%-50px)] on content area)
- * - Content div has position: relative
- * - Start pill at: absolute top-[16px] from content div
- * - Pill height: ~28px (py-[6px]=12px padding + ~16px text)
- * - Handle at top: '50%' within pill = 14px from pill top
- * Total: 50 + 16 + 14 = 80px from subflow node top
- */
-const SUBFLOW_START_HANDLE_Y_OFFSET = 80
-
 /**
  * Calculates the Y offset for a source handle based on block type and handle ID.
- * For condition blocks, each condition row has its own handle at different Y positions.
- * For error handles, the position is from the bottom of the block.
- * For subflow start handles, the position is based on the Start pill location.
- * For other blocks, handles are at a fixed offset from the top.
  */
 function getSourceHandleYOffset(block: BlockState, sourceHandle?: string | null): number {
-  // Error handles are positioned from the bottom of the block
   if (sourceHandle === 'error') {
     const blockHeight = block.height || BLOCK_DIMENSIONS.MIN_HEIGHT
-    return blockHeight - ERROR_HANDLE_BOTTOM_OFFSET
+    return blockHeight - HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET
   }
 
-  // Subflow start handles are positioned at the Start pill inside the container
   if (sourceHandle && SUBFLOW_START_HANDLES.has(sourceHandle)) {
-    return SUBFLOW_START_HANDLE_Y_OFFSET
+    return HANDLE_POSITIONS.SUBFLOW_START_Y_OFFSET
   }
 
-  // Condition blocks have multiple handles at different Y positions
   if (block.type === 'condition' && sourceHandle?.startsWith('condition-')) {
-    // Extract condition ID from handle (e.g., "condition-abc123" -> "abc123")
     const conditionId = sourceHandle.replace('condition-', '')
-
-    // Try to find the index by parsing the conditions subblock value
     try {
       const conditionsValue = block.subBlocks?.conditions?.value
       if (typeof conditionsValue === 'string' && conditionsValue) {
         const conditions = JSON.parse(conditionsValue) as Array<{ id?: string }>
         const conditionIndex = conditions.findIndex((c) => c.id === conditionId)
-
         if (conditionIndex >= 0) {
-          // Matches workflow-block.tsx: top: `${60 + condIndex * 29}px`
-          return CONDITION_HANDLE_START_Y + conditionIndex * CONDITION_HANDLE_ROW_HEIGHT
+          return (
+            HANDLE_POSITIONS.CONDITION_START_Y +
+            conditionIndex * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+          )
         }
       }
     } catch {
-      // If parsing fails, fall back to default offset
+      // Fall back to default offset
     }
   }
 
-  // Loop/parallel end handles and regular blocks use default offset
-  return DEFAULT_HANDLE_Y_OFFSET
+  return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
 }
 
 /**
  * Calculates the Y offset for a target handle based on block type and handle ID.
- * Most blocks have their target handle at DEFAULT_HANDLE_Y_OFFSET.
- * Subflow nodes (loop/parallel) have their target handle at the same position.
  */
 function getTargetHandleYOffset(_block: BlockState, _targetHandle?: string | null): number {
-  // All target handles are currently at the same position (20px from block top)
-  // This function exists for future extensibility if target handles vary
-  return DEFAULT_HANDLE_Y_OFFSET
+  return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
 }
 
 /**
@@ -431,7 +393,7 @@ export function calculatePositions(
 
       // If no predecessors found (shouldn't happen for layer > 0), use padding
       if (bestSourceHandleY < 0) {
-        bestSourceHandleY = padding.y + DEFAULT_HANDLE_Y_OFFSET
+        bestSourceHandleY = padding.y + HANDLE_POSITIONS.DEFAULT_Y_OFFSET
       }
 
       // Calculate the target handle Y offset for this node

apps/sim/lib/workflows/blocks/block-dimensions.ts

@@ -2,56 +2,42 @@
  * Shared Block Dimension Constants
  *
  * Single source of truth for block dimensions used by:
- * - UI components (workflow-block, note-block)
+ * - UI components (workflow-block, note-block, subflow-node)
  * - Autolayout system
  * - Node utilities
- *
- * IMPORTANT: These values must match the actual CSS dimensions in the UI.
- * Changing these values will affect both rendering and layout calculations.
  */
 
-/**
- * Block dimension constants for workflow blocks
- */
 export const BLOCK_DIMENSIONS = {
-  /** Fixed width for all workflow blocks (matches w-[250px] in workflow-block.tsx) */
   FIXED_WIDTH: 250,
-
-  /** Header height for blocks */
   HEADER_HEIGHT: 40,
-
-  /** Minimum height for blocks */
   MIN_HEIGHT: 100,
-
-  /** Padding around workflow block content (p-[8px] top + bottom = 16px) */
   WORKFLOW_CONTENT_PADDING: 16,
-
-  /** Height of each subblock row (14px text + 8px gap + padding) */
   WORKFLOW_ROW_HEIGHT: 29,
-
-  /** Padding around note block content */
   NOTE_CONTENT_PADDING: 14,
-
-  /** Minimum content height for note blocks */
   NOTE_MIN_CONTENT_HEIGHT: 20,
-
-  /** Base content height for note blocks */
   NOTE_BASE_CONTENT_HEIGHT: 60,
 } as const
 
-/**
- * Container block dimension constants (loop, parallel, subflow)
- */
 export const CONTAINER_DIMENSIONS = {
-  /** Default width for container blocks */
   DEFAULT_WIDTH: 500,
-
-  /** Default height for container blocks */
   DEFAULT_HEIGHT: 300,
-
-  /** Minimum width for container blocks */
   MIN_WIDTH: 400,
-
-  /** Minimum height for container blocks */
   MIN_HEIGHT: 200,
+  HEADER_HEIGHT: 50,
+} as const
+
+/**
+ * Handle position constants - must match CSS in workflow-block.tsx and subflow-node.tsx
+ */
+export const HANDLE_POSITIONS = {
+  /** Default Y offset from block top for source/target handles */
+  DEFAULT_Y_OFFSET: 20,
+  /** Error handle offset from block bottom */
+  ERROR_BOTTOM_OFFSET: 17,
+  /** Condition handle starting Y offset */
+  CONDITION_START_Y: 60,
+  /** Height per condition row */
+  CONDITION_ROW_HEIGHT: 29,
+  /** Subflow start handle Y offset (header 50px + pill offset 16px + pill center 14px) */
+  SUBFLOW_START_Y_OFFSET: 80,
 } as const