feat: add export-as-image with format, scale, and background options

New ExportDialog component with scope (selection/all), filename,
format (PNG/JPEG/WebP), quality slider, scale multiplier, and
background color picker. Wired into Toolbar and Editor.
This commit is contained in:
Hiren Kangad
2026-03-10 19:16:05 +05:30
parent c126885e53
commit 51e53a323b
4 changed files with 402 additions and 0 deletions
+12
View File
@@ -33,6 +33,7 @@ interface ToolbarProps {
showLayers?: boolean;
onToggleHelp?: () => void;
onMmImport?: () => void;
onExport?: () => void;
boardName?: string;
}
@@ -148,6 +149,7 @@ export default function Toolbar({
showLayers,
onToggleHelp,
onMmImport,
onExport,
}: ToolbarProps) {
const showStroke = activeTool === ToolType.PEN;
const showFontSize = activeTool === ToolType.TEXT;
@@ -297,6 +299,16 @@ export default function Toolbar({
</ActionBtn>
)}
{/* Export */}
{onExport && (
<ActionBtn onClick={onExport} title="Export as image (Ctrl+Shift+E)">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
<path d="M2 9v3h10V9" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7 2v7M4 6l3 3 3-3" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</ActionBtn>
)}
{/* Spacer */}
<div style={{ flex: 1 }} />