matterviz 0.3.3 → 0.3.5

package/dist/structure/StructureControls.svelte

@@ -112,21 +112,91 @@
     }
   })
 
+  const hex_color_pattern = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i
+  const color_mix_pattern =
+    /^color-mix\(in srgb,\s*(#[0-9a-f]{3}(?:[0-9a-f]{3})?)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i
+
+  const as_hex_color = (color: string | undefined, fallback: string): string =>
+    color?.match(hex_color_pattern)?.[0] ?? fallback
+
+  const parse_label_bg_color = (
+    color: string | undefined,
+    fallback_hex_color: string,
+    fallback_opacity: number,
+  ): { hex_color: string; opacity: number } => {
+    if (color === `transparent`) {
+      return { hex_color: fallback_hex_color, opacity: 0 }
+    }
+    const color_mix = color?.match(color_mix_pattern)
+    if (color_mix) {
+      const percentage = Math.max(0, Math.min(100, Number(color_mix[2])))
+      return {
+        hex_color: color_mix[1],
+        opacity: percentage / 100,
+      }
+    }
+    const hex_color = color?.match(hex_color_pattern)?.[0]
+    return hex_color === undefined
+      ? { hex_color: fallback_hex_color, opacity: fallback_opacity }
+      : { hex_color, opacity: 1 }
+  }
+
+  const default_site_label_color = as_hex_color(
+    DEFAULTS.structure.site_label_color,
+    `#111111`,
+  )
+  const default_site_label_bg = parse_label_bg_color(
+    DEFAULTS.structure.site_label_bg_color,
+    `#000000`,
+    0,
+  )
+  const initial_site_label_bg = parse_label_bg_color(
+    scene_props.site_label_bg_color,
+    default_site_label_bg.hex_color,
+    default_site_label_bg.opacity,
+  )
+
   // Atom label color management
   let site_label_hex_color = $state(
-    scene_props.site_label_color || DEFAULTS.structure.site_label_color,
-  )
-  let site_label_bg_hex_color = $state(
-    scene_props.site_label_bg_color || DEFAULTS.structure.site_label_bg_color,
+    as_hex_color(scene_props.site_label_color, default_site_label_color),
   )
-  let site_label_background_opacity = $state(0)
+  let site_label_bg_hex_color = $state(initial_site_label_bg.hex_color)
+  let site_label_background_opacity = $state(initial_site_label_bg.opacity)
+  let last_synced_site_label_color = scene_props.site_label_color
+  let last_synced_site_label_bg_color = scene_props.site_label_bg_color
 
   $effect(() => {
-    scene_props.site_label_color = site_label_hex_color
-    scene_props.site_label_bg_color =
-      `color-mix(in srgb, ${site_label_bg_hex_color} ${
-        format_num(site_label_background_opacity, `.1~%`)
-      }, transparent)`
+    const external_color_changed =
+      scene_props.site_label_color !== last_synced_site_label_color
+    const external_bg_changed =
+      scene_props.site_label_bg_color !== last_synced_site_label_bg_color
+
+    if (external_color_changed) {
+      site_label_hex_color = as_hex_color(
+        scene_props.site_label_color,
+        default_site_label_color,
+      )
+    }
+    if (external_bg_changed) {
+      const next_bg = parse_label_bg_color(
+        scene_props.site_label_bg_color,
+        default_site_label_bg.hex_color,
+        default_site_label_bg.opacity,
+      )
+      site_label_bg_hex_color = next_bg.hex_color
+      site_label_background_opacity = next_bg.opacity
+    }
+
+    if (!external_color_changed) scene_props.site_label_color = site_label_hex_color
+    if (!external_bg_changed) {
+      scene_props.site_label_bg_color =
+        `color-mix(in srgb, ${site_label_bg_hex_color} ${
+          format_num(site_label_background_opacity, `.1~%`)
+        }, transparent)`
+    }
+
+    last_synced_site_label_color = scene_props.site_label_color
+    last_synced_site_label_bg_color = scene_props.site_label_bg_color
   })
 
   // Ensure site_label_offset is always available
@@ -638,15 +708,19 @@
         scene_props.site_label_size = DEFAULTS.structure.site_label_size
         scene_props.site_label_padding = DEFAULTS.structure.site_label_padding
         scene_props.site_label_offset = [...DEFAULTS.structure.site_label_offset]
-        site_label_hex_color = DEFAULTS.structure.site_label_color
-        site_label_bg_hex_color = DEFAULTS.structure.site_label_bg_color
-        site_label_background_opacity = 0
+        site_label_hex_color = default_site_label_color
+        site_label_bg_hex_color = default_site_label_bg.hex_color
+        site_label_background_opacity = default_site_label_bg.opacity
       }}
     >
       <div class="pane-row">
         <label>
           Color
