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

Clicking Export PNG now opens a modal with three quality presets:
- Standard (1× pixel ratio) — small file
- High (2×, default) — recommended for sharing
- Ultra (4×) — print quality

Adds ExportModal component, updates exportToPng() to accept a quality
param, and wires the modal into App.tsx replacing the direct export call.
This commit is contained in:
Pouzor
2026-04-20 11:40:16 +02:00
parent 7608d07255
commit 7e08a85f73
5 changed files with 237 additions and 14 deletions
+11 -6
View File
@@ -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>,
})