File size: 2,920 Bytes
c59fd93 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <script lang="ts">
import { Download } from '@lucide/svelte';
import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
import ZoomInIcon from '@lucide/svelte/icons/zoom-in';
import ZoomOutIcon from '@lucide/svelte/icons/zoom-out';
import { ICON_CLASS_DEFAULT } from '$lib/constants';
interface Props {
scale: number;
svgHtml: string;
onZoomIn: () => void;
onZoomOut: () => void;
onResetView: () => void;
}
let { onResetView, onZoomIn, onZoomOut, scale, svgHtml }: Props = $props();
function downloadSvg() {
if (!svgHtml) return;
const blob = new Blob([svgHtml], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'diagram.svg';
a.click();
URL.revokeObjectURL(url);
}
</script>
<div
class="mermaid-preview-controls absolute bottom-8 flex shrink-0 items-center justify-center p-3"
>
<div class="mermaid-preview-controls-inner flex items-center gap-1 rounded-lg bg-muted p-1">
<button
aria-label="Zoom out"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={onZoomOut}
title="Zoom out"
>
<ZoomOutIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
<span
class="mermaid-preview-zoom-label min-w-[3.5rem] px-0.5 text-center text-xs font-medium text-muted-foreground tabular-nums select-none"
>{Math.round(scale * 100)}%</span
>
<button
aria-label="Zoom in"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={onZoomIn}
title="Zoom in"
>
<ZoomInIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
<button
aria-label="Reset view"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={onResetView}
title="Reset view"
>
<RotateCcwIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
<button
aria-label="Download SVG"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={downloadSvg}
title="Download SVG"
>
<Download class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
</div>
</div>
|