matterviz 0.4.0 → 0.4.2

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
   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 { download } from '../io/fetch'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { Camera, Scene } from 'three'
   import type { BrillouinZoneData } from './types'
@@ -27,30 +26,11 @@
     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)
+    export_canvas_as_png(canvas, png_name, png_dpi, scene, camera)
   }
 
   function get_json_data() {
@@ -65,82 +45,53 @@
     }
   }
 
-  let json_string = $derived.by(() => {
+  function export_as_json() {
     const json_data = get_json_data()
-    return json_data ? JSON.stringify(json_data, null, 2) : null
-  })
+    if (!json_data || !bz_data) return
+    download(
+      JSON.stringify(json_data, null, 2),
+      `${filename}-bz-order-${bz_data.order}.json`,
+      `application/json`,
+    )
+  }
+
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Export as image`,
+      items: [
+        {
+          label: `PNG`,
+          disabled: !scene || !camera,
+          show_dpi: true,
+          on_download: export_as_png,
+        },
+      ],
+    },
+    {
+      title: `Export as data`,
+      tooltip: `Includes vertices, faces, edges, and reciprocal lattice vectors`,
+      items: [
+        {
+          label: `JSON`,
+          disabled: !bz_data,
+          on_download: export_as_json,
+          copy_text: () => {
+            const json_data = get_json_data()
+            return json_data ? JSON.stringify(json_data, null, 2) : null
+          },
+        },
+      ],
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
   toggle_props={{
     class: `bz-export-toggle`,
     title: export_pane_open ? `` : `Export Brillouin zone`,
   }}
->
-  <h4 id="export-as-image">Export as image</h4>
-  <label>
-    PNG
-    <button
-      type="button"
-      onclick={export_as_png}
-      disabled={!scene || !camera}
-      title="PNG ({png_dpi} DPI)"
-    >
-      ⬇
-    </button>
-    &nbsp;(DPI: <input
-      type="number"
-      min={72}
-      max={600}
-      bind:value={png_dpi}
-      title="Export resolution in dots per inch"
-    />)
-  </label>
-
-  <h4 id="export-as-data"
-    {@attach tooltip({ content: `Includes vertices, faces, edges, and reciprocal lattice vectors` })}
-  >
-    Export as data
-  </h4>
-  <label>
-    JSON
-    <button
-      type="button"
-      onclick={export_as_json}
-      disabled={!bz_data}
-      title="Download JSON"
-    >
-      ⬇
-    </button>
-    <CopyButton
-      content={json_string ?? ``}
-      bind:state={json_copy_state}
-      disabled={!json_string}
-      title="Copy JSON to clipboard"
-    />
-  </label>
-</DraggablePane>
-
-<style>
-  label {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4pt;
-    font-size: 0.95em;
-  }
-  button {
-    width: 1.9em;
-    height: 1.6em;
-    padding: 0 6pt;
-    margin: 0 0 0 4pt;
-    box-sizing: border-box;
-  }
-  input {
-    margin: 0 0 0 2pt;
-  }
-</style>
+  {...rest}
+/>

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, {}, "png_dpi" | "export_pane_open">;
+declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type BrillouinZoneExportPane = ReturnType<typeof BrillouinZoneExportPane>;
 export default BrillouinZoneExportPane;

package/dist/brillouin/BrillouinZoneInfoPane.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import type { PaneProps } from '../overlays'
   import type { InfoItem } from '../layout'
   import DraggablePane from '../overlays/DraggablePane.svelte'
+  import InfoPaneCards from '../overlays/InfoPaneCards.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'
@@ -18,7 +19,7 @@
     pane_open?: boolean
     structure?: Crystal
     bz_data?: BrillouinZoneData
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    pane_props?: PaneProps
   } = $props()
 
   let sym_data = $state<MoyoDataset | null>(null)
@@ -72,20 +73,16 @@
       items: [
         {
           label: `a, b, c`,
-          value: `${
-            [structure.lattice.a, structure.lattice.b, structure.lattice.c]
-              .map((val) => format_num(val, `.3~f`))
-              .join(`, `)
-          } Å`,
+          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(`, `)
-          }°`,
+          value: `${[structure.lattice.alpha, structure.lattice.beta, structure.lattice.gamma]
+            .map((val) => format_num(val, `.2~f`))
+            .join(`, `)}°`,
           key: `real-lattice-angles`,
         },
       ],
@@ -112,35 +109,11 @@
     toggle_props={{ class: `bz-info-toggle`, title: `Brillouin zone info` }}
     pane_props={{ ...pane_props, class: `bz-info-pane ${pane_props?.class ?? ``}` }}
   >
-    {#each pane_data as section, sec_idx (section.title)}
-      {#if sec_idx > 0}<hr />{/if}
-      <section>
-        <h4>{section.title}</h4>
-        {#each section.items as item (item.key ?? item.label)}
-          <div class="info-item">
-            <span>{item.label}</span>
-            <span>{@html sanitize_html(item.value)}</span>
-          </div>
-        {/each}
-      </section>
-    {/each}
+    <InfoPaneCards
+      cards={pane_data.map(({ title, items }) => ({ title, rows: items }))}
+      show_filter={false}
+      filter_placeholder="Filter Brillouin zone info"
+      empty_label="Brillouin zone info"
+    />
   </DraggablePane>
 {/if}
-
-<style>
-  section div.info-item {
-    display: flex;
-    justify-content: space-between;
-    gap: 6pt;
-    padding: 1pt;
-    line-height: 1.5;
-  }
-  h4 {
-    margin: 0.5em 0;
-  }
-  hr {
-    border: none;
-    border-top: 1px solid var(--divider-color, rgba(128, 128, 128, 0.2));
-    margin: 0.5em 0;
-  }
-</style>

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

@@ -1,12 +1,11 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { PaneProps } from '../overlays';
 import type { Crystal } from '../structure';
-import type { ComponentProps } from 'svelte';
 import type { BrillouinZoneData } from './types';
 type $$ComponentProps = {
     pane_open?: boolean;
     structure?: Crystal;
     bz_data?: BrillouinZoneData;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
+    pane_props?: PaneProps;
 };
 declare const BrillouinZoneInfoPane: import("svelte").Component<$$ComponentProps, {}, "pane_open">;
 type BrillouinZoneInfoPane = ReturnType<typeof BrillouinZoneInfoPane>;