pixelweaver 0.1.0

package/src/lib/variants/BisectionExportDialog.svelte

@@ -0,0 +1,500 @@
+<script lang="ts">
+  /**
+   * BisectionExportDialog -- modal preview for variant atlas export.
+   *
+   * Shows a preview of the generated atlas (rows = variants, cols = frames)
+   * with a checkerboard transparency background. The user can choose a scale
+   * factor before confirming the export, which triggers PNG + JSON metadata
+   * downloads.
+   */
+
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import * as layerTree from '../layers/layer-tree.svelte.js';
+  import * as frameModel from '../animation/frame-model.svelte.js';
+  import * as variantState from './variant-state.svelte.js';
+  import { exportVariantAtlas } from './bisection-export.js';
+  import { notificationState } from '../core/notification-state.svelte.js';
+  import { downloadCompanionFiles } from '../export/download.js';
+  import type { Layer } from '../layers/layer-types.js';
+
+  /** Recursively find a layer's name by ID in the tree. */
+  function findGroupName(id: string, tree: Layer[]): string | null {
+    for (const layer of tree) {
+      if (layer.id === id) return layer.name;
+      if (layer.type === 'group' && layer.children) {
+        const found = findGroupName(id, layer.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  // --- Props ---
+
+  interface Props {
+    open: boolean;
+    groupId: string | null;
+    onClose: () => void;
+  }
+
+  let { open, groupId, onClose }: Props = $props();
+
+  // --- Local state ---
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+  let previewCanvasEl: HTMLCanvasElement | undefined = $state();
+  let scale = $state(1);
+  let exporting = $state(false);
+  let errorMessage = $state('');
+
+  // Atlas metadata computed during preview generation, reused for export
+  let atlasWidth = $state(0);
+  let atlasHeight = $state(0);
+  let variantCount = $state(0);
+  let frameCount = $state(0);
+  let groupName = $state('');
+
+  const scaleOptions = [1, 2, 4];
+
+  // --- Preview generation ---
+
+  // Regenerate the atlas preview whenever the dialog opens or groupId changes
+  $effect(() => {
+    if (!open || !groupId || !previewCanvasEl) return;
+
+    const presets = variantState.getPresets();
+    const frames = frameModel.getFrames();
+    const layers = layerTree.getLayers();
+
+    if (presets.length === 0 || frames.length === 0) {
+      errorMessage = 'No variants or frames to preview.';
+      return;
+    }
+
+    try {
+      const atlas = exportVariantAtlas(
+        groupId,
+        layers,
+        frames,
+        presets,
+        canvasState.canvasWidth,
+        canvasState.canvasHeight,
+      );
+
+      atlasWidth = atlas.width;
+      atlasHeight = atlas.height;
+      variantCount = presets.length;
+      frameCount = frames.length;
+
+      // Resolve group name for the filename (recursive search)
+      groupName = findGroupName(groupId, layers) ?? 'variants';
+
+      // Fit preview within a max bounding box, preserving aspect ratio
+      const maxW = 480;
+      const maxH = 300;
+      const scaleX = maxW / atlas.width;
+      const scaleY = maxH / atlas.height;
+      const fitScale = Math.min(scaleX, scaleY, 1);
+      const displayW = Math.max(1, Math.round(atlas.width * fitScale));
+      const displayH = Math.max(1, Math.round(atlas.height * fitScale));
+
+      const canvas = previewCanvasEl;
+      canvas.width = displayW;
+      canvas.height = displayH;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('Failed to get 2d context for preview canvas');
+      ctx.imageSmoothingEnabled = false;
+
+      const imageData = atlas.toImageData();
+      const tmpCanvas = new OffscreenCanvas(atlas.width, atlas.height);
+      const tmpCtx = tmpCanvas.getContext('2d');
+      if (!tmpCtx) throw new Error('Failed to get 2d context for tmp canvas');
+      tmpCtx.putImageData(imageData, 0, 0);
+
+      ctx.clearRect(0, 0, displayW, displayH);
+      ctx.drawImage(tmpCanvas, 0, 0, displayW, displayH);
+
+      errorMessage = '';
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : 'Failed to generate atlas preview.';
+    }
+  });
+
+  // --- Export handler ---
+
+  async function handleExport() {
+    if (exporting || !groupId) return;
+    exporting = true;
+    errorMessage = '';
+
+    try {
+      const presets = variantState.getPresets();
+      const frames = frameModel.getFrames();
+      const layers = layerTree.getLayers();
+
+      if (presets.length === 0 || frames.length === 0) {
+        throw new Error('No variants or frames to export.');
+      }
+
+      // Regenerate atlas at the selected scale
+      const w = canvasState.canvasWidth;
+      const h = canvasState.canvasHeight;
+      const atlas = exportVariantAtlas(groupId, layers, frames, presets, w, h);
+
+      // Render atlas to an offscreen canvas with the chosen scale factor
+      const scaledW = atlas.width * scale;
+      const scaledH = atlas.height * scale;
+      const exportCanvas = new OffscreenCanvas(scaledW, scaledH);
+      const ctx = exportCanvas.getContext('2d');
+      if (!ctx) throw new Error('Failed to get 2d context for export canvas');
+      ctx.imageSmoothingEnabled = false;
+
+      const imageData = atlas.toImageData();
+      const tmpCanvas = new OffscreenCanvas(atlas.width, atlas.height);
+      const tmpCtx = tmpCanvas.getContext('2d');
+      if (!tmpCtx) throw new Error('Failed to get 2d context for tmp canvas');
+      tmpCtx.putImageData(imageData, 0, 0);
+      ctx.drawImage(tmpCanvas, 0, 0, scaledW, scaledH);
+
+      const blob = await exportCanvas.convertToBlob({ type: 'image/png' });
+
+      // Build companion metadata JSON
+      const metadata = {
+        format: 'pixelweaver-variant-atlas',
+        version: '1.0.0',
+        atlas: {
+          width: scaledW,
+          height: scaledH,
+          cellWidth: w * scale,
+          cellHeight: h * scale,
+          rows: presets.length,
+          columns: frames.length,
+        },
+        variants: presets.map((p, i) => ({
+          index: i,
+          name: p.name,
+          row: i,
+        })),
+        frames: frames.map((_f, i) => ({
+          index: i,
+          column: i,
+          durationMs: frameModel.getFrameDuration(i),
+        })),
+      };
+      const jsonBlob = new Blob(
+        [JSON.stringify(metadata, null, 2)],
+        { type: 'application/json' },
+      );
+
+      const saved = await downloadCompanionFiles([
+        { blob, filename: `${groupName}-variants.png`, filterName: 'PNG Image', filterExtensions: ['png'] },
+        { blob: jsonBlob, filename: `${groupName}-variants.json`, filterName: 'JSON File', filterExtensions: ['json'] },
+      ]);
+      if (!saved) return; // user cancelled native dialog
+
+      notify(`Exported ${String(presets.length)} variants to PNG.`, 'success');
+      onClose();
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : 'Export failed.';
+    } finally {
+      exporting = false;
+    }
+  }
+
+  // --- Utilities ---
+
+  function notify(message: string, type: 'info' | 'warning' | 'success') {
+    notificationState.push({
+      id: `bisection-export-${crypto.randomUUID()}`,
+      message,
+      type,
+      autoDismissMs: 4000,
+    });
+  }
+
+  // Reset state when dialog opens
+  $effect(() => {
+    if (open) {
+      scale = 1;
+      exporting = false;
+      errorMessage = '';
+      atlasWidth = 0;
+      atlasHeight = 0;
+      variantCount = 0;
+      frameCount = 0;
+    }
+  });
+
+  // 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
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      onClose();
+    }
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class="pw-dialog"
+  onclick={handleDialogClick}
+  onclose={onClose}
+>
+  {#if open}
+    <div class="modal">
+      <h2 class="modal-title">Export Variant Atlas</h2>
+
+      <!-- Preview canvas -->
+      <div class="preview-section">
+        <canvas
+          bind:this={previewCanvasEl}
+          class="preview-canvas"
+        ></canvas>
+        {#if atlasWidth > 0}
+          <div class="preview-info">
+            <span class="preview-dimensions">{atlasWidth} x {atlasHeight} px</span>
+            <span class="preview-meta">
+              {variantCount} variant{variantCount === 1 ? '' : 's'},
+              {frameCount} frame{frameCount === 1 ? '' : 's'}
+            </span>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Scale selector -->
+      <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>
+        {#if scale > 1 && atlasWidth > 0}
+          <span class="scale-hint">{atlasWidth * scale} x {atlasHeight * scale} px</span>
+        {/if}
+      </div>
+
+      <!-- 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 || atlasWidth === 0}
+        >
+          {exporting ? 'Exporting...' : 'Export'}
+        </button>
+      </div>
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  /* Reuse the same dialog/modal pattern from ExportDialog */
+  .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: 540px;
+    max-width: 90vw;
+    padding: 24px;
+    color: var(--text-primary);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+  }
+
+  /* Preview section */
+  .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-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .preview-dimensions {
+    font-size: var(--text-base);
+    color: var(--text-muted);
+  }
+
+  .preview-meta {
+    font-size: var(--text-sm, 11px);
+    color: var(--text-muted);
+  }
+
+  /* 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);
+  }
+
+  /* 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);
+  }
+
+  .scale-hint {
+    font-size: var(--text-base);
+    color: var(--text-muted);
+    margin-left: 4px;
+  }
+
+  /* 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>