matterviz 0.3.6 → 0.3.7

package/dist/composition/Composition.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import type { ColorSchemeName } from '../colors'
+  import type { CompositionType } from './'
+  import { untrack } from 'svelte'
+  import { ContextMenu } from '../overlays'
+  import { export_svg_as_png, export_svg_as_svg } from '../io/export'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { get_electro_neg_formula } from './format'
+  import { BarChart, BubbleChart, PieChart } from './index'
+  import { parse_composition } from './parse'
+
+  type CompositionChartMode = `pie` | `bubble` | `bar`
+  let {
+    composition,
+    mode = `pie`,
+    on_composition_change,
+    color_scheme = `Vesta`,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    composition: string | CompositionType
+    mode?: CompositionChartMode
+    on_composition_change?: (composition: CompositionType) => void
+    color_scheme?: ColorSchemeName
+    size?: number
+    interactive?: boolean
+  } = $props()
+
+  // Using $state with untrack() - initialized from props but mutated by context menu
+  let current_color_scheme = $state(untrack(() => color_scheme as ColorSchemeName))
+  let current_mode = $state(untrack(() => mode))
+  let svg_node = $state<SVGSVGElement | null>(null)
+
+  let Component = $derived(
+    { pie: PieChart, bubble: BubbleChart, bar: BarChart }[current_mode],
+  )
+  let parsed: CompositionType = $derived.by(() => {
+    try {
+      return parse_composition(composition)
+    } catch (error) {
+      console.error(`Failed to parse composition:`, error)
+      return {}
+    }
+  })
+  // Call the composition change callback in an effect, not in the derived
+  $effect(() => on_composition_change?.(parsed))
+
+  let context_menu = $state({ open: false, x: 0, y: 0 })
+
+  function handle_right_click(event: MouseEvent) { // open context menu
+    event.preventDefault()
+    context_menu.open = false // Close any existing context menu first
+    context_menu.x = event.pageX
+    context_menu.y = event.pageY
+    // Use a small delay to ensure the prev context menu closes happens before opening new one
+    setTimeout(() => context_menu.open = true, 0)
+  }
+
+  const mode_options = [
+    { value: `pie`, icon: `Circle`, label: `Pie Chart` },
+    { value: `bubble`, icon: `Circle`, label: `Bubble Chart` },
+    { value: `bar`, icon: `Graph`, label: `Bar Chart` },
+  ] as const
+
+  const color_scheme_options = [
+    { value: `Vesta`, icon: `ColorPalette`, label: `Vesta` },
+    { value: `Jmol`, icon: `ColorPalette`, label: `Jmol` },
+    { value: `Alloy`, icon: `ColorPalette`, label: `Alloy` },
+    { value: `Pastel`, icon: `ColorPalette`, label: `Pastel` },
+    { value: `Muted`, icon: `ColorPalette`, label: `Muted` },
+    { value: `Dark Mode`, icon: `ColorPalette`, label: `Dark Mode` },
+  ] as const
+
+  const export_options = [
+    { value: `copy_formula`, icon: `Copy`, label: `Copy Formula` },
+    { value: `copy_data`, icon: `Copy`, label: `Copy Data` },
+    { value: `export_svg`, icon: `Download`, label: `Export SVG` },
+    { value: `export_png`, icon: `Download`, label: `Export PNG` },
+  ] as const
+
+  const sec_titles = {
+    display_mode: `Display Mode`,
+    color_scheme: `Color Scheme`,
+    export: `Export`,
+  } as const
+
+  const context_menu_sections = [
+    { title: sec_titles.display_mode, options: mode_options },
+    { title: sec_titles.color_scheme, options: color_scheme_options },
+    { title: sec_titles.export, options: export_options },
+  ] as const
+
+  function handle_context_menu_select(
+    section_title: string,
+    option: { value: string },
+  ) {
+    if (section_title === sec_titles.display_mode) {
+      current_mode = option.value as CompositionChartMode
+    } else if (section_title === sec_titles.color_scheme) {
+      current_color_scheme = option.value as ColorSchemeName
+    } else if (section_title === sec_titles.export) handle_export(option.value)
+    context_menu.open = false
+  }
+
+  // Handle export actions
+  function handle_export(export_type: string) {
+    try {
+      if (export_type === `copy_formula`) {
+        const formula = get_electro_neg_formula(composition)
+        navigator.clipboard.writeText(formula)
+      } else if (export_type === `copy_data`) {
+        const data = JSON.stringify(parsed, null, 2)
+        navigator.clipboard.writeText(data)
+      } else if (export_type === `export_svg`) {
+        const filename = `${get_electro_neg_formula(composition, true, ``)}.svg`
+        if (svg_node) export_svg_as_svg(svg_node, filename)
+        else console.warn(`Chart SVG not available for SVG export`)
+      } else if (export_type === `export_png`) {
+        const filename = `${get_electro_neg_formula(composition, true, ``)}.png`
+        if (svg_node) export_svg_as_png(svg_node, filename, 150)
+        else console.warn(`Chart SVG not available for PNG export`)
+      } else console.warn(`Invalid export type:`, export_type)
+    } catch (error) {
+      console.error(`Export failed:`, error)
+    }
+  }
+</script>
+
+<Component
+  composition={parsed}
+  color_scheme={current_color_scheme}
+  bind:svg_node
+  oncontextmenu={handle_right_click}
+  role="button"
+  tabindex={0}
+  onkeydown={(event: KeyboardEvent) => {
+    if ([`Enter`, ` `].includes(event.key)) {
+      event.preventDefault()
+      const target = event.currentTarget
+      if (!(target instanceof Element)) return
+      const rect = target.getBoundingClientRect()
+      context_menu.x = window.scrollX + rect.left + rect.width / 2
+      context_menu.y = window.scrollY + rect.top + rect.height / 2
+      context_menu.open = true
+    }
+  }}
+  aria-label="Open context menu (Right-click or Enter/Space)"
+  aria-haspopup="menu"
+  aria-expanded={context_menu.open}
+  {...rest}
+  class="composition {rest.class ?? ``}"
+/>
+
+{#if context_menu.open}
+  <ContextMenu
+    sections={context_menu_sections}
+    selected_values={{
+      [sec_titles.display_mode]: current_mode,
+      [sec_titles.color_scheme]: current_color_scheme,
+    }}
+    on_select={handle_context_menu_select}
+    position={context_menu}
+    visible={context_menu.open}
+    on_close={() => context_menu.open = false}
+  />
+{/if}

package/dist/composition/Composition.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ColorSchemeName } from '../colors';
+import type { CompositionType } from './';
+import type { SVGAttributes } from 'svelte/elements';
+type CompositionChartMode = `pie` | `bubble` | `bar`;
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
+    composition: string | CompositionType;
+    mode?: CompositionChartMode;
+    on_composition_change?: (composition: CompositionType) => void;
+    color_scheme?: ColorSchemeName;
+    size?: number;
+    interactive?: boolean;
+};
+declare const Composition: import("svelte").Component<$$ComponentProps, {}, "">;
+type Composition = ReturnType<typeof Composition>;
+export default Composition;

package/dist/composition/Formula.svelte

@@ -0,0 +1,268 @@
+<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)
+    } 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>

package/dist/composition/Formula.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ColorSchemeName } from '../colors';
+import type { ElementSymbol } from '../element';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { OxiComposition } from './parse';
+type FormulaOrdering = `electronegativity` | `alphabetical` | `original` | `hill`;
+type TooltipSide = `top` | `bottom` | `left` | `right`;
+type $$ComponentProps = 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;
+};
+declare const Formula: import("svelte").Component<$$ComponentProps, {}, "">;
+type Formula = ReturnType<typeof Formula>;
+export default Formula;