Fix fit-to-view bounds: pass calculated dimensions to SvelteFlow node objects

Author: milanofthe

src/lib/components/canvas/flowConverters.ts

@@ -6,16 +6,35 @@ import type { Node, Edge } from '@xyflow/svelte';
 import type { NodeInstance, Connection, Annotation } from '$lib/nodes/types';
 import type { EventInstance } from '$lib/events/types';
 import { HANDLE_ID } from '$lib/constants/handles';
+import { calculateNodeDimensions } from '$lib/constants/dimensions';
+import { nodeRegistry } from '$lib/nodes';
 
 /**
  * Convert a NodeInstance to a SvelteFlow Node
  */
 export function toFlowNode(node: NodeInstance, options: { deletable?: boolean } = {}): Node<NodeInstance> {
+	// Calculate valid pinned params count
+	const typeDef = nodeRegistry.get(node.type);
+	const pinnedParamCount = typeDef && node.pinnedParams
+		? node.pinnedParams.filter(name => typeDef.params.some(p => p.name === name)).length
+		: 0;
+
+	const rotation = (node.params?.['_rotation'] as number) || 0;
+	const { width, height } = calculateNodeDimensions(
+		node.name,
+		node.inputs.length,
+		node.outputs.length,
+		pinnedParamCount,
+		rotation
+	);
+
 	return {
 		id: node.id,
 		type: 'pathview',
 		position: { ...node.position },
 		data: node,
+		width,
+		height,
 		selectable: true,
 		draggable: true,
 		deletable: options.deletable ?? true

src/lib/components/nodes/BaseNode.svelte

@@ -11,7 +11,7 @@
 	import { showTooltip, hideTooltip } from '$lib/components/Tooltip.svelte';
 	import { paramInput } from '$lib/actions/paramInput';
 	import { plotDataStore } from '$lib/plotting/processing/plotDataStore';
-	import { NODE, snapTo2G, getPortPositionCalc } from '$lib/constants/dimensions';
+	import { NODE, getPortPositionCalc, calculateNodeDimensions } from '$lib/constants/dimensions';
 	import PlotPreview from './PlotPreview.svelte';
 
 	interface Props {
@@ -136,37 +136,16 @@
 	const maxPortsOnSide = $derived(Math.max(data.inputs.length, data.outputs.length));
 	const pinnedCount = $derived(validPinnedParams().length);
 
-	// Node dimensions - calculated from data, always grid-snapped
-	// Port dimension: space needed for ports on one side
-	const minPortDimension = $derived(Math.max(1, maxPortsOnSide) * NODE.portSpacing);
-
-	// Pinned params height: border(1) + padding(10) + rows(20 each) + gaps(4 between)
-	// = 11 + 20*N + 4*(N-1) = 7 + 24*N for N > 0
-	const pinnedParamsHeight = $derived(pinnedCount > 0 ? 7 + 24 * pinnedCount : 0);
-
-	// Width calculation:
-	// - Base width: 100px
-	// - Name width: ~6px per char + 24px padding, estimate from name length
-	// - Pinned params: need ~120px minimum for label + input
-	// - Vertical orientation: also consider port count
-	const nameWidth = $derived(data.name.length * 6 + 24);
-	const pinnedParamsWidth = $derived(pinnedCount > 0 ? 160 : 0);
-	const nodeWidth = $derived(
-		snapTo2G(Math.max(
-			NODE.baseWidth,
-			nameWidth,
-			pinnedParamsWidth,
-			isVertical ? minPortDimension : 0
-		))
-	);
-
-	// Height: total content height vs port requirements (they share vertical space)
-	const contentHeight = $derived(NODE.baseHeight + pinnedParamsHeight);
-	const nodeHeight = $derived(
-		isVertical
-			? snapTo2G(contentHeight)
-			: snapTo2G(Math.max(contentHeight, minPortDimension))
-	);
+	// Node dimensions - calculated from shared utility (same as SvelteFlow bounds)
+	const nodeDimensions = $derived(calculateNodeDimensions(
+		data.name,
+		data.inputs.length,
+		data.outputs.length,
+		pinnedCount,
+		rotation
+	));
+	const nodeWidth = $derived(nodeDimensions.width);
+	const nodeHeight = $derived(nodeDimensions.height);
 
 	// Check if this is a Subsystem or Interface node (using shapes utility)
 	const isSubsystemNode = $derived(isSubsystem(data));

src/lib/constants/dimensions.ts

@@ -71,3 +71,40 @@ export function getPortPositionCalc(index: number, total: number): string {
 	}
 	return `calc(50% + ${offsetFromCenter}px)`;
 }
+
+/**
+ * Calculate node dimensions from node data.
+ * Used by both SvelteFlow (for bounds) and BaseNode (for CSS).
+ */
+export function calculateNodeDimensions(
+	name: string,
+	inputCount: number,
+	outputCount: number,
+	pinnedParamCount: number,
+	rotation: number
+): { width: number; height: number } {
+	const isVertical = rotation === 1 || rotation === 3;
+	const maxPortsOnSide = Math.max(inputCount, outputCount);
+	const minPortDimension = Math.max(1, maxPortsOnSide) * NODE.portSpacing;
+
+	// Pinned params height: border(1) + padding(10) + rows(20 each) + gaps(4 between)
+	const pinnedParamsHeight = pinnedParamCount > 0 ? 7 + 24 * pinnedParamCount : 0;
+
+	// Width: base, name estimate, pinned params minimum, port dimension (if vertical)
+	const nameWidth = name.length * 6 + 24;
+	const pinnedParamsWidth = pinnedParamCount > 0 ? 160 : 0;
+	const width = snapTo2G(Math.max(
+		NODE.baseWidth,
+		nameWidth,
+		pinnedParamsWidth,
+		isVertical ? minPortDimension : 0
+	));
+
+	// Height: content height vs port dimension (they share vertical space)
+	const contentHeight = NODE.baseHeight + pinnedParamsHeight;
+	const height = isVertical
+		? snapTo2G(contentHeight)
+		: snapTo2G(Math.max(contentHeight, minPortDimension));
+
+	return { width, height };
+}