From 0c461023fe5d7217cf40e4cb06576a00be48002b Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 17 Feb 2025 18:50:23 -0800
Subject: [PATCH] enh: svg diagram download button

---
 src/lib/components/common/SVGPanZoom.svelte | 85 +++++++++++++--------
 src/lib/components/icons/Reset.svelte       | 14 +++-
 2 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/common/SVGPanZoom.svelte b/src/lib/components/common/SVGPanZoom.svelte
index 9a2b0fd6e..e32e6ee92 100644
--- a/src/lib/components/common/SVGPanZoom.svelte
+++ b/src/lib/components/common/SVGPanZoom.svelte
@@ -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>
diff --git a/src/lib/components/icons/Reset.svelte b/src/lib/components/icons/Reset.svelte
index c1263fd38..43a8c7a72 100644
--- a/src/lib/components/icons/Reset.svelte
+++ b/src/lib/components/icons/Reset.svelte
@@ -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>