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:
@@ -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>,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user