)
})}
{/* Horizontal merge line - spans across all rule positions */}
{/* Final connector to actions */}
)}
)}
{/* Dynamic connectors between actions */}
{actions.map((action, index) => {
if (index < actions.length - 1) {
// Calculate dynamic connector position based on actual action heights
const actionPositions = getActionPositions()
const currentActionPosition = actionPositions[action.id]
const currentActionHeight = calculateActionHeight(action)
const connectorPosition = currentActionPosition + currentActionHeight + 8 // +8px gap from bottom of action
return (
)
}
return null
})}
{/* Connector to exit */}
{(() => {
let connectorPosition = 114 // Default after trigger (adjusted to match trigger bottom)
if (hasActions) {
// Connect from last action to exit using dynamic positioning
const actionPositions = getActionPositions()
const lastAction = actions[actions.length - 1]
const lastActionPosition = actionPositions[lastAction.id]
const lastActionHeight = calculateActionHeight(lastAction)
connectorPosition = lastActionPosition + lastActionHeight + 8 // +8px gap from bottom of last action
} else if (hasRules) {
// Connect from rules to exit (no actions)
if (rules.length === 1) {
connectorPosition = 259
} else {
// Multiple rules - merge to center then to exit
return (
<>
{/* Branches from each rule */}
{rules.map((_, index) => {
const totalRules = rules.length
const spacing = 100 / (totalRules + 1)
const leftPercentage = spacing * (index + 1)
return (
)
})}
{/* Horizontal merge line */}
{/* Final connector to exit */}
)
}
}
return (
)
})()}
)
})()}
{/* Dynamic Workflow Nodes */}
{workflowNodes.map((node) => {
// Calculate position based on node type and workflow structure
let position = "top-16 left-1/2 transform -translate-x-1/2"
// Multiple nodes - arrange by type
const rules = workflowNodes.filter(n => n.type === 'rule')
const ruleIndex = rules.findIndex(n => n.id === node.id)
if (node.type === 'trigger') {
position = "top-16 left-1/2 transform -translate-x-1/2"
} else if (node.type === 'rule') {
if (rules.length === 1) {
position = "top-[149px] left-1/2 transform -translate-x-1/2"
} else {
// Multiple rules - distribute evenly across available space
// Calculate percentage position based on rule index and total count
const totalRules = rules.length
const spacing = 100 / (totalRules + 1) // Add 1 to create equal spacing on both sides
const leftPercentage = spacing * (ruleIndex + 1) // +1 because index starts at 0
position = `top-[184px] transform -translate-x-1/2`
return (
)
}
} else if (node.type === 'action') {
// Calculate dynamic position for actions using actual heights
const actionPositions = getActionPositions()
const actionPosition = actionPositions[node.id]
position = `left-1/2 transform -translate-x-1/2`
return (
)
}
return (
)
})}
{/* Exit Node - only show when there are workflow nodes */}
{workflowNodes.length > 0 && (() => {
const rules = workflowNodes.filter(n => n.type === 'rule')
const actions = workflowNodes.filter(n => n.type === 'action')
// Calculate position based on the last node in the workflow using dynamic heights
let exitPosition = 200 // Minimum position to ensure it's always below trigger
if (actions.length > 0) {
// If there are actions, place exit after the last action using dynamic positioning
const actionPositions = getActionPositions()
const lastAction = actions[actions.length - 1]
const lastActionPosition = actionPositions[lastAction.id]
const lastActionHeight = calculateActionHeight(lastAction)
exitPosition = lastActionPosition + lastActionHeight + 67 // +32px gap + 35px connector
} else if (rules.length === 1) {
// Single rule but no actions
exitPosition = 294 // After single rule with 35px connector (149px + 110px rule height + 35px)
} else if (rules.length > 1) {
// Multiple rules but no actions
exitPosition = 364 // After multiple rules with merge and 35px connector (184px + 110px + 35px + 35px)
}
return (
Exit
)
})()}
{/* Progress Indicator - only show when there are workflow nodes */}
{workflowNodes.length > 0 && (
{zoomLevel}%
)}
{/* Right Sidebar - Triggers Panel */}
{/* Search */}