matterviz 0.1.12 → 0.1.13

package/dist/brillouin/BrillouinZone.svelte

@@ -0,0 +1,373 @@
+<script lang="ts">import { Icon, Spinner, toggle_fullscreen } from '..';
+import { decompress_file, handle_url_drop, load_from_url } from '../io';
+import { DEFAULTS } from '../settings';
+import { parse_any_structure } from '../structure/parse';
+import { Canvas } from '@threlte/core';
+import { untrack } from 'svelte';
+import { tooltip } from 'svelte-multiselect/attachments';
+import BrillouinZoneControls from './BrillouinZoneControls.svelte';
+import BrillouinZoneExportPane from './BrillouinZoneExportPane.svelte';
+import BrillouinZoneInfoPane from './BrillouinZoneInfoPane.svelte';
+import BrillouinZoneScene from './BrillouinZoneScene.svelte';
+import { compute_brillouin_zone, reciprocal_lattice } from './compute';
+let { structure = $bindable(undefined), bz_order = $bindable(1), bz_data = $bindable(undefined), controls_open = $bindable(false), info_pane_open = $bindable(false), surface_color = $bindable(`#4488ff`), surface_opacity = $bindable(0.3), edge_color = $bindable(`#000000`), edge_width = $bindable(0.05), show_vectors = $bindable(true), vector_scale = $bindable(1.0), camera_projection = $bindable(`perspective`), show_controls = 0, fullscreen = false, wrapper = $bindable(undefined), width = $bindable(0), height = $bindable(0), hovered = $bindable(false), dragover = $bindable(false), allow_file_drop = true, png_dpi = $bindable(150), fullscreen_toggle = DEFAULTS.structure.fullscreen_toggle, data_url, structure_string, on_file_drop, spinner_props = {}, loading = $bindable(false), error_msg = $bindable(undefined), children, on_file_load, on_error, on_fullscreen_change, ...rest } = $props();
+let scene = $state(undefined);
+let camera = $state(undefined);
+let export_pane_open = $state(false);
+let current_filename = $state(undefined);
+let visible_buttons = $derived(show_controls === true ||
+    (typeof show_controls === `number` && width > show_controls));
+// Parse and load structure from content
+function parse_structure(content, filename) {
+    const text = content instanceof ArrayBuffer
+        ? new TextDecoder().decode(content)
+        : content;
+    const parsed = parse_any_structure(text, filename);
+    if (!parsed)
+        throw new Error(`Failed to parse structure from ${filename}`);
+    structure = parsed;
+    current_filename = filename;
+    const file_size = new Blob([content]).size;
+    on_file_load?.({ structure, bz_data, bz_order, filename, file_size });
+}
+// Load with error handling
+function safe_parse(content, filename) {
+    try {
+        parse_structure(content, filename);
+    }
+    catch (err) {
+        error_msg = `Failed to parse ${filename}: ${err instanceof Error ? err.message : err}`;
+        on_error?.({ error_msg, filename });
+    }
+}
+// Compute BZ when structure/order changes
+$effect(() => {
+    if (!structure || !(`lattice` in structure) || !structure.lattice) {
+        bz_data = undefined;
+        return;
+    }
+    try {
+        const k_lattice = reciprocal_lattice(structure.lattice.matrix);
+        bz_data = compute_brillouin_zone(k_lattice, bz_order);
+    }
+    catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        error_msg = `BZ computation failed: ${msg}`;
+        bz_data = undefined;
+        untrack(() => on_error?.({ error_msg, structure, bz_order }));
+    }
+});
+// Load structure from URL or string
+$effect(() => {
+    const handle_error = (err, source) => {
+        error_msg = err instanceof Error ? err.message : String(err);
+        on_error?.({ error_msg, filename: source });
+    };
+    if (data_url && !structure) {
+        loading = true;
+        error_msg = undefined;
+        load_from_url(data_url, (content, filename) => on_file_drop
+            ? on_file_drop(content, filename)
+            : safe_parse(content, filename))
+            .catch((err) => handle_error(err, data_url))
+            .finally(() => (loading = false));
+    }
+    else if (structure_string && !data_url) {
+        loading = true;
+        error_msg = undefined;
+        try {
+            safe_parse(structure_string, `string`);
+        }
+        catch (err) {
+            handle_error(err, `string`);
+        }
+        finally {
+            loading = false;
+        }
+    }
+});
+async function handle_file_drop(event) {
+    event.preventDefault();
+    dragover = false;
+    if (!allow_file_drop)
+        return;
+    loading = true;
+    error_msg = undefined;
+    try {
+        const handler = on_file_drop || safe_parse;
+        const handled = await handle_url_drop(event, handler).catch(() => false);
+        if (handled)
+            return;
+        const file = event.dataTransfer?.files[0];
+        if (file) {
+            const { content, filename } = await decompress_file(file);
+            if (content)
+                handler(content, filename);
+        }
+    }
+    catch (err) {
+        error_msg = `File drop failed: ${err}`;
+        on_error?.({ error_msg });
+    }
+    finally {
+        loading = false;
+    }
+}
+function onkeydown(event) {
+    const target = event.target;
+    if (target.tagName === `INPUT` || target.tagName === `TEXTAREA`)
+        return;
+    if (event.key === `f` && fullscreen_toggle)
+        toggle_fullscreen(wrapper);
+    else if (event.key === `i`)
+        info_pane_open = !info_pane_open;
+    else if (event.key === `Escape`) {
+        if (info_pane_open)
+            info_pane_open = false;
+        else
+            controls_open = false;
+    }
+}
+$effect(() => {
+    if (typeof window === `undefined`)
+        return;
+    const fs_el = document.fullscreenElement;
+    if (fullscreen && fs_el !== wrapper && wrapper) {
+        wrapper.requestFullscreen().catch(console.error);
+    }
+    else if (!fullscreen && fs_el === wrapper)
+        document.exitFullscreen();
+});
+</script>
+
+<svelte:document
+  onfullscreenchange={() => {
+    fullscreen = Boolean(document.fullscreenElement)
+    on_fullscreen_change?.({ structure, bz_data, bz_order, is_fullscreen: fullscreen })
+  }}
+/>
+
+<div
+  class:dragover
+  class:active={info_pane_open || controls_open || export_pane_open}
+  role="region"
+  aria-label="Brillouin zone viewer"
+  bind:this={wrapper}
+  bind:clientWidth={width}
+  bind:clientHeight={height}
+  onmouseenter={() => (hovered = true)}
+  onmouseleave={() => (hovered = false)}
+  ondrop={handle_file_drop}
+  ondragover={(event) => {
+    event.preventDefault()
+    if (!allow_file_drop) return
+    dragover = true
+  }}
+  ondragleave={(event) => {
+    event.preventDefault()
+    dragover = false
+  }}
+  {onkeydown}
+  {...rest}
+  class="brillouin-zone {rest.class ?? ``}"
+>
+  {@render children?.({ structure, bz_data })}
+  {#if loading}
+    <Spinner text="Loading structure..." {...spinner_props} />
+  {:else if error_msg}
+    <div class="error-state">
+      <p class="error">{error_msg}</p>
+      <button onclick={() => (error_msg = undefined)}>Dismiss</button>
+    </div>
+  {:else if structure && `lattice` in structure}
+    <section class:visible={visible_buttons} class="control-buttons">
+      {#if visible_buttons}
+        {#if current_filename}
+          <span class="filename">{current_filename}</span>
+        {/if}
+
+        {#if fullscreen_toggle}
+          <button
+            type="button"
+            onclick={() => fullscreen_toggle && toggle_fullscreen(wrapper)}
+            title="{fullscreen ? `Exit` : `Enter`} fullscreen"
+            aria-pressed={fullscreen}
+            class="fullscreen-toggle"
+            style="padding: 0"
+            {@attach tooltip()}
+          >
+            {#if typeof fullscreen_toggle === `function`}
+              {@render fullscreen_toggle()}
+            {:else}
+              <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" />
+            {/if}
+          </button>
+        {/if}
+
+        <BrillouinZoneInfoPane {structure} {bz_data} bind:pane_open={info_pane_open} />
+
+        <BrillouinZoneExportPane
+          bind:export_pane_open
+          {bz_data}
+          {wrapper}
+          {scene}
+          {camera}
+          bind:png_dpi
+          filename={current_filename || `brillouin-zone`}
+        />
+
+        <BrillouinZoneControls
+          bind:controls_open
+          bind:bz_order
+          bind:surface_color
+          bind:surface_opacity
+          bind:edge_color
+          bind:edge_width
+          bind:show_vectors
+          bind:vector_scale
+          bind:camera_projection
+        />
+      {/if}
+    </section>
+
+    {#if typeof WebGLRenderingContext !== `undefined`}
+      <div style="overflow: hidden; height: 100%">
+        <Canvas>
+          <BrillouinZoneScene
+            {bz_data}
+            {surface_color}
+            {surface_opacity}
+            {edge_color}
+            {edge_width}
+            {show_vectors}
+            {vector_scale}
+            {camera_projection}
+            bind:scene
+            bind:camera
+          />
+        </Canvas>
+      </div>
+    {/if}
+  {:else if structure}
+    <p class="warn">Structure must have a lattice to compute Brillouin zone</p>
+  {:else}
+    <div class="empty-state">
+      <h3>Drop Structure File</h3>
+      <p>
+        Supports CIF, POSCAR, JSON, (ext)XYZ, (+ .gz)
+      </p>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .brillouin-zone {
+    position: relative;
+    container-type: size;
+    height: var(--bz-height, 500px);
+    width: var(--bz-width, 100%);
+    max-width: var(--bz-max-width, 100%);
+    min-width: var(--bz-min-width, 300px);
+    border-radius: var(--bz-border-radius, 3pt);
+    background: var(--bz-bg, var(--surface-bg));
+    color: var(--bz-text-color, var(--text-color));
+  }
+  .brillouin-zone.active {
+    z-index: var(--bz-active-z-index, 2);
+  }
+  .brillouin-zone:fullscreen {
+    background: var(--bz-bg-fullscreen, var(--surface-bg));
+  }
+  .brillouin-zone:fullscreen :global(canvas) {
+    height: 100vh !important;
+    width: 100vw !important;
+  }
+  .brillouin-zone.dragover {
+    background: var(--bz-dragover-bg, var(--dragover-bg));
+    border: var(--bz-dragover-border, var(--dragover-border));
+  }
+  .brillouin-zone :global(canvas) {
+    user-select: none;
+  }
+  section.control-buttons {
+    position: absolute;
+    display: flex;
+    top: var(--bz-buttons-top, var(--ctrl-btn-top, 1ex));
+    right: var(--bz-buttons-right, var(--ctrl-btn-right, 1ex));
+    gap: clamp(6pt, 1cqmin, 9pt);
+    z-index: var(--bz-buttons-z-index, 100000000);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    align-items: center;
+  }
+  section.control-buttons.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  section.control-buttons > :global(button) {
+    background-color: transparent;
+    display: flex;
+    padding: 0;
+    font-size: clamp(1em, 2cqmin, 2.5em);
+  }
+  section.control-buttons :global(button:hover) {
+    background-color: var(--pane-btn-bg-hover);
+  }
+  .filename {
+    font-family: monospace;
+    font-size: 0.9em;
+    background: var(--code-bg, rgba(0, 0, 0, 0.1));
+    padding: 3pt 6pt;
+    border-radius: 3pt;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  p.warn {
+    text-align: center;
+    padding: 2rem;
+  }
+  .error-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+    text-align: center;
+    box-sizing: border-box;
+  }
+  .error-state p {
+    color: var(--error-color, #ff6b6b);
+    margin: 0 0 1rem;
+  }
+  .error-state button {
+    padding: 0.5rem 1rem;
+    background: var(--error-color, #ff6b6b);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .error-state button:hover {
+    background: var(--error-color-hover, #ff5252);
+  }
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+  }
+  .empty-state h3 {
+    margin: 0 0 0.5em;
+    font-size: 1.5em;
+  }
+  .empty-state p {
+    color: var(--text-color-muted);
+    margin: 0;
+  }
+</style>

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

@@ -0,0 +1,57 @@
+import { Spinner } from '..';
+import { type CameraProjection } from '../settings';
+import type { PymatgenStructure } from '../structure';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BrillouinZoneData } from './types';
+type BZHandlerData = {
+    structure?: PymatgenStructure;
+    bz_data?: BrillouinZoneData;
+    bz_order?: number;
+    filename?: string;
+    file_size?: number;
+    error_msg?: string;
+    is_fullscreen?: boolean;
+};
+type $$ComponentProps = {
+    structure?: PymatgenStructure;
+    bz_order?: number;
+    bz_data?: BrillouinZoneData;
+    controls_open?: boolean;
+    info_pane_open?: boolean;
+    surface_color?: string;
+    surface_opacity?: number;
+    edge_color?: string;
+    edge_width?: number;
+    show_vectors?: boolean;
+    vector_scale?: number;
+    camera_projection?: CameraProjection;
+    show_controls?: boolean | number;
+    fullscreen?: boolean;
+    width?: number;
+    height?: number;
+    wrapper?: HTMLDivElement;
+    png_dpi?: number;
+    hovered?: boolean;
+    dragover?: boolean;
+    allow_file_drop?: boolean;
+    fullscreen_toggle?: Snippet<[]> | boolean;
+    data_url?: string;
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void;
+    spinner_props?: ComponentProps<typeof Spinner>;
+    loading?: boolean;
+    error_msg?: string;
+    structure_string?: string;
+    children?: Snippet<[
+        {
+            structure?: PymatgenStructure;
+            bz_data?: BrillouinZoneData;
+        }
+    ]>;
+    on_file_load?: (data: BZHandlerData) => void;
+    on_error?: (data: BZHandlerData) => void;
+    on_fullscreen_change?: (data: BZHandlerData) => void;
+} & HTMLAttributes<HTMLDivElement>;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "loading" | "dragover" | "structure" | "camera_projection" | "info_pane_open" | "hovered" | "controls_open" | "wrapper" | "png_dpi" | "error_msg" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale">;
+type BrillouinZone = ReturnType<typeof BrillouinZone>;
+export default BrillouinZone;

package/dist/brillouin/BrillouinZoneControls.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import { DraggablePane, SettingsSection } from '..';
+let { controls_open = $bindable(false), bz_order = $bindable(1), surface_color = $bindable(`#4488ff`), surface_opacity = $bindable(0.3), edge_color = $bindable(`#000000`), edge_width = $bindable(0.05), show_vectors = $bindable(true), camera_projection = $bindable(`perspective`), } = $props();
+</script>
+
+<DraggablePane
+  bind:show={controls_open}
+  open_icon="Cross"
+  closed_icon="Settings"
+  pane_props={{ class: `bz-controls` }}
+  toggle_props={{ class: `controls-toggle`, title: `Brillouin zone controls` }}
+>
+  <SettingsSection
+    title="Brillouin Zone Controls"
+    current_values={{ bz_order, show_vectors }}
+    on_reset={() => {
+      bz_order = 1
+      show_vectors = true
+    }}
+    style="display: flex; gap: 2ex; flex-wrap: wrap"
+  >
+    <label>
+      <span>Order:</span>
+      <select bind:value={bz_order}>
+        <option value={1}>1st BZ</option>
+        <option value={2}>2nd BZ</option>
+        <option value={3}>3rd BZ</option>
+      </select>
+    </label>
+    <label>
+      <span>Show Vectors:</span>
+      <input type="checkbox" bind:checked={show_vectors} />
+    </label>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Surface"
+    current_values={{ surface_color, surface_opacity }}
+    on_reset={() => {
+      surface_color = `#4488ff`
+      surface_opacity = 0.3
+    }}
+  >
+    <label>
+      <span>Color:</span>
+      <input type="color" bind:value={surface_color} />
+    </label>
+    <label>
+      <span>Opacity:</span>
+      <input type="range" min="0" max="1" step="0.01" bind:value={surface_opacity} />
+      <span class="value">{surface_opacity.toFixed(2)}</span>
+    </label>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Edges"
+    current_values={{ edge_color, edge_width }}
+    on_reset={() => {
+      edge_color = `#000000`
+      edge_width = 0.05
+    }}
+  >
+    <label>
+      <span>Color:</span>
+      <input type="color" bind:value={edge_color} />
+    </label>
+    <label>
+      <span>Width:</span>
+      <input type="range" min="0.01" max="0.2" step="0.01" bind:value={edge_width} />
+      <span class="value">{edge_width.toFixed(2)}</span>
+    </label>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Camera"
+    current_values={{ camera_projection }}
+    on_reset={() => {
+      camera_projection = `perspective`
+    }}
+  >
+    <label>
+      <span>Projection:</span>
+      <select bind:value={camera_projection}>
+        <option value="perspective">Perspective</option>
+        <option value="orthographic">Orthographic</option>
+      </select>
+    </label>
+  </SettingsSection>
+</DraggablePane>

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

@@ -0,0 +1,14 @@
+import type { CameraProjection } from '../settings';
+type $$ComponentProps = {
+    controls_open?: boolean;
+    bz_order?: number;
+    surface_color?: string;
+    surface_opacity?: number;
+    edge_color?: string;
+    edge_width?: number;
+    show_vectors?: boolean;
+    camera_projection?: CameraProjection;
+};
+declare const BrillouinZoneControls: import("svelte").Component<$$ComponentProps, {}, "camera_projection" | "controls_open" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors">;
+type BrillouinZoneControls = ReturnType<typeof BrillouinZoneControls>;
+export default BrillouinZoneControls;

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">import { DraggablePane } from '..';
+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;
+    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;
+    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);
+}
+</script>
+
+<DraggablePane
+  bind:show={export_pane_open}
+  open_icon="Cross"
+  closed_icon="Export"
+  pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+  toggle_props={{
+    class: `bz-export-toggle`,
+    title: export_pane_open ? `` : `Export Brillouin zone`,
+  }}
+>
+  <h4>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
+    {@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>
+    <button
+      type="button"
+      onclick={copy_json}
+      disabled={!bz_data}
+      title="Copy JSON to clipboard"
+    >
+      {copy_status ? copy_confirm : `📋`}
+    </button>
+  </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>

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Camera, Scene } from 'three';
+import type { BrillouinZoneData } from './types';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    export_pane_open?: boolean;
+    bz_data?: BrillouinZoneData;
+    wrapper?: HTMLDivElement;
+    scene?: Scene;
+    camera?: Camera;
+    filename?: string;
+    png_dpi?: number;
+};
+declare const BrillouinZoneExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+type BrillouinZoneExportPane = ReturnType<typeof BrillouinZoneExportPane>;
+export default BrillouinZoneExportPane;