matterviz 0.3.4 → 0.3.6

package/dist/src/lib/structure/Bond.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import type { BondGroupWithGradients } from '$lib/structure'
+  import { T } from '@threlte/core'
+  import type { InstancedMesh } from 'three'
+  import { Color, InstancedBufferAttribute, Matrix4, ShaderMaterial } from 'three'
+
+  let { group, saturation = 0.5, brightness = 0.7 }: {
+    group: BondGroupWithGradients
+    saturation?: number
+    brightness?: number
+  } = $props()
+
+  let mesh: InstancedMesh | undefined = $state()
+  // Reusable buffers to avoid reallocation on every update
+  let colors_start = new Float32Array(0)
+  let colors_end = new Float32Array(0)
+
+  const vertex_shader = `
+    attribute vec3 instanceColorStart;
+    attribute vec3 instanceColorEnd;
+    varying vec3 vColorStart;
+    varying vec3 vColorEnd;
+    varying float vYPosition;
+    varying vec3 vNormal;
+
+    void main() {
+      vColorStart = instanceColorStart;
+      vColorEnd = instanceColorEnd;
+      vYPosition = position.y;
+      vNormal = normalize(normalMatrix * normal);
+      gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+    }
+  `
+
+  const fragment_shader = `
+    uniform float ambientIntensity;
+    uniform float directionalIntensity;
+    uniform float saturation;
+    uniform float brightness;
+    varying vec3 vColorStart;
+    varying vec3 vColorEnd;
+    varying float vYPosition;
+    varying vec3 vNormal;
+
+    vec3 linearTosRGB(vec3 linear) {
+      return vec3(
+        linear.r <= 0.0031308 ? linear.r * 12.92 : 1.055 * pow(linear.r, 1.0/2.4) - 0.055,
+        linear.g <= 0.0031308 ? linear.g * 12.92 : 1.055 * pow(linear.g, 1.0/2.4) - 0.055,
+        linear.b <= 0.0031308 ? linear.b * 12.92 : 1.055 * pow(linear.b, 1.0/2.4) - 0.055
+      );
+    }
+
+    void main() {
+      vec3 base_color = mix(vColorStart, vColorEnd, vYPosition + 0.5);
+
+      // Desaturate and darken for visual distinction from atoms
+      float gray = dot(base_color, vec3(0.299, 0.587, 0.114));
+      base_color = mix(vec3(gray), base_color, saturation) * brightness;
+
+      // Apply lighting
+      vec3 light_dir = normalize(vec3(1.0, 1.0, 1.0));
+      float diffuse = max(dot(vNormal, light_dir), 0.0);
+      vec3 final_color = base_color * (ambientIntensity + directionalIntensity * diffuse);
+
+      gl_FragColor = vec4(linearTosRGB(final_color), 1.0);
+    }
+  `
+
+  function set_color_buffer(
+    buffer: Float32Array,
+    idx: number,
+    color: string,
+    temp_color: Color,
+  ) {
+    temp_color.set(color).convertSRGBToLinear()
+    buffer[idx * 3] = temp_color.r
+    buffer[idx * 3 + 1] = temp_color.g
+    buffer[idx * 3 + 2] = temp_color.b
+  }
+
+  $effect(() => {
+    if (!mesh) return
+
+    const count = group.instances.length
+    const matrix = new Matrix4()
+    const temp_color = new Color()
+
+    // Reallocate buffers if instance count changed
+    if (colors_start.length !== count * 3) {
+      colors_start = new Float32Array(count * 3)
+      colors_end = new Float32Array(count * 3)
+    }
+
+    // Update instance matrices and colors
+    for (let idx = 0; idx < count; idx++) {
+      const instance = group.instances[idx]
+      matrix.fromArray(instance.matrix)
+      mesh.setMatrixAt(idx, matrix)
+      set_color_buffer(colors_start, idx, instance.color_start, temp_color)
+      set_color_buffer(colors_end, idx, instance.color_end, temp_color)
+    }
+
+    mesh.instanceMatrix.needsUpdate = true
+
+    // Update geometry color attributes
+    const { geometry } = mesh
+    for (
+      const [name, buffer] of [
+        [`instanceColorStart`, colors_start],
+        [`instanceColorEnd`, colors_end],
+      ] as const
+    ) {
+      const existing = geometry.getAttribute(name)
+      if (existing?.array === buffer) existing.needsUpdate = true
+      else geometry.setAttribute(name, new InstancedBufferAttribute(buffer, 3))
+    }
+
+    mesh.count = count
+  })
+
+  let shader_material = $derived(
+    new ShaderMaterial({
+      vertexShader: vertex_shader,
+      fragmentShader: fragment_shader,
+      uniforms: {
+        ambientIntensity: { value: group.ambient_light ?? 0.7 },
+        directionalIntensity: { value: group.directional_light ?? 0.3 },
+        saturation: { value: saturation },
+        brightness: { value: brightness },
+      },
+    }),
+  )
+</script>
+
+<T.InstancedMesh
+  args={[undefined, shader_material, group.instances.length]}
+  bind:ref={mesh}
+>
+  <T.CylinderGeometry args={[group.thickness, group.thickness, 1, 8]} />
+</T.InstancedMesh>

