matterviz 0.3.2 → 0.3.3

package/dist/structure/StructureExportPane.svelte

@@ -1,115 +1,150 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { export_canvas_as_png } from '../io/export';
-import * as exports from './export';
-import { tooltip } from 'svelte-multiselect/attachments';
-let { export_pane_open = $bindable(false), structure = undefined, wrapper = undefined, scene = undefined, camera = undefined, png_dpi = $bindable(150), pane_props = {}, toggle_props = {}, ...rest } = $props();
-// Copy button feedback state
-let copy_status = $state({ json: false, xyz: false, cif: false, poscar: false });
-// Dynamic button text based on copy status
-const copy_confirm = `✅`;
-const text_export_formats = [
+<script lang="ts">
+  import type { AnyStructure } from './'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { export_canvas_as_png } from '../io/export'
+  import * as exports from './export'
+  import type { ComponentProps } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { Camera, Scene } from 'three'
+
+  let {
+    export_pane_open = $bindable(false),
+    structure = undefined,
+    wrapper = undefined,
+    scene = undefined,
+    camera = undefined,
+    png_dpi = $bindable(150),
+    pane_props = {},
+    toggle_props = {},
+    ...rest
+  }: {
+    export_pane_open?: boolean
+    structure?: AnyStructure
+    wrapper?: HTMLDivElement
+    scene?: Scene
+    camera?: Camera
+    png_dpi?: number
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+  } = $props()
+
+  // Copy button feedback state
+  let copy_status = $state<
+    { json: boolean; xyz: boolean; cif: boolean; poscar: boolean }
+  >({ json: false, xyz: false, cif: false, poscar: false })
+
+  // Dynamic button text based on copy status
+  const copy_confirm = `✅`
+
+  const text_export_formats = [
     {
-        label: `JSON`,
-        format: `json`,
-        hint: `<a href="https://pymatgen.org" target="_blank">Pymatgen</a> JSON format - Python Materials Genomics structure serialization, widely used in computational materials science`,
+      label: `JSON`,
+      format: `json`,
+      hint:
+        `<a href="https://pymatgen.org" target="_blank">Pymatgen</a> JSON format - Python Materials Genomics structure serialization, widely used in computational materials science`,
     },
     {
-        label: `XYZ`,
-        format: `xyz`,
-        hint: `<a href="https://wiki.fysik.dtu.dk/ase" target="_blank">ASE</a> extended XYZ format - human-readable atomic coordinates used by the Atomic Simulation Environment`,
+      label: `XYZ`,
+      format: `xyz`,
+      hint:
+        `<a href="https://wiki.fysik.dtu.dk/ase" target="_blank">ASE</a> extended XYZ format - human-readable atomic coordinates used by the Atomic Simulation Environment`,
     },
     {
-        label: `CIF`,
-        format: `cif`,
-        hint: `Crystallographic Information File - standard format from the <a href="https://iucr.org" target="_blank">IUCr</a> for crystal structure data exchange`,
+      label: `CIF`,
+      format: `cif`,
+      hint:
+        `Crystallographic Information File - standard format from the <a href="https://iucr.org" target="_blank">IUCr</a> for crystal structure data exchange`,
     },
     {
-        label: `POSCAR`,
-        format: `poscar`,
-        hint: `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
+      label: `POSCAR`,
+      format: `poscar`,
+      hint:
+        `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
     },
-];
-const model_3d_formats = [
+  ] as const
+
+  const model_3d_formats = [
     {
-        label: `GLB`,
-        format: `glb`,
-        hint: `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
+      label: `GLB`,
+      format: `glb`,
+      hint:
+        `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
     },
     {
-        label: `OBJ`,
-        format: `obj`,
-        hint: `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
+      label: `OBJ`,
+      format: `obj`,
+      hint:
+        `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
     },
-];
-// Helper function to export structure to file
-function export_structure(format) {
-    if (!structure)
-        return;
+  ] as const
+
+  // Helper function to export structure to file
+  function export_structure(format: `json` | `xyz` | `cif` | `poscar`) {
+    if (!structure) return
     const export_fns = {
-        json: exports.export_structure_as_json,
-        xyz: exports.export_structure_as_xyz,
-        cif: exports.export_structure_as_cif,
-        poscar: exports.export_structure_as_poscar,
-    };
-    export_fns[format](structure);
-}
-// Handle clipboard copy with user feedback
-async function handle_copy(format) {
+      json: exports.export_structure_as_json,
+      xyz: exports.export_structure_as_xyz,
+      cif: exports.export_structure_as_cif,
+      poscar: exports.export_structure_as_poscar,
+    } as const
+    export_fns[format](structure)
+  }
+
+  // Handle clipboard copy with user feedback
+  async function handle_copy(format: `json` | `xyz` | `cif` | `poscar`) {
     if (!structure) {
-        console.warn(`No structure available for copying`);
-        return;
+      console.warn(`No structure available for copying`)
+      return
     }
+
     try {
-        let content;
-        if (format === `json`)
-            content = exports.structure_to_json_str(structure);
-        else if (format === `xyz`)
-            content = exports.structure_to_xyz_str(structure);
-        else if (format === `cif`)
-            content = exports.structure_to_cif_str(structure);
-        else if (format === `poscar`) {
-            content = exports.structure_to_poscar_str(structure);
-        }
-        else
-            throw new Error(`Invalid format: ${format}`);
-        await navigator.clipboard.writeText(content);
-        // Show temporary feedback in button text
-        copy_status[format] = true;
-        setTimeout(() => {
-            copy_status[format] = false;
-        }, 1000);
-    }
-    catch (error) {
-        console.error(`Failed to copy ${format.toUpperCase()} to clipboard`, error);
+      let content: string
+      if (format === `json`) content = exports.structure_to_json_str(structure)
+      else if (format === `xyz`) content = exports.structure_to_xyz_str(structure)
+      else if (format === `cif`) content = exports.structure_to_cif_str(structure)
+      else if (format === `poscar`) {
+        content = exports.structure_to_poscar_str(structure)
+      } else throw new Error(`Invalid format: ${format}`)
+
+      await navigator.clipboard.writeText(content)
+
+      // Show temporary feedback in button text
+      copy_status[format] = true
+      setTimeout(() => {
+        copy_status[format] = false
+      }, 1000)
+    } catch (error) {
+      console.error(`Failed to copy ${format.toUpperCase()} to clipboard`, error)
     }
-}
-function handle_3d_export(format) {
+  }
+
+  function handle_3d_export(format: `glb` | `obj`) {
     if (!scene) {
-        console.warn(`No scene available for ${format.toUpperCase()} export`);
-        return;
+      console.warn(`No scene available for ${format.toUpperCase()} export`)
+      return
     }
+
     try {
-        if (format === `glb`)
-            exports.export_structure_as_glb(scene, structure);
-        else if (format === `obj`)
-            exports.export_structure_as_obj(scene, structure);
+      if (format === `glb`) exports.export_structure_as_glb(scene, structure)
+      else if (format === `obj`) exports.export_structure_as_obj(scene, structure)
+    } catch (error) {
+      console.error(`Failed to export ${format.toUpperCase()}:`, error)
     }
-    catch (error) {
-        console.error(`Failed to export ${format.toUpperCase()}:`, error);
-    }
-}
-let has_canvas = $state(false);
-$effect(() => {
+  }
+
+  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

package/dist/structure/StructureExportPane.svelte.d.ts

@@ -12,6 +12,6 @@ type $$ComponentProps = {
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
 };
-declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
+declare const StructureExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
 type StructureExportPane = ReturnType<typeof StructureExportPane>;
 export default StructureExportPane;