Fix fit-to-view bounds calculation for center-origin nodes

Author: milanofthe

src/lib/components/FlowCanvas.svelte

@@ -30,6 +30,7 @@
 		import { nodeRegistry } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import { SNAP_GRID, BACKGROUND_GAP } from '$lib/constants/grid';
+	import { calculateNodeDimensions } from '$lib/constants/dimensions';
 	import type { NodeInstance, Connection, Annotation } from '$lib/nodes/types';
 	import type { EventInstance } from '$lib/events/types';
 
@@ -381,6 +382,20 @@
 			// Interface blocks are not deletable
 			const isInterface = graphNode.type === NODE_TYPES.INTERFACE;
 
+			// Calculate node dimensions for SvelteFlow bounds
+			const typeDef = nodeRegistry.get(graphNode.type);
+			const pinnedParamCount = typeDef && graphNode.pinnedParams
+				? graphNode.pinnedParams.filter(name => typeDef.params.some(p => p.name === name)).length
+				: 0;
+			const rotation = (graphNode.params?.['_rotation'] as number) || 0;
+			const { width, height } = calculateNodeDimensions(
+				graphNode.name,
+				graphNode.inputs.length,
+				graphNode.outputs.length,
+				pinnedParamCount,
+				rotation
+			);
+
 			// If node exists, update data but don't preserve selection here
 			// Selection is managed by SvelteFlow, trigger subscriptions, and merge effect
 			if (existingNode) {
@@ -389,6 +404,10 @@
 					type: existingNode.type,
 					position,
 					data: graphNode,
+					width,
+					height,
+					// Explicit center origin for correct bounds calculation
+					origin: [0.5, 0.5] as [number, number],
 					selectable: existingNode.selectable,
 					draggable: existingNode.draggable,
 					deletable: !isInterface
@@ -402,6 +421,10 @@
 				type: 'pathview',
 				position,
 				data: graphNode,
+				width,
+				height,
+				// Explicit center origin for correct bounds calculation
+				origin: [0.5, 0.5] as [number, number],
 				selectable: true,
 				draggable: true,
 				deletable: !isInterface

src/lib/components/FlowUpdater.svelte

@@ -30,15 +30,19 @@
 			return;
 		}
 
-		// Calculate bounding box of all nodes
+		// Calculate bounding box of all nodes, accounting for origin
 		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
 		for (const node of nodes) {
 			const width = node.measured?.width ?? node.width ?? 160;
 			const height = node.measured?.height ?? node.height ?? 60;
-			minX = Math.min(minX, node.position.x);
-			minY = Math.min(minY, node.position.y);
-			maxX = Math.max(maxX, node.position.x + width);
-			maxY = Math.max(maxY, node.position.y + height);
+			// Account for node origin (default center [0.5, 0.5], annotations use [0, 0])
+			const origin = (node.origin as [number, number]) ?? [0.5, 0.5];
+			const left = node.position.x - width * origin[0];
+			const top = node.position.y - height * origin[1];
+			minX = Math.min(minX, left);
+			minY = Math.min(minY, top);
+			maxX = Math.max(maxX, left + width);
+			maxY = Math.max(maxY, top + height);
 		}
 
 		// Add some padding around the nodes themselves

src/lib/components/canvas/flowConverters.ts

@@ -35,6 +35,8 @@ export function toFlowNode(node: NodeInstance, options: { deletable?: boolean }
 		data: node,
 		width,
 		height,
+		// Explicit center origin for correct bounds calculation
+		origin: [0.5, 0.5] as [number, number],
 		selectable: true,
 		draggable: true,
 		deletable: options.deletable ?? true
@@ -50,6 +52,8 @@ export function toEventNode(event: EventInstance): Node<EventInstance> {
 		type: 'eventNode',
 		position: { ...event.position },
 		data: event,
+		// Explicit center origin for correct bounds calculation
+		origin: [0.5, 0.5] as [number, number],
 		selectable: true,
 		draggable: true,
 		connectable: false,