refactor(SVGPanZoom): Fix memory leaking - consolidate zoom lifecycle into PanzoomContainer (#23236)

* refactor(SVGPanZoom): attach panzoom via use: action and remove unused parent bind:this * refactor: centralize panzoom in createPanzoomAction and align ImagePreview cleanup * refactor(panzoom): consolidate zoom lifecycle into PanzoomContainer and remove action-based wiring
2026-03-30 20:54:28 -05:00
parent 1c5e84ddf2
commit eba2b2cd72
6 changed files with 72 additions and 109 deletions
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import panzoom, { type PanZoom, type PanZoomOptions } from 'panzoom';
+
+	const defaultOpts: PanZoomOptions = {
+		bounds: true,
+		boundsPadding: 0.1,
+		zoomSpeed: 0.065
+	};
+
+	export let className = '';
+	export let options: Partial<PanZoomOptions> = {};
+
+	let containerElement: HTMLElement;
+	let instance: PanZoom | undefined;
+
+	export const reset = () => {
+		instance?.moveTo(0, 0);
+		instance?.zoomAbs(0, 0, 1);
+	};
+
+	onMount(() => {
+		const localInstance = panzoom(containerElement, { ...defaultOpts, ...options });
+		instance = localInstance;
+		return () => {
+			localInstance.dispose();
+		}
+	});
+</script>
+
+<div bind:this={containerElement} class={className}>
+	<slot />
+</div>