matterviz 0.3.2 → 0.3.4

package/dist/structure/CellSelect.svelte

@@ -1,58 +1,85 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import Spinner from '../feedback/Spinner.svelte';
-import { is_valid_supercell_input } from './supercell';
-import { click_outside, tooltip } from 'svelte-multiselect/attachments';
-import { fade } from 'svelte/transition';
-let { supercell_scaling = $bindable(`1x1x1`), cell_type = $bindable(`original`), sym_data = null, loading = $bindable(false), direction = `down`, align = `right`, } = $props();
-let menu_open = $state(false);
-let input_value = $state(supercell_scaling);
-let input_valid = $derived(is_valid_supercell_input(input_value));
-const supercell_presets = [`1x1x1`, `2x2x2`, `3x3x3`, `2x2x1`, `3x3x1`, `2x1x1`];
-// Always show all 3 cell types - Prim/Conv disabled without sym_data
-const cell_types = [`original`, `primitive`, `conventional`];
-const cell_labels = {
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import Spinner from '../feedback/Spinner.svelte'
+  import { is_valid_supercell_input } from './supercell'
+  import type { CellType } from '../symmetry'
+  import type { MoyoDataset } from '@spglib/moyo-wasm'
+  import { click_outside, tooltip } from 'svelte-multiselect/attachments'
+  import { fade } from 'svelte/transition'
+
+  let {
+    supercell_scaling = $bindable(`1x1x1`),
+    cell_type = $bindable(`original`),
+    sym_data = null,
+    loading = $bindable(false),
+    direction = `down`,
+    align = `right`,
+  }: {
+    supercell_scaling: string
+    cell_type?: CellType
+    sym_data?: MoyoDataset | null
+    loading?: boolean
+    direction?: `up` | `down`
+    align?: `left` | `right`
+  } = $props()
+
+  let menu_open = $state(false)
+  let input_value = $state(supercell_scaling)
+  let input_valid = $derived(is_valid_supercell_input(input_value))
+
+  const supercell_presets = [`1x1x1`, `2x2x2`, `3x3x3`, `2x2x1`, `3x3x1`, `2x1x1`]
+
+  // Always show all 3 cell types - Prim/Conv disabled without sym_data
+  const cell_types: CellType[] = [`original`, `primitive`, `conventional`]
+  const cell_labels: Record<CellType, string> = {
     original: `Orig`,
     primitive: `Prim`,
     conventional: `Conv`,
-};
-const cell_tooltips = {
+  }
+  const cell_tooltips: Record<CellType, string> = {
     original: `Original unit cell (as provided)`,
     primitive: `Primitive cell (smallest repeating unit)`,
     conventional: `Conventional cell (standardized representation)`,
-};
-const hair_space = `\u200A`;
-const format_supercell_label = (supercell_value) => supercell_value.replaceAll(`x`, `${hair_space}x${hair_space}`);
-function apply_preset(preset) {
-    supercell_scaling = preset;
-    input_value = preset;
-    menu_open = false;
-}
-function handle_input_submit() {
+  }
+  const hair_space = `\u200A`
+
+  const format_supercell_label = (supercell_value: string): string =>
+    supercell_value.replaceAll(`x`, `${hair_space}x${hair_space}`)
+
+  function apply_preset(preset: string) {
+    supercell_scaling = preset
+    input_value = preset
+    menu_open = false
+  }
+
+  function handle_input_submit() {
     if (input_valid && input_value !== supercell_scaling) {
-        supercell_scaling = input_value;
-        menu_open = false;
+      supercell_scaling = input_value
+      menu_open = false
     }
-}
-function handle_focus_out(event) {
-    const next_target = event.relatedTarget;
-    const current_target = event.currentTarget;
-    if (!(current_target instanceof Node) ||
-        !(next_target instanceof Node) ||
-        !current_target.contains(next_target))
-        menu_open = false;
-}
-function handle_key_down(event, submit_on_enter = false) {
-    if (event.key === `Escape`)
-        menu_open = false;
-    if (submit_on_enter && event.key === `Enter`)
-        handle_input_submit();
-}
-// Sync input value when external prop changes
-$effect(() => {
+  }
+
+  function handle_focus_out(event: FocusEvent) {
+    const next_target = event.relatedTarget
+    const current_target = event.currentTarget
+    if (
+      !(current_target instanceof Node) ||
+      !(next_target instanceof Node) ||
+      !current_target.contains(next_target)
+    ) menu_open = false
+  }
+
+  function handle_key_down(event: KeyboardEvent, submit_on_enter: boolean = false) {
+    if (event.key === `Escape`) menu_open = false
+    if (submit_on_enter && event.key === `Enter`) handle_input_submit()
+  }
+
+  // Sync input value when external prop changes
+  $effect(() => {
     if (!menu_open && supercell_scaling && supercell_scaling !== input_value) {
-        input_value = supercell_scaling;
+      input_value = supercell_scaling
     }
-});
+  })
 </script>
 
 <div

