matterviz 0.3.1 → 0.3.3

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -1,53 +1,74 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { export_canvas_as_png } from '../io/export';
-import { tooltip } from 'svelte-multiselect/attachments';
-let { export_pane_open = $bindable(false), bz_data, wrapper, scene, camera, filename = `brillouin-zone`, png_dpi = $bindable(150), ...rest } = $props();
-let copy_status = $state(false);
-const copy_confirm = `✅`;
-function export_as_png() {
-    const canvas = wrapper?.querySelector(`canvas`);
-    if (!canvas || !scene || !camera)
-        return;
-    const dpi = Math.max(50, Math.min(600, Math.trunc(png_dpi)));
-    const png_name = `${filename}-${bz_data?.order ?? `1`}.png`;
-    export_canvas_as_png(canvas, png_name, dpi, scene, camera);
-}
-function export_as_json() {
-    const json_data = get_json_data();
-    if (!json_data || !bz_data)
-        return;
+<script lang="ts">
+  import { export_canvas_as_png } from '../io/export'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type { ComponentProps } from 'svelte'
+  import { CopyButton } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Camera, Scene } from 'three'
+  import type { BrillouinZoneData } from './types'
+
+  let {
+    export_pane_open = $bindable(false),
+    bz_data,
+    wrapper,
+    scene,
+    camera,
+    filename = `brillouin-zone`,
+    png_dpi = $bindable(150),
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    export_pane_open?: boolean
+    bz_data?: BrillouinZoneData
+    wrapper?: HTMLDivElement
+    scene?: Scene
+    camera?: Camera
+    filename?: string
+    png_dpi?: number
+  } = $props()
+
+  let json_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
+
+  function export_as_png() {
+    const canvas = wrapper?.querySelector(`canvas`)
+    if (!canvas || !scene || !camera) return
+
+    const dpi = Math.max(50, Math.min(600, Math.trunc(png_dpi)))
+    const png_name = `${filename}-${bz_data?.order ?? `1`}.png`
+    export_canvas_as_png(canvas, png_name, dpi, scene, camera)
+  }
+
+  function export_as_json() {
+    const json_data = get_json_data()
+    if (!json_data || !bz_data) return
+
     const blob = new Blob([JSON.stringify(json_data, null, 2)], {
-        type: `application/json`,
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement(`a`);
-    link.href = url;
-    link.download = `${filename}-bz-order-${bz_data.order}.json`;
-    link.click();
-    URL.revokeObjectURL(url);
-}
-function get_json_data() {
-    if (!bz_data)
-        return null;
+      type: `application/json`,
+    })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement(`a`)
+    link.href = url
+    link.download = `${filename}-bz-order-${bz_data.order}.json`
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function get_json_data() {
+    if (!bz_data) return null
     return {
-        order: bz_data.order,
-        volume: bz_data.volume,
-        vertices: bz_data.vertices,
-        faces: bz_data.faces,
-        edges: bz_data.edges,
-        reciprocal_lattice: bz_data.k_lattice,
-    };
-}
-async function copy_json() {
-    const json_data = get_json_data();
-    if (!json_data)
-        return;
-    await navigator.clipboard.writeText(JSON.stringify(json_data, null, 2));
-    copy_status = true;
-    setTimeout(() => {
-        copy_status = false;
-    }, 1000);
-}
+      order: bz_data.order,
+      volume: bz_data.volume,
+      vertices: bz_data.vertices,
+      faces: bz_data.faces,
+      edges: bz_data.edges,
+      reciprocal_lattice: bz_data.k_lattice,
+    }
+  }
+
+  let json_string = $derived.by(() => {
+    const json_data = get_json_data()
+    return json_data ? JSON.stringify(json_data, null, 2) : null
+  })
 </script>
 
 <DraggablePane
@@ -97,14 +118,12 @@ async function copy_json() {
     >
       ⬇
     </button>
-    <button
-      type="button"
-      onclick={copy_json}
-      disabled={!bz_data}
+    <CopyButton
+      content={json_string ?? ``}
+      bind:state={json_copy_state}
+      disabled={!json_string}
       title="Copy JSON to clipboard"
-    >
-      {copy_status ? copy_confirm : `📋`}
-    </button>
+    />
   </label>
 </DraggablePane>
 

package/dist/brillouin/BrillouinZoneExportPane.svelte.d.ts

@@ -10,6 +10,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     filename?: string;
     png_dpi?: number;
 };
-declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
+declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
 type BrillouinZoneExportPane = ReturnType<typeof BrillouinZoneExportPane>;
 export default BrillouinZoneExportPane;

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -1,76 +1,107 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { format_num } from '../labels';
-import { analyze_structure_symmetry } from '../symmetry';
-let { pane_open = $bindable(false), structure, bz_data, pane_props = {}, } = $props();
-let sym_data = $state(null);
-$effect(() => {
-    sym_data = null;
-    if (!pane_open || !structure || !(`lattice` in structure))
-        return;
+<script lang="ts">
+  import type { InfoItem } from '../layout'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { format_num } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import type { Crystal } from '../structure'
+  import { analyze_structure_symmetry } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import type { ComponentProps } from 'svelte'
+  import type { BrillouinZoneData } from './types'
+
+  let {
+    pane_open = $bindable(false),
+    structure,
+    bz_data,
+    pane_props = {},
+  }: {
+    pane_open?: boolean
+    structure?: Crystal
+    bz_data?: BrillouinZoneData
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+  } = $props()
+
+  let sym_data = $state<MoyoDataset | null>(null)
+
+  $effect(() => {
+    sym_data = null
+    if (!pane_open || !structure || !(`lattice` in structure)) return
+
     analyze_structure_symmetry(structure, {})
-        .then((data) => (sym_data = data))
-        .catch(console.error);
-});
-let pane_data = $derived.by(() => {
-    if (!structure || !bz_data)
-        return [];
-    const sections = [];
+      .then((data) => (sym_data = data))
+      .catch(console.error)
+  })
+
+  let pane_data = $derived.by(() => {
+    if (!structure || !bz_data) return []
+    const sections: { title: string; items: InfoItem[] }[] = []
+
     // Brillouin Zone section
-    const bz_order_suffix = [`st`, `nd`, `rd`][bz_data.order - 1] ?? `th`;
+    const bz_order_suffix = [`st`, `nd`, `rd`][bz_data.order - 1] ?? `th`
     sections.push({
-        title: `Brillouin Zone`,
-        items: [
-            {
-                label: `Order`,
-                value: `${bz_data.order}${bz_order_suffix}`,
-                key: `bz-order`,
-            },
-            {
-                label: `Volume`,
-                value: `${format_num(bz_data.volume, `.3f`)} Å⁻³`,
-                key: `bz-volume`,
-            },
-            {
-                label: `Vertices / Faces`,
-                value: `${bz_data.vertices.length} / ${bz_data.faces.length}`,
-                key: `bz-vertices`,
-            },
-            {
-                label: `Space Group`,
-                value: `${sym_data?.number ?? ``} ${sym_data?.hm_symbol ? `(${sym_data.hm_symbol})` : ``}`.trim(),
-                key: `space-group`,
-            },
-        ],
-    });
+      title: `Brillouin Zone`,
+      items: [
+        {
+          label: `Order`,
+          value: `${bz_data.order}${bz_order_suffix}`,
+          key: `bz-order`,
+        },
+        {
+          label: `Volume`,
+          value: `${format_num(bz_data.volume, `.3f`)} Å⁻³`,
+          key: `bz-volume`,
+        },
+        {
+          label: `Vertices / Faces`,
+          value: `${bz_data.vertices.length} / ${bz_data.faces.length}`,
+          key: `bz-vertices`,
+        },
+        {
+          label: `Space Group`,
+          value: `${sym_data?.number ?? ``} ${
+            sym_data?.hm_symbol ? `(${sym_data.hm_symbol})` : ``
+          }`.trim(),
+          key: `space-group`,
+        },
+      ],
+    })
+
     // Real Lattice section
     sections.push({
-        title: `Real Lattice`,
-        items: [
-            {
-                label: `a, b, c`,
-                value: `${[structure.lattice.a, structure.lattice.b, structure.lattice.c]
-                    .map((val) => format_num(val, `.3~f`))
-                    .join(`, `)} Å`,
-                key: `real-lattice-abc`,
-            },
-            {
-                label: `α, β, γ`,
-                value: `${[structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
-                    .map((val) => format_num(val, `.2~f`))
-                    .join(`, `)}°`,
-                key: `real-lattice-angles`,
-            },
-        ],
-    });
+      title: `Real Lattice`,
+      items: [
+        {
+          label: `a, b, c`,
+          value: `${
+            [structure.lattice.a, structure.lattice.b, structure.lattice.c]
+              .map((val) => format_num(val, `.3~f`))
+              .join(`, `)
+          } Å`,
+          key: `real-lattice-abc`,
+        },
+        {
+          label: `α, β, γ`,
+          value: `${
+            [structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
+              .map((val) => format_num(val, `.2~f`))
+              .join(`, `)
+          }°`,
+          key: `real-lattice-angles`,
+        },
+      ],
+    })
+
     // Reciprocal Lattice section
-    const k_lattice_items = bz_data.k_lattice.map((vec, idx) => ({
-        label: [`b₁`, `b₂`, `b₃`][idx],
-        value: `(${vec.map((x) => format_num(x, `.3~f`)).join(`, `)})`,
-        key: `reciprocal-${[`b1`, `b2`, `b3`][idx]}`,
-    }));
-    sections.push({ title: `Reciprocal Lattice (Å⁻¹)`, items: k_lattice_items });
-    return sections;
-});
+    const k_lattice_items: InfoItem[] = bz_data.k_lattice.map((vec, idx) => ({
+      label: [`b₁`, `b₂`, `b₃`][idx],
+      value: `(${vec.map((x) => format_num(x, `.3~f`)).join(`, `)})`,
+      key: `reciprocal-${[`b1`, `b2`, `b3`][idx]}`,
+    }))
+
+    sections.push({ title: `Reciprocal Lattice (Å⁻¹)`, items: k_lattice_items })
+
+    return sections
+  })
 </script>
 
 {#if structure && bz_data}
@@ -88,7 +119,7 @@ let pane_data = $derived.by(() => {
         {#each section.items as item (item.key ?? item.label)}
           <div class="info-item">
             <span>{item.label}</span>
-            <span>{@html item.value}</span>
+            <span>{@html sanitize_html(item.value)}</span>
           </div>
         {/each}
       </section>