Proces eksportu
Siedem kroków panelu eksportu, targety (scena/selekcja/grupa/warstwa/workspace), batch i ZIP, szablony nazw i anulowanie.
Siedem kroków#
Panel eksportu prowadzi przez workflow:
1. Target → 2. Format → 3. Dimensions → 4. Background → 5. Advanced → 6. Preview → 7. Export
| Krok | Co wybierasz |
|---|---|
| 1. Target | Scena, selekcja, grupa, warstwa, obiekty, workspace |
| 2. Format | SVG, PNG, JPEG, BMP 24, BMP 32 |
| 3. Dimensions | Skala 0.5×–4× lub custom + fit mode |
| 4. Background | Tło dokumentu, własny HEX, przezroczystość |
| 5. Advanced | Marginesy, trim, includeHidden, clip, minifySvg, jakość JPEG |
| 6. Preview | Podgląd + estymacja rozmiaru i RAM |
| 7. Export | Pojedynczy plik albo batch/ZIP |
Targety eksportu#
Pipeline wycina scope z zachowaniem transformacji rodziców i kolejności rysowania:
scene— cały dokument,selection— zaznaczone obiekty,group— grupa z dziećmi,layer— warstwa,objects— lista id,workspace— nazwany region.
JSON snapshot → ekstrakcja scope → tight bounding box → viewport
→ SVG serializer lub rasteryzator 4× subpixel → enkoder → plik
Batch i ZIP#
Batch export przechodzi po wielu targetach (np. wszystkie warstwy albo wszystkie workspace'y) i generuje komplet plików:
- per-item overrides (format, skala, tło osobno dla każdego elementu),
- raport
BatchExportReportz wynikami i błędami, - archiwum PKZIP z CRC-32 i automatycznym wyborem
STORE/DEFLATE(zero zależności).
Przykład: komplet kart social#
- Target:
workspace. - Zaznacz wszystkie workspace'y (
og,twitter,square). - Format: PNG, skala 2×.
- Eksport → ZIP z trzema plikami.
Szablony nazw plików#
filename.ts rozwija bezpieczne szablony:
{document}_{object}_{scale}
{layer}_{width}x{height}
{format}_{index}
| Token | Wartość |
|---|---|
{document} | Nazwa dokumentu |
{object} | Id obiektu |
{layer} | Nazwa warstwy |
{scale} | Skala (np. 2x) |
{width}, {height} | Wymiary |
{format} | Rozszerzenie |
{index} | Indeks w batchu |
Kolizje nazw są deduplikowane case-insensitive.
Anulowanie#
Eksport przyjmuje AbortSignal:
- anulowanie natychmiast terminuje workera w locie,
- UI pozostaje responsywne,
- następna operacja dostaje czystego workera.
const controller = new AbortController()
const result = await exportService.export(snapshot, options, controller.signal)
cancelButton.onclick = () => controller.abort()
Niezmienne snapshoty#
Każdy eksport pracuje na niezmiennym snapshocie źródła — edycja JSON w trakcie eksportu nie zmienia pliku wyjściowego. To izolacja: snapshot jest zamrażany w momencie kliknięcia.
Walidacja przed eksportem#
validation.ts robi strict preflight:
- wymiary i liczba pikseli,
- budżet pamięci,
- kolory HEX,
- jakość JPEG,
- referencje targetów.
Błąd preflight zatrzymuje eksport, zanim worker zostanie uruchomiony.
Przykład: wywołanie serwisu#
import { exportService } from '@/export/exportService'
const report = await exportService.exportBatch(
sourceSnapshot,
[
{ target: { type: 'workspace', id: 'og' }, format: 'png', scale: 2 },
{ target: { type: 'workspace', id: 'twitter' }, format: 'png', scale: 2 },
{ target: { type: 'layer', id: 'wm' }, format: 'svg', options: { minifySvg: true } }
],
{ filenameTemplate: '{document}_{layer}_{scale}', zip: true },
controller.signal
)