|
@@ -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>
|