Extract preview-bounds geometry into shared utility, drop magic 42px cap

Author: milanofthe

src/lib/components/FlowUpdater.svelte

@@ -14,6 +14,10 @@
 	import { importFile } from '$lib/schema/fileOps';
 	import { ALL_COMPONENT_EXTENSIONS } from '$lib/types/component';
 	import { GRID_SIZE } from '$lib/constants/grid';
+	import { pinnedPreviewsStore } from '$lib/stores/pinnedPreviews';
+	import { plotDataStore } from '$lib/plotting/processing/plotDataStore';
+	import { previewSideForRotation, extendBoundsForPreview } from '$lib/utils/previewBounds';
+	import type { NodeInstance } from '$lib/types/nodes';
 
 	interface Props {
 		pendingUpdates: string[];
@@ -33,6 +37,9 @@
 			return;
 		}
 
+		const previewsPinned = get(pinnedPreviewsStore);
+		const plotState = get(plotDataStore);
+
 		// Calculate bounding box of all nodes, accounting for origin
 		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
 		for (const node of nodes) {
@@ -42,10 +49,19 @@
 			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);
+			let bounds = { left, top, right: left + width, bottom: top + height };
+
+			// Extend bounds for pinned plot previews on recording blocks (Scope/Spectrum)
+			if (previewsPinned && node.type === 'pathview' && plotState.plots.has(node.id)) {
+				const data = node.data as NodeInstance;
+				const rotation = (data.params?.['_rotation'] as number) || 0;
+				bounds = extendBoundsForPreview(bounds, previewSideForRotation(rotation));
+			}
+
+			minX = Math.min(minX, bounds.left);
+			minY = Math.min(minY, bounds.top);
+			maxX = Math.max(maxX, bounds.right);
+			maxY = Math.max(maxY, bounds.bottom);
 		}
 
 		// Add some padding around the nodes themselves

src/lib/components/nodes/BaseNode.svelte

@@ -11,6 +11,7 @@
 	import { portLabelsStore } from '$lib/stores/portLabels';
 	import { iconModeStore } from '$lib/stores/iconMode';
 	import BlockIcon, { hasBlockIcon } from '$lib/components/icons/BlockIcon.svelte';
+	import { PREVIEW_GAP, previewSideForRotation } from '$lib/utils/previewBounds';
 	import { hoveredHandle, selectedNodeHighlight } from '$lib/stores/hoveredHandle';
 	import { showTooltip, hideTooltip } from '$lib/components/Tooltip.svelte';
 	import { paramInput } from '$lib/actions/paramInput';
@@ -215,19 +216,8 @@
 	// Port is horizontal (left/right) or vertical (top/bottom)
 	const isVertical = $derived(rotation === 1 || rotation === 3);
 
-	// Preview position: opposite side of inputs
-	// rotation 0: inputs left → preview right
-	// rotation 1: inputs top → preview bottom
-	// rotation 2: inputs right → preview left
-	// rotation 3: inputs bottom → preview top
-	const previewPosition = $derived(() => {
-		switch (rotation) {
-			case 1: return 'bottom';
-			case 2: return 'left';
-			case 3: return 'top';
-			default: return 'right';
-		}
-	});
+	// Preview position: opposite side of inputs (rotation → side mapping is in utils)
+	const previewPosition = $derived(() => previewSideForRotation(rotation));
 
 	const maxPortsOnSide = $derived(Math.max(data.inputs.length, data.outputs.length));
 	const pinnedCount = $derived(validPinnedParams().length);
@@ -485,7 +475,7 @@
 	class:show-labels={showPortLabels}
 	class:missing-type={!typeDef && data.type !== NODE_TYPES.SUBSYSTEM && data.type !== NODE_TYPES.INTERFACE}
 	data-rotation={rotation}
