Merge pull request #89 from Pouzor/feat/export-quality

feat: PNG export quality selector (standard / high / ultra)

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { applyDagreLayout } from '@/utils/layout'
 import { serializeNode, serializeEdge, deserializeApiNode, deserializeApiEdge, type ApiNode, type ApiEdge } from '@/utils/canvasSerializer'
 import { generateUUID } from '@/utils/uuid'
 import { generateMarkdownTable } from '@/utils/exportMarkdown'
-import { exportToPng } from '@/utils/export'
+import { ExportModal } from '@/components/modals/ExportModal'
 import { exportCanvasToYaml, downloadYaml } from '@/utils/exportYaml'
 import { parseYamlToCanvas } from '@/utils/importYaml'
 import { TooltipProvider } from '@/components/ui/tooltip'
@@ -53,6 +53,7 @@ export default function App() {
   const [pendingConnection, setPendingConnection] = useState<Connection | null>(null)
   const [editEdgeId, setEditEdgeId] = useState<string | null>(null)
   const [scanConfigOpen, setScanConfigOpen] = useState(false)
+  const [exportModalOpen, setExportModalOpen] = useState(false)
 
   // Declare handleSave before the Ctrl+S effect so it is in scope
   const handleSave = useCallback(async () => {
@@ -305,15 +306,10 @@ export default function App() {
     }
   }, [nodes, edges, snapshotHistory, loadCanvas, markUnsaved])
 
-  const handleExport = useCallback(async () => {
+  const handleExport = useCallback(() => {
     const el = canvasRef.current?.querySelector<HTMLElement>('.react-flow')
     if (!el) { toast.error('Canvas not ready'); return }
-    try {
-      await exportToPng(el)
-      toast.success('Exported as PNG')
-    } catch {
-      toast.error('Export failed')
-    }
+    setExportModalOpen(true)
   }, [])
 
   const handleEdgeConnect = useCallback((connection: Connection) => {
@@ -532,6 +528,12 @@ export default function App() {
         />
         <ShortcutsModal open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
 
+        <ExportModal
+          open={exportModalOpen}
+          onClose={() => setExportModalOpen(false)}
+          getElement={() => canvasRef.current?.querySelector<HTMLElement>('.react-flow') ?? null}
+        />
+
         <Toaster theme="dark" position="bottom-right" />
       </ReactFlowProvider>
     </TooltipProvider>

frontend/src/components/modals/ExportModal.tsx

@@ -0,0 +1,71 @@
+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'
+
+interface ExportModalProps {
+  open: boolean
+  onClose: () => void
+  getElement: () => HTMLElement | null
+}
+
+export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
+  const [quality, setQuality] = useState<ExportQuality>('high')
+  const [exporting, setExporting] = useState(false)
+
+  const handleExport = async () => {
+    const el = getElement()
+    if (!el) return
+    setExporting(true)
+    try {
+      await exportToPng(el, quality)
+      onClose()
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  return (
+    <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>
+        </DialogHeader>
+
+        <div className="space-y-2 py-2">
+          {EXPORT_QUALITY_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => 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
+                  ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
+                  : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
+              ].join(' ')}
+            >
+              <span className="font-medium">{opt.label}</span>
+              <span className="text-xs opacity-70">{opt.hint}</span>
+            </button>
+          ))}
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="ghost" onClick={onClose} disabled={exporting}>Cancel</Button>
+          <Button
+            onClick={handleExport}
+            disabled={exporting}
+            style={{ background: '#00d4ff', color: '#0d1117' }}
+          >
+            {exporting
+              ? <><Loader2 size={14} className="animate-spin mr-1.5" />Exporting…</>
+              : <><Download size={14} className="mr-1.5" />Download</>
+            }
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/src/components/modals/__tests__/ExportModal.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { ExportModal } from '../ExportModal'
+
+const mockExportToPng = vi.fn()
+vi.mock('@/utils/export', () => ({
+  exportToPng: (...args: unknown[]) => mockExportToPng(...args),
+  EXPORT_QUALITY_OPTIONS: [
+    { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
+    { value: 'high',     label: 'High',     pixelRatio: 2, hint: '2× — recommended' },
+    { value: 'ultra',    label: 'Ultra',    pixelRatio: 4, hint: '4× — print quality, large file' },
+  ],
+}))
+
+const el = document.createElement('div')
+const getElement = () => el
+const onClose = vi.fn()
+
+describe('ExportModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockExportToPng.mockResolvedValue(undefined)
+  })
+
+  it('renders all three quality options', () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    expect(screen.getByText('Standard')).toBeInTheDocument()
+    expect(screen.getByText('High')).toBeInTheDocument()
+    expect(screen.getByText('Ultra')).toBeInTheDocument()
+  })
+
+  it('selects High by default', () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    const highBtn = screen.getByText('High').closest('button')!
+    expect(highBtn.className).toContain('border-[#00d4ff]')
+  })
+
+  it('changes selection when another option is clicked', () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    fireEvent.click(screen.getByText('Ultra').closest('button')!)
+    expect(screen.getByText('Ultra').closest('button')!.className).toContain('border-[#00d4ff]')
+    expect(screen.getByText('High').closest('button')!.className).not.toContain('border-[#00d4ff]')
+  })
+
+  it('calls exportToPng with selected quality on Download click', async () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    fireEvent.click(screen.getByText('Standard').closest('button')!)
+    fireEvent.click(screen.getByRole('button', { name: /download/i }))
+    await waitFor(() => expect(mockExportToPng).toHaveBeenCalledWith(el, 'standard'))
+  })
+
+  it('closes after successful export', async () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    fireEvent.click(screen.getByRole('button', { name: /download/i }))
+    await waitFor(() => expect(onClose).toHaveBeenCalled())
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    render(<ExportModal open onClose={onClose} getElement={getElement} />)
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('does not call exportToPng when getElement returns null', async () => {
+    render(<ExportModal open onClose={onClose} getElement={() => null} />)
+    fireEvent.click(screen.getByRole('button', { name: /download/i }))
+    await waitFor(() => expect(mockExportToPng).not.toHaveBeenCalled())
+  })
+
+  it('does not render when closed', () => {
+    render(<ExportModal open={false} onClose={onClose} getElement={getElement} />)
+    expect(screen.queryByText('Export as PNG')).not.toBeInTheDocument()
+  })
+})

