matterviz 0.3.2 → 0.3.4

package/dist/composition/Formula.svelte

@@ -1,75 +1,121 @@
-<script lang="ts">import { ELEMENT_COLOR_SCHEMES, luminance } from '../colors';
-import { element_data } from '../element';
-import ElementTile from '../element/ElementTile.svelte';
-import { format_num } from '../labels';
-import { format_oxi_state, sort_by_electronegativity, sort_by_hill_notation, } from './format';
-import { oxi_composition_to_elements, parse_formula_with_oxidation } from './parse';
-let { formula, color_scheme = `Vesta`, ordering = `original`, as = `span`, amount_format = `.3~s`, tooltip_side = `bottom`, tooltip_offset = 5, on_click, ...rest } = $props();
-const parsed_elements = $derived.by(() => {
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import { ELEMENT_COLOR_SCHEMES, luminance } from '../colors'
+  import type { ElementSymbol } from '../element'
+  import { element_data } from '../element'
+  import ElementTile from '../element/ElementTile.svelte'
+  import { format_num } from '../labels'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import {
+    format_oxi_state,
+    sort_by_electronegativity,
+    sort_by_hill_notation,
+  } from './format'
+  import type { ElementWithOxidation, OxiComposition } from './parse'
+  import { oxi_composition_to_elements, parse_formula_with_oxidation } from './parse'
+
+  type FormulaOrdering = `electronegativity` | `alphabetical` | `original` | `hill`
+  type TooltipSide = `top` | `bottom` | `left` | `right`
+  let {
+    formula,
+    color_scheme = `Vesta`,
+    ordering = `original`,
+    as = `span`,
+    amount_format = `.3~s`,
+    tooltip_side = `bottom`,
+    tooltip_offset = 5,
+    on_click,
+    ...rest
+  }: HTMLAttributes<HTMLElement> & {
+    formula: string | OxiComposition
+    color_scheme?: ColorSchemeName
+    ordering?: FormulaOrdering
+    as?: string
+    amount_format?: string
+    tooltip_side?: TooltipSide
+    tooltip_offset?: number
+    on_click?: (element: ElementSymbol, event: MouseEvent | KeyboardEvent) => void
+  } = $props()
+
+  const parsed_elements = $derived.by(() => {
     try {
-        return typeof formula === `string`
-            ? parse_formula_with_oxidation(formula)
-            : oxi_composition_to_elements(formula);
+      return typeof formula === `string`
+        ? parse_formula_with_oxidation(formula)
+        : oxi_composition_to_elements(formula)
+    } catch (error) {
+      console.error(`Failed to parse formula:`, error)
+      return []
     }
-    catch (error) {
-        console.error(`Failed to parse formula:`, error);
-        return [];
-    }
-});
-const COMPARATORS = {
+  })
+
+  const COMPARATORS: Record<
+    FormulaOrdering,
+    (el1: ElementWithOxidation, el2: ElementWithOxidation) => number
+  > = {
     alphabetical: (el1, el2) => el1.element.localeCompare(el2.element),
     original: (el1, el2) => el1.orig_idx - el2.orig_idx,
     electronegativity: (el1, el2) => {
-        const sorted = sort_by_electronegativity([el1.element, el2.element]);
-        return sorted[0] === el1.element ? -1 : 1;
+      const sorted = sort_by_electronegativity([el1.element, el2.element])
+      return sorted[0] === el1.element ? -1 : 1
     },
     hill: (el1, el2) => {
-        const sorted = sort_by_hill_notation([el1.element, el2.element]);
-        return sorted[0] === el1.element ? -1 : 1;
+      const sorted = sort_by_hill_notation([el1.element, el2.element])
+      return sorted[0] === el1.element ? -1 : 1
     },
-};
-const sorted_elements = $derived([...parsed_elements].sort(COMPARATORS[ordering]));
-let hovered_element = $state(null);
-let tooltip_pos = $state({ x: 0, y: 0 });
-const hovered_elem_data = $derived(hovered_element ? element_data.find((el) => el.symbol === hovered_element) : null);
-// Format formula as plain text for clipboard: "Li2 O" or "Fe(+3)2 O(-2)3"
-const plain_text_formula = $derived(sorted_elements
-    .map(({ element, amount, oxidation_state }) => {
-    let text = element;
-    if (oxidation_state !== undefined && oxidation_state !== 0) {
-        // Use parentheses to avoid ambiguity like "Fe+32" looking like oxidation +32
-        text += `(${format_oxi_state(oxidation_state)})`;
-    }
-    if (amount !== 1)
-        text += format_num(amount, amount_format);
-    return text;
-})
-    .join(` `));
-function handle_copy(event) {
-    const selection = window.getSelection();
+  }
+  const sorted_elements = $derived(
+    [...parsed_elements].sort(COMPARATORS[ordering]),
+  )
+
+  let hovered_element = $state<ElementSymbol | null>(null)
+  let tooltip_pos = $state({ x: 0, y: 0 })
+
+  const hovered_elem_data = $derived(
+    hovered_element ? element_data.find((el) => el.symbol === hovered_element) : null,
+  )
+
+  // Format formula as plain text for clipboard: "Li2 O" or "Fe(+3)2 O(-2)3"
+  const plain_text_formula = $derived(
+    sorted_elements
+      .map(({ element, amount, oxidation_state }) => {
+        let text = element
+        if (oxidation_state !== undefined && oxidation_state !== 0) {
+          // Use parentheses to avoid ambiguity like "Fe+32" looking like oxidation +32
+          text += `(${format_oxi_state(oxidation_state)})`
+        }
+        if (amount !== 1) text += format_num(amount, amount_format)
+        return text
+      })
+      .join(` `),
+  )
+
+  function handle_copy(event: ClipboardEvent) {
+    const selection = window.getSelection()
     // Only intercept if user selected text fully within this formula
-    if (!selection || selection.isCollapsed)
-        return;
-    const formula_el = event.currentTarget;
-    if (!formula_el.contains(selection.anchorNode) ||
-        !formula_el.contains(selection.focusNode))
-        return; // Selection extends outside formula, let browser handle normally
-    event.preventDefault();
-    event.clipboardData?.setData(`text/plain`, plain_text_formula);
-}
-function show_tooltip(element, event) {
-    const { left, width, top, bottom, right, height } = event.target
-        .getBoundingClientRect();
-    hovered_element = element;
+    if (!selection || selection.isCollapsed) return
+    const formula_el = event.currentTarget as HTMLElement
+    if (
+      !formula_el.contains(selection.anchorNode) ||
+      !formula_el.contains(selection.focusNode)
+    ) return // Selection extends outside formula, let browser handle normally
+    event.preventDefault()
+    event.clipboardData?.setData(`text/plain`, plain_text_formula)
+  }
+
+  function show_tooltip(element: ElementSymbol, event: MouseEvent) {
+    const { left, width, top, bottom, right, height } = (event.target as HTMLElement)
+      .getBoundingClientRect()
+    hovered_element = element
+
     const positions = {
-        top: [left + width / 2, top - tooltip_offset],
-        bottom: [left + width / 2, bottom + tooltip_offset],
-        left: [left - tooltip_offset, top + height / 2],
-        right: [right + tooltip_offset, top + height / 2],
-    };
-    const [x, y] = positions[tooltip_side];
-    tooltip_pos = { x, y };
-}
+      top: [left + width / 2, top - tooltip_offset],
+      bottom: [left + width / 2, bottom + tooltip_offset],
+      left: [left - tooltip_offset, top + height / 2],
+      right: [right + tooltip_offset, top + height / 2],
+    }
+    const [x, y] = positions[tooltip_side]
+    tooltip_pos = { x, y }
+  }
 </script>
 
 <svelte:element