matterviz 0.3.0 → 0.3.2

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

@@ -1,7 +1,8 @@
 import type { ShowControlsProp } from '../controls';
 import type { ElementSymbol } from '../element';
 import Spinner from '../feedback/Spinner.svelte';
-import type { AnyStructure } from './';
+import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
+import type { AnyStructure, MeasureMode } from './';
 import type { CellType, SymmetrySettings } from '../symmetry';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
 import type { ComponentProps, Snippet } from 'svelte';
@@ -36,6 +37,7 @@ type $$ComponentProps = {
     allow_file_drop?: boolean;
     enable_info_pane?: boolean;
     enable_measure_mode?: boolean;
+    measure_mode?: MeasureMode;
     info_pane_open?: boolean;
     fullscreen_toggle?: Snippet<[{
         fullscreen: boolean;
@@ -61,6 +63,9 @@ type $$ComponentProps = {
     symmetry_settings?: Partial<SymmetrySettings>;
     element_mapping?: Partial<Record<ElementSymbol, ElementSymbol>>;
     cell_type?: CellType;
+    volumetric_data?: VolumetricData[];
+    isosurface_settings?: IsosurfaceSettings;
+    active_volume_idx?: number;
     structure_string?: string;
     atom_color_config?: Partial<AtomColorConfig>;
     children?: Snippet<[{
@@ -73,6 +78,6 @@ type $$ComponentProps = {
     on_camera_move?: EventHandler;
     on_camera_reset?: EventHandler;
 } & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
-declare const Structure: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "structure" | "hovered" | "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "loading" | "error_msg" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "sym_data" | "supercell_scaling" | "cell_type" | "measured_sites" | "scene_props" | "lattice_props" | "wrapper" | "png_dpi" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
+declare const Structure: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "controls_open" | "loading" | "fullscreen" | "hovered" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "wrapper" | "sym_data" | "error_msg" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "measured_sites" | "scene_props" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "png_dpi" | "measure_mode" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;

package/dist/structure/StructureControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors';
+import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte';
 import { format_num } from '../labels';
 import { SettingsSection } from '../layout';
 import { to_degrees, to_radians } from '../math';
@@ -20,7 +21,7 @@ let { controls_open = $bindable(false), scene_props = $bindable({}), lattice_pro
     mode: DEFAULTS.structure.atom_color_mode,
     scale: DEFAULTS.structure.atom_color_scale,
     scale_type: DEFAULTS.structure.atom_color_scale_type,
-}), structure = undefined, supercell_loading = $bindable(false), sym_data = null, cell_type = $bindable(`original`), pane_props = {}, toggle_props = {}, ...rest } = $props();
+}), structure = undefined, supercell_loading = $bindable(false), sym_data = null, cell_type = $bindable(`original`), volumetric_data = $bindable(), isosurface_settings = $bindable(), active_volume_idx = $bindable(0), pane_props = {}, toggle_props = {}, ...rest } = $props();
 // Color scheme selection state
 let color_scheme_selected = $state([color_scheme]);
 $effect(() => {
@@ -102,7 +103,12 @@ function get_representative_colors(scheme_name) {
 
 <DraggablePane
   bind:show={controls_open}
-  pane_props={{ ...pane_props, class: `controls-pane ${pane_props?.class ?? ``}` }}
+  resizable="both"
+  pane_props={{
+    ...pane_props,
+    class: `controls-pane ${pane_props?.class ?? ``}`,
+    style: `--pane-max-height: 70vh; ${pane_props?.style ?? ``}`,
+  }}
   toggle_props={{
     title: controls_open ? `` : `Structure controls`,
     ...toggle_props,
@@ -110,6 +116,14 @@ function get_representative_colors(scheme_name) {
   }}
   {...rest}
 >
+  {#if volumetric_data?.length && isosurface_settings}
+    <IsosurfaceControls
+      bind:settings={isosurface_settings}
+      volumes={volumetric_data}
+      bind:active_volume_idx
+    />
+  {/if}
+
   <SettingsSection
     title="Visibility"
     current_values={{
@@ -423,9 +437,7 @@ function get_representative_colors(scheme_name) {
       Same size atoms
       <input type="checkbox" bind:checked={scene_props.same_size_atoms} />
     </label>
-    <span
-      class="label"
-      style="align-items: start"
+    <label
       {@attach tooltip({ content: SETTINGS_CONFIG.color_scheme.description })}
     >
       Color scheme
@@ -435,7 +447,10 @@ function get_representative_colors(scheme_name) {
         minSelect={1}
         bind:selected={color_scheme_selected}
         liOptionStyle="padding: 3pt 6pt;"
-        style="width: 10em; border: none"
+        liSelectedStyle="background-color: transparent;"
+        ulSelectedStyle="display: contents;"
+        inputStyle="flex: none; min-width: 0; width: 0; opacity: 0;"
+        style="flex: 1; min-width: 0; border: none; margin-left: 4pt"
         aria-label="Color scheme"
       >
         {#snippet children({ option })}
@@ -453,9 +468,8 @@ function get_representative_colors(scheme_name) {
           </div>
         {/snippet}
       </Select>
-    </span>
+    </label>
     <label
-      style="align-items: start"
       {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_mode.description })}
     >
       Atom coloring
@@ -469,9 +483,7 @@ function get_representative_colors(scheme_name) {
       </select>
     </label>
     {#if atom_color_config.mode !== `element`}
-      <span
-        class="label"
-        style="align-items: start; white-space: nowrap"
+      <label
         {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_scale.description })}
       >
         Color scale
@@ -483,10 +495,10 @@ function get_representative_colors(scheme_name) {
             wrapper_style: `width: 100%;`,
             title_style: `font-size: 0.95em;`,
           }}
-          style="width: 100%; border: none"
+          style="flex: 1; min-width: 0; border: none"
           aria-label="Color scale"
         />
-      </span>
+      </label>
     {/if}
   </SettingsSection>
 
@@ -916,7 +928,7 @@ function get_representative_colors(scheme_name) {
     justify-content: space-between;
     width: 100%;
   }
-  label, .label {
+  label {
     display: flex;
     align-items: center;
     gap: 10pt;

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

@@ -1,3 +1,4 @@
+import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AnyStructure } from './';
 import { Lattice, StructureScene } from './';
@@ -19,9 +20,12 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     supercell_loading?: boolean;
     sym_data?: MoyoDataset | null;
     cell_type?: CellType;
+    volumetric_data?: VolumetricData[];
+    isosurface_settings?: IsosurfaceSettings;
+    active_volume_idx?: number;
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
 };
-declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "supercell_scaling" | "cell_type" | "scene_props" | "lattice_props" | "supercell_loading">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "lattice_props" | "supercell_loading" | "volumetric_data" | "isosurface_settings">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;

package/dist/structure/StructureInfoPane.svelte

@@ -96,12 +96,18 @@ let pane_data = $derived.by(() => {
             else
                 roto_translations++;
         }
+        const international_symbol = sym_data.international_short;
+        const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)
+            ?.replace(/\s+/g, ``);
+        const space_group_value = space_group_symbol
+            ? `${sym_data.number} (${space_group_symbol})`
+            : String(sym_data.number);
         sections.push({
             title: `Symmetry`,
             items: [
                 {
                     label: `Space Group`,
-                    value: String(sym_data.number),
+                    value: space_group_value,
                     key: `symmetry-space-group`,
                 },
                 {