-          <input type="color" bind:value={site_label_hex_color} />
+          <input
+            type="color"
+            aria-label="Site label color"
+            bind:value={site_label_hex_color}
+          />
         </label>
         <label>
           Size
@@ -662,7 +736,11 @@
       <div class="pane-row">
         <label>
           Background
-          <input type="color" bind:value={site_label_bg_hex_color} />
+          <input
+            type="color"
+            aria-label="Site label background color"
+            bind:value={site_label_bg_hex_color}
+          />
         </label>
         <label>
           Opacity
@@ -671,6 +749,7 @@
             min="0"
             max="1"
             step="0.01"
+            aria-label="Site label background opacity"
             bind:value={site_label_background_opacity}
           />
           <input
@@ -678,6 +757,7 @@
             min="0"
             max="1"
             step="0.01"
+            aria-label="Site label background opacity slider"
             bind:value={site_label_background_opacity}
           />
         </label>
@@ -938,7 +1018,10 @@
       {/if}
 
       {#if !supercell_input_valid}
-        <div style="color: red; font-size: 0.8em; margin-top: 4pt">
+        <div
+          data-testid="supercell-input-error"
+          style="color: red; font-size: 0.8em; margin-top: 4pt"
+        >
           Invalid format. Use patterns like "2x2x2", "3x1x2", or "2".
         </div>
       {/if}
@@ -1083,11 +1166,15 @@
       title="Bonds"
       current_values={{
         bonding_strategy: scene_props.bonding_strategy,
+        auto_bond_order: scene_props.auto_bond_order,
+        aromatic_display: scene_props.aromatic_display,
         bond_color: scene_props.bond_color,
         bond_thickness: scene_props.bond_thickness,
       }}
       on_reset={() => {
         scene_props.bonding_strategy = DEFAULTS.structure.bonding_strategy
+        scene_props.auto_bond_order = DEFAULTS.structure.auto_bond_order
+        scene_props.aromatic_display = DEFAULTS.structure.aromatic_display
         scene_props.bond_color = DEFAULTS.structure.bond_color
         scene_props.bond_thickness = DEFAULTS.structure.bond_thickness
       }}
@@ -1104,6 +1191,33 @@
           {/each}
         </select>
       </label>
+      <label
+        style="gap: 6pt"
+        {@attach tooltip({
+          content: SETTINGS_CONFIG.structure.auto_bond_order.description,
+        })}
+      >
+        <input type="checkbox" bind:checked={scene_props.auto_bond_order} />
+        Auto bond order (perceive double/triple/aromatic)
+      </label>
+      {#if scene_props.auto_bond_order}
+        <label
+          {@attach tooltip({
+            content: SETTINGS_CONFIG.structure.aromatic_display.description,
+          })}
+        >
+          Aromatic display <select bind:value={scene_props.aromatic_display}>
+            {#each Object.entries(
+              SETTINGS_CONFIG.structure.aromatic_display.enum ?? {},
+            ) as
+              [value, label]
+              (value)
+            }
+              <option {value}>{label}</option>
+            {/each}
+          </select>
+        </label>
+      {/if}
       <label>
         Color <input type="color" bind:value={scene_props.bond_color} />
       </label>

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

@@ -26,6 +26,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     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" | "active_volume_idx" | "scene_props" | "lattice_props" | "supercell_loading" | "volumetric_data" | "isosurface_settings">;
+declare const StructureControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "atom_color_config" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "scene_props" | "supercell_loading">;
 type StructureControls = ReturnType<typeof StructureControls>;
 export default StructureControls;