matterviz 0.3.2 → 0.3.3

package/dist/trajectory/TrajectoryError.svelte

@@ -1,5 +1,16 @@
-<script lang="ts">let { error_msg, on_dismiss, error_snippet, ...rest } = $props();
-export {};
+<script lang="ts">
+  import { sanitize_html } from '../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}>
@@ -7,7 +18,7 @@ export {};
     {@render error_snippet({ error_msg, on_dismiss })}
   {:else if error_msg.startsWith(`<`)}
     <!-- Render HTML content for unsupported format messages -->
-    {@html error_msg}
+    {@html sanitize_html(error_msg)}
     <button onclick={on_dismiss}>Dismiss</button>
   {:else}
     <h3 id="error">Error</h3>

package/dist/trajectory/TrajectoryExportPane.svelte

@@ -1,99 +1,153 @@
-<script lang="ts">import { export_trajectory_video, get_ffmpeg_conversion_command, } from '../io/export';
-import SettingsSection from '../layout/SettingsSection.svelte';
-import DraggablePane from '../overlays/DraggablePane.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 } = $props();
-let is_exporting = $state(false);
-let export_progress = $state(0);
-let export_format = $state(`webm`);
-let export_error = $state(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`));
-// 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(() => {
+<script lang="ts">
+  import {
+    export_trajectory_video,
+    get_ffmpeg_conversion_command,
+  } from '../io/export'
+  import SettingsSection from '../layout/SettingsSection.svelte'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type { TrajectoryType } from './'
+  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;
+      end_frame = total_frames_available - 1
     }
-});
-// Validate and constrain frame range
-$effect(() => {
-    if (start_frame < 0)
-        start_frame = 0;
+  })
+
+  // 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);
+      start_frame = Math.max(0, total_frames_available - 1)
     }
-    if (end_frame < start_frame)
-        end_frame = start_frame;
+    if (end_frame < start_frame) end_frame = start_frame
     if (end_frame >= total_frames_available) {
-        end_frame = Math.max(0, total_frames_available - 1);
+      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`) {
-    export_error = null;
+  })
+
+  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_error = !trajectory
+        ? `No trajectory`
+        : !canvas
+        ? `Canvas not ready`
+        : `Invalid frame range`
+      return
     }
-    export_format = format;
-    is_exporting = true;
-    export_progress = 0;
+
+    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;
+      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 window !== `undefined` &&
-    typeof MediaRecorder !== `undefined` &&
-    MediaRecorder.isTypeSupported(`video/webm;codecs=vp9`));
-let has_canvas = $state(false);
-$effect(() => {
+  }
+
+  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;
+      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();
-});
+    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