Merge pull request #54 from radical-data/autolayout

feat: use vertical auto-layout as default

Author: jokroese

src/lib/components/FlowEditor.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import type { EdgeTypes, OnBeforeConnect, OnBeforeReconnect } from '@xyflow/svelte';
-	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
-	import { setContext } from 'svelte';
+	import type { EdgeTypes, Node, OnBeforeConnect, OnBeforeReconnect } from '@xyflow/svelte';
+	import { Background, Controls, MiniMap, SvelteFlow } from '@xyflow/svelte';
+	import { onDestroy, setContext } from 'svelte';
 
 	import type { Issue } from '../engine/HydraEngine.js';
 	import { getAllDefinitions } from '../nodes/registry.js';
 	import type { InputValue, IREdge, IRNode, NodeDefinition } from '../types.js';
 	import { getLayoutedElements } from '../utils/layout.js';
+	import { createLayoutAnimator } from '../utils/layoutAnimator.js';
 	import CustomEdge from './CustomEdge.svelte';
 	import CustomNode from './CustomNode.svelte';
 	let {
@@ -23,6 +24,9 @@
 		validationIssues?: Issue[];
 	}>();
 
+	let displayNodes = $state.raw<IRNode[]>([]);
+	let isInitialized = $state(false);
+
 	type NodeValidationStatus = {
 		hasError: boolean;
 		hasWarning: boolean;
@@ -127,11 +131,83 @@
 		});
 	}
 
