matterviz 0.3.6 → 0.3.7

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

@@ -1,297 +0,0 @@
-<script lang="ts">
-  import type { ColorSchemeName } from '$lib/colors'
-  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '$lib/colors'
-  import type { CompositionType } from '$lib/composition'
-  import type { ElementSymbol } from '$lib/element'
-  import { format_num } from '$lib/labels'
-  import type { Snippet } from 'svelte'
-  import type { SVGAttributes } from 'svelte/elements'
-  import { type ChartSegmentData, get_chart_font_scale } from './index'
-  import { fractional_composition } from './parse'
-
-  type BarSegmentData = ChartSegmentData & {
-    x: number
-    width: number
-    can_show_label: boolean
-    needs_external_label: boolean
-    external_label_position: `above` | `below` | null
-    label_x: number
-    label_y: number
-  }
-
-  let {
-    composition,
-    size = 200,
-    bar_height = 30,
-    label_height = 20,
-    gap = 2,
-    min_segment_size_for_label = 15,
-    thin_segment_threshold = 0.2,
-    external_label_size_threshold = 5,
-    outer_corners_only = true,
-    show_labels = true,
-    show_percentages = false,
-    show_amounts = true,
-    color_scheme = `Vesta`,
-    segment_content,
-    interactive = true,
-    svg_node = $bindable(null),
-    children,
-    ...rest
-  }: SVGAttributes<SVGSVGElement> & {
-    composition: CompositionType
-    size?: number
-    bar_height?: number
-    label_height?: number
-    gap?: number
-    min_segment_size_for_label?: number
-    thin_segment_threshold?: number
-    external_label_size_threshold?: number
-    outer_corners_only?: boolean
-    show_labels?: boolean
-    show_percentages?: boolean
-    show_amounts?: boolean
-    color_scheme?: ColorSchemeName
-    segment_content?: Snippet<[BarSegmentData]>
-    interactive?: boolean
-    svg_node?: SVGSVGElement | null
-    children?: Snippet<[{ hovered_element: ElementSymbol | null }]>
-  } = $props()
-
-  let element_colors = $derived(
-    ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta,
-  )
-  let fractions = $derived(fractional_composition(composition))
-
-  let svg_height = $derived(label_height + gap + bar_height + gap + label_height)
-  let bar_y = $derived(label_height + gap)
-  let above_labels_y = $derived(label_height / 2)
-  let below_labels_y = $derived(
-    label_height + gap + bar_height + gap + label_height / 2,
-  )
-
-  let segments = $derived.by(() => {
-    const element_entries = Object.entries(composition).filter(([_, amount]) =>
-      amount && amount > 0
-    ) as [ElementSymbol, number][]
-    if (element_entries.length === 0) return []
-
-    let [current_x, above_labels, below_labels] = [0, 0, 0]
-
-    return element_entries.map(([element, amount]) => {
-      const fraction = fractions[element] || 0
-      const color = element_colors[element] || `#cccccc`
-      const width = fraction * size
-      const x = current_x
-      current_x += width
-
-      const segment_size = Math.min(width, size)
-      const base_scale = Math.min(2, Math.max(1, segment_size / 40))
-      const label_text = element + (show_amounts ? amount?.toString() ?? `` : ``) +
-        (show_percentages ? `${format_num(fraction, `.1~%`)}` : ``)
-      const font_scale = get_chart_font_scale(
-        base_scale,
-        label_text,
-        segment_size * 0.9,
-        0.6,
-        12,
-      )
-
-      // Label positioning
-      const can_show_label = segment_size >= min_segment_size_for_label
-      const is_thin = fraction < thin_segment_threshold
-      const can_show_external_label = segment_size >= external_label_size_threshold
-      const needs_external_label = is_thin && can_show_external_label
-
-      let external_label_position: `above` | `below` | null = null
-      if (needs_external_label) {
-        external_label_position = above_labels <= below_labels ? `above` : `below`
-        if (external_label_position === `above`) above_labels++
-        else below_labels++
-      }
-
-      const text_color = pick_contrast_color({ bg_color: color })
-      const label_props = {
-        font_scale,
-        text_color,
-        can_show_label,
-        needs_external_label,
-        external_label_position,
-        label_x: x + width / 2,
-        label_y: bar_y + bar_height / 2,
-      }
-      return { element, amount, fraction, color, x, width, ...label_props }
-    })
-  })
-
-  let hovered_element: ElementSymbol | null = $state(null)
-  // Generate unique ID for clipPath to avoid collisions across BarCharts
-  let clip_path_id = $derived(`bar-clip-${crypto.randomUUID()}`)
-</script>
-
-{#snippet label_content(segment: BarSegmentData)}
-  <tspan class="element-symbol" style:font-size="{10 * segment.font_scale}px">
-    {segment.element}
-  </tspan>
-  {#if show_amounts || show_percentages}
-    <tspan class="amount" style:font-size="{6.5 * segment.font_scale}px" dx="1" dy="5">
-      {show_amounts ? segment.amount : ``}{show_amounts && show_percentages ? `=` : ``}{
-        show_percentages ? format_num(segment.fraction, `.1~%`) : ``
-      }
-    </tspan>
-  {/if}
-{/snippet}
-
-<svg
-  viewBox="0 0 {size} {svg_height}"
-  {...rest}
-  class="bar-chart {rest.class ?? ``}"
-  style:max-width="{size}px"
-  bind:this={svg_node}
->
-  <!-- Background and border -->
-  <rect
-    x="0"
-    y={bar_y}
-    width={size}
-    height={bar_height}
-    fill="var(--bar-bg)"
-    stroke="var(--bar-border, none)"
-  />
-
-  <!-- External labels above -->
-  {#each segments as segment (segment.element)}
-    {#if show_labels && segment.needs_external_label &&
-      segment.external_label_position === `above`}
-      <text
-        x={segment.label_x}
-        y={above_labels_y}
-        text-anchor="middle"
-        class="external-label"
-        class:hovered={hovered_element === segment.element}
-        style:fill={segment.color}
-      >
-        {@render label_content(segment)}
-      </text>
-    {/if}
-  {/each}
-
-  <!-- Bar segments -->
-  <defs>
-    <clipPath id={clip_path_id}>
-      <rect
-        x="0"
-        y={bar_y}
-        width={size}
-        height={bar_height}
-        rx={outer_corners_only ? 2 : 0}
-        ry={outer_corners_only ? 2 : 0}
-      />
-    </clipPath>
-  </defs>
-
-  <g clip-path="url(#{clip_path_id})">
-    {#each segments as segment (segment.element)}
-      <rect
-        x={segment.x}
-        y={bar_y}
-        width={segment.width}
-        height={bar_height}
-        fill={segment.color}
-        stroke="white"
-        stroke-width={hovered_element === segment.element ? 1.5 : 1}
-        class="bar-segment"
-        class:interactive
-        class:hovered={hovered_element === segment.element}
-        onmouseenter={() => interactive && (hovered_element = segment.element)}
-        onmouseleave={() => interactive && (hovered_element = null)}
-        {...(interactive
-        ? {
-          role: `button`,
-          tabindex: 0,
-          'aria-label': `${segment.element}: ${segment.amount} ${
-            segment.amount === 1 ? `atom` : `atoms`
-          } (${format_num(segment.fraction, `.1~%`)})`,
-        }
-        : {})}
-      >
-        <title>
-          {segment.element}: {segment.amount} {segment.amount === 1 ? `atom` : `atoms`} ({
-            format_num(segment.fraction, `.1~%`)
-          })
-        </title>
-      </rect>
-      {#if segment_content}
-        {@render segment_content(segment)}
-      {/if}
-    {/each}
-  </g>
-
-  <!-- Internal labels -->
-  {#each segments as segment (segment.element)}
-    {#if show_labels && segment.can_show_label && !segment.needs_external_label}
-      <text
-        x={segment.label_x}
-        y={segment.label_y}
-        text-anchor="middle"
-        dominant-baseline={show_amounts || show_percentages ? `middle` : `central`}
-        class="bar-label"
-        style:fill={segment.text_color}
-      >
-        {@render label_content(segment)}
-      </text>
-    {/if}
-  {/each}
-
-  <!-- External labels below -->
-  {#each segments as segment (segment.element)}
-    {#if show_labels && segment.needs_external_label &&
-      segment.external_label_position === `below`}
-      <text
-        x={segment.label_x}
-        y={below_labels_y}
-        text-anchor="middle"
-        class="external-label"
-        class:hovered={hovered_element === segment.element}
-        style:fill={segment.color}
-      >
-        {@render label_content(segment)}
-      </text>
-    {/if}
-  {/each}
-
-  {@render children?.({ hovered_element })}
-</svg>
-
-<style>
-  .bar-chart {
-    display: inline-block;
-    --bar-bg: light-dark(#fff, #333);
-  }
-  .bar-segment {
-    transition: all 0.2s ease;
-  }
-  .bar-segment.interactive {
-    cursor: pointer;
-  }
-  .bar-segment.interactive:hover, .bar-segment.hovered {
-    filter: brightness(1.1);
-  }
-  .bar-segment.interactive:focus {
-    outline: 2px solid var(--focus-color, #0066cc);
-    outline-offset: 2px;
-  }
-  .external-label, .bar-label {
-    transition: all 0.2s ease;
-    pointer-events: none;
-  }
-  .external-label.hovered, .bar-label.hovered {
-    font-weight: 700;
-  }
-  .element-symbol {
-    font-weight: 700;
-  }
-  .amount {
-    font-weight: 500;
-  }
-</style>

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

@@ -1,218 +0,0 @@
-<script lang="ts">
-  import type { ColorSchemeName } from '$lib/colors'
-  import { ELEMENT_COLOR_SCHEMES, pick_contrast_color } from '$lib/colors'
-  import type { CompositionType } from '$lib/composition'
-  import type { ElementSymbol } from '$lib/element'
-  import { hierarchy, pack } from 'd3-hierarchy'
-  import type { Snippet } from 'svelte'
-  import type { SVGAttributes } from 'svelte/elements'
-  import { type ChartSegmentData, get_chart_font_scale } from './index'
-  import { count_atoms_in_composition } from './parse'
-
-  type BubbleSegmentData = ChartSegmentData & { radius: number; x: number; y: number }
-
-  let {
-    composition,
-    size = 200,
-    padding = 0,
-    show_labels = true,
-    show_amounts = true,
-    color_scheme = `Vesta`,
-    bubble_content,
-    interactive = true,
-    svg_node = $bindable(null),
-    children,
-    ...rest
-  }: SVGAttributes<SVGSVGElement> & {
-    composition: CompositionType
-    size?: number
-    padding?: number
-    show_labels?: boolean
-    show_amounts?: boolean
-    color_scheme?: ColorSchemeName
-    bubble_content?: Snippet<[BubbleSegmentData]>
-    interactive?: boolean
-    svg_node?: SVGSVGElement | null
-    children?: Snippet<[{ hovered_element: ElementSymbol | null }]>
-  } = $props()
-
-  let element_colors = $derived(
-    ELEMENT_COLOR_SCHEMES[color_scheme] || ELEMENT_COLOR_SCHEMES.Vesta,
-  )
-
-  // Calculate bubble data with proper circle packing
-  let bubbles = $derived.by<BubbleSegmentData[]>(() => {
-    const element_entries = Object.entries(composition).filter(
-      ([_, amount]) => amount && amount > 0,
-    )
-    if (element_entries.length === 0) return []
-
-    // Create hierarchy data structure for D3 pack
-    type Child = { element: string; amount: number; color: string }
-    type HierarchyData = { children: Child[] }
-
-    const hierarchy_data: HierarchyData = {
-      children: element_entries.map(([element, amount]) => ({
-        element,
-        amount: amount ?? 0,
-        color: element_colors[element] || `#cccccc`,
-      })),
-    }
-
-    // Use D3's pack layout for proper circle packing
-    const pack_layout = pack<HierarchyData | Child>().size([
-      size - 2 * padding,
-      size - 2 * padding,
-    ]).padding(padding * 0.1) // Small padding between circles
-
-    const root = pack_layout(
-      hierarchy<HierarchyData | Child>(hierarchy_data).sum(
-        (data) => (`amount` in data ? data.amount : 0),
-      ),
-    )
-
-    // Get max radius for font scaling
-    const max_radius = Math.max(...root.leaves().map((data) => data.r || 0))
-    const total_atoms = count_atoms_in_composition(composition)
-
-    return root.leaves().map((node) => {
-      const radius = node.r || 0
-      const data = node.data as Child
-
-      // Calculate font scale based on bubble size and smart text fitting
-      const [min_font_scale, max_font_scale] = [0.6, 2] as const
-      const scale_factor = radius / max_radius
-      const base_scale = min_font_scale +
-        scale_factor * (max_font_scale - min_font_scale)
-      const label_text = data.element + (show_amounts ? data.amount.toString() : ``)
-      const available_space = radius * 2 * 0.8 // 80% of bubble diameter for text
-      const font_scale = get_chart_font_scale(base_scale, label_text, available_space)
-
-      return {
-        element: data.element as ElementSymbol,
-        amount: data.amount,
-        fraction: total_atoms > 0 ? data.amount / total_atoms : 0,
-        radius,
-        x: (node.x || 0) + padding, // Offset by padding
-        y: (node.y || 0) + padding,
-        color: data.color,
-        font_scale,
-        text_color: pick_contrast_color({ bg_color: data.color }),
-      }
-    })
-  })
-
-  let hovered_element: ElementSymbol | null = $state(null)
-</script>
-
-<svg
-  viewBox="0 0 {size} {size}"
-  style:max-width="{size}px"
-  {...rest}
-  class="bubble-chart {rest.class ?? ``}"
-  bind:this={svg_node}
->
-  {#each bubbles as bubble (bubble.element)}
-    <circle
-      cx={bubble.x}
-      cy={bubble.y}
-      r={bubble.radius}
-      fill={bubble.color}
-      stroke="white"
-      stroke-width={hovered_element === bubble.element ? 1.5 : 1}
-      class="bubble"
-      class:interactive
-      class:hovered={hovered_element === bubble.element}
-      onmouseenter={() => interactive && (hovered_element = bubble.element)}
-      onmouseleave={() => interactive && (hovered_element = null)}
-      {...interactive && {
-        role: `button`,
-        tabindex: 0,
-        'aria-label': `${bubble.element}: ${bubble.amount} ${
-          bubble.amount === 1 ? `atom` : `atoms`
-        }`,
-      }}
-    >
-      <title>
-        {bubble.element}: {bubble.amount} {bubble.amount === 1 ? `atom` : `atoms`}
-      </title>
-    </circle>
-
-    {#if bubble_content}
-      {@render bubble_content(bubble)}
-    {/if}
-  {/each}
-
-  {#if show_labels}
-    {#each bubbles as bubble (bubble.element)}
-      <foreignObject
-        x={bubble.x - (size * 0.15 * bubble.font_scale) / 2}
-        y={bubble.y - (size * 0.075 * bubble.font_scale) / 2}
-        width={size * 0.15 * bubble.font_scale}
-        height={size * 0.075 * bubble.font_scale}
-        class="bubble-label-container"
-        class:hovered={hovered_element === bubble.element}
-      >
-        <div class="bubble-label" style:color={bubble.text_color}>
-          <span class="element-symbol" style:font-size="{14 * bubble.font_scale}px">{
-            bubble.element
-          }</span>
-          {#if show_amounts}
-            <sub class="amount" style:font-size="{8 * bubble.font_scale}px">{
-              bubble.amount
-            }</sub>
-          {/if}
-        </div>
-      </foreignObject>
-    {/each}
-  {/if}
-
-  {@render children?.({ hovered_element })}
-</svg>
-
-<style>
-  .bubble {
-    transition: all 0.2s ease;
-  }
-  .bubble.interactive {
-    cursor: pointer;
-  }
-  .bubble.interactive:hover, .bubble.hovered {
-    filter: brightness(1.1);
-  }
-  .bubble.interactive:focus {
-    outline: none;
-  }
-  .bubble-label-container {
-    pointer-events: none;
-    transition: all 0.2s ease;
-  }
-  .bubble-label-container.hovered {
-    font-weight: 700;
-  }
-  .bubble-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    font-weight: 600;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-  }
-  foreignobject {
-    overflow: visible;
-  }
-  .bubble-label.hovered {
-    font-weight: 700;
-  }
-  .element-symbol {
-    font-weight: 700;
-  }
-  .amount {
-    font-weight: 500;
-    margin-left: 1px;
-    transform: translateY(5px);
-  }
-</style>

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

@@ -1,165 +0,0 @@
-<script lang="ts">
-  import type { ColorSchemeName } from '$lib/colors'
-  import type { CompositionType } from '$lib/composition'
-  import { untrack } from 'svelte'
-  import { ContextMenu } from '$lib/overlays'
-  import { export_svg_as_png, export_svg_as_svg } from '$lib/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}