SVGPanZoom.svelte 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script lang="ts">
  2. import { onMount, getContext } from 'svelte';
  3. const i18n = getContext('i18n');
  4. import panzoom from 'panzoom';
  5. import DOMPurify from 'dompurify';
  6. import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
  7. import { copyToClipboard } from '$lib/utils';
  8. import { toast } from 'svelte-sonner';
  9. import Tooltip from './Tooltip.svelte';
  10. import Clipboard from '../icons/Clipboard.svelte';
  11. export let className = '';
  12. export let svg = '';
  13. export let content = '';
  14. let instance;
  15. let sceneParentElement: HTMLElement;
  16. let sceneElement: HTMLElement;
  17. $: if (sceneElement) {
  18. instance = panzoom(sceneElement, {
  19. bounds: true,
  20. boundsPadding: 0.1,
  21. zoomSpeed: 0.065
  22. });
  23. }
  24. </script>
  25. <div bind:this={sceneParentElement} class="relative {className}">
  26. <div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
  27. {@html svg}
  28. </div>
  29. {#if content}
  30. <div class=" absolute top-1 right-1">
  31. <Tooltip content={$i18n.t('Copy to clipboard')}>
  32. <button
  33. 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"
  34. on:click={() => {
  35. copyToClipboard(content);
  36. toast.success($i18n.t('Copied to clipboard'));
  37. }}
  38. >
  39. <Clipboard className=" size-4" strokeWidth="1.5" />
  40. </button>
  41. </Tooltip>
  42. </div>
  43. {/if}
  44. </div>