matterviz 0.1.12 → 0.1.13

package/dist/structure/Bond.svelte

@@ -1,114 +1,130 @@
-<script lang="ts">import { format_num } from '../labels';
-import { DEFAULTS } from '../settings';
-import { CanvasTooltip } from './';
-import { T } from '@threlte/core';
-import { interactivity } from '@threlte/extras';
-import { CanvasTexture, Euler, Quaternion, Vector3 } from 'three';
-let { from, to, color = DEFAULTS.structure.bond_color, thickness = DEFAULTS.structure.bond_thickness, offset = 0, from_color, to_color, bond_data, bonding_strategy, active_tooltip, hovered_bond_data, onbondhover, ontooltipchange, onpointerenter, onpointerleave, ...rest } = $props();
-interactivity();
-const from_vec = new Vector3(...from);
-const to_vec = new Vector3(...to);
-const { position, rotation, height } = calc_bond(from_vec, to_vec, offset, thickness);
-// Create gradient texture when both colors are provided
-let gradient_texture = $derived.by(() => {
-    if (!from_color || !to_color)
-        return null;
-    // Create a canvas for the gradient
-    const canvas = document.createElement(`canvas`);
-    canvas.width = 1;
-    canvas.height = 256;
-    const ctx = canvas.getContext(`2d`);
-    // Create linear gradient along Y axis (cylinder height)
-    const gradient = ctx.createLinearGradient(0, 0, 0, 256);
-    gradient.addColorStop(0, to_color);
-    gradient.addColorStop(1, from_color);
-    // Fill the canvas with the gradient
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, 1, 256);
-    // Create texture from canvas
-    const texture = new CanvasTexture(canvas);
-    texture.needsUpdate = true;
-    return texture;
-});
-const pointer_handlers = {
-    onpointerenter: (event) => {
-        if (bond_data) {
-            onbondhover?.(bond_data);
-            ontooltipchange?.(`bond`);
-        }
-        onpointerenter?.(event);
-    },
-    onpointerleave: (event) => {
-        onbondhover?.(null);
-        ontooltipchange?.(null);
-        onpointerleave?.(event);
-    },
-};
-function calc_bond(from_vec, to_vec, offset, thickness) {
-    // find the axis of the the box
-    const delta_vec = to_vec.clone().sub(from_vec);
-    // length of the bond
-    const height = delta_vec.length();
-    // calculate position
-    let position;
-    if (offset === 0) {
-        position = from_vec.clone().add(delta_vec.multiplyScalar(0.5)).toArray();
+<script lang="ts">import { T } from '@threlte/core';
+import { Color, InstancedBufferAttribute, Matrix4, ShaderMaterial } from 'three';
+let { group, saturation = 0.5, brightness = 0.6 } = $props();
+let mesh = $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() {
+      // Colors from Three.js Color class are in linear RGB, pass them through
+      vColorStart = instanceColorStart;
+      vColorEnd = instanceColorEnd;
+      vYPosition = position.y;
+      mat3 normalMat = normalMatrix;
+      vNormal = normalize(normalMat * 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;
+
+    // Linear to sRGB conversion (gamma correction)
+    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
+      );
     }
-    else {
-        const offset_vec = new Vector3()
-            .crossVectors(delta_vec, new Vector3(1, 0, 0))
-            .normalize();
-        position = from_vec.clone().add(delta_vec.multiplyScalar(0.5)).add(offset_vec.multiplyScalar(offset * thickness * 2)).toArray();
+
+    // Desaturate and darken colors for bonds
+    vec3 desaturateBondColor(vec3 color) {
+      // Convert to grayscale
+      float gray = dot(color, vec3(0.299, 0.587, 0.114));
+      // Mix with gray (controlled by saturation) and darken (controlled by brightness)
+      return mix(vec3(gray), color, saturation) * brightness;
     }
-    // calculate rotation
-    const quaternion = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), delta_vec.normalize());
-    const rotation = new Euler().setFromQuaternion(quaternion).toArray();
-    // return results
-    return { height, position, rotation };
-}
-</script>
 
