matterviz 0.3.6 → 0.3.7

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

@@ -1,140 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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

@@ -1,349 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-<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>