pixelweaver 0.1.0

package/src/lib/ui/ExportDialog.svelte

@@ -0,0 +1,747 @@
+<script lang="ts">
+  /**
+   * ExportDialog -- modal for exporting the current project.
+   *
+   * Lists registered exporters from the plugin registry. Also provides
+   * a built-in PNG export (single frame composite) and spritesheet export
+   * using the spritesheet-export module. Downloads the result as a file.
+   */
+
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import { PixelBuffer } from '../canvas/pixel-buffer.js';
+  import { composite } from '../layers/compositor.js';
+  import { exporterRegistry } from '../core/registries.svelte.js';
+  import type { ExporterDefinition } from '../core/plugin-types.js';
+  import * as layerTree from '../layers/layer-tree.svelte.js';
+  import * as frameModel from '../animation/frame-model.svelte.js';
+  import { exportSpritesheet } from '../animation/spritesheet-export.js';
+  import type { LayoutType, MetadataFormat } from '../animation/spritesheet-export.js';
+  import { embedPngMetadata } from '../export/png-metadata.js';
+  import { downloadFile, downloadCompanionFiles } from '../export/download.js';
+
+  // --- Props ---
+
+  interface Props {
+    open: boolean;
+    onClose: () => void;
+  }
+
+  let { open, onClose }: Props = $props();
+
+  // --- Local state ---
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+
+  let filename = $state('sprite');
+  let scale = $state(1);
+  let selectedExporter = $state('__builtin_png');
+  let exporting = $state(false);
+  let errorMessage = $state('');
+
+  // Spritesheet-specific options
+  let spritesheetLayout = $state<LayoutType>('horizontal');
+  let gridColumns = $state(4);
+  let spritesheetPadding = $state(0);
+  let metadataFormat = $state<MetadataFormat>('pixelweaver');
+  let includeMetadata = $state(false);
+
+  const scaleOptions = [1, 2, 4, 8];
+  const paddingOptions = [0, 1, 2, 4];
+  const metadataFormatOptions: { value: MetadataFormat; label: string }[] = [
+    { value: 'pixelweaver', label: 'PixelWeaver' },
+    { value: 'texturepacker', label: 'TexturePacker' },
+    { value: 'aseprite', label: 'Aseprite' },
+    { value: 'css', label: 'CSS' },
+  ];
+
+  let isSpritesheet = $derived(selectedExporter === '__builtin_spritesheet');
+
+  // --- Spritesheet preview ---
+
+  let previewCanvasEl: HTMLCanvasElement | undefined = $state();
+  let previewDimensions = $state('');
+
+  // Reactively regenerate the spritesheet preview whenever relevant options change
+  $effect(() => {
+    if (!isSpritesheet || !previewCanvasEl) {
+      previewDimensions = '';
+      return;
+    }
+
+    // Read reactive dependencies (layout, padding, columns)
+    const layout = spritesheetLayout;
+    const padding = spritesheetPadding;
+    const columns = gridColumns;
+
+    const frames = frameModel.getFrames();
+    if (frames.length === 0) {
+      previewDimensions = '';
+      return;
+    }
+
+    const layers = layerTree.getLayers();
+    const options: import('../animation/spritesheet-export.js').ExportOptions = {
+      layout,
+      padding,
+      metadataFormat,
+      ...(layout === 'grid' ? { columns } : {}),
+    };
+
+    try {
+      const { image } = exportSpritesheet(frames, layers, options);
+
+      // Determine scale to fit within a max preview area (max 200px tall, max 380px wide)
+      const maxW = 380;
+      const maxH = 200;
+      const scaleX = maxW / image.width;
+      const scaleY = maxH / image.height;
+      const fitScale = Math.min(scaleX, scaleY, 1);
+      // For pixel art, round to integer multiples when possible for crisp rendering
+      const displayW = Math.max(1, Math.round(image.width * fitScale));
+      const displayH = Math.max(1, Math.round(image.height * fitScale));
+
+      const canvas = previewCanvasEl;
+      canvas.width = displayW;
+      canvas.height = displayH;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.imageSmoothingEnabled = false;
+
+      const imageData = image.toImageData();
+      const tmpCanvas = new OffscreenCanvas(image.width, image.height);
+      const tmpCtx = tmpCanvas.getContext('2d');
+      if (!tmpCtx) return;
+      tmpCtx.putImageData(imageData, 0, 0);
+
+      ctx.clearRect(0, 0, displayW, displayH);
+      ctx.drawImage(tmpCanvas, 0, 0, displayW, displayH);
+
+      previewDimensions = `${String(image.width)} x ${String(image.height)} px`;
+    } catch {
+      previewDimensions = '';
+    }
+  });
+
+  // --- Built-in export options ---
+  // These are always available regardless of registered exporters.
+
+  interface ExportOption {
+    id: string;
+    label: string;
+    extension: string;
+    builtin: boolean;
+    exporter?: ExporterDefinition;
+  }
+
+  // Derive available export options: built-ins + registered exporters
+  let exportOptions = $derived.by(() => {
+    const options: ExportOption[] = [
+      { id: '__builtin_png', label: 'PNG Image (current frame)', extension: 'png', builtin: true },
+      { id: '__builtin_spritesheet', label: 'Spritesheet (all frames)', extension: 'png', builtin: true },
+    ];
+
+    // Add registered exporters from plugins
+    for (const [name, def] of exporterRegistry.getAll()) {
+      options.push({
+        id: name,
+        label: `${def.label} (.${def.extension})`,
+        extension: def.extension,
+        builtin: false,
+        exporter: def,
+      });
+    }
+
+    return options;
+  });
+
+  let selectedOption = $derived(
+    exportOptions.find((o) => o.id === selectedExporter) ?? exportOptions[0]
+  );
+
+  // --- Utility: PixelBuffer -> scaled PNG Blob via OffscreenCanvas ---
+
+  function pixelBufferToBlob(buffer: PixelBuffer, scaleFactor: number): Promise<Blob> {
+    const w = buffer.width * scaleFactor;
+    const h = buffer.height * scaleFactor;
+    const canvas = new OffscreenCanvas(w, h);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return Promise.reject(new Error('Failed to get 2d context'));
+
+    // Disable smoothing for crisp pixel art scaling
+    ctx.imageSmoothingEnabled = false;
+
+    // Draw the original-size image data
+    const imageData = buffer.toImageData();
+    const tmpCanvas = new OffscreenCanvas(buffer.width, buffer.height);
+    const tmpCtx = tmpCanvas.getContext('2d');
+    if (!tmpCtx) return Promise.reject(new Error('Failed to get tmp 2d context'));
+    tmpCtx.putImageData(imageData, 0, 0);
+
+    // Scale up by drawing the small canvas onto the larger one
+    ctx.drawImage(tmpCanvas, 0, 0, w, h);
+
+    return canvas.convertToBlob({ type: 'image/png' });
+  }
+
+  // --- Export handlers ---
+
+  async function handleExport() {
+    if (exporting) return;
+    exporting = true;
+    errorMessage = '';
+
+    try {
+      const option = selectedOption;
+      let saved = false;
+
+      if (option.id === '__builtin_png') {
+        saved = await exportCurrentFramePng();
+      } else if (option.id === '__builtin_spritesheet') {
+        saved = await exportSpritesheetPng();
+      } else if (option.exporter) {
+        saved = await exportWithPlugin(option.exporter, option.extension);
+      }
+
+      // Only close the dialog if the export actually completed (user may
+      // have cancelled the native save dialog on desktop).
+      if (saved) onClose();
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : 'Export failed.';
+    } finally {
+      exporting = false;
+    }
+  }
+
+  /** Export the current frame as a composited PNG. Returns false if cancelled. */
+  async function exportCurrentFramePng(): Promise<boolean> {
+    const frames = frameModel.getFrames();
+    if (frames.length === 0) throw new Error('No frames to export.');
+
+    const frame = frameModel.getCurrentFrame();
+    const layers = layerTree.getLayers();
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+
+    const composited = composite(layers, frame.pixelData, w, h);
+    let blob = await pixelBufferToBlob(composited, scale);
+    blob = await embedPngMetadata(blob, {
+      Software: 'PixelWeaver',
+      Description: 'Single frame export',
+      Source: `${String(w)}x${String(h)}`,
+    });
+    return downloadFile({
+      blob,
+      filename: `${filename}.png`,
+      filterName: 'PNG Image',
+      filterExtensions: ['png'],
+    });
+  }
+
+  /** Export all frames as a spritesheet PNG with configurable options. Returns false if cancelled. */
+  async function exportSpritesheetPng(): Promise<boolean> {
+    const frames = frameModel.getFrames();
+    if (frames.length === 0) throw new Error('No frames to export.');
+
+    const layers = layerTree.getLayers();
+    const options = {
+      layout: spritesheetLayout,
+      padding: spritesheetPadding,
+      metadataFormat: metadataFormat,
+      ...(spritesheetLayout === 'grid' ? { columns: gridColumns } : {}),
+    };
+
+    const { image, metadata } = exportSpritesheet(frames, layers, options);
+
+    let blob = await pixelBufferToBlob(image, scale);
+    blob = await embedPngMetadata(blob, {
+      Software: 'PixelWeaver',
+      Description: metadata,
+      Source: `${String(canvasState.canvasWidth)}x${String(canvasState.canvasHeight)}`,
+    });
+
+    if (includeMetadata) {
+      // CSS metadata is plain text, all others are JSON
+      const ext = metadataFormat === 'css' ? 'css' : 'json';
+      const mimeType = metadataFormat === 'css' ? 'text/css' : 'application/json';
+      const metaBlob = new Blob([metadata], { type: mimeType });
+      return downloadCompanionFiles([
+        { blob, filename: `${filename}.png`, filterName: 'PNG Image', filterExtensions: ['png'] },
+        { blob: metaBlob, filename: `${filename}.${ext}`, filterName: `${ext.toUpperCase()} File`, filterExtensions: [ext] },
+      ]);
+    }
+    return downloadFile({
+      blob,
+      filename: `${filename}.png`,
+      filterName: 'PNG Image',
+      filterExtensions: ['png'],
+    });
+  }
+
+  /** Export using a registered plugin exporter. Returns false if cancelled. */
+  async function exportWithPlugin(exporter: ExporterDefinition, extension: string): Promise<boolean> {
+    const frames = frameModel.getFrames();
+    const layers = layerTree.getLayers();
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+
+    // Build the ExportContext with available data
+    const context = {
+      canvasWidth: w,
+      canvasHeight: h,
+      frames,
+      layers,
+      scale,
+      filename,
+      currentFrame: frameModel.getCurrentFrame(),
+      currentFrameIndex: frameModel.getCurrentFrameIndex(),
+    };
+
+    const result = await exporter.export(context);
+
+    let blob: Blob;
+    if (result instanceof Blob) {
+      blob = result;
+    } else {
+      blob = new Blob([result], { type: exporter.mimeType });
+    }
+
+    return downloadFile({
+      blob,
+      filename: `${filename}.${extension}`,
+      filterName: `${extension.toUpperCase()} File`,
+      filterExtensions: [extension],
+    });
+  }
+
+  // Reset form values when dialog opens
+  $effect(() => {
+    if (open) {
+      filename = 'sprite';
+      scale = 1;
+      selectedExporter = '__builtin_png';
+      errorMessage = '';
+      exporting = false;
+      spritesheetLayout = 'horizontal';
+      gridColumns = 4;
+      spritesheetPadding = 0;
+      metadataFormat = 'pixelweaver';
+      includeMetadata = false;
+    }
+  });
+
+  // Sync native <dialog> open state with the `open` prop.
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  // Close on backdrop click: native <dialog> fires clicks on itself for the
+  // backdrop area (child content clicks have a different target).
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      onClose();
+    }
+  }
+</script>
+
+<!--
+  Native <dialog> handles focus trap, Escape (cancel event), and backdrop.
+  onclose fires on both user Escape and programmatic close -- onClose is
+  idempotent, so the echo from our own close() call is harmless.
+-->
+<dialog
+  bind:this={dialogEl}
+  class="pw-dialog"
+  onclick={handleDialogClick}
+  onclose={onClose}
+>
+  {#if open}
+    <div class="modal">
+      <h2 class="modal-title">Export</h2>
+
+      <!-- Format selector -->
+      <div class="form-row">
+        <label class="form-label" for="ex-format">Format</label>
+        <select
+          id="ex-format"
+          class="form-select"
+          bind:value={selectedExporter}
+        >
+          {#each exportOptions as option (option.id)}
+            <option value={option.id}>{option.label}</option>
+          {/each}
+        </select>
+      </div>
+
+      <!-- Filename -->
+      <div class="form-row">
+        <label class="form-label" for="ex-filename">Filename</label>
+        <div class="filename-group">
+          <input
+            id="ex-filename"
+            class="form-input"
+            type="text"
+            bind:value={filename}
+          />
+          <span class="form-ext">.{selectedOption.extension}</span>
+        </div>
+      </div>
+
+      <!-- Scale -->
+      <div class="form-row">
+        <label class="form-label">Scale</label>
+        <div class="scale-group">
+          {#each scaleOptions as s (s)}
+            <button
+              class="scale-btn"
+              class:scale-btn--active={scale === s}
+              onclick={() => scale = s}
+            >{s}x</button>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Spritesheet options (only shown for spritesheet export) -->
+      {#if isSpritesheet}
+        <div class="form-row">
+          <label class="form-label" for="ex-layout">Layout</label>
+          <select
+            id="ex-layout"
+            class="form-select"
+            bind:value={spritesheetLayout}
+          >
+            <option value="horizontal">Horizontal</option>
+            <option value="grid">Grid</option>
+            <option value="atlas">Atlas</option>
+          </select>
+        </div>
+
+        {#if spritesheetLayout === 'grid'}
+          <div class="form-row">
+            <label class="form-label" for="ex-columns">Columns</label>
+            <input
+              id="ex-columns"
+              class="form-input columns-input"
+              type="number"
+              min="1"
+              bind:value={gridColumns}
+            />
+          </div>
+        {/if}
+
+        <div class="form-row">
+          <label class="form-label" for="ex-padding">Padding</label>
+          <select
+            id="ex-padding"
+            class="form-select"
+            bind:value={spritesheetPadding}
+          >
+            {#each paddingOptions as p (p)}
+              <option value={p}>{p}px</option>
+            {/each}
+          </select>
+        </div>
+
+        <div class="form-row">
+          <label class="form-label" for="ex-meta-format">Metadata</label>
+          <select
+            id="ex-meta-format"
+            class="form-select"
+            bind:value={metadataFormat}
+          >
+            {#each metadataFormatOptions as fmt (fmt.value)}
+              <option value={fmt.value}>{fmt.label}</option>
+            {/each}
+          </select>
+        </div>
+
+        <div class="form-row">
+          <label class="form-label">&nbsp;</label>
+          <label class="checkbox-label">
+            <input
+              type="checkbox"
+              class="form-checkbox"
+              bind:checked={includeMetadata}
+            />
+            Include metadata file
+          </label>
+        </div>
+      {/if}
+
+      <!-- Spritesheet preview (shown when spritesheet format is selected) -->
+      {#if isSpritesheet}
+        <div class="preview-section">
+          <canvas
+            bind:this={previewCanvasEl}
+            class="preview-canvas"
+          ></canvas>
+          {#if previewDimensions}
+            <span class="preview-dimensions">{previewDimensions}</span>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Error message -->
+      {#if errorMessage}
+        <div class="error-msg">{errorMessage}</div>
+      {/if}
+
+      <!-- Actions -->
+      <div class="modal-actions">
+        <button class="btn btn--cancel" onclick={onClose}>Cancel</button>
+        <button
+          class="btn btn--primary"
+          onclick={handleExport}
+          disabled={exporting || !filename.trim()}
+        >
+          {exporting ? 'Exporting...' : 'Export'}
+        </button>
+      </div>
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  /* Reset native <dialog> UA styles so it fills the viewport and lets us
+     center the inner .modal via flexbox. The backdrop is styled separately. */
+  .pw-dialog {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+    width: 100vw;
+    height: 100vh;
+    color: inherit;
+  }
+
+  .pw-dialog[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pw-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    box-shadow: var(--shadow-md);
+    width: 440px;
+    max-width: 90vw;
+    padding: 24px;
+    color: var(--text-primary);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+  }
+
+  /* Form layout */
+  .form-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+
+  .form-label {
+    width: 80px;
+    flex-shrink: 0;
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+  }
+
+  .form-input {
+    flex: 1;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    padding: 6px 8px;
+  }
+
+  .form-input:focus-visible {
+    border-color: var(--accent);
+  }
+
+  .form-select {
+    flex: 1;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    padding: 6px 8px;
+    cursor: pointer;
+  }
+
+  .form-select:focus-visible {
+    border-color: var(--accent);
+  }
+
+  /* Filename group: input + extension label */
+  .filename-group {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .form-ext {
+    font-size: var(--text-base);
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  /* Scale buttons */
+  .scale-group {
+    display: flex;
+    gap: 6px;
+  }
+
+  .scale-btn {
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+    padding: 4px 12px;
+    cursor: pointer;
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .scale-btn:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--accent);
+  }
+
+  .scale-btn--active {
+    background: var(--accent);
+    color: #ffffff;
+    border-color: var(--accent);
+  }
+
+  .scale-btn--active:hover {
+    background: var(--accent-hover);
+  }
+
+  /* Columns input -- narrower than full-width */
+  .columns-input {
+    width: 80px;
+    flex: none;
+  }
+
+  /* Checkbox row */
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+
+  .form-checkbox {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--accent);
+    cursor: pointer;
+  }
+
+  /* Spritesheet preview */
+  .preview-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 14px;
+    padding: 12px;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+  }
+
+  .preview-canvas {
+    /* Checkerboard background to show transparency */
+    background-image:
+      linear-gradient(45deg, var(--bg-primary) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--bg-primary) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--bg-primary) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--bg-primary) 75%);
+    background-size: 8px 8px;
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+    image-rendering: pixelated;
+  }
+
+  .preview-dimensions {
+    font-size: var(--text-base);
+    color: var(--text-muted);
+  }
+
+  /* Error message */
+  .error-msg {
+    background: rgba(255, 74, 106, 0.1);
+    border: 1px solid var(--error);
+    border-radius: var(--radius-md);
+    color: var(--error);
+    font-size: var(--text-base);
+    padding: 8px 10px;
+    margin-bottom: 12px;
+  }
+
+  /* Action buttons */
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--text-lg);
+    padding: 8px 20px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .btn--cancel {
+    background: var(--bg-toolbar);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+  }
+
+  .btn--cancel:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .btn--primary {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .btn--primary:hover:not(:disabled) {
+    background: var(--accent-hover);
+  }
+</style>