package/dist/structure/Cylinder.svelte

@@ -1,26 +1,42 @@
-<script lang="ts">import { T } from '@threlte/core';
-import { Euler, Quaternion, Vector3 } from 'three';
-let { from, to, color = `#808080`, thickness = 0.1 } = $props();
-let from_vec = $derived(new Vector3(...from));
-let to_vec = $derived(new Vector3(...to));
-let { position, rotation, height } = $derived(calc_bond(from_vec, to_vec));
-function calc_bond(from_vec, to_vec) {
+<script lang="ts">
+  import type { Vec3 } from '../math'
+  import { T } from '@threlte/core'
+  import { Euler, Quaternion, Vector3 } from 'three'
+
+  let { from, to, color = `#808080`, thickness = 0.1 }: {
+    from: Vec3
+    to: Vec3
+    color?: string
+    thickness?: number
+  } = $props()
+
+  let from_vec = $derived(new Vector3(...from))
+  let to_vec = $derived(new Vector3(...to))
+  let { position, rotation, height } = $derived(calc_bond(from_vec, to_vec))
+
+  function calc_bond(
+    from_vec: Vector3,
+    to_vec: Vector3,
+  ): { position: Vec3; rotation: Vec3; height: number } {
     // find the axis of the cylinder
-    const delta_vec = to_vec.clone().sub(from_vec);
+    const delta_vec = to_vec.clone().sub(from_vec)
     // length of the cylinder
-    const height = delta_vec.length();
+    const height = delta_vec.length()
     // calculate position (midpoint between from and to)
     const position = from_vec
-        .clone()
-        .add(delta_vec.multiplyScalar(0.5))
-        .toArray();
+      .clone()
+      .add(delta_vec.multiplyScalar(0.5))
+      .toArray() as Vec3
     // calculate rotation
-    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), delta_vec.normalize());
-    const euler = new Euler().setFromQuaternion(quaternion);
-    const rotation = [euler.x, euler.y, euler.z];
+    const quaternion = new Quaternion().setFromUnitVectors(
+      new Vector3(0, 1, 0),
+      delta_vec.normalize(),
+    )
+    const euler = new Euler().setFromQuaternion(quaternion)
+    const rotation: Vec3 = [euler.x, euler.y, euler.z]
     // return results
-    return { height, position, rotation };
-}
+    return { height, position, rotation }
+  }
 </script>
 
 <T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>

package/dist/structure/Lattice.svelte

@@ -1,43 +1,98 @@
 <!-- Export default values for use in other components -->
