From 7b3a86475d7b28ecc682d4bbfaaf1c6e3eedf043 Mon Sep 17 00:00:00 2001
From: cvaz1306 <christophervaz160@gmail.com>
Date: Fri, 27 Dec 2024 17:06:15 -0800
Subject: [PATCH] Add reset panzoom button to SVGPanZoom and cleanup

---
 src/lib/components/common/SVGPanZoom.svelte | 24 +++++++++++++++++++--
 src/lib/components/icons/Reset.svelte       |  8 +++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/icons/Reset.svelte

diff --git a/src/lib/components/common/SVGPanZoom.svelte b/src/lib/components/common/SVGPanZoom.svelte
index e576ffb06..dc7f81afd 100644
--- a/src/lib/components/common/SVGPanZoom.svelte
+++ b/src/lib/components/common/SVGPanZoom.svelte
@@ -2,7 +2,7 @@
 	import { onMount, getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import panzoom from 'panzoom';
+	import panzoom, { type PanZoom } from 'panzoom';
 
 	import DOMPurify from 'dompurify';
 	import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
@@ -10,12 +10,13 @@
 	import { toast } from 'svelte-sonner';
 	import Tooltip from './Tooltip.svelte';
 	import Clipboard from '../icons/Clipboard.svelte';
+	import Reset from '../icons/Reset.svelte';
 
 	export let className = '';
 	export let svg = '';
 	export let content = '';
 
-	let instance;
+	let instance: PanZoom;
 
 	let sceneParentElement: HTMLElement;
 	let sceneElement: HTMLElement;
@@ -28,6 +29,12 @@
 			zoomSpeed: 0.065
 		});
 	}
+	function resetPanZoomViewport() {
+		console.log('Reset View')
+		instance.moveTo(0, 0);
+		instance.zoomAbs(0,0,1);
+		console.log(instance.getTransform());
+	}
 </script>
 
 <div bind:this={sceneParentElement} class="relative {className}">
@@ -49,5 +56,18 @@
 				</button>
 			</Tooltip>
 		</div>
+		<div class=" absolute top-1 right-10">
+			<Tooltip content={$i18n.t('Reset view')}>
+				<button
+					class="p-1.5 rounded-lg border border-gray-100 dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+					on:click={() => {
+						resetPanZoomViewport();
+						toast.success($i18n.t('Reset view'));
+					}}
+				>
+					<Reset className=" size-4" />
+				</button>
+			</Tooltip>
+		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/icons/Reset.svelte b/src/lib/components/icons/Reset.svelte
new file mode 100644
index 000000000..c8a16ee34
--- /dev/null
+++ b/src/lib/components/icons/Reset.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let className = 'size-4';
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
+fill="currentColor"
+class={className}>
+    <path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"/>
+</svg>
\ No newline at end of file