pixelweaver 0.1.0

package/src/lib/animation/AnimationPreviewPanel.svelte

@@ -0,0 +1,667 @@
+<script lang="ts">
+  /**
+   * AnimationPreviewPanel -- dockable panel that plays back the current
+   * animation. Shows a scaled canvas of the composited preview frame,
+   * transport controls (play/pause/stop/step), frame counter, FPS display,
+   * loop-mode toggle, and a zoom selector.
+   *
+   * Playback is driven by requestAnimationFrame that calls the
+   * animation-preview state machine's tick() with the wall-clock delta.
+   * The state machine advances previewFrameIndex based on per-frame
+   * duration and the current mode (loop / pingpong / side-by-side).
+   *
+   * Play/pause goes through the command dispatcher (play_animation) so
+   * it participates in the same path as the menu / keyboard shortcut.
+   * Stop and step are local state-machine operations with no undo tier,
+   * so they call the preview module directly (mirroring how the existing
+   * play_animation command body does).
+   */
+
+  import { dispatch } from '../core/dispatcher.js';
+  import * as animPreview from './animation-preview.svelte.js';
+  import {
+    getFrames,
+    getGlobalFps,
+    getFrameDuration,
+  } from './frame-model.svelte.js';
+  import { getLayers } from '../layers/layer-tree.svelte.js';
+  import { composite } from '../layers/compositor.js';
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import PlayIcon from '~icons/lucide/play';
+  import PauseIcon from '~icons/lucide/pause';
+  import SquareIcon from '~icons/lucide/square';
+  import StepBackIcon from '~icons/lucide/step-back';
+  import StepForwardIcon from '~icons/lucide/step-forward';
+  import RepeatIcon from '~icons/lucide/repeat';
+  import Repeat1Icon from '~icons/lucide/repeat-1';
+  import RotateCwIcon from '~icons/lucide/rotate-cw';
+
+  // --- Speed presets ---
+  const SPEED_PRESETS = [0.5, 1, 2] as const;
+  let speed = $derived(animPreview.getSpeedMultiplier());
+
+  // --- Zoom ---
+  // Local to the panel; not persisted. User picks a scale factor for
+  // the preview canvas that is independent from the main viewport zoom.
+  const ZOOM_OPTIONS = [1, 2, 4, 8] as const;
+  let zoom = $state<number>(2);
+
+  // --- Canvas / stage refs ---
+  let previewCanvas = $state<HTMLCanvasElement | null>(null);
+  let stageEl = $state<HTMLDivElement | null>(null);
+  // Track available stage dimensions via ResizeObserver for side-by-side scaling
+  let stageWidth = $state<number>(0);
+  let stageHeight = $state<number>(0);
+
+  // --- Reactive state reads ---
+  let frames = $derived(getFrames());
+  let playing = $derived(animPreview.isPlaying());
+  let mode = $derived(animPreview.getMode());
+  let previewIndex = $derived(animPreview.getPreviewFrameIndex());
+  let globalFps = $derived(getGlobalFps());
+  let totalFrames = $derived(frames.length);
+
+  // Effective FPS for the CURRENT preview frame. Per-frame duration
+  // overrides take precedence over the global fps; we display the
+  // instantaneous rate so the number matches what the viewer sees.
+  let effectiveFps = $derived.by(() => {
+    if (totalFrames === 0) return globalFps;
+    const durMs = getFrameDuration(previewIndex);
+    if (durMs <= 0) return globalFps;
+    return Math.round(1000 / durMs);
+  });
+
+  // Proportional canvas dimensions at the chosen zoom.
+  let canvasW = $derived(canvasState.canvasWidth * zoom);
+  let canvasH = $derived(canvasState.canvasHeight * zoom);
+
+  // Observe stage container size for side-by-side layout calculations
+  $effect(() => {
+    if (!stageEl) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      stageWidth = width;
+      stageHeight = height;
+    });
+    observer.observe(stageEl);
+    return () => { observer.disconnect(); };
+  });
+
+  // --- Frame rendering ---
+
+  /**
+   * Composite all visible layers of the preview frame and draw them onto
+   * the panel canvas at the current zoom. Uses an offscreen buffer at
+   * native pixel size first, then scales with imageSmoothing disabled so
+   * pixel art stays crisp.
+   */
+  function renderPreviewFrame() {
+    const el = previewCanvas;
+    if (!el) return;
+    if (totalFrames === 0) return;
+
+    const frame = frames[previewIndex];
+    if (!frame) return;
+
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+    const composited = composite(getLayers(), frame.pixelData, w, h);
+
+    const imgData = new ImageData(
+      new Uint8ClampedArray(composited.data),
+      w,
+      h,
+    );
+
+    // Native-size offscreen, then scaled blit to the visible canvas.
+    const offscreen = new OffscreenCanvas(w, h);
+    const offCtx = offscreen.getContext('2d');
+    if (!offCtx) return;
+    offCtx.putImageData(imgData, 0, 0);
+
+    el.width = canvasW;
+    el.height = canvasH;
+    const ctx = el.getContext('2d');
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, canvasW, canvasH);
+    ctx.drawImage(offscreen, 0, 0, canvasW, canvasH);
+  }
+
+  // --- Side-by-side constants ---
+  const SBS_GAP = 4;            // px gap between frames
+  const SBS_HIGHLIGHT_WIDTH = 2; // px border around the active frame
+  const SBS_LABEL_HEIGHT = 14;   // px reserved for frame number labels
+  const SBS_PADDING = 6;         // px padding inside the canvas edges
+
+  /**
+   * Render ALL frames side by side on the preview canvas, scaling them
+   * uniformly so they fit within the available stage area. The frame
+   * at previewIndex gets an accent-colored border highlight. Frame
+   * numbers are drawn below each thumbnail when there is enough room.
+   */
+  function renderSideBySide() {
+    const el = previewCanvas;
+    if (!el) return;
+    if (totalFrames === 0) return;
+    // Need stage dimensions to calculate fit; skip if not measured yet
+    if (stageWidth === 0 || stageHeight === 0) return;
+
+    const nativeW = canvasState.canvasWidth;
+    const nativeH = canvasState.canvasHeight;
+    const layers = getLayers();
+
+    // Pre-composite every frame into native-size offscreen canvases
+    const offscreens: OffscreenCanvas[] = [];
+    for (let i = 0; i < totalFrames; i++) {
+      const frame = frames[i];
+      if (!frame) continue;
+      const composited = composite(layers, frame.pixelData, nativeW, nativeH);
+      const imgData = new ImageData(
+        new Uint8ClampedArray(composited.data),
+        nativeW,
+        nativeH,
+      );
+      const osc = new OffscreenCanvas(nativeW, nativeH);
+      const octx = osc.getContext('2d');
+      if (!octx) continue;
+      octx.putImageData(imgData, 0, 0);
+      offscreens.push(osc);
+    }
+
+    // Calculate scaling so all frames + gaps + padding fit in the stage.
+    // Layout: [padding] [frame] [gap] [frame] [gap] ... [frame] [padding]
+    // Vertically: [padding] [frame] [label_area] [padding]
+    const totalGaps = (totalFrames - 1) * SBS_GAP;
+    const availW = stageWidth - 2 * SBS_PADDING;
+    const availH = stageHeight - 2 * SBS_PADDING - SBS_LABEL_HEIGHT;
+
+    // Scale factor limited by both horizontal and vertical fit
+    const scaleByWidth = (availW - totalGaps) / (nativeW * totalFrames);
+    const scaleByHeight = availH / nativeH;
+    // Use at least 1px per native pixel, cap at the zoom setting
+    const scale = Math.max(1, Math.min(zoom, scaleByWidth, scaleByHeight));
+
+    const thumbW = Math.floor(nativeW * scale);
+    const thumbH = Math.floor(nativeH * scale);
+
+    // Determine if labels fit (need reasonable thumb width)
+    const showLabels = thumbW >= 12;
+
+    // Total canvas size required
+    const totalW = 2 * SBS_PADDING + totalFrames * thumbW + totalGaps;
+    const totalH = 2 * SBS_PADDING + thumbH + (showLabels ? SBS_LABEL_HEIGHT : 0);
+
+    el.width = totalW;
+    el.height = totalH;
+
+    const ctx = el.getContext('2d');
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, totalW, totalH);
+
+    // Read CSS accent color from the computed style for the highlight
+    const styles = getComputedStyle(el);
+    const accentColor = styles.getPropertyValue('--accent').trim() || '#4a9eff';
+    const borderColor = styles.getPropertyValue('--border').trim() || '#555';
+    const textColor = styles.getPropertyValue('--text-secondary').trim() || '#999';
+
+    for (let i = 0; i < totalFrames; i++) {
+      const x = SBS_PADDING + i * (thumbW + SBS_GAP);
+      const y = SBS_PADDING;
+
+      const isActive = i === previewIndex;
+
+      if (isActive) {
+        // Draw highlight border behind the active frame
+        ctx.fillStyle = accentColor;
+        ctx.fillRect(
+          x - SBS_HIGHLIGHT_WIDTH,
+          y - SBS_HIGHLIGHT_WIDTH,
+          thumbW + 2 * SBS_HIGHLIGHT_WIDTH,
+          thumbH + 2 * SBS_HIGHLIGHT_WIDTH,
+        );
+      } else {
+        // Subtle border for non-active frames
+        ctx.fillStyle = borderColor;
+        ctx.fillRect(x - 1, y - 1, thumbW + 2, thumbH + 2);
+      }
+
+      // Draw the frame thumbnail (crisp pixel scaling)
+      const osc = offscreens[i];
+      if (osc) ctx.drawImage(osc, x, y, thumbW, thumbH);
+
+      // Dim non-active frames slightly for contrast
+      if (!isActive) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+        ctx.fillRect(x, y, thumbW, thumbH);
+      }
+
+      // Frame number label
+      if (showLabels) {
+        ctx.fillStyle = isActive ? accentColor : textColor;
+        ctx.font = `${String(Math.min(11, SBS_LABEL_HEIGHT - 2))}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        ctx.fillText(
+          String(i + 1),
+          x + thumbW / 2,
+          y + thumbH + 2,
+        );
+      }
+    }
+  }
+
+  // Re-render whenever the preview frame, layers, canvas size, zoom,
+  // mode, or stage dimensions change.
+  $effect(() => {
+    // Touch reactive dependencies so the effect re-runs:
+    void previewIndex;
+    void frames;
+    void getLayers();
+    void canvasState.canvasWidth;
+    void canvasState.canvasHeight;
+    void canvasW;
+    void canvasH;
+    void mode;
+    void stageWidth;
+    void stageHeight;
+
+    if (mode === 'side-by-side') {
+      renderSideBySide();
+    } else {
+      renderPreviewFrame();
+    }
+  });
+
+  // --- Playback loop ---
+  // requestAnimationFrame drives tick() with the wall-clock delta. The
+  // state machine uses per-frame durations to decide when to advance.
+  // We start/stop the loop based on `playing` so we don't burn CPU when
+  // paused.
+
+  let rafId: number | null = null;
+  let lastTs: number | null = null;
+
+  function loop(ts: number) {
+    if (lastTs !== null) {
+      animPreview.tick(ts - lastTs);
+    }
+    lastTs = ts;
+    rafId = requestAnimationFrame(loop);
+  }
+
+  $effect(() => {
+    if (playing) {
+      lastTs = null;
+      rafId = requestAnimationFrame(loop);
+      return () => {
+        if (rafId !== null) cancelAnimationFrame(rafId);
+        rafId = null;
+        lastTs = null;
+      };
+    }
+    // Not playing -- no loop running, nothing to clean up.
+    return;
+  });
+
+  // --- Transport actions ---
+
+  function handlePlayPause() {
+    dispatch({
+      type: 'play_animation',
+      plugin: 'ui/animation-preview',
+      version: '1.0.0',
+      params: {},
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  function handleStop() {
+    animPreview.stop();
+  }
+
+  function handleStepBack() {
+    animPreview.step(-1);
+  }
+
+  function handleStepForward() {
+    animPreview.step(1);
+  }
+
+  // Loop button cycles loop -> pingpong -> side-by-side -> loop.
+  // The icon/label reflects the CURRENT mode so the user knows what
+  // clicking will switch from.
+  function handleLoopToggle() {
+    if (mode === 'loop') {
+      animPreview.setMode('pingpong');
+    } else if (mode === 'pingpong') {
+      animPreview.setMode('side-by-side');
+    } else {
+      animPreview.setMode('loop');
+    }
+  }
+
+  function modeLabel(m: animPreview.PreviewMode): string {
+    if (m === 'loop') return 'Loop';
+    if (m === 'pingpong') return 'Ping-pong';
+    return 'Side-by-side';
+  }
+</script>
+
+<div class="preview-panel">
+  <!-- Preview canvas area -->
+  <div class="preview-stage" bind:this={stageEl}>
+    {#if totalFrames === 0}
+      <div class="empty-state">No frames</div>
+    {:else}
+      <canvas
+        bind:this={previewCanvas}
+        class="preview-canvas"
+        width={canvasW}
+        height={canvasH}
+        aria-label="Animation preview"
+      ></canvas>
+    {/if}
+  </div>
+
+  <!-- Transport controls -->
+  <div class="controls">
+    <div class="transport">
+      <button
+        class="tbtn"
+        title="Step back"
+        aria-label="Step back one frame"
+        onclick={handleStepBack}
+        disabled={totalFrames === 0}
+      ><StepBackIcon /></button>
+
+      <button
+        class="tbtn tbtn--primary"
+        title={playing ? 'Pause' : 'Play'}
+        aria-label={playing ? 'Pause animation' : 'Play animation'}
+        onclick={handlePlayPause}
+        disabled={totalFrames === 0}
+      >
+        {#if playing}
+          <PauseIcon />
+        {:else}
+          <PlayIcon />
+        {/if}
+      </button>
+
+      <button
+        class="tbtn"
+        title="Stop"
+        aria-label="Stop animation"
+        onclick={handleStop}
+        disabled={totalFrames === 0}
+      ><SquareIcon /></button>
+
+      <button
+        class="tbtn"
+        title="Step forward"
+        aria-label="Step forward one frame"
+        onclick={handleStepForward}
+        disabled={totalFrames === 0}
+      ><StepForwardIcon /></button>
+
+      <button
+        class="tbtn"
+        title={`Mode: ${modeLabel(mode)} (click to change)`}
+        aria-label={`Playback mode: ${modeLabel(mode)}. Click to change.`}
+        onclick={handleLoopToggle}
+      >
+        {#if mode === 'loop'}
+          <RepeatIcon />
+        {:else if mode === 'pingpong'}
+          <Repeat1Icon />
+        {:else}
+          <RotateCwIcon />
+        {/if}
+      </button>
+    </div>
+
+    <div class="speed-presets" aria-label="Playback speed">
+      {#each SPEED_PRESETS as preset (preset)}
+        <button
+          class="speed-btn"
+          class:speed-btn--active={speed === preset}
+          title="{preset}x speed"
+          aria-label="Set playback speed to {preset}x"
+          aria-pressed={speed === preset}
+          onclick={() => { animPreview.setSpeed(preset); }}
+        >{preset}x</button>
+      {/each}
+    </div>
+
+    <div class="info">
+      <span class="info-item" aria-label="Frame counter">
+        <span class="info-label">Frame</span>
+        <span class="info-value">
+          {totalFrames === 0 ? 0 : previewIndex + 1} / {totalFrames}
+        </span>
+      </span>
+      <span class="info-item" aria-label="Frames per second">
+        <span class="info-label">FPS</span>
+        <span class="info-value">{effectiveFps}</span>
+      </span>
+    </div>
+
+    <div class="zoom-control">
+      <label class="zoom-label" for="anim-preview-zoom">Zoom</label>
+      <select
+        id="anim-preview-zoom"
+        class="zoom-select"
+        bind:value={zoom}
+        aria-label="Preview zoom level"
+      >
+        {#each ZOOM_OPTIONS as opt (opt)}
+          <option value={opt}>{opt}x</option>
+        {/each}
+      </select>
+    </div>
+  </div>
+</div>
+
+<style>
+  .preview-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-toolbar);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    user-select: none;
+  }
+
+  /* --- Preview stage: checkerboard-free, mirrors canvas background --- */
+
+  .preview-stage {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    padding: var(--space-3);
+    background: var(--bg-primary);
+  }
+
+  .preview-canvas {
+    image-rendering: pixelated;
+    background: var(--bg-canvas);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    flex-shrink: 0;
+  }
+
+  .empty-state {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    font-style: italic;
+  }
+
+  /* --- Controls strip --- */
+
+  .controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .transport {
+    display: flex;
+    gap: var(--space-1);
+    align-items: center;
+  }
+
+  .tbtn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 26px;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .tbtn:hover:not(:disabled) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .tbtn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .tbtn--primary {
+    color: var(--accent);
+  }
+
+  .tbtn--primary:hover:not(:disabled) {
+    color: var(--accent);
+  }
+
+  .tbtn :global(svg) {
+    width: 15px;
+    height: 15px;
+    display: block;
+  }
+
+  /* --- Speed presets --- */
+
+  .speed-presets {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+  }
+
+  .speed-btn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    height: 22px;
+    padding: 0 var(--space-1);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .speed-btn:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .speed-btn--active {
+    background: var(--accent);
+    color: var(--bg-primary);
+    border-color: var(--accent);
+  }
+
+  .speed-btn--active:hover {
+    background: var(--accent);
+    color: var(--bg-primary);
+    border-color: var(--accent);
+  }
+
+  /* --- Info block: frame counter + fps --- */
+
+  .info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-left: auto;
+  }
+
+  .info-item {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--space-1);
+  }
+
+  .info-label {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .info-value {
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* --- Zoom selector --- */
+
+  .zoom-control {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .zoom-label {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .zoom-select {
+    height: 24px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    padding: 0 var(--space-1);
+    cursor: pointer;
+  }
+
+  .zoom-select:focus-visible {
+    border-color: var(--accent);
+    outline: none;
+  }
+</style>