Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enh: svg diagram download button

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-02-17 18:50:23 -08:00
parent 93731e4ca9
commit 0c461023fe
2 changed files with 65 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/common/SVGPanZoom.svelte
+53 -32
View File
@@ -1,16 +1,22 @@
<script lang="ts">
import fileSaver from 'file-saver';
const { saveAs } = fileSaver;
import { toast } from 'svelte-sonner';
import panzoom, { type PanZoom } from 'panzoom';
import DOMPurify from 'dompurify';
import { onMount, getContext } from 'svelte';
const i18n = getContext('i18n');
import panzoom, { type PanZoom } from 'panzoom';
import DOMPurify from 'dompurify';
import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
import { copyToClipboard } from '$lib/utils';
import { toast } from 'svelte-sonner';
import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
import Tooltip from './Tooltip.svelte';
import Clipboard from '../icons/Clipboard.svelte';
import Reset from '../icons/Reset.svelte';
import ArrowDownTray from '../icons/ArrowDownTray.svelte';
export let className = '';
export let svg = '';
@@ -29,12 +35,16 @@
zoomSpeed: 0.065
});
}
function resetPanZoomViewport() {
console.log('Reset View');
const resetPanZoomViewport = () => {
instance.moveTo(0, 0);
instance.zoomAbs(0, 0, 1);
console.log(instance.getTransform());
}
};
const downloadAsSVG = () => {
const svgBlob = new Blob([svg], { type: 'image/svg+xml' });
saveAs(svgBlob, `diagram.svg`);
};
</script>
<div bind:this={sceneParentElement} class="relative {className}">
@@ -44,30 +54,41 @@
{#if content}
<div class=" absolute top-1 right-1">
<Tooltip content={$i18n.t('Copy to clipboard')}>
<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={() => {
copyToClipboard(content);
toast.success($i18n.t('Copied to clipboard'));
}}
>
<Clipboard className=" size-4" strokeWidth="1.5" />
</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 class="flex gap-1">
<Tooltip content={$i18n.t('Download as SVG')}>
<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={() => {
downloadAsSVG();
}}
>
<ArrowDownTray className=" size-4" />
</button>
</Tooltip>
<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();
}}
>
<Reset className=" size-4" />
</button>
</Tooltip>
<Tooltip content={$i18n.t('Copy to clipboard')}>
<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={() => {
copyToClipboard(content);
toast.success($i18n.t('Copied to clipboard'));
}}
>
<Clipboard className=" size-4" strokeWidth="1.5" />
</button>
</Tooltip>
</div>
</div>
{/if}
</div>