matterviz 0.3.4 → 0.3.6

package/dist/composition/Composition.svelte

@@ -1,164 +0,0 @@
-<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 as Element
-      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

@@ -1,15 +0,0 @@
-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

@@ -1,265 +0,0 @@
-<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) {
-    const selection = window.getSelection()
-    // Only intercept if user selected text fully within this formula
-    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 }
-  }
-</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

@@ -1,19 +0,0 @@
-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;