-{#if gradient_texture}
-  <!-- Use gradient material for bonds with two colors -->
-  <T.Mesh
-    {...rest}
-    {position}
-    {rotation}
-    scale={[thickness, height, thickness]}
-    {...pointer_handlers}
-  >
-    <T.CylinderGeometry args={[thickness, thickness, 1, 16]} />
-    <T.MeshStandardMaterial map={gradient_texture} />
-  </T.Mesh>
-{:else}
-  <!-- Fallback to solid color -->
-  <T.Mesh
-    {...rest}
-    {position}
-    {rotation}
-    scale={[thickness, height, thickness]}
-    {...pointer_handlers}
-  >
-    <T.CylinderGeometry args={[thickness, thickness, 1, 16]} />
-    <T.MeshStandardMaterial {color} />
-  </T.Mesh>
-{/if}
+    void main() {
+      // Mix colors first: bottom (-0.5) = start color, top (+0.5) = end color
+      vec3 baseColor = mix(vColorStart, vColorEnd, vYPosition + 0.5);
+
+      // Desaturate and darken bond colors
+      baseColor = desaturateBondColor(baseColor);
+
+      // Apply lighting to the mixed color
+      vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
+      float diffuse = max(dot(vNormal, lightDir), 0.0);
+
+      vec3 finalColor = baseColor * (ambientIntensity + directionalIntensity * diffuse);
+
+      // Convert to sRGB for display
+      gl_FragColor = vec4(linearTosRGB(finalColor), 1.0);
+    }
+  `;
+$effect(() => {
+    if (!mesh)
+        return;
+    const count = group.instances.length;
+    const matrix = new Matrix4();
+    const temp_color = new Color();
+    // Reallocate color buffers if needed
+    if (colors_start.length !== count * 3) {
+        colors_start = new Float32Array(count * 3);
+        colors_end = new Float32Array(count * 3);
+    }
+    // Set matrices and colors in single loop
+    for (let idx = 0; idx < count; idx++) {
+        const instance = group.instances[idx];
+        // Set matrix
+        matrix.fromArray(instance.matrix);
+        mesh.setMatrixAt(idx, matrix);
+        // Set start color
+        temp_color.set(instance.color_start);
+        colors_start[idx * 3] = temp_color.r;
+        colors_start[idx * 3 + 1] = temp_color.g;
+        colors_start[idx * 3 + 2] = temp_color.b;
+        // Set end color
+        temp_color.set(instance.color_end);
+        colors_end[idx * 3] = temp_color.r;
+        colors_end[idx * 3 + 1] = temp_color.g;
+        colors_end[idx * 3 + 2] = temp_color.b;
+    }
+    mesh.instanceMatrix.needsUpdate = true;
+    // Update or create color attributes
+    const { geometry } = mesh;
+    for (const [name, buffer] of [
+        [`instanceColorStart`, colors_start],
+        [`instanceColorEnd`, colors_end],
+    ]) {
+        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>
 
-<!-- Bond tooltip on hover -->
-{#if active_tooltip === `bond` && hovered_bond_data && bond_data &&
-    hovered_bond_data === bond_data}
-  {@const midpoint = [
-    (from[0] + to[0]) / 2,
-    (from[1] + to[1]) / 2,
-    (from[2] + to[2]) / 2,
-  ] as Vec3}
-  <CanvasTooltip position={midpoint}>
-    <strong>Distance:</strong> {format_num(bond_data.bond_length, `.3f`)} Å (sites {
-      bond_data.site_idx_1
-    } ↔ {bond_data.site_idx_2})<br>
-    {#if bond_data.strength}
-      <strong>Strength:</strong> {format_num(bond_data.strength, `.3f`)}
-      {#if bonding_strategy}({bonding_strategy.replace(/_/g, ` `)}){/if}
-    {/if}
-  </CanvasTooltip>
-{/if}
+<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/structure/Bond.svelte.d.ts

@@ -1,22 +1,9 @@
-import type { BondPair, Vec3 } from '..';
-import type { BondingStrategy } from './bonding';
-import { T } from '@threlte/core';
-import type { ComponentProps } from 'svelte';
-interface Props extends ComponentProps<typeof T.Mesh> {
-    from: Vec3;
-    to: Vec3;
-    color?: string;
-    thickness?: number;
-    offset?: number;
-    from_color?: string;
-    to_color?: string;
-    bond_data?: BondPair;
-    bonding_strategy?: BondingStrategy;
-    active_tooltip?: `atom` | `bond` | null;
-    hovered_bond_data?: BondPair | null;
-    onbondhover?: (bond_data: BondPair | null) => void;
-    ontooltipchange?: (type: `atom` | `bond` | null) => void;
-}
-declare const Bond: import("svelte").Component<Props, {}, "">;
+import type { BondGroupWithGradients } from './';
+type $$ComponentProps = {
+    group: BondGroupWithGradients;
+    saturation?: number;
+    brightness?: number;
+};
+declare const Bond: import("svelte").Component<$$ComponentProps, {}, "">;
 type Bond = ReturnType<typeof Bond>;
 export default Bond;

package/dist/structure/CanvasTooltip.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Vec3 } from '../math';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     position: Vec3;
-    children: Snippet;
-}
-declare const CanvasTooltip: import("svelte").Component<Props, {}, "">;
+    children: Snippet<[]>;
+};
+declare const CanvasTooltip: import("svelte").Component<$$ComponentProps, {}, "">;
 type CanvasTooltip = ReturnType<typeof CanvasTooltip>;
 export default CanvasTooltip;

package/dist/structure/Cylinder.svelte

@@ -0,0 +1,29 @@
+<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) {
+    // find the axis of the cylinder
+    const delta_vec = to_vec.clone().sub(from_vec);
+    // length of the cylinder
+    const height = delta_vec.length();
+    // calculate position (midpoint between from and to)
+    const position = from_vec
+        .clone()
+        .add(delta_vec.multiplyScalar(0.5))
+        .toArray();
+    // 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];
+    // return results
+    return { height, position, rotation };
+}
+</script>
+
+<T.Mesh {position} {rotation} scale={[thickness, height, thickness]}>
+  <T.CylinderGeometry args={[thickness, thickness, 1, 8]} />
+  <T.MeshStandardMaterial {color} />
+</T.Mesh>

package/dist/structure/Cylinder.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Vec3 } from '..';
+type $$ComponentProps = {
+    from: Vec3;
+    to: Vec3;
+    color?: string;
+    thickness?: number;
+};
+declare const Cylinder: import("svelte").Component<$$ComponentProps, {}, "">;
+type Cylinder = ReturnType<typeof Cylinder>;
+export default Cylinder;

package/dist/structure/Lattice.svelte

@@ -88,8 +88,7 @@ function get_cylinder_transform(start, end) {
     {#if show_cell_vectors}
       <T.Group position={vector_origin}>
         {#each matrix as vec, idx (vec)}
-          {@const vector_length = Math.sqrt(vec[0] ** 2 + vec[1] ** 2 + vec[2] ** 2)}
-          {@const shaft_length = vector_length * 0.85}
+          {@const shaft_length = Math.hypot(...vec) * 0.85}
           <!-- Shaft goes to 85% of vector length -->
           {@const tip_start_position = math.scale(vec, 0.85) as Vec3}
           <!-- Calculate rotation to align with vector direction -->

package/dist/structure/Lattice.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Vec3 } from '../math';
 import * as math from '../math';
-interface Props {
+type $$ComponentProps = {
     matrix?: math.Matrix3x3;
     cell_edge_color?: string;
     cell_surface_color?: string;
@@ -11,7 +11,7 @@ interface Props {
     vector_colors?: readonly [string, string, string];
     vector_origin?: Vec3;
     float_fmt?: string;
-}
-declare const Lattice: import("svelte").Component<Props, {}, "">;
+};
+declare const Lattice: import("svelte").Component<$$ComponentProps, {}, "">;
 type Lattice = ReturnType<typeof Lattice>;
 export default Lattice;

package/dist/structure/Structure.svelte

@@ -8,7 +8,7 @@ import { is_valid_supercell_input, make_supercell } from './supercell';
 import { Canvas } from '@threlte/core';
 import { untrack } from 'svelte';
 import { click_outside, tooltip } from 'svelte-multiselect';
-import { StructureControls, StructureInfoPane, StructureLegend, StructureScene, } from './index';
+import { StructureControls, StructureExportPane, StructureInfoPane, StructureLegend, StructureScene, } from './index';
 import { MAX_SELECTED_SITES } from './measure';
 import { parse_any_structure } from './parse';
 // Local reactive state for scene and lattice props. Deeply reactive so nested mutations propagate.
@@ -28,7 +28,9 @@ selected_sites = $bindable([]),
 // expose measured site indices for overlays/labels
 measured_sites = $bindable([]), 
 // expose the displayed structure (with image atoms and supercell) for external use
-displayed_structure = $bindable(undefined), children, on_file_load, on_error, on_fullscreen_change, on_camera_move, on_camera_reset, ...rest } = $props();
+displayed_structure = $bindable(undefined), 
+// Track hidden elements across component lifecycle
+hidden_elements = $bindable(new Set()), children, on_file_load, on_error, on_fullscreen_change, on_camera_move, on_camera_reset, ...rest } = $props();
 // Initialize models from incoming props; mutations come from UI controls; we mirror into local dicts (NOTE only doing shallow merge)
 $effect.pre(() => {
     if (scene_props_in && typeof scene_props_in === `object`) {
@@ -138,6 +140,7 @@ $effect(() => {
 // Measurement mode and selection state
 let measure_mode = $state(`distance`);
 let measure_menu_open = $state(false);
+let export_pane_open = $state(false);
 let visible_buttons = $derived(show_controls === true ||
     (typeof show_controls === `number` && width > show_controls));
 // Create supercell if needed
@@ -344,7 +347,7 @@ $effect(() => {
 
 <div
   class:dragover
-  class:active={info_pane_open || controls_open}
+  class:active={info_pane_open || controls_open || export_pane_open}
   role="region"
   aria-label="Structure viewer"
   bind:this={wrapper}
@@ -474,6 +477,16 @@ $effect(() => {
           />
         {/if}
 
+        <StructureExportPane
+          bind:export_pane_open
+          {structure}
+          {wrapper}
+          {scene}
+          {camera}
+          bind:png_dpi
+          pane_props={{ style: `max-height: calc(${height}px - 50px)` }}
+        />
+
         <StructureControls
           bind:controls_open
           bind:scene_props
@@ -483,16 +496,15 @@ $effect(() => {
           bind:background_color
           bind:background_opacity
           bind:color_scheme
-          bind:png_dpi
           {structure}
-          {wrapper}
-          {scene}
-          {camera}
         />
       {/if}
     </section>
 
-    <StructureLegend elements={get_elem_amounts(supercell_structure ?? structure!)} />
+    <StructureLegend
+      elements={get_elem_amounts(supercell_structure ?? structure!)}
+      bind:hidden_elements
+    />
 
     <!-- prevent from rendering in vitest runner since WebGLRenderingContext not available -->
     {#if typeof WebGLRenderingContext !== `undefined`}
@@ -506,6 +518,9 @@ $effect(() => {
             bind:camera_is_moving
             bind:selected_sites
             bind:measured_sites
+            bind:scene
+            bind:camera
+            bind:hidden_elements
             {measure_mode}
             {width}
             {height}

package/dist/structure/Structure.svelte.d.ts

@@ -1,17 +1,19 @@
-import type { AnyStructure } from '..';
+import type { AnyStructure, ElementSymbol } from '..';
 import { Spinner } from '..';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { StructureHandlerData } from './index';
-import { StructureScene } from './index';
-import type { Props as ControlProps } from './StructureControls.svelte';
+import { StructureControls, StructureScene } from './index';
 type EventHandler = (data: StructureHandlerData) => void;
-interface Props extends Omit<ControlProps, `children` | `onclose`>, Omit<HTMLAttributes<HTMLDivElement>, `children`> {
+type $$ComponentProps = {
+    structure?: AnyStructure;
     scene_props?: ComponentProps<typeof StructureScene>;
     show_controls?: boolean | number;
     fullscreen?: boolean;
     width?: number;
     height?: number;
+    wrapper?: HTMLDivElement;
+    png_dpi?: number;
     reset_text?: string;
     hovered?: boolean;
     dragover?: boolean;
@@ -31,7 +33,8 @@ interface Props extends Omit<ControlProps, `children` | `onclose`>, Omit<HTMLAtt
     performance_mode?: `quality` | `speed`;
     selected_sites?: number[];
     measured_sites?: number[];
-    displayed_structure?: AnyStructure | undefined;
+    displayed_structure?: AnyStructure;
+    hidden_elements?: Set<ElementSymbol>;
     structure_string?: string;
     children?: Snippet<[{
         structure?: AnyStructure;
@@ -41,7 +44,7 @@ interface Props extends Omit<ControlProps, `children` | `onclose`>, Omit<HTMLAtt
     on_fullscreen_change?: EventHandler;
     on_camera_move?: EventHandler;
     on_camera_reset?: EventHandler;
-}
-declare const Structure: import("svelte").Component<Props, {}, "height" | "width" | "loading" | "dragover" | "structure" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "scene_props" | "lattice_props" | "controls_open" | "enable_measure_mode" | "wrapper" | "hovered" | "png_dpi" | "supercell_scaling" | "error_msg" | "performance_mode" | "selected_sites" | "measured_sites" | "displayed_structure">;
+} & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
+declare const Structure: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "loading" | "dragover" | "structure" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "hovered" | "controls_open" | "scene_props" | "lattice_props" | "supercell_scaling" | "enable_measure_mode" | "wrapper" | "png_dpi" | "error_msg" | "performance_mode" | "selected_sites" | "measured_sites" | "displayed_structure" | "hidden_elements">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;