-	function onLayout(direction: 'TB' | 'LR') {
-		const layouted = getLayoutedElements(nodes, edges, direction);
+	const POSITION_TOLERANCE = 0.5;
+	const LAYOUT_DIRECTION = 'TB';
+
+	const animator = createLayoutAnimator(250);
+
+	function shouldApplyAutoLayout(currentNodes: IRNode[], layoutedNodes: IRNode[]): boolean {
+		if (currentNodes.length !== layoutedNodes.length) {
+			return true;
+		}
+
+		const layoutMap = new Map(layoutedNodes.map((node) => [node.id, node]));
+
+		for (const node of currentNodes) {
+			const layoutNode = layoutMap.get(node.id);
+			if (!layoutNode) {
+				return true;
+			}
+
+			const deltaX = Math.abs((node.position?.x ?? 0) - layoutNode.position.x);
+			const deltaY = Math.abs((node.position?.y ?? 0) - layoutNode.position.y);
+
+			if (deltaX > POSITION_TOLERANCE || deltaY > POSITION_TOLERANCE) {
+				return true;
+			}
+
+			if (
+				node.sourcePosition !== layoutNode.sourcePosition ||
+				node.targetPosition !== layoutNode.targetPosition
+			) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	$effect(() => {
+		if (nodes.length === 0) {
+			return;
+		}
+
+		const layouted = getLayoutedElements(nodes, edges, LAYOUT_DIRECTION);
+
+		if (!shouldApplyAutoLayout(nodes, layouted.nodes)) {
+			return;
+		}
+
 		nodes = [...layouted.nodes];
 		edges = [...layouted.edges];
-	}
+	});
+
+	$effect(() => {
+		if (nodes.length === 0) {
+			isInitialized = true;
+			animator.handleLayoutChange([], (next) => {
+				displayNodes = next;
+			});
+			return;
+		}
+
+		if (!isInitialized) {
+			displayNodes = [...nodes];
+			isInitialized = true;
+			animator.handleLayoutChange(nodes, (next) => {
+				displayNodes = next;
+			});
+			return;
+		}
+
+		animator.handleLayoutChange(nodes, (next) => {
+			displayNodes = next;
+		});
+	});
+
+	onDestroy(() => {
+		animator.stop();
+	});
 
 	function disconnectExistingTarget(
 		targetNodeId: string | null | undefined,
@@ -181,24 +257,19 @@
 	<div class="flow-canvas">
 		{#if Object.keys(nodeTypes).length > 0}
 			<SvelteFlow
-				bind:nodes
+				bind:nodes={displayNodes as Node[]}
 				bind:edges
 				{nodeTypes}
 				{edgeTypes}
 				fitView
+				nodesDraggable={false}
 				onbeforeconnect={handleBeforeConnect}
 				onbeforereconnect={handleBeforeReconnect}
 				class="flow-container"
 			>
 				<Background />
-				<Controls />
+				<Controls showLock={false} />
 				<MiniMap />
-				<Panel position="top-right">
-					<div class="layout-buttons">
-						<button onclick={() => onLayout('TB')} class="layout-btn"> Vertical </button>
-						<button onclick={() => onLayout('LR')} class="layout-btn"> Horizontal </button>
-					</div>
-				</Panel>
 			</SvelteFlow>
 		{:else}
 			<div class="loading-canvas">
@@ -270,33 +341,6 @@
 		padding: 6px 12px;
 	}
 
-	.layout-buttons {
-		display: flex;
-		gap: 8px;
-		background: rgba(255, 255, 255, 0.95);
-		padding: 12px;
-		border-radius: 8px;
-		backdrop-filter: blur(4px);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-	}
-
-	.layout-btn {
-		padding: 8px 12px;
-		background: #4caf50;
-		color: white;
-		border: none;
-		border-radius: 6px;
-		cursor: pointer;
-		font-size: 12px;
-		font-weight: 600;
-		transition: all 0.2s;
-	}
-
-	.layout-btn:hover {
-		background: #45a049;
-		transform: translateY(-1px);
-	}
-
 	.flow-canvas {
 		flex: 1;
 		position: relative;

src/lib/types.ts

@@ -37,6 +37,8 @@ export interface IRNode {
 	type: string;
 	data: Record<string, InputValue>;
 	position: { x: number; y: number };
+	sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+	targetPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
 
 export interface IREdge {

src/lib/utils/layout.ts

@@ -8,8 +8,8 @@ const nodeHeight = 120;
 export function getLayoutedElements(
 	nodes: IRNode[],
 	edges: IREdge[],
-	direction: 'TB' | 'LR' = 'TB'
-) {
+	direction: 'TB' = 'TB'
+): { nodes: IRNode[]; edges: IREdge[] } {
 	const dagreGraph = new Dagre.graphlib.Graph();
 	dagreGraph.setDefaultEdgeLabel(() => ({}));
 
@@ -33,18 +33,17 @@ export function getLayoutedElements(
 
 	Dagre.layout(dagreGraph);
 
-	const layoutedNodes = nodes.map((node) => {
+	const layoutedNodes: IRNode[] = nodes.map((node) => {
 		const nodeWithPosition = dagreGraph.node(node.id);
-		const isHorizontal = direction === 'LR';
 
 		return {
 			...node,
 			position: {
 				x: nodeWithPosition.x - nodeWidth / 2,
 				y: nodeWithPosition.y - nodeHeight / 2
 			},
-			sourcePosition: isHorizontal ? 'right' : 'bottom',
-			targetPosition: isHorizontal ? 'left' : 'top'
+			sourcePosition: 'bottom' as const,
+			targetPosition: 'top' as const
 		};
 	});
 

src/lib/utils/layoutAnimator.ts

@@ -0,0 +1,104 @@
+import type { IRNode } from '../types.js';
+
+export type LayoutAnimator = {
+	/** Call when canonical nodes change; onFrame is called with display nodes (interpolated or final). */
+	handleLayoutChange(nodes: IRNode[], onFrame: (displayNodes: IRNode[]) => void): void;
+	/** Stop any running animation (e.g. on destroy). */
+	stop(): void;
+};
+
+export function createLayoutAnimator(duration = 250): LayoutAnimator {
+	let isAnimating = false;
+	let animationFrameId: number | null = null;
+	let previousPositions: Map<string, { x: number; y: number }> | null = null;
+
+	function stop() {
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+			animationFrameId = null;
+		}
+		isAnimating = false;
+	}
+
+	function startAnimation(
+		fromById: Map<string, { x: number; y: number }>,
+		toById: Map<string, { x: number; y: number }>,
+		nodes: IRNode[],
+		onFrame: (displayNodes: IRNode[]) => void
+	) {
+		stop();
+
+		isAnimating = true;
+		const start = performance.now();
+
+		const step = (now: number) => {
+			const elapsed = now - start;
+			const tRaw = elapsed / duration;
+			const t = tRaw >= 1 ? 1 : tRaw;
+
+			const eased = t * (2 - t);
+
+			const displayNodes = nodes.map((node) => {
+				const from = fromById.get(node.id) ?? node.position;
+				const to = toById.get(node.id) ?? node.position;
+
+				const x = from.x + (to.x - from.x) * eased;
+				const y = from.y + (to.y - from.y) * eased;
+
+				return {
+					...node,
+					position: { x, y },
+					sourcePosition: node.sourcePosition,
+					targetPosition: node.targetPosition
+				};
+			});
+
+			onFrame(displayNodes);
+
+			if (t < 1 && isAnimating) {
+				animationFrameId = requestAnimationFrame(step);
+			} else {
+				stop();
+				onFrame(nodes);
+			}
+		};
+
+		animationFrameId = requestAnimationFrame(step);
+	}
+
+	function handleLayoutChange(nodes: IRNode[], onFrame: (displayNodes: IRNode[]) => void) {
+		if (nodes.length === 0) {
+			previousPositions = null;
+			onFrame([]);
+			return;
+		}
+
+		const fromById =
+			previousPositions ?? new Map(nodes.map((n) => [n.id, { x: n.position.x, y: n.position.y }]));
+
+		const toById = new Map(nodes.map((n) => [n.id, { x: n.position.x, y: n.position.y }]));
+
+		let needsAnimation = false;
+		for (const node of nodes) {
+			const from = fromById.get(node.id);
+			const to = toById.get(node.id);
+			if (!to) continue;
+
+			if (!from || from.x !== to.x || from.y !== to.y) {
+				needsAnimation = true;
+				break;
+			}
+		}
+
+		previousPositions = toById;
+
+		if (!needsAnimation) {
+			onFrame(nodes);
+			return;
+		}
+
+		startAnimation(fromById, toById, nodes, onFrame);
+	}
+
+	return { handleLayoutChange, stop };
+}