package/dist/src/lib/structure/CanvasTooltip.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { HTML } from '@threlte/extras'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Vec3 } from '$lib/math'
+
+  let { position, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    position: Vec3
+    children: Snippet<[{ position: Vec3 }]>
+  } = $props()
+</script>
+
+<HTML {position} pointerEvents="none">
+  <div {...rest} role="tooltip">
+    {@render children({ position })}
+  </div>
+</HTML>
+
+<style>
+  div {
+    width: max-content;
+    box-sizing: border-box;
+    text-align: var(--canvas-tooltip-text-align, left);
+    border-radius: var(--canvas-tooltip-border-radius, var(--border-radius, 3pt));
+    background: var(--canvas-tooltip-bg, light-dark(rgba(226, 232, 240, 0.96), rgba(15, 23, 42, 0.96)));
+    padding: var(--canvas-tooltip-padding, 1pt 5pt);
+    color: var(--canvas-tooltip-text-color, light-dark(#0f172a, #f8fafc));
+    font-family: var(--canvas-tooltip-font-family);
+    font-size: var(--canvas-tooltip-font-size, clamp(8pt, 3cqmin, 18pt));
+    line-height: var(--canvas-tooltip-line-height);
+    pointer-events: none;
+  }
+</style>

package/dist/src/lib/structure/CellSelect.svelte

@@ -0,0 +1,349 @@
+<script lang="ts">
+  import Icon from '$lib/Icon.svelte'
+  import Spinner from '$lib/feedback/Spinner.svelte'
+  import { is_valid_supercell_input } from '$lib/structure/supercell'
+  import type { CellType } from '$lib/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: 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: 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
+    }
+  }
+
+  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
+    }
+  })
+</script>
+
+<div
+  class="cell-select"
+  role="group"
+  {@attach click_outside({ callback: () => (menu_open = false) })}
+  onmouseenter={() => (menu_open = true)}
+  onmouseleave={() => (menu_open = false)}
+  onfocusin={() => (menu_open = true)}
+  onfocusout={handle_focus_out}
+>
+  <button
+    type="button"
+    onclick={() => (menu_open = !menu_open)}
+    onkeydown={handle_key_down}
+    class="toggle-btn"
+    class:active={menu_open}
+    aria-expanded={menu_open}
+    {@attach tooltip({ content: `Cell type & supercell` })}
+  >
+    {#if loading}
+      <Spinner
+        style="--spinner-border-width: 2px; --spinner-size: 1em; --spinner-margin: 0; display: inline-block; vertical-align: middle"
+      />
+    {:else}
+      {cell_type !== `original` ? `${cell_labels[cell_type]} ` : ``}{
+        format_supercell_label(supercell_scaling)
+      }
+    {/if}
+  </button>
+
+  {#if menu_open}
+    <div
+      class="dropdown"
+      class:open-up={direction === `up`}
+      class:align-left={align === `left`}
+      transition:fade={{ duration: 100 }}
+    >
+      <div class="cell-type-row">
+        {#each cell_types as type (type)}
+          {@const disabled = type !== `original` && !sym_data}
+          {@const label = cell_labels[type]}
+          {@const tooltip_text = disabled
+          ? `${cell_tooltips[type]} - requires symmetry data`
+          : cell_tooltips[type]}
+          <button
+            class="cell-type-btn"
+            class:selected={cell_type === type}
+            class:disabled
+            {disabled}
+            onclick={() => (cell_type = type)}
+            title={tooltip_text}
+            {@attach tooltip({ content: tooltip_text })}
+          >
+            {label}
+          </button>
+        {/each}
+      </div>
+
+      <div class="supercell-grid">
+        {#each supercell_presets as preset (preset)}
+          <button
+            class="preset-btn"
+            class:selected={supercell_scaling === preset}
+            onclick={() => apply_preset(preset)}
+          >
+            {format_supercell_label(preset)}
+          </button>
+        {/each}
+      </div>
+
+      <div class="custom-input-row">
+        <input
+          type="text"
+          bind:value={input_value}
+          placeholder="e.g. 2x2x2"
+          class:invalid={!input_valid}
+          onkeydown={(event) => handle_key_down(event, true)}
+        />
+        <button
+          class="apply-btn"
+          disabled={!input_valid || input_value === supercell_scaling}
+          onclick={handle_input_submit}
+          title="Apply"
+        >
+          <Icon icon="Check" />
+        </button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .cell-select {
+    position: relative;
+    font-size: inherit;
+    align-self: center;
+    --cell-select-accent: var(--accent-color, light-dark(#2563eb, #60a5fa));
+    --cell-select-surface: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
+    --cell-select-border: var(
+      --border-color,
+      light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.25))
+    );
+  }
+  .toggle-btn {
+    font: inherit;
+    padding: var(--struct-legend-padding, 0 4pt);
+    line-height: var(--struct-legend-line-height, 1.3);
+    vertical-align: middle;
+    color: inherit;
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius, 3pt);
+    transition: background 0.15s ease;
+  }
+  @media (hover: hover) {
+    .toggle-btn:hover {
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
+    }
+  }
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 2px;
+    background: var(--surface-bg, light-dark(rgba(255, 255, 255, 0.96), #222));
+    padding: 4px;
+    border-radius: var(--struct-border-radius, var(--border-radius, 3pt));
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    z-index: 100;
+    font-size: var(--struct-cell-select-dropdown-font, max(10px, 1em));
+    min-width: 118px;
+  }
+  .dropdown button,
+  .custom-input-row input {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+  }
+  /* Invisible bridge to prevent menu closing when moving mouse from toggle to dropdown */
+  .dropdown::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: 0;
+    right: 0;
+    height: 10px;
+  }
+  .dropdown.open-up {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 2px;
+  }
+  .dropdown.open-up::before {
+    top: auto;
+    bottom: -10px;
+  }
+  .dropdown.align-left {
+    right: auto;
+    left: 0;
+  }
+
+  .cell-type-row {
+    display: flex;
+    gap: 3px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.3));
+  }
+  .cell-type-btn {
+    flex: 1;
+    padding: 1px 3px;
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius, 3pt);
+    transition: background 0.15s ease;
+    white-space: nowrap;
+  }
+  @media (hover: hover) {
+    .cell-type-btn:hover:not(.disabled) {
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
+    }
+  }
+  .cell-type-btn.selected {
+    color: var(--cell-select-accent);
+    background: color-mix(
+      in srgb,
+      var(--cell-select-accent) 18%,
+      var(--cell-select-surface)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--cell-select-accent) 45%,
+      var(--cell-select-border)
+    );
+  }
+  .cell-type-btn.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .supercell-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3px;
+  }
+  .preset-btn {
+    padding: 0 1px;
+    line-height: 1;
+    background: var(--btn-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius, 3pt);
+  }
+  @media (hover: hover) {
+    .preset-btn:hover {
+      background: var(
+        --btn-bg-hover,
+        light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15))
+      );
+    }
+  }
+  .preset-btn.selected {
+    color: var(--cell-select-accent);
+    background: color-mix(
+      in srgb,
+      var(--cell-select-accent) 18%,
+      var(--cell-select-surface)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--cell-select-accent) 45%,
+      var(--cell-select-border)
+    );
+  }
+
+  .custom-input-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .custom-input-row input {
+    max-width: 60px;
+    min-height: 0;
+    padding: 1px 4px;
+  }
+  .custom-input-row input.invalid {
+    border-color: rgba(255, 100, 100, 0.6);
+  }
+  .apply-btn {
+    display: grid;
+    place-items: center;
+    padding: 2px 4px;
+  }
+  .apply-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>

package/dist/src/lib/structure/Cylinder.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Vec3 } from '$lib/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(
+    start_vec: Vector3,
+    end_vec: Vector3,
+  ): { position: Vec3; rotation: Vec3; height: number } {
+    // find the axis of the cylinder
+    const delta_vec = end_vec.clone().sub(start_vec)
+    // length of the cylinder
+    const bond_height = delta_vec.length()
+    // calculate position (midpoint between from and to)
+    const bond_position = start_vec
+      .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 bond_rotation: Vec3 = [euler.x, euler.y, euler.z]
+    // return results
+    return { height: bond_height, position: bond_position, rotation: bond_rotation }
+  }
+</script>
+
+<T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>
+  <T.CylinderGeometry args={[thickness, thickness, 1, 8]} />
+  <T.MeshStandardMaterial {color} />
+</T.Mesh>