some fixes

src/lib/components/flow/FitViewOnResize.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy, tick } from 'svelte';
+	import { tick } from 'svelte';
 	import type { Node, Edge } from '@xyflow/svelte';
 	import { useNodes, useEdges } from '@xyflow/svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
@@ -24,6 +24,7 @@
 	let lastLayoutKey = $state<string | null>(null);
 	let isFirstLayout = $state(true);
 	let lastDraggable = $state(viewState.draggable);
+	let lastFitViewRequest = $state(0);
 
 	// ─── Helpers ────────────────────────────────────────────────────────
 
@@ -64,10 +65,10 @@
 		})()
 	);
 
-	// ─── Fit view helper (only when draggable) ──────────────────────────
+	// ─── Fit view helper ────────────────────────────────────────────────
 
-	function doFitView(opts?: { animate?: boolean; forceAnimate?: boolean }) {
-		if (!viewState.draggable) return;
+	function doFitView(opts?: { animate?: boolean; forceAnimate?: boolean; force?: boolean }) {
+		if (!viewState.draggable && !opts?.force) return;
 		const nodes = nodesStore.current;
 		if (nodes.length === 0) return;
 
@@ -105,15 +106,15 @@
 		});
 	});
 
-	// ─── Window resize ─────────────────────────────────────────────────
-
-	function handleWindowResize() {
-		if (!viewState.draggable) return;
-		doFitView({ animate: true });
-	}
-
-	onMount(() => window.addEventListener('resize', handleWindowResize));
-	onDestroy(() => window.removeEventListener('resize', handleWindowResize));
+	// Respond to explicit fitView requests (e.g. button click in PanelCanvasActions)
+	$effect(() => {
+		const req = viewState.fitViewRequest;
+		if (req === 0 || req === lastFitViewRequest) return;
+		lastFitViewRequest = req;
+		tick().then(() => {
+			requestAnimationFrame(() => doFitView({ forceAnimate: true, force: true }));
+		});
+	});
 
 	// ─── Layout algorithm ──────────────────────────────────────────────
 	//
@@ -291,7 +292,7 @@
 					belowTotalW += extents.get(belowIds[i])!.width;
 				}
 
-			const childY = y + nodeH + V_SPACING;
+				const childY = y + nodeH + V_SPACING;
 				let childX = allocX + (blockAWidth - belowTotalW) / 2;
 
 				for (const cid of belowIds) {
@@ -374,14 +375,18 @@
 			);
 		}
 
-		if (viewState.draggable) {
-			// Defer so layout is applied and nodes are measured before fitting
+		// Only fit the view on the very first layout (component mount).
+		// Subsequent layout updates (new nodes, resizes) reposition nodes
+		// without moving the camera — the user stays in control of the viewport.
+		if (isFirstLayout) {
 			tick().then(() => {
 				requestAnimationFrame(() => {
-					doFitView();
+					doFitView({ animate: false });
 					isFirstLayout = false;
 				});
 			});
+		} else {
+			isFirstLayout = false;
 		}
 	}
 </script>

src/lib/components/flow/actions/PanelCanvasActions.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
-	import { Maximize, Minus, Plus, MousePointer, HandGrab, Spotlight } from '@lucide/svelte';
+	import { Maximize, Minus, Plus } from '@lucide/svelte';
 	import { Panel } from '@xyflow/svelte';
 
 	import { Button } from '$lib/components/ui/button';
 	import { viewState } from '$lib/state/view.svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
 
-	const { fitView, zoomIn, zoomOut, getZoom } = useSvelteFlow();
-
-	$effect(() => {
-		localStorage.setItem('hf-playground-draggable-option', viewState.draggable.toString());
-	});
-
-	function handleDraggable() {
-		viewState.draggable = !viewState.draggable;
+	function requestFitView() {
+		viewState.fitViewRequest++;
 	}
+
+	const { zoomIn, zoomOut, getZoom } = useSvelteFlow();
 </script>
 
 <Panel
@@ -40,53 +36,8 @@
 		>
 			<Minus />
 		</Button>
-		<Button
-			variant="ghost"
-			size="icon-sm"
-			onclick={() =>
-				fitView({
-					interpolate: 'smooth',
-					duration: 250,
-					padding: 0.15
-				})}
-		>
+		<Button variant="ghost" size="icon-sm" onclick={requestFitView}>
 			<Maximize />
 		</Button>
 	</div>
-	<!-- <div
-		class="inline-flex w-fit flex-row gap-0.5 rounded-lg border border-border bg-background/30 p-1 backdrop-blur-sm dark:bg-gray-900/30"
-	>
-		<Tooltip.Root delayDuration={0}>
-			<Tooltip.Trigger>
-				<Button
-					variant={!viewState.draggable ? 'default' : 'ghost'}
-					size="icon-sm"
-					onclick={handleDraggable}
-				>
-					<MousePointer />
-				</Button>
-			</Tooltip.Trigger>
-			<Tooltip.Content>
-				<p class="flex items-center gap-1">
-					<MousePointer class="size-3.5" /> Free: Move the canvas freely
-				</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				<Button
-					variant={viewState.draggable ? 'default' : 'ghost'}
-					size="icon-sm"
-					onclick={handleDraggable}
-				>
-					<Spotlight />
-				</Button>
-			</Tooltip.Trigger>
-			<Tooltip.Content>
-				<p class="flex items-center gap-1">
-					<Spotlight class="size-3.5" /> Spotlight: Focus on the selected node
-				</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
-	</div> -->
 </Panel>

src/lib/state/view.svelte.ts

@@ -1,3 +1,4 @@
 export const viewState = $state({
-	draggable: true
+	draggable: true,
+	fitViewRequest: 0
 });