matterviz 0.3.6 → 0.4.0

package/dist/src/lib/composition/Formula.svelte

@@ -1,268 +0,0 @@
-<script lang="ts">
-  import type { ColorSchemeName } from '$lib/colors'
-  import { ELEMENT_COLOR_SCHEMES, luminance } from '$lib/colors'
-  import type { ElementSymbol } from '$lib/element'
-  import { element_data } from '$lib/element'
-  import ElementTile from '$lib/element/ElementTile.svelte'
-  import { format_num } from '$lib/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)
-    } catch (error) {
-      console.error(`Failed to parse formula:`, error)
-      return []
-    }
-  })
-
-  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
-    },
-    hill: (el1, el2) => {
-      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<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 & { currentTarget: HTMLElement }) {
-    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: ElementSymbol,
-    event: MouseEvent & { currentTarget: HTMLElement },
-  ) {
-    const { left, width, top, bottom, right, height } = event.currentTarget
-      .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 }
-  }
-</script>
-
-<svelte:element
-  this={as}
-  {...rest}
-  class="formula {rest.class ?? ``}"
-  oncopy={handle_copy}
->
-  {#each sorted_elements as { element, amount, oxidation_state } (element)}
-    {@const color = ELEMENT_COLOR_SCHEMES[color_scheme]?.[element] ?? `#666666`}
-    {@const lum = luminance(color)}
-    {@const has_oxidation = oxidation_state !== undefined && oxidation_state !== 0}
-    <span
-      class="element-group"
-      role="button"
-      tabindex="0"
-      onmouseenter={(event) => show_tooltip(element, event)}
-      onmouseleave={() => (hovered_element = null)}
-      onclick={(event) => on_click?.(element, event)}
-      onkeydown={(event) => {
-        if (event.key === `Enter` || event.key === ` `) {
-          event.preventDefault()
-          on_click?.(element, event)
-        }
-      }}
-    >
-      <span
-        class="element-symbol"
-        class:dark-border={lum > 0.7}
-        class:light-border={lum < 0.15}
-        style:color
-      >
-        {element}</span>
-      <span class="script-wrapper">{#if has_oxidation}
-          <sup class="oxi">{format_oxi_state(oxidation_state)}</sup>
-        {/if}
-        {#if amount !== 1}
-          <sub class="amt" class:no-sup={!has_oxidation}>{
-            format_num(amount, amount_format)
-          }</sub>
-        {/if}
-      </span>
-    </span>
-  {/each}
-</svelte:element>
-
-{#if hovered_elem_data}
-  {@const { x, y } = tooltip_pos}
-  {@const tile_color = ELEMENT_COLOR_SCHEMES[color_scheme]?.[hovered_elem_data.symbol] ??
-    `#666666`}
-  {@const transforms = {
-    top: `translate(-50%, -100%)`,
-    bottom: `translateX(-50%)`,
-    left: `translate(-100%, -50%)`,
-    right: `translateY(-50%)`,
-  }}
-  <div
-    class="tooltip"
-    style:left="{x}px"
-    style:top="{y}px"
-    style:transform={transforms[tooltip_side]}
-  >
-    <ElementTile
-      element={hovered_elem_data}
-      bg_color={tile_color}
-      show_name={false}
-      value={hovered_elem_data.atomic_mass}
-      style="width: var(--formula-tooltip-tile-size, 30px); height: var(--formula-tooltip-tile-size, 30px)"
-    />
-    {hovered_elem_data.name}
-  </div>
-{/if}
-
-<style>
-  .formula {
-    display: inline;
-    font-size: var(--formula-font-size);
-  }
-  .element-group {
-    display: inline-block;
-    white-space: nowrap;
-    padding: var(--formula-padding, 0.1em);
-    margin: var(--formula-margin, -0.1em 0.1em -0.1em -0.1em);
-  }
-  .element-symbol {
-    font-weight: var(--formula-font-weight, 500);
-    transition: transform 0.2s;
-  }
-  .element-symbol.dark-border {
-    text-shadow:
-      -0.3px -0.3px 0 #0008,
-      0.3px -0.3px 0 #0008,
-      -0.3px 0.3px 0 #0008,
-      0.3px 0.3px 0 #0008;
-  }
-  .element-symbol.light-border {
-    text-shadow:
-      -0.3px -0.3px 0 #fffc,
-      0.3px -0.3px 0 #fffc,
-      -0.3px 0.3px 0 #fffc,
-      0.3px 0.3px 0 #fffc;
-  }
-  .tooltip {
-    position: fixed;
-    display: flex;
-    align-items: center;
-    gap: var(--formula-tooltip-gap, 4pt);
-    padding: var(--formula-tooltip-padding, 2pt 3pt);
-    font-size: var(--formula-tooltip-font-size, 0.85em);
-    background: var(
-      --formula-tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(30, 30, 30, 0.95))
-    );
-    color: var(--formula-tooltip-color, light-dark(#222, #eee));
-    border-radius: var(--formula-tooltip-border-radius, var(--border-radius, 3pt));
-    box-shadow: var(
-      --formula-tooltip-box-shadow,
-      0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))
-    );
-    z-index: var(--tooltip-z-index, 2);
-  }
-  .script-wrapper {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: var(--formula-script-margin-left, -0.15em);
-    line-height: var(--formula-script-line-height, 0.6);
-  }
-  .script-wrapper:empty {
-    display: none;
-  }
-  .amt, .oxi {
-    font-size: var(--formula-script-font-size, 0.7em);
-    line-height: var(--formula-script-inner-line-height, 1);
-  }
-  .amt {
-    order: 2;
-    transform: translateY(var(--formula-subscript-offset, -0.15em));
-  }
-  .amt.no-sup {
-    transform: translateY(var(--formula-subscript-offset-no-sup, 0.3em));
-  }
-  .oxi {
-    order: 1;
-    transform: translateY(var(--formula-superscript-offset, -0.65em));
-  }
-</style>