matterviz 0.3.4 → 0.3.6

package/dist/src/lib/trajectory/TrajectoryError.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { sanitize_html } from '$lib/sanitize'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { error_msg, on_dismiss, error_snippet, ...rest }:
+    & HTMLAttributes<HTMLDivElement>
+    & {
+      error_msg: string
+      on_dismiss: () => void
+      // Custom error snippet for advanced error handling
+      error_snippet?: Snippet<[{ error_msg: string; on_dismiss: () => void }]>
+    } = $props()
+</script>
+
+<div {...rest}>
+  {#if error_snippet}
+    {@render error_snippet({ error_msg, on_dismiss })}
+  {:else if error_msg.startsWith(`<`)}
+    <!-- Render HTML content for unsupported format messages -->
+    {@html sanitize_html(error_msg)}
+    <button onclick={on_dismiss}>Dismiss</button>
+  {:else}
+    <h3>Error</h3>
+    <p>{error_msg}</p>
+    <button onclick={on_dismiss}>Dismiss</button>
+  {/if}
+</div>
+
+<style>
+  div {
+    height: 100%;
+    padding: 2rem;
+    place-content: center;
+    place-items: center;
+    text-align: center;
+    color: var(--error-color);
+    border-radius: var(--border-radius, 3pt);
+    border: var(--error-border);
+    box-sizing: border-box;
+    flex: 1;
+  }
+  div p {
+    max-width: 30em;
+    word-wrap: break-word;
+    hyphens: auto;
+    margin: auto;
+    line-height: 1.5;
+  }
+  div button {
+    margin-top: 1rem;
+    background: var(--error-btn-bg);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+  }
+  div button:hover {
+    background: var(--error-btn-bg-hover);
+  }
+  /* Styles for unsupported format messages */
+  div :global(.unsupported-format) {
+    text-align: left;
+    max-width: 90%;
+    max-height: 70vh;
+    margin: 0 auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  div :global(.unsupported-format h4) {
+    color: var(--error-color);
+    margin: 0 0 1rem 0;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  div :global(.unsupported-format h5) {
+    margin: 0.75rem 0 0.25rem 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+  }
+  div :global(.unsupported-format p) {
+    margin: 0.25rem 0;
+    text-align: left;
+    font-size: 0.85rem;
+  }
+  div :global(.unsupported-format ul) {
+    text-align: left;
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+  }
+  div :global(.unsupported-format li) {
+    margin: 0.25rem 0;
+  }
+  div :global(.unsupported-format .code-options) {
+    margin: 1rem 0 0 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+  div :global(.unsupported-format .code-options > div) {
+    margin: 0;
+  }
+  div :global(.unsupported-format .code-options strong) {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+  }
+  div :global(.unsupported-format pre) {
+    padding: 0.5rem;
+    margin: 0;
+    overflow-x: auto;
+    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+  div :global(.unsupported-format p code) {
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
+  }
+</style>

package/dist/src/lib/trajectory/TrajectoryExportPane.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  import {
+    export_trajectory_video,
+    get_ffmpeg_conversion_command,
+  } from '$lib/io/export'
+  import SettingsSection from '$lib/layout/SettingsSection.svelte'
+  import DraggablePane from '$lib/overlays/DraggablePane.svelte'
+  import type { TrajectoryType } from '$lib/trajectory'
+  import type { ComponentProps } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+
+  let {
+    export_pane_open = $bindable(false),
+    trajectory = undefined,
+    wrapper = undefined,
+    filename = `trajectory`,
+    video_fps = $bindable(30),
+    resolution_multiplier = $bindable(1),
+    on_step_change = undefined,
+    pane_props = {},
+    toggle_props = {},
+    ...rest
+  }: {
+    // Control pane state
+    export_pane_open?: boolean
+    // Trajectory data for generating filename
+    trajectory?: TrajectoryType
+    // Canvas wrapper for video export
+    wrapper?: HTMLDivElement
+    // Filename for export
+    filename?: string
+    // Export settings
+    video_fps?: number
+    resolution_multiplier?: number
+    // Function to change trajectory step during export
+    on_step_change?: (step_idx: number) => Promise<void> | void
+    // Pane customization
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+  } = $props()
+
+  let is_exporting = $state(false)
+  let export_progress = $state(0)
+  let export_format = $state<`webm` | `mp4`>(`webm`)
+  let export_error = $state<string | null>(null)
+
+  let total_frames_available = $derived(
+    trajectory?.total_frames || trajectory?.frames?.length || 0,
+  )
+
+  let start_frame = $state(0)
+  let end_frame = $state(0)
+
+  let canvas = $derived(wrapper?.querySelector(`canvas`) as HTMLCanvasElement)
+
+  // Estimated file size in MB
+  let file_size_mb = $derived.by(() => {
+    if (!canvas) return 0
+    const pixels = canvas.width * canvas.height * resolution_multiplier ** 2
+    const bitrate = Math.max(1e6, Math.min(pixels * video_fps * 0.1, 2e8))
+    return (bitrate * export_frame_count / video_fps) / 8 / 1024 / 1024
+  })
+
+  // Initialize end_frame when trajectory changes
+  $effect(() => {
+    if (total_frames_available > 0) {
+      end_frame = total_frames_available - 1
+    }
+  })
+
+  // Validate and constrain frame range
+  $effect(() => {
+    if (start_frame < 0) start_frame = 0
+    if (start_frame >= total_frames_available) {
+      start_frame = Math.max(0, total_frames_available - 1)
+    }
+    if (end_frame < start_frame) end_frame = start_frame
+    if (end_frame >= total_frames_available) {
+      end_frame = Math.max(0, total_frames_available - 1)
+    }
+  })
+
+  let export_frame_count = $derived(
+    end_frame >= start_frame ? end_frame - start_frame + 1 : 0,
+  )
+
+  async function handle_video_export(format: `webm` | `mp4` = `webm`) {
+    export_error = null
+
+    // Validate
+    if (!trajectory || !on_step_change || !canvas || export_frame_count === 0) {
+      export_error = !trajectory
+        ? `No trajectory`
+        : !canvas
+        ? `Canvas not ready`
+        : `Invalid frame range`
+      return
+    }
+
+    export_format = format
+    is_exporting = true
+    export_progress = 0
+
+    try {
+      await export_trajectory_video(canvas, `${filename}.webm`, {
+        fps: video_fps,
+        total_frames: export_frame_count,
+        resolution_multiplier,
+        on_progress: (progress) => (export_progress = progress),
+        on_step: async (idx) => await on_step_change(start_frame + idx),
+      })
+
+      if (format === `mp4`) {
+        navigator.clipboard
+          .writeText(get_ffmpeg_conversion_command(`${filename}.webm`))
+          .catch(console.warn)
+      }
+
+      export_progress = 100
+      setTimeout(() => {
+        is_exporting = false
+        export_progress = 0
+      }, 1000)
+    } catch (error) {
+      console.error(`Export failed:`, error)
+      export_error = error instanceof Error ? error.message : String(error)
+      is_exporting = false
+      export_progress = 0
+    }
+  }
+
+  let is_video_supported = $derived(
+    typeof globalThis !== `undefined` &&
+      typeof MediaRecorder !== `undefined` &&
+      MediaRecorder.isTypeSupported(`video/webm;codecs=vp9`),
+  )
+
+  let has_canvas = $state(false)
+
+  $effect(() => {
+    if (!wrapper) {
+      has_canvas = false
+      return
+    }
+    const check = () => (has_canvas = Boolean(wrapper.querySelector(`canvas`)))
+    check()
+    const observer = new MutationObserver(check)
+    observer.observe(wrapper, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  })
+</script>
+
+<DraggablePane
+  bind:show={export_pane_open}
+  open_icon="Cross"
+  closed_icon="Export"
+  pane_props={{ ...pane_props, class: `export-pane ${pane_props?.class ?? ``}` }}
+  toggle_props={{
+    title: export_pane_open ? `` : `Export Trajectory`,
+    ...toggle_props,
+    class: `trajectory-export-toggle ${toggle_props?.class ?? ``}`,
+  }}
+  {...rest}
+>
+  <h4>Export Video</h4>
+
+  {#if !is_video_supported}
+    <div class="warning">Video export requires Chrome, Edge, or Opera</div>
+  {:else}
+    <SettingsSection
+      title="Video Settings"
+      current_values={{ video_fps, resolution_multiplier, start_frame, end_frame }}
+      on_reset={() => {
+        video_fps = 30
+        resolution_multiplier = 1
+        start_frame = 0
+        end_frame = total_frames_available - 1
+      }}
+    >
+      <label>
+        Frame Rate (FPS)
+        <input type="number" min={10} max={60} bind:value={video_fps} />
+        <input
+          type="range"
+          min={10}
+          max={60}
+          bind:value={video_fps}
+          style="accent-color: var(--accent-color)"
+        />
+      </label>
+
+      <span class="field-label">
+        Resolution
+        <div class="resolution-buttons">
+          {#each [0.5, 1, 2, 4, 8] as multiplier (multiplier)}
+            {@const w = canvas ? Math.round(canvas.width * multiplier) : 0}
+            {@const h = canvas ? Math.round(canvas.height * multiplier) : 0}
+            <button
+              type="button"
+              class:active={resolution_multiplier === multiplier}
+              onclick={() => (resolution_multiplier = multiplier)}
+              {@attach tooltip({
+                content: canvas ? `${multiplier}x (${w}×${h})` : `${multiplier}x`,
+              })}
+            >
+              {multiplier}x
+            </button>
+          {/each}
+        </div>
+      </span>
+
+      <label>
+        Start Frame
+        <input
+          type="number"
+          min={0}
+          max={Math.max(0, total_frames_available - 1)}
+          bind:value={start_frame}
+        />
+        <input
+          type="range"
+          min={0}
+          max={Math.max(0, total_frames_available - 1)}
+          bind:value={start_frame}
+          style="accent-color: var(--accent-color)"
+        />
+      </label>
+
+      <label>
+        End Frame
+        <input
+          type="number"
+          min={start_frame}
+          max={Math.max(0, total_frames_available - 1)}
+          bind:value={end_frame}
+        />
+        <input
+          type="range"
+          min={start_frame}
+          max={Math.max(0, total_frames_available - 1)}
+          bind:value={end_frame}
+          style="accent-color: var(--accent-color)"
+        />
+      </label>
+    </SettingsSection>
+
+    <h4>Export Formats</h4>
+
+    {#if export_error}
+      <div class="error-message">⚠️ {export_error}</div>
+    {/if}
+
+    <div class="export-buttons">
+      {#each [
+        { label: `WebM`, format: `webm`, hint: `Export as WebM video` },
+        { label: `MP4`, format: `mp4`, hint: `WebM + ffmpeg command` },
+      ] as const as
+        { label, format, hint }
+        (format)
+      }
+        <div style="display: flex; align-items: center; gap: 4pt">
+          {label}
+          <button
+            type="button"
+            onclick={() => handle_video_export(format)}
+            disabled={is_exporting || !trajectory || !has_canvas}
+            {@attach tooltip({ content: hint })}
+          >
+            {#if is_exporting && export_format === format}
+              {export_progress.toFixed(0)}%
+            {:else}⬇{/if}
+          </button>
+        </div>
+      {/each}
+    </div>
+
+    <div class="export-info">
+      {(export_frame_count / video_fps).toFixed(1)}s ({export_frame_count} frames: {
+        start_frame
+      }–{end_frame})
+      {#if file_size_mb > 0}
+        • ~{
+          file_size_mb < 1
+          ? `${(file_size_mb * 1024).toFixed(0)} KB`
+          : `${file_size_mb.toFixed(1)} MB`
+        }
+      {/if}
+    </div>
+
+    {#if trajectory && !has_canvas}
+      <div class="warning">Waiting for canvas...</div>
+    {/if}
+  {/if}
+</DraggablePane>
+
+<style>
+  .field-label {
+    display: flex;
+    align-items: center;
+    gap: 6pt;
+    white-space: nowrap;
+  }
+  .warning, .error-message {
+    padding: 1ex;
+    border-radius: var(--traj-border-radius, var(--border-radius, 3pt));
+    font-size: 0.9em;
+  }
+  .warning {
+    background: var(--warning-bg, rgba(255, 165, 0, 0.1));
+    border: 1px solid var(--warning-color, orange);
+  }
+  .error-message {
+    background: var(--error-bg, rgba(255, 0, 0, 0.1));
+    border: 1px solid var(--error-color, rgba(255, 0, 0, 0.5));
+    color: var(--error-color, #ff6b6b);
+    margin-bottom: 1ex;
+  }
+  .export-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1ex;
+  }
+  .export-info {
+    margin-top: 1ex;
+    padding: 1ex;
+    background: var(--surface-bg, rgba(0, 0, 0, 0.05));
+    border-radius: 4px;
+    font-size: 0.9em;
+    color: var(--text-color-muted);
+  }
+  .resolution-buttons {
+    display: inline-flex;
+    gap: 3pt;
+    margin: 0;
+    margin-left: auto;
+    white-space: nowrap;
+  }
+  .resolution-buttons button {
+    flex: 0 0 auto;
+    min-width: 2.8em;
+    padding: 1pt 3pt;
+    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
+    background: var(--btn-bg, rgba(255, 255, 255, 0.1));
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .resolution-buttons button:hover {
+    background: var(--btn-bg-hover, rgba(255, 255, 255, 0.2));
+  }
+  .resolution-buttons button.active {
+    background: var(--accent-color, #4a9eff);
+    border-color: var(--accent-color, #4a9eff);
+    color: white;
+  }
+</style>