-<script lang="ts">import { format_num } from '../labels';
-import * as math from '../math';
-import { DEFAULTS } from '../settings';
-import { CanvasTooltip } from './';
-import { T } from '@threlte/core';
-import { BoxGeometry, EdgesGeometry, Euler, Matrix4, Quaternion, Vector3, } from 'three';
-let { matrix = undefined, cell_edge_color = DEFAULTS.structure.cell_edge_color, cell_surface_color = DEFAULTS.structure.cell_surface_color, cell_edge_width = DEFAULTS.structure.cell_edge_width, cell_edge_opacity = DEFAULTS.structure.cell_edge_opacity, cell_surface_opacity = DEFAULTS.structure.cell_surface_opacity, show_cell_vectors = true, vector_colors = [`red`, `green`, `blue`], vector_origin = [-1, -1, -1], float_fmt = `.2f`, } = $props();
-let hovered_idx = $state(null); // track hovered vector
-let lattice_center = $derived(matrix
-    ? math.scale(math.add(...matrix), 0.5)
-    : [0, 0, 0]);
-// Extract line segments from EdgesGeometry for cylinder-based thick lines
-function get_edge_segments(edges_geometry) {
-    const positions = edges_geometry.getAttribute(`position`).array;
-    const segments = [];
+<script lang="ts">
+  import { format_num } from '../labels'
+  import type { Vec3 } from '../math'
+  import * as math from '../math'
+  import { DEFAULTS } from '../settings'
+  import { CanvasTooltip } from './'
+  import { T } from '@threlte/core'
+  import {
+    BoxGeometry,
+    EdgesGeometry,
+    Euler,
+    Matrix4,
+    Quaternion,
+    Vector3,
+  } from 'three'
+
+  let {
+    matrix = undefined,
+    cell_edge_color = DEFAULTS.structure.cell_edge_color,
+    cell_surface_color = DEFAULTS.structure.cell_surface_color,
+    cell_edge_width = DEFAULTS.structure.cell_edge_width,
+    cell_edge_opacity = DEFAULTS.structure.cell_edge_opacity,
+    cell_surface_opacity = DEFAULTS.structure.cell_surface_opacity,
+    show_cell_vectors = true,
+    vector_colors = [`red`, `green`, `blue`],
+    vector_origin = [-1, -1, -1] satisfies Vec3,
+    float_fmt = `.2f`,
+  }: {
+    matrix?: math.Matrix3x3
+    cell_edge_color?: string
+    cell_surface_color?: string
+    cell_edge_width?: number // thickness of the cell edges
+    cell_edge_opacity?: number // opacity of the cell edges
+    cell_surface_opacity?: number // opacity of the cell surfaces
+    show_cell_vectors?: boolean // whether to show the lattice vectors
+    vector_colors?: readonly [string, string, string] // lattice vector colors
+    vector_origin?: Vec3 // lattice vector origin (all arrows start from this point)
+    float_fmt?: string
+  } = $props()
+
+  let hovered_idx = $state<number | null>(null) // track hovered vector
+  let lattice_center = $derived(
+    matrix
+      ? (math.scale(math.add(...matrix), 0.5) satisfies Vec3)
+      : ([0, 0, 0] satisfies Vec3),
+  )
+
+  // Extract line segments from EdgesGeometry for cylinder-based thick lines
+  function get_edge_segments(edges_geometry: EdgesGeometry): [Vector3, Vector3][] {
+    const positions = edges_geometry.getAttribute(`position`).array as Float32Array
+    const segments: [Vector3, Vector3][] = []
+
     for (let idx = 0; idx < positions.length; idx += 6) {
-        const start = new Vector3(positions[idx + 0], positions[idx + 1], positions[idx + 2]);
-        const end = new Vector3(positions[idx + 3], positions[idx + 4], positions[idx + 5]);
-        segments.push([start, end]);
+      const start = new Vector3(
+        positions[idx + 0],
+        positions[idx + 1],
+        positions[idx + 2],
+      )
+      const end = new Vector3(
+        positions[idx + 3],
+        positions[idx + 4],
+        positions[idx + 5],
+      )
+      segments.push([start, end])
     }
-    return segments;
-}
-// Calculate cylinder transform for a line segment
-function get_cylinder_transform(start, end) {
-    const direction = end.clone().sub(start);
-    const length = direction.length();
-    const center = start.clone().add(end).multiplyScalar(0.5);
+
+    return segments
+  }
+
+  // Calculate cylinder transform for a line segment
+  function get_cylinder_transform(
+    start: Vector3,
+    end: Vector3,
+  ): { position: Vec3; rotation: Vec3; length: number } {
+    const direction = end.clone().sub(start)
+    const length = direction.length()
+    const center = start.clone().add(end).multiplyScalar(0.5)
+
     if (length === 0) { // Zero-length: no rotation; render a degenerate cylinder
-        return { position: center.toArray(), rotation: [0, 0, 0], length };
+      return { position: center.toArray(), rotation: [0, 0, 0], length }
     }
     // Calculate rotation to align cylinder with the line (zero-length guarded above)
-    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), direction.normalize());
-    const euler = new Euler().setFromQuaternion(quaternion);
+    const quaternion = new Quaternion().setFromUnitVectors(
+      new Vector3(0, 1, 0),
+      direction.normalize(),
+    )
+    const euler = new Euler().setFromQuaternion(quaternion)
+
     return {
-        position: center.toArray(),
-        rotation: euler.toArray().slice(0, 3),
-        length,
-    };
-}
+      position: center.toArray(),
+      rotation: euler.toArray().slice(0, 3) as Vec3,
+      length,
+    }
+  }
 </script>
 
 {#if matrix}