url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add SVG export option to canvas export modal

Browse Source 
Adds an SVG format choice below the Ultra quality option in the
export modal. PNG quality options still drive raster export; the
new SVG button exports a scalable vector via html-to-image toSvg.

Closes #211

ha-relevant: yes
This commit is contained in:
Pouzor
2026-06-28 23:52:28 +02:00
parent 23673eb0ca
commit 313feb8ceb
4 changed files with 103 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/modals/ExportModal.tsx
+23 -5
View File
@@ -2,7 +2,7 @@ import { useState } from 'react'
import { Download, Loader2 } from 'lucide-react'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { exportToPng, EXPORT_QUALITY_OPTIONS, type ExportQuality } from '@/utils/export'
import { exportToPng, exportToSvg, EXPORT_QUALITY_OPTIONS, type ExportQuality, type ExportFormat } from '@/utils/export'
interface ExportModalProps {
open: boolean
@@ -12,6 +12,7 @@ interface ExportModalProps {
export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
const [quality, setQuality] = useState<ExportQuality>('high')
const [format, setFormat] = useState<ExportFormat>('png')
const [exporting, setExporting] = useState(false)
const handleExport = async () => {
@@ -19,7 +20,11 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
if (!el) return
setExporting(true)
try {
await exportToPng(el, quality)
if (format === 'svg') {
await exportToSvg(el)
} else {
await exportToPng(el, quality)
}
onClose()
} finally {
setExporting(false)
@@ -30,7 +35,7 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
<DialogContent className="bg-[#161b22] border-border max-w-sm">
<DialogHeader>
<DialogTitle className="text-foreground">Export as PNG</DialogTitle>
<DialogTitle className="text-foreground">Export Canvas</DialogTitle>
</DialogHeader>
<div className="space-y-2 py-2">
@@ -38,10 +43,10 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
<button
key={opt.value}
type="button"
onClick={() => setQuality(opt.value)}
onClick={() => { setFormat('png'); setQuality(opt.value) }}
className={[
'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
quality === opt.value
format === 'png' && quality === opt.value
? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
: 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
].join(' ')}
@@ -50,6 +55,19 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
<span className="text-xs opacity-70">{opt.hint}</span>
</button>
))}
<button
type="button"
onClick={() => setFormat('svg')}
className={[
'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
format === 'svg'
? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
: 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
].join(' ')}
>
<span className="font-medium">SVG</span>
<span className="text-xs opacity-70">vector — scalable, small file</span>
</button>
</div>
<DialogFooter className="gap-2">
frontend/src/components/modals/__tests__/ExportModal.test.tsx
+26 -1
View File
@@ -3,8 +3,10 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { ExportModal } from '../ExportModal'
const mockExportToPng = vi.fn()
const mockExportToSvg = vi.fn()
vi.mock('@/utils/export', () => ({
exportToPng: (...args: unknown[]) => mockExportToPng(...args),
exportToSvg: (...args: unknown[]) => mockExportToSvg(...args),
EXPORT_QUALITY_OPTIONS: [
{ value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
{ value: 'high', label: 'High', pixelRatio: 2, hint: '2× — recommended' },
@@ -20,6 +22,7 @@ describe('ExportModal', () => {
beforeEach(() => {
vi.clearAllMocks()
mockExportToPng.mockResolvedValue(undefined)
mockExportToSvg.mockResolvedValue(undefined)
})
it('renders all three quality options', () => {
@@ -49,6 +52,28 @@ describe('ExportModal', () => {
await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'standard'))
})
it('renders an SVG option under the quality options', () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
expect(screen.getByText('SVG')).toBeInTheDocument()
})
it('selects SVG and calls exportToSvg on Download click', async () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByText('SVG').closest('button')!)
expect(screen.getByText('SVG').closest('button')!.className).toContain('border-[#00d4ff]')
fireEvent.click(screen.getByRole('button', { name: /download/i }))
await waitFor(() => expect(mockExportToSvg).toHaveBeenCalledWith(el))
expect(mockExportToPng).not.toHaveBeenCalled()
})
it('switches back to PNG when a quality option is clicked after SVG', () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByText('SVG').closest('button')!)
fireEvent.click(screen.getByText('Ultra').closest('button')!)
expect(screen.getByText('Ultra').closest('button')!.className).toContain('border-[#00d4ff]')
expect(screen.getByText('SVG').closest('button')!.className).not.toContain('border-[#00d4ff]')
})
it('closes after successful export', async () => {
render(<ExportModal open onClose={onClose} getElement={getElement} />)
fireEvent.click(screen.getByRole('button', { name: /download/i }))
@@ -69,6 +94,6 @@ describe('ExportModal', () => {
it('does not render when closed', () => {
render(<ExportModal open={false} onClose={onClose} getElement={getElement} />)
expect(screen.queryByText('Export as PNG')).not.toBeInTheDocument()
expect(screen.queryByText('Export Canvas')).not.toBeInTheDocument()
})
})
frontend/src/utils/__tests__/export.test.ts
+36 -2
View File
@@ -1,8 +1,12 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { exportToPng, EXPORT_QUALITY_OPTIONS } from '../export'
import { exportToPng, exportToSvg, EXPORT_QUALITY_OPTIONS } from '../export'
const mockToPng = vi.fn()
vi.mock('html-to-image', () => ({ toPng: (...args: unknown[]) => mockToPng(...args) }))
const mockToSvg = vi.fn()
vi.mock('html-to-image', () => ({
toPng: (...args: unknown[]) => mockToPng(...args),
toSvg: (...args: unknown[]) => mockToSvg(...args),
}))
describe('exportToPng', () => {
let el: HTMLElement
@@ -18,6 +22,7 @@ describe('exportToPng', () => {
)
appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n)
mockToPng.mockResolvedValue('data:image/png;base64,abc')
mockToSvg.mockResolvedValue('data:image/svg+xml;base64,abc')
})
afterEach(() => {
@@ -56,6 +61,35 @@ describe('exportToPng', () => {
})
})
describe('exportToSvg', () => {
let el: HTMLElement
let clickSpy: ReturnType<typeof vi.fn>
let createSpy: ReturnType<typeof vi.spyOn>
beforeEach(() => {
el = document.createElement('div')
clickSpy = vi.fn()
createSpy = vi.spyOn(document, 'createElement').mockReturnValue(
Object.assign(document.createElement('a'), { click: clickSpy }) as HTMLAnchorElement
)
mockToSvg.mockResolvedValue('data:image/svg+xml;base64,abc')
})
afterEach(() => {
createSpy.mockRestore()
})
it('calls toSvg with dark background color', async () => {
await exportToSvg(el)
expect(mockToSvg).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' }))
})
it('triggers a download', async () => {
await exportToSvg(el)
expect(clickSpy).toHaveBeenCalled()
})
})
describe('EXPORT_QUALITY_OPTIONS', () => {
it('has exactly three options', () => {
expect(EXPORT_QUALITY_OPTIONS).toHaveLength(3)
frontend/src/utils/export.ts
+18 -2
View File
@@ -1,6 +1,7 @@
import { toPng } from 'html-to-image'
import { toPng, toSvg } from 'html-to-image'
export type ExportQuality = 'standard' | 'high' | 'ultra'
export type ExportFormat = 'png' | 'svg'
export const EXPORT_QUALITY_OPTIONS: { value: ExportQuality; label: string; pixelRatio: number; hint: string }[] = [
{ value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
@@ -18,8 +19,23 @@ export async function exportToPng(element: HTMLElement, quality: ExportQuality =
} as Partial<CSSStyleDeclaration>,
})
triggerDownload(dataUrl, 'homelable-canvas.png')
}
export async function exportToSvg(element: HTMLElement): Promise<void> {
const dataUrl = await toSvg(element, {
backgroundColor: '#0d1117',
style: {
'--xy-controls-display': 'none',
} as Partial<CSSStyleDeclaration>,
})
triggerDownload(dataUrl, 'homelable-canvas.svg')
}
function triggerDownload(dataUrl: string, filename: string): void {
const link = document.createElement('a')
link.download = 'homelable-canvas.png'
link.download = filename
link.href = dataUrl
link.click()
}