frontend/src/utils/__tests__/export.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { exportToPng, EXPORT_QUALITY_OPTIONS } from '../export'
+
+const mockToPng = vi.fn()
+vi.mock('html-to-image', () => ({ toPng: (...args: unknown[]) => mockToPng(...args) }))
+
+describe('exportToPng', () => {
+  let el: HTMLElement
+  let clickSpy: ReturnType<typeof vi.fn>
+  let appendSpy: ReturnType<typeof vi.spyOn>
+  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
+    )
+    appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n)
+    mockToPng.mockResolvedValue('data:image/png;base64,abc')
+  })
+
+  afterEach(() => {
+    createSpy.mockRestore()
+    appendSpy.mockRestore()
+  })
+
+  it('calls toPng with pixelRatio 1 for standard quality', async () => {
+    await exportToPng(el, 'standard')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 1 }))
+  })
+
+  it('calls toPng with pixelRatio 2 for high quality', async () => {
+    await exportToPng(el, 'high')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 }))
+  })
+
+  it('calls toPng with pixelRatio 4 for ultra quality', async () => {
+    await exportToPng(el, 'ultra')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 4 }))
+  })
+
+  it('defaults to high quality when no quality arg given', async () => {
+    await exportToPng(el)
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 }))
+  })
+
+  it('triggers a download with the correct filename', async () => {
+    await exportToPng(el, 'high')
+    expect(clickSpy).toHaveBeenCalled()
+  })
+
+  it('passes dark background color', async () => {
+    await exportToPng(el, 'standard')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' }))
+  })
+})
+
+describe('EXPORT_QUALITY_OPTIONS', () => {
+  it('has exactly three options', () => {
+    expect(EXPORT_QUALITY_OPTIONS).toHaveLength(3)
+  })
+
+  it('options are standard, high, ultra in order', () => {
+    expect(EXPORT_QUALITY_OPTIONS.map((o) => o.value)).toEqual(['standard', 'high', 'ultra'])
+  })
+
+  it('pixel ratios are 1, 2, 4', () => {
+    expect(EXPORT_QUALITY_OPTIONS.map((o) => o.pixelRatio)).toEqual([1, 2, 4])
+  })
+})

frontend/src/utils/export.ts

@@ -1,14 +1,19 @@
 import { toPng } from 'html-to-image'
 
-/**
- * Export the React Flow canvas as a PNG and trigger a browser download.
- * Pass the `.react-flow` wrapper element.
- */
-export async function exportToPng(element: HTMLElement): Promise<void> {
+export type ExportQuality = 'standard' | 'high' | 'ultra'
+
+export const EXPORT_QUALITY_OPTIONS: { value: ExportQuality; label: string; pixelRatio: number; hint: string }[] = [
+  { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
+  { value: 'high',     label: 'High',     pixelRatio: 2, hint: '2× — recommended' },
+  { value: 'ultra',    label: 'Ultra',    pixelRatio: 4, hint: '4× — print quality, large file' },
+]
+
+export async function exportToPng(element: HTMLElement, quality: ExportQuality = 'high'): Promise<void> {
+  const option = EXPORT_QUALITY_OPTIONS.find((o) => o.value === quality) ?? EXPORT_QUALITY_OPTIONS[1]
   const dataUrl = await toPng(element, {
     backgroundColor: '#0d1117',
+    pixelRatio: option.pixelRatio,
     style: {
-      // Exclude controls from the export
       '--xy-controls-display': 'none',
     } as Partial<CSSStyleDeclaration>,
   })