UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-02-22 21:32:32 +00:00
Code Issues Actions 4 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/lib/components/common/SVGPanZoom.svelte
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>

14
src/lib/components/icons/Reset.svelte
View File

@ -1,9 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '2';
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class={className}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="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"
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>