matterviz 0.1.0

package/dist/structure/StructureControls.svelte

@@ -0,0 +1,383 @@
+<script lang="ts">import { ControlPanel } from '..';
+import { element_color_schemes } from '../colors';
+import * as exports from '../io/export';
+import Select from 'svelte-multiselect';
+import { Tooltip } from 'svelte-zoo';
+let { controls_open = $bindable(false), scene_props = $bindable({}), lattice_props = $bindable({}), show_image_atoms = $bindable(true), show_site_labels = $bindable(false), show_full_controls = $bindable(false), background_color = $bindable(`#ffffff`), background_opacity = $bindable(0.1), color_scheme = $bindable(`Vesta`), structure = undefined, wrapper = undefined, png_dpi = $bindable(150), save_json_btn_text = `⬇ Save as JSON`, save_png_btn_text = `✎ Save as PNG`, save_xyz_btn_text = `📄 Save as XYZ`, } = $props();
+// Color scheme selection state
+let color_scheme_selected = $state([color_scheme]);
+$effect(() => {
+    if (color_scheme_selected.length > 0) {
+        color_scheme = color_scheme_selected[0];
+    }
+});
+// Helper function to get example set of colors from an element color scheme
+function get_representative_colors(scheme_name) {
+    const scheme = element_color_schemes[scheme_name];
+    if (!scheme)
+        return [];
+    // Get colors for common elements: H, C, N, O, Fe, Ca, Si, Al
+    const sample_elements = [`H`, `C`, `N`, `O`, `Fe`, `Ca`, `Si`, `Al`];
+    return sample_elements
+        .slice(0, 4) // Take first 4
+        .map((el) => scheme[el] || scheme.H || `#cccccc`)
+        .filter(Boolean);
+}
+</script>
+
+<ControlPanel bind:controls_open>
+  {#snippet controls_content()}
+    <!-- Visibility Controls -->
+    <div style="display: flex; align-items: center; gap: 4pt; flex-wrap: wrap;">
+      Show <label>
+        <input type="checkbox" bind:checked={scene_props.show_atoms} />
+        atoms
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={scene_props.show_bonds} />
+        bonds
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={show_image_atoms} />
+        image atoms
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={show_site_labels} />
+        site labels
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={show_full_controls} />
+        full controls
+      </label>
+    </div>
+
+    <hr />
+
+    <!-- Atom Controls -->
+    <h4 class="section-heading">Atoms</h4>
+    <label class="slider-control">
+      Radius <small>(Å)</small>
+      <input
+        type="number"
+        min="0.2"
+        max={2}
+        step={0.05}
+        bind:value={scene_props.atom_radius}
+      />
+      <input
+        type="range"
+        min="0.2"
+        max={2}
+        step={0.05}
+        bind:value={scene_props.atom_radius}
+      />
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={scene_props.same_size_atoms} />
+      <span>
+        Scale according to atomic radii
+        <small> (if false, all atoms same size)</small>
+      </span>
+    </label>
+    <label style="align-items: flex-start;">
+      Color scheme
+      <Select
+        options={Object.keys(element_color_schemes)}
+        maxSelect={1}
+        minSelect={1}
+        bind:selected={color_scheme_selected}
+        liOptionStyle="padding: 3pt 6pt;"
+        style="width: 10em; border: none;"
+      >
+        {#snippet children({ option })}
+          {@const style = `display: flex; align-items: center; gap: 6pt; justify-content: space-between;`}
+          <div {style}>
+            {option}
+            <div style="display: flex; gap: 3pt;">
+              {#each get_representative_colors(String(option)) as color (color)}
+                {@const style = `width: 15px; height: 15px; border-radius: 2px; background: {color};`}
+                <div {style}></div>
+              {/each}
+            </div>
+          </div>
+        {/snippet}
+      </Select>
+    </label>
+
+    <hr />
+
+    <!-- Cell Controls -->
+    <h4 class="section-heading">Cell</h4>
+    <label>
+      <input type="checkbox" bind:checked={lattice_props.show_vectors} />
+      lattice vectors
+    </label>
+    {#each [
+      { label: `Edge color`, color_prop: `cell_edge_color`, opacity_prop: `cell_edge_opacity`, step: 0.05 },
+      { label: `Surface color`, color_prop: `cell_surface_color`, opacity_prop: `cell_surface_opacity`, step: 0.01 },
+    ] as const as { label, color_prop, opacity_prop, step } (label)}
+      <div class="control-row">
+        <label class="compact">
+          {label}
+          <input type="color" bind:value={lattice_props[color_prop]} />
+        </label>
+        <label class="slider-control">
+          opacity
+          <input
+            type="number"
+            min={0}
+            max={1}
+            {step}
+            bind:value={lattice_props[opacity_prop]}
+          />
+          <input
+            type="range"
+            min={0}
+            max={1}
+            {step}
+            bind:value={lattice_props[opacity_prop]}
+          />
+        </label>
+      </div>
+    {/each}
+
+    <hr />
+
+    <!-- Background Controls -->
+    <h4 class="section-heading">Background</h4>
+    <div class="control-row">
+      <label class="compact">
+        Color
+        <input type="color" bind:value={background_color} />
+      </label>
+      <label class="slider-control">
+        Opacity
+        <input
+          type="number"
+          min={0}
+          max={1}
+          step={0.02}
+          bind:value={background_opacity}
+        />
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.02}
+          bind:value={background_opacity}
+        />
+      </label>
+    </div>
+
+    {#if show_full_controls}
+      <!-- Camera Controls -->
+      <h4 class="section-heading">Camera</h4>
+      <label>
+        Auto rotate speed
+        <input
+          type="number"
+          min={0}
+          max={2}
+          step={0.01}
+          bind:value={scene_props.auto_rotate}
+        />
+        <input
+          type="range"
+          min={0}
+          max={2}
+          step={0.01}
+          bind:value={scene_props.auto_rotate}
+        />
+      </label>
+      <label>
+        Zoom speed
+        <input
+          type="number"
+          min={0.1}
+          max={0.8}
+          step={0.02}
+          bind:value={scene_props.zoom_speed}
+        />
+        <input
+          type="range"
+          min={0.1}
+          max={0.8}
+          step={0.02}
+          bind:value={scene_props.zoom_speed}
+        />
+      </label>
+      <label>
+        <Tooltip text="pan by clicking and dragging while holding cmd, ctrl or shift">
+          Pan speed
+        </Tooltip>
+        <input
+          type="number"
+          min={0}
+          max={2}
+          step={0.01}
+          bind:value={scene_props.pan_speed}
+        />
+        <input
+          type="range"
+          min={0}
+          max={2}
+          step={0.01}
+          bind:value={scene_props.pan_speed}
+        />
+      </label>
+      <label>
+        <Tooltip text="damping factor for rotation">Rotation damping</Tooltip>
+        <input
+          type="number"
+          min={0}
+          max={0.3}
+          step={0.01}
+          bind:value={scene_props.rotation_damping}
+        />
+        <input
+          type="range"
+          min={0}
+          max={0.3}
+          step={0.01}
+          bind:value={scene_props.rotation_damping}
+        />
+      </label>
+
+      <hr />
+
+      <!-- Lighting Controls -->
+      <h4 class="section-heading">Lighting</h4>
+      <label>
+        <Tooltip text="intensity of the directional light">Directional light</Tooltip>
+        <input
+          type="number"
+          min={0}
+          max={4}
+          step={0.01}
+          bind:value={scene_props.directional_light}
+        />
+        <input
+          type="range"
+          min={0}
+          max={4}
+          step={0.01}
+          bind:value={scene_props.directional_light}
+        />
+      </label>
+      <label>
+        <Tooltip text="intensity of the ambient light">Ambient light</Tooltip>
+        <input
+          type="number"
+          min={0.5}
+          max={3}
+          step={0.05}
+          bind:value={scene_props.ambient_light}
+        />
+        <input
+          type="range"
+          min={0.5}
+          max={3}
+          step={0.05}
+          bind:value={scene_props.ambient_light}
+        />
+      </label>
+    {/if}
+
+    <hr />
+
+    {#if scene_props.show_bonds}
+      <label>
+        Bonding strategy
+        <select bind:value={scene_props.bonding_strategy}>
+          <option value="max_dist">Max Distance</option>
+          <option value="nearest_neighbor">Nearest Neighbor</option>
+          <option value="vdw_radius_based">Van der Waals Radii</option>
+        </select>
+      </label>
+
+      <label>
+        Bond color
+        <input type="color" bind:value={scene_props.bond_color} />
+      </label>
+      <label>
+        Bond thickness
+        <input
+          type="number"
+          min={0.01}
+          max={0.12}
+          step={0.005}
+          bind:value={scene_props.bond_thickness}
+        />
+        <input
+          type="range"
+          min="0.01"
+          max="0.12"
+          step={0.005}
+          bind:value={scene_props.bond_thickness}
+        />
+      </label>
+    {/if}
+
+    <span
+      style="display: flex; gap: 4pt; margin: 3pt 0 0; align-items: center; flex-wrap: wrap;"
+    >
+      <button
+        type="button"
+        onclick={() => exports.export_json(structure)}
+        title={save_json_btn_text}
+      >
+        {save_json_btn_text}
+      </button>
+      <button
+        type="button"
+        onclick={() => exports.export_xyz(structure)}
+        title={save_xyz_btn_text}
+      >
+        {save_xyz_btn_text}
+      </button>
+      <button
+        type="button"
+        onclick={() => {
+          const canvas = wrapper?.querySelector(`canvas`) as HTMLCanvasElement
+          exports.export_png(canvas, structure, png_dpi)
+        }}
+        title="{save_png_btn_text} (${png_dpi} DPI)"
+      >
+        {save_png_btn_text}
+      </button>
+      <small style="margin-left: 4pt;">DPI:</small>
+      <input
+        type="number"
+        min={72}
+        max={300}
+        step={25}
+        bind:value={png_dpi}
+        style="width: 3.5em;"
+        title="Export resolution in dots per inch"
+      />
+    </span>
+  {/snippet}
+</ControlPanel>
+
+<style>
+  .section-heading {
+    margin: 8pt 0 2pt;
+    font-size: 0.9em;
+    color: var(--text-muted, #ccc);
+  }
+  .control-row {
+    display: flex;
+    gap: 4pt;
+    align-items: flex-start;
+  }
+  .control-row label {
+    min-width: 0;
+  }
+  .control-row label.compact {
+    flex: 0 0 auto;
+    margin-right: 8pt;
+  }
+  .control-row label.slider-control {
+    flex: 1;
+  }
+</style>

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

@@ -0,0 +1,23 @@
+import type { AnyStructure, Lattice } from '..';
+import type { ComponentProps } from 'svelte';
+import type { StructureScene } from './index';
+export interface Props {
+    controls_open?: boolean;
+    scene_props?: ComponentProps<typeof StructureScene>;
+    lattice_props?: ComponentProps<typeof Lattice>;
+    show_image_atoms?: boolean;
+    show_site_labels?: boolean;
+    show_full_controls?: boolean;
+    background_color?: string;
+    background_opacity?: number;
+    color_scheme?: `Jmol` | `Vesta`;
+    structure?: AnyStructure | undefined;
+    wrapper?: HTMLDivElement | undefined;
+    png_dpi?: number;
+    save_json_btn_text?: string;
+    save_png_btn_text?: string;
+    save_xyz_btn_text?: string;
+}
+declare const StructureControls: import("svelte").Component<Props, {}, "color_scheme" | "controls_open" | "scene_props" | "lattice_props" | "show_image_atoms" | "show_site_labels" | "show_full_controls" | "background_color" | "background_opacity" | "png_dpi">;
+type StructureControls = ReturnType<typeof StructureControls>;
+export default StructureControls;

package/dist/structure/StructureLegend.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">import { choose_bw_for_contrast, element_data, format_num } from '..';
+import { default_element_colors } from '../colors';
+import { colors } from '../state.svelte';
+import { Tooltip } from 'svelte-zoo';
+let { elements, elem_color_picker_title = `Double click to reset color`, labels = $bindable([]), tips_modal = $bindable(undefined), style = null, dialog_style = null, tips_modal_snippet, amount_format = `.3~f`, show_amounts = true, get_element_label, } = $props();
+// Generate label text for each element
+function get_label_text(element, amount) {
+    if (get_element_label)
+        return get_element_label(element, amount);
+    return show_amounts ? `${element}${format_num(amount, amount_format)}` : element;
+}
+</script>
+
+<div {style}>
+  {#each Object.entries(elements) as [elem, amt], idx (elem + amt)}
+    <Tooltip
+      text={element_data.find((el) => el.symbol == elem)?.name}
+      --zoo-tooltip-bg="rgba(255, 255, 255, 0.3)"
+      tip_style="font-size: initial; padding: 0 5pt;"
+    >
+      <label
+        bind:this={labels[idx]}
+        style:background-color={colors.element[elem]}
+        ondblclick={(event) => {
+          event.preventDefault()
+          colors.element[elem] = default_element_colors[elem]
+        }}
+        style:color={choose_bw_for_contrast(labels[idx], null, 0.55)}
+      >
+        {get_label_text(elem, amt)}
+        <input
+          type="color"
+          bind:value={colors.element[elem]}
+          title={elem_color_picker_title}
+        />
+      </label>
+    </Tooltip>
+  {/each}
+</div>
+
+<dialog
+  bind:this={tips_modal}
+  onclick={() => tips_modal?.close()}
+  onkeydown={() => tips_modal?.close()}
+  style={dialog_style}
+>
+  {#if tips_modal_snippet}{@render tips_modal_snippet()}{:else}
+    <p>
+      Drop a POSCAR, XYZ, CIF or pymatgen JSON file onto the canvas to load a new
+      structure.
+    </p>
+    <p>
+      Click on an atom to make it active. Then hover another atom to get its distance to
+      the active atom (with PBC and direct).
+    </p>
+    <p>
+      Hold <kbd>shift</kbd> or <kbd>cmd</kbd> or <kbd>ctrl</kbd> and drag to pan the
+      scene.
+    </p>
+    <p>
+      Click on an element label in the color legend to change its color. Double click to
+      reset.
+    </p>
+  {/if}
+</dialog>
+
+<style>
+  div {
+    display: flex;
+    position: absolute;
+    bottom: var(--struct-legend-bottom, 8pt);
+    right: var(--struct-legend-right, 8pt);
+    gap: var(--struct-legend-gap, 8pt);
+    font-size: var(--struct-legend-font, 14pt);
+    filter: grayscale(10%) brightness(0.8) saturate(0.8);
+    z-index: var(--struct-legend-z-index, 1);
+  }
+  div label {
+    padding: var(--struct-legend-pad, 1pt 4pt);
+    border-radius: var(--struct-legend-radius, 3pt);
+  }
+  div label input[type='color'] {
+    z-index: var(--struct-legend-input-z, 1);
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+  }
+  dialog {
+    position: fixed;
+    top: var(--struct-dialog-top, 50%);
+    left: var(--struct-dialog-left, 50%);
+    transform: translate(-50%, -50%);
+    margin: 0;
+    padding: var(--struct-dialog-pad, 4pt 1em);
+    background: var(--struct-dialog-bg, rgba(0, 0, 0, 0.8));
+    color: var(--struct-dialog-color, white);
+    border-radius: var(--struct-dialog-radius, 5px);
+    transition: var(--struct-dialog-transition, all 0.3s);
+    overflow: visible;
+  }
+  /* info icon in top left corner */
+  dialog::before {
+    content: '?';
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    place-content: center;
+    place-items: center;
+    transform: var(--struct-tooltip-before-transform, translate(-50%, -50%));
+    box-sizing: border-box;
+    font-size: var(--struct-tooltip-before-font-size, 20pt);
+    color: var(--struct-tooltip-before-color, white);
+    background: var(--struct-tooltip-before-bg, rgba(0, 0, 0, 0.8));
+    border-radius: var(--struct-tooltip-before-border-radius, 50%);
+    width: var(--struct-tooltip-before-width, 1em);
+    height: var(--struct-tooltip-before-height, 1em);
+    border: var(--struct-tooltip-before-border, 1px solid white);
+  }
+  dialog::backdrop {
+    background: var(--struct-dialog-backdrop, rgba(0, 0, 0, 0.2));
+  }
+  dialog p {
+    margin: var(--struct-dialog-text-margin, 0);
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { CompositionType } from '..';
+import type { Snippet } from 'svelte';
+interface Props {
+    elements: CompositionType;
+    elem_color_picker_title?: string;
+    labels?: HTMLLabelElement[];
+    tips_modal?: HTMLDialogElement | undefined;
+    style?: string | null;
+    dialog_style?: string | null;
+    tips_modal_snippet?: Snippet;
+    amount_format?: string;
+    show_amounts?: boolean;
+    get_element_label?: (element: string, amount: number) => string;
+}
+declare const StructureLegend: import("svelte").Component<Props, {}, "labels" | "tips_modal">;
+type StructureLegend = ReturnType<typeof StructureLegend>;
+export default StructureLegend;