-	style="width: {nodeDimensions.width}px; height: {nodeDimensions.height}px; --node-color: {nodeColor};"
+	style="width: {nodeDimensions.width}px; height: {nodeDimensions.height}px; --node-color: {nodeColor}; --preview-gap: {PREVIEW_GAP}px;"
 	ondblclick={handleDoubleClick}
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
@@ -799,7 +789,6 @@
 	.node-icon {
 		flex: 1;
 		min-height: 0;
-		max-height: 42px;
 		margin-top: 1px;
 		display: flex;
 		align-items: center;
@@ -1057,28 +1046,28 @@
 
 	/* Preview position: right (default, inputs on left) */
 	.plot-preview-popup.preview-right {
-		left: calc(100% + 12px);
+		left: calc(100% + var(--preview-gap));
 		top: 50%;
 		transform: translateY(-50%);
 	}
 
 	/* Preview position: left (inputs on right) */
 	.plot-preview-popup.preview-left {
-		right: calc(100% + 12px);
+		right: calc(100% + var(--preview-gap));
 		top: 50%;
 		transform: translateY(-50%);
 	}
 
 	/* Preview position: top (inputs on bottom) */
 	.plot-preview-popup.preview-top {
-		bottom: calc(100% + 12px);
+		bottom: calc(100% + var(--preview-gap));
 		left: 50%;
 		transform: translateX(-50%);
 	}
 
 	/* Preview position: bottom (inputs on top) */
 	.plot-preview-popup.preview-bottom {
-		top: calc(100% + 12px);
+		top: calc(100% + var(--preview-gap));
 		left: 50%;
 		transform: translateX(-50%);
 	}

src/lib/utils/previewBounds.ts

@@ -0,0 +1,74 @@
+/**
+ * Plot-preview popup geometry (Scope / Spectrum).
+ *
+ * Single source of truth for the gap between a recording block and its
+ * pinned plot-preview popup, the side it appears on for each rotation,
+ * and how those bounds extend the block's bounding box (used for fit-view).
+ */
+
+import { PREVIEW_WIDTH, PREVIEW_HEIGHT } from '$lib/plotting/core/constants';
+
+/** Pixel gap between block edge and preview popup. CSS reads this via the
+ *  `--preview-gap` custom property set on the block. */
+export const PREVIEW_GAP = 12;
+
+export type PreviewSide = 'top' | 'right' | 'bottom' | 'left';
+
+/** Side the preview appears on for a given block rotation (matches handle layout). */
+export function previewSideForRotation(rotation: number): PreviewSide {
+	switch (rotation) {
+		case 1:
+			return 'bottom';
+		case 2:
+			return 'left';
+		case 3:
+			return 'top';
+		default:
+			return 'right';
+	}
+}
+
+export interface BlockBounds {
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
+}
+
+/** Extend a block's bounding box by the preview popup placed on the given side. */
+export function extendBoundsForPreview(bounds: BlockBounds, side: PreviewSide): BlockBounds {
+	const cx = (bounds.left + bounds.right) / 2;
+	const cy = (bounds.top + bounds.bottom) / 2;
+	const halfW = PREVIEW_WIDTH / 2;
+	const halfH = PREVIEW_HEIGHT / 2;
+	switch (side) {
+		case 'right':
+			return {
+				left: bounds.left,
+				top: Math.min(bounds.top, cy - halfH),
+				right: bounds.right + PREVIEW_GAP + PREVIEW_WIDTH,
+				bottom: Math.max(bounds.bottom, cy + halfH)
+			};
+		case 'left':
+			return {
+				left: bounds.left - PREVIEW_GAP - PREVIEW_WIDTH,
+				top: Math.min(bounds.top, cy - halfH),
+				right: bounds.right,
+				bottom: Math.max(bounds.bottom, cy + halfH)
+			};
+		case 'bottom':
+			return {
+				left: Math.min(bounds.left, cx - halfW),
+				top: bounds.top,
+				right: Math.max(bounds.right, cx + halfW),
+				bottom: bounds.bottom + PREVIEW_GAP + PREVIEW_HEIGHT
+			};
+		case 'top':
+			return {
+				left: Math.min(bounds.left, cx - halfW),
+				top: bounds.top - PREVIEW_GAP - PREVIEW_HEIGHT,
+				right: Math.max(bounds.right, cx + halfW),
+				bottom: bounds.bottom
+			};
+	}
+}