matterviz 0.4.1 → 0.4.2

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

@@ -28,6 +28,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     pane_props?: PaneProps;
     toggle_props?: PaneToggleProps;
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "background_color" | "background_opacity" | "atom_color_config" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "lattice_props" | "show_image_atoms" | "supercell_loading" | "volumetric_data" | "isosurface_settings">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "color_scheme" | "controls_open" | "background_color" | "background_opacity" | "show_image_atoms" | "lattice_props" | "atom_color_config" | "volumetric_data" | "isosurface_settings" | "scene_props" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "supercell_loading">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;

package/dist/structure/StructureExportPane.svelte

@@ -34,26 +34,22 @@
     {
       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`,
+      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`,
+      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`,
+      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`,
+      hint: `<a href="https://vasp.at" target="_blank">VASP</a> POSCAR format - input geometry file for the Vienna Ab initio Simulation Package`,
     },
   ] as const
 
@@ -61,14 +57,12 @@
     {
       label: `GLB`,
       format: `glb`,
-      hint:
-        `Export as GLB (binary GLTF) - preserves element colors and materials, ideal for visualization in Blender, Unity, web viewers`,
+      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`,
+      hint: `Export as OBJ (Wavefront Object) - widely supported 3D format with material references, works in most 3D applications`,
     },
   ] as const
 
@@ -113,16 +107,18 @@
     },
     {
       title: `Export as image`,
-      items: [{
-        label: `PNG`,
-        disabled: !has_canvas,
-        show_dpi: true,
-        on_download: () => {
-          const canvas = wrapper?.querySelector(`canvas`)
-          if (canvas) export_canvas_as_png(canvas, structure, png_dpi, scene, camera)
-          else console.warn(`Canvas element not found for PNG export`)
+      items: [
+        {
+          label: `PNG`,
+          disabled: !has_canvas,
+          show_dpi: true,
+          on_download: () => {
+            const canvas = wrapper?.querySelector(`canvas`)
+            if (canvas) export_canvas_as_png(canvas, structure, png_dpi, scene, camera)
+            else console.warn(`Canvas element not found for PNG export`)
+          },
         },
-      }],
+      ],
     },
     {
       title: `Export as 3D model`,

package/dist/structure/StructureInfoPane.svelte

@@ -16,7 +16,7 @@
   import type { MoyoDataset } from '@spglib/moyo-wasm'
   import type { ComponentProps } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { SvelteSet } from 'svelte/reactivity'
+  import { create_clipboard_feedback } from '../overlays'
 
   type SiteDetail = {
     label: string
@@ -41,8 +41,7 @@
     },
     {
       label: `Atom Selection`,
-      value:
-        `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
+      value: `Click atoms to select them, then pick distance or angle mode to measure all pairwise distances/angles`,
     },
     {
       label: `Navigation`,
@@ -54,8 +53,7 @@
     },
     {
       label: `Colors`,
-      value:
-        `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
+      value: `Click legend labels to change colors, double-click to reset, right-click to remap elements`,
     },
     {
       label: `Keyboard`,
@@ -86,28 +84,16 @@
     sym_data?: MoyoDataset | null // Symmetry analysis data (bindable for external access)
   } = $props()
 
-  let copied_items = new SvelteSet<string>()
+  const { copied, copy } = create_clipboard_feedback()
   let sites_expanded = $state(false)
   let site_filter = $state(``)
   let site_window_start = $state(0)
   let site_cards_el = $state<HTMLDivElement>()
 
-  async function copy_to_clipboard(label: string, value: string, key: string) {
-    try {
-      await navigator.clipboard.writeText(`${label}: ${value}`)
-      copied_items.add(key)
-      setTimeout(() => copied_items.delete(key), 1000)
-    } catch (error) {
-      console.error(`Failed to copy to clipboard:`, error)
-    }
-  }
+  const copy_to_clipboard = (label: string, value: string, key: string): Promise<void> =>
+    copy(`${label}: ${value}`, key)
 
-  function copy_event(
-    event: MouseEvent,
-    label: string,
-    value: string,
-    key: string,
-  ) {
+  function copy_event(event: MouseEvent, label: string, value: string, key: string) {
     event.stopPropagation()
     copy_to_clipboard(label, value, key)
   }
@@ -128,9 +114,8 @@
         : [...selected_sites, site_idx]
       return
     }
-    selected_sites = selected_sites.length === 1 && selected_sites[0] === site_idx
-      ? []
-      : [site_idx]
+    selected_sites =
+      selected_sites.length === 1 && selected_sites[0] === site_idx ? [] : [site_idx]
   }
 
   function update_site_filter(event: Event): void {
@@ -161,9 +146,10 @@
       current_card.parentElement?.querySelectorAll<HTMLDivElement>(`.site-card`) ?? [],
     )
     const current_idx = sibling_cards.indexOf(current_card)
-    const next_idx = event.key === `ArrowDown`
-      ? Math.min(current_idx + 1, sibling_cards.length - 1)
-      : Math.max(current_idx - 1, 0)
+    const next_idx =
+      event.key === `ArrowDown`
+        ? Math.min(current_idx + 1, sibling_cards.length - 1)
+        : Math.max(current_idx - 1, 0)
     sibling_cards[next_idx]?.focus()
   }
 
@@ -171,10 +157,9 @@
     element_data?.find((element_record) => element_record.symbol === element)?.name || element
 
   const site_summary = (card: SiteCard): string =>
-    [
-      card.element_name,
-      ...card.details.map(({ label, value }) => `${label}: ${value}`),
-    ].join(`; `)
+    [card.element_name, ...card.details.map(({ label, value }) => `${label}: ${value}`)].join(
+      `; `,
+    )
 
   function format_site_property(prop_key: string, prop_value: unknown): SiteDetail | null {
     if (prop_value == null) return null
@@ -187,14 +172,16 @@
     let tooltip: string | undefined
 
     if (
-      prop_key === `force` && Array.isArray(prop_value) &&
-      prop_value.length === 3 && prop_value.every((value) => typeof value === `number`)
+      prop_key === `force` &&
+      Array.isArray(prop_value) &&
+      prop_value.length === 3 &&
+      prop_value.every((value) => typeof value === `number`)
     ) {
       const force_values = prop_value as [number, number, number]
       const value = `${format_num(Math.hypot(...force_values), `.3~f`)} eV/Å`
-      tooltip = `Force vector: ${
-        force_values.map((force) => format_num(force, `.3~f`)).join(`, `)
-      } eV/Å`
+      tooltip = `Force vector: ${force_values
+        .map((force) => format_num(force, `.3~f`))
+        .join(`, `)} eV/Å`
       return { label: prop_key, value, key: prop_key, tooltip }
     }
     if (prop_key === `magmom` || prop_key.includes(`magnet`)) {
@@ -206,7 +193,7 @@
 
     const value = Array.isArray(prop_value)
       ? format_value_list(prop_value)
-      : format_numeric_value(prop_value) ?? String(prop_value)
+      : (format_numeric_value(prop_value) ?? String(prop_value))
     return { label: prop_key, value, key: prop_key }
   }
 
@@ -269,7 +256,9 @@
     // Symmetry Info
     if (`lattice` in structure && sym_data) {
       const { operations } = sym_data
-      let translations = 0, rotations = 0, roto_translations = 0
+      let translations = 0,
+        rotations = 0,
+        roto_translations = 0
       for (const op of operations) {
         const has_translation = op.translation.some((offset) => offset !== 0)
         const is_identity = String(op.rotation) === `1,0,0,0,1,0,0,0,1`
@@ -278,14 +267,15 @@
         else roto_translations++
       }
 
-      const international_symbol = (sym_data as MoyoDataset & {
-        international_short?: string
-      }).international_short
-      const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)
-        ?.replaceAll(
-          /\s+/g,
-          ``,
-        )
+      const international_symbol = (
+        sym_data as MoyoDataset & {
+          international_short?: string
+        }
+      ).international_short
+      const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)?.replaceAll(
+        /\s+/g,
+        ``,
+      )
       const space_group_value = space_group_symbol
         ? `${sym_data.number} (${space_group_symbol})`
         : String(sym_data.number)
@@ -294,8 +284,16 @@
         title: `Symmetry`,
         items: [
           { label: `Space Group`, value: space_group_value, key: `symmetry-space-group` },
-          { label: `Hall Number`, value: String(sym_data.hall_number), key: `symmetry-hall-number` },
-          { label: `Pearson Symbol`, value: sym_data.pearson_symbol, key: `symmetry-pearson-symbol` },
+          {
+            label: `Hall Number`,
+            value: String(sym_data.hall_number),
+            key: `symmetry-hall-number`,
+          },
+          {
+            label: `Pearson Symbol`,
+            value: sym_data.pearson_symbol,
+            key: `symmetry-pearson-symbol`,
+          },
           {
             label: `Symmetry Ops`,
             value: `${operations.length} (${translations} trans, ${rotations} rot, ${roto_translations} roto-trans)`,
@@ -347,9 +345,9 @@
         element_name,
         title,
         details,
-        search_text: `${title} ${element} ${element_name} ${
-          details.map(({ label, value }) => `${label} ${value}`).join(` `)
-        }`.toLowerCase(),
+        search_text: `${title} ${element} ${element_name} ${details
+          .map(({ label, value }) => `${label} ${value}`)
+          .join(` `)}`.toLowerCase(),
       }
     })
   })
@@ -382,8 +380,7 @@
     if (!pane_open || selected_site_idx === undefined) return
     const visible_idx = visible_site_cards.findIndex(({ idx }) => idx === selected_site_idx)
     if (visible_idx === -1) return
-    const selected_window_start = Math.floor(visible_idx / SITE_WINDOW_SIZE) *
-      SITE_WINDOW_SIZE
+    const selected_window_start = Math.floor(visible_idx / SITE_WINDOW_SIZE) * SITE_WINDOW_SIZE
     if (selected_window_start !== site_window_start) {
       site_window_start = selected_window_start
       return
@@ -434,7 +431,7 @@
         >
           <span>{@html sanitize_html(label)}</span>
           <span title={tooltip}>{@html sanitize_html(value)}</span>
-          {#if key && copied_items.has(key)}
+          {#if key && copied.has(key)}
             <Icon
               icon="Check"
               style="color: var(--success-color, #10b981); width: 12px; height: 12px"
@@ -447,8 +444,8 @@
       {#if section.title === `Symmetry` && wyckoff_positions.length > 0}
         <WyckoffTable
           {wyckoff_positions}
-          on_hover={(site_indices) => highlighted_sites = site_indices ?? []}
-          on_click={(site_indices) => selected_sites = site_indices ?? []}
+          on_hover={(site_indices) => (highlighted_sites = site_indices ?? [])}
+          on_click={(site_indices) => (selected_sites = site_indices ?? [])}
           style="width: 100%; margin-top: 0.5em; font-size: 0.8em"
         />
       {/if}
@@ -472,7 +469,9 @@
         {/if}
       </div>
       {#if sites_hidden_by_threshold}
-        <p class="sites-note">Site list hidden for this {structure.sites.length}-site structure.</p>
+        <p class="sites-note">
+          Site list hidden for this {structure.sites.length}-site structure.
+        </p>
       {:else if site_cards.length > 0}
         <input
           class="site-filter"
@@ -491,19 +490,21 @@
                 type="button"
                 disabled={site_window_start === 0}
                 onclick={() =>
-                  site_window_start = Math.max(0, site_window_start - SITE_WINDOW_SIZE)}
+                  (site_window_start = Math.max(0, site_window_start - SITE_WINDOW_SIZE))}
               >
                 Previous
               </button>
-              <span>{site_window_start + 1}-{site_window_end} of {visible_site_cards.length}</span>
+              <span
+                >{site_window_start + 1}-{site_window_end} of {visible_site_cards.length}</span
+              >
               <button
                 type="button"
                 disabled={site_window_end >= visible_site_cards.length}
                 onclick={() =>
-                  site_window_start = Math.min(
+                  (site_window_start = Math.min(
                     Math.max(0, visible_site_cards.length - SITE_WINDOW_SIZE),
                     site_window_start + SITE_WINDOW_SIZE,
-                  )}
+                  ))}
               >
                 Next
               </button>
@@ -511,8 +512,8 @@
           {/if}
           <div class="site-cards" bind:this={site_cards_el}>
             {#each rendered_site_cards as card (card.idx)}
-              {@const is_highlighted = highlighted_sites.includes(card.idx) ||
-                hovered_site_idx === card.idx}
+              {@const is_highlighted =
+                highlighted_sites.includes(card.idx) || hovered_site_idx === card.idx}
               {@const is_selected = selected_sites.includes(card.idx)}
               <div
                 class="site-card"
@@ -539,9 +540,14 @@
                   <CopyButton
                     label="Copy {card.title}"
                     title="Copy {card.title}"
-                    copied={copied_items.has(`site-${card.idx}-summary`)}
+                    copied={copied.has(`site-${card.idx}-summary`)}
                     onclick={(event) =>
-                      copy_event(event, card.title, site_summary(card), `site-${card.idx}-summary`)}
+                      copy_event(
+                        event,
+                        card.title,
+                        site_summary(card),
+                        `site-${card.idx}-summary`,
+                      )}
                   />
                 </div>
                 <div class="site-card-details">
@@ -552,7 +558,7 @@
                       <CopyButton
                         label="Copy {card.title} {detail.label}"
                         title="Copy {detail.label}"
-                        copied={copied_items.has(`site-${card.idx}-${detail.key}`)}
+                        copied={copied.has(`site-${card.idx}-${detail.key}`)}
                         onclick={(event) =>
                           copy_event(
                             event,

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

@@ -14,6 +14,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     selected_sites?: number[];
     sym_data?: MoyoDataset | null;
 };
-declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "selected_sites" | "pane_open" | "highlighted_sites" | "hovered_site_idx">;
+declare const StructureInfoPane: import("svelte").Component<$$ComponentProps, {}, "selected_sites" | "hovered_site_idx" | "pane_open" | "highlighted_sites">;
 type StructureInfoPane = ReturnType<typeof StructureInfoPane>;
 export default StructureInfoPane;