matterviz 0.3.2 → 0.3.4

package/dist/element/ElementTile.svelte

@@ -1,94 +1,158 @@
-<script lang="ts">import { contrast_color, is_color, pick_contrast_color } from '../colors';
-import { format_num } from '../labels';
-import { colors, selected } from '../state.svelte';
-let { element, bg_color = undefined, show_symbol = true, show_number = undefined, // auto-determine based on multi-value splits
-show_name = true, value = undefined, symbol_style = ``, active = false, href = undefined, luminance_threshold = 0.7, text_color = $bindable(), float_fmt = undefined, node = $bindable(null), label = undefined, bg_colors = [], show_values = undefined, split_layout = undefined, // auto-determine based on value count if not specified
-onclick, ...rest } = $props();
-// background color defaults to category color (initialized in colors/index.ts, user editable in PeriodicTableControls.svelte)
-let fallback_bg_color = $derived(bg_color ?? colors.category[element.category] ?? `#cccccc`);
-// Compute contrast text color from background when in heatmap mode (single bg_color)
-let computed_text_color = $derived(text_color ??
-    (bg_color && !Array.isArray(value)
+<script lang="ts">
+  import { contrast_color, is_color, pick_contrast_color } from '../colors'
+  import type { ChemicalElement } from './'
+  import { format_num } from '../labels'
+  import { colors, selected } from '../state.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type SplitLayout =
+    | `diagonal`
+    | `horizontal`
+    | `vertical`
+    | `triangular`
+    | `quadrant`
+  let {
+    element,
+    bg_color = undefined,
+    show_symbol = true,
+    show_number = undefined, // auto-determine based on multi-value splits
+    show_name = true,
+    value = undefined,
+    symbol_style = ``,
+    active = false,
+    href = undefined,
+    luminance_threshold = 0.7,
+    text_color = $bindable(),
+    float_fmt = undefined,
+    node = $bindable(null),
+    label = undefined,
+    bg_colors = [],
+    show_values = undefined,
+    split_layout = undefined, // auto-determine based on value count if not specified
+    onclick,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLElement>, `onclick`> & {
+    element: ChemicalElement
+    bg_color?: string
+    show_symbol?: boolean
+    show_number?: boolean
+    show_name?: boolean
+    value?: number | number[] | string | string[] | false
+    symbol_style?: string
+    active?: boolean
+    href?: string
+    // at what background color lightness text color switches from black to white
+    luminance_threshold?: number
+    text_color?: string
+    float_fmt?: string
+    node?: HTMLElement | null
+    label?: string
+    // array of background colors for multi-segment tiles
+    bg_colors?: (string | null)[]
+    show_values?: boolean // explicitly control whether to show values when colors are passed
+    // control the layout of multi-value splits
+    split_layout?: SplitLayout
+    onclick?: (data: { element: ChemicalElement; event: MouseEvent }) => void
+  } = $props()
+
+  // background color defaults to category color (initialized in colors/index.ts, user editable in PeriodicTableControls.svelte)
+  let fallback_bg_color = $derived(
+    bg_color ?? colors.category[element.category] ?? `#cccccc`,
+  )
+
+  // Compute contrast text color from background when in heatmap mode (single bg_color)
+  let computed_text_color = $derived(
+    text_color ??
+      (bg_color && !Array.isArray(value)
         ? pick_contrast_color({ bg_color, luminance_threshold })
-        : undefined));
-// Determine if we should show the atomic number
-const should_show_number = $derived.by(() => {
-    if (show_number !== undefined)
-        return show_number;
+        : undefined),
+  )
+
+  // Determine if we should show the atomic number
+  const should_show_number = $derived.by(() => {
+    if (show_number !== undefined) return show_number
     // Hide number for multi-value splits to prevent overlap with value labels
-    if (Array.isArray(value) && value.length > 1)
-        return false;
-    return true;
-});
-// Helper function to format values appropriately
-const format_value = (val) => {
-    if (is_color(val))
-        return show_values === true ? val.toString() : ``;
+    if (Array.isArray(value) && value.length > 1) return false
+    return true
+  })
+
+  // Helper function to format values appropriately
+  const format_value = (val: string | number): string => {
+    if (is_color(val)) return show_values === true ? val.toString() : ``
+
     // Handle numeric values
-    if (typeof val === `number`)
-        return format_num(val, float_fmt);
+    if (typeof val === `number`) return format_num(val, float_fmt)
+
     // Handle string values - check if it's a numeric string
     if (typeof val === `string`) {
-        const parsed_num = parseFloat(val);
-        if (isFinite(parsed_num))
-            return format_num(parsed_num, float_fmt);
-        // If show_values is true, return the string as-is to preserve non-numeric strings
-        return show_values === true ? val : ``;
+      const parsed_num = parseFloat(val)
+      if (isFinite(parsed_num)) return format_num(parsed_num, float_fmt)
+      // If show_values is true, return the string as-is to preserve non-numeric strings
+      return show_values === true ? val : ``
     }
-    return ``;
-};
-// Determine if we should show values - default to false if any array element is a color
-const should_show_values = $derived.by(() => {
-    if (show_values !== undefined)
-        return show_values;
-    if (Array.isArray(value))
-        return !value.some(is_color);
-    return !is_color(value);
-});
-// Get the appropriate CSS classes for segments and positions based on layout
-const layout_config = $derived.by(() => {
-    if (!Array.isArray(value))
-        return null;
-    const count = value.length;
+
+    return ``
+  }
+
+  // Determine if we should show values - default to false if any array element is a color
+  const should_show_values = $derived.by(() => {
+    if (show_values !== undefined) return show_values
+    if (Array.isArray(value)) return !value.some(is_color)
+    return !is_color(value)
+  })
+
+  // Get the appropriate CSS classes for segments and positions based on layout
+  const layout_config = $derived.by(() => {
+    if (!Array.isArray(value)) return null
+
+    const count = value.length
     // Use explicit split_layout or auto-determine based on count
     const layout = split_layout ?? {
-        2: `diagonal`,
-        3: `horizontal`,
-        4: `quadrant`,
-    }[count];
-    if (!layout)
-        return null;
+      2: `diagonal`,
+      3: `horizontal`,
+      4: `quadrant`,
+    }[count] as SplitLayout | undefined
+
+    if (!layout) return null
+
     if (layout === `diagonal` && count === 2) {
-        return {
-            segments: [`diagonal-top`, `diagonal-bottom`],
-            positions: [`top-left`, `bottom-right`],
-        };
+      return {
+        segments: [`diagonal-top`, `diagonal-bottom`],
+        positions: [`top-left`, `bottom-right`],
+      }
     }
+
     if (layout === `horizontal` && count === 3) {
-        return {
-            segments: [`horizontal-top`, `horizontal-middle`, `horizontal-bottom`],
-            positions: [`bar-top-left`, `bar-middle-right`, `bar-bottom-left`],
-        };
+      return {
+        segments: [`horizontal-top`, `horizontal-middle`, `horizontal-bottom`],
+        positions: [`bar-top-left`, `bar-middle-right`, `bar-bottom-left`],
+      }
     }
+
     if (layout === `vertical` && count === 3) {
-        return {
-            segments: [`vertical-left`, `vertical-middle`, `vertical-right`],
-            positions: [`bar-left-top`, `bar-middle-bottom`, `bar-right-top`],
-        };
+      return {
+        segments: [`vertical-left`, `vertical-middle`, `vertical-right`],
+        positions: [`bar-left-top`, `bar-middle-bottom`, `bar-right-top`],
+      }
     }
+
     if (layout === `triangular` && count === 4) {
-        return {
-            segments: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}`),
-            positions: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}-pos`),
-        };
+      return {
+        segments: [`top`, `right`, `bottom`, `left`].map((pos) => `triangle-${pos}`),
+        positions: [`top`, `right`, `bottom`, `left`].map((pos) =>
+          `triangle-${pos}-pos`
+        ),
+      }
     }
+
     if (layout === `quadrant` && count === 4) {
-        const segments = [`tl`, `tr`, `bl`, `br`].map((pos) => `quadrant-${pos}`);
-        const positions = [`tl`, `tr`, `bl`, `br`].map((pos) => `value-quadrant-${pos}`);
-        return { segments, positions };
+      const segments = [`tl`, `tr`, `bl`, `br`].map((pos) => `quadrant-${pos}`)
+      const positions = [`tl`, `tr`, `bl`, `br`].map((pos) => `value-quadrant-${pos}`)
+      return { segments, positions }
     }
-    return null;
-});
+
+    return null
+  })
 </script>
 
 <svelte:element

package/dist/element/Nucleus.svelte

@@ -1,17 +1,45 @@
-<script lang="ts">let { protons, neutrons, size = 100, radius = $bindable(size / 2), proton_color = `cornflowerblue`, neutron_color = `orange`, stroke = ``, proton_label = ` P`, neutron_label = ` N`, text_color = `white`, symbol = ``, ...rest } = $props();
-$effect(() => {
-    radius = size / 2;
-});
-let proton_frac = $derived(protons / (protons + neutrons));
-let neutron_frac = $derived(1 - proton_frac);
-let proton_circ = $derived(Math.PI * radius * proton_frac);
-let dash_array = $derived(`0 ${Math.PI * radius - proton_circ} ${proton_circ}`);
-let text = $derived({
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements'
+
+  let {
+    protons,
+    neutrons,
+    size = 100,
+    radius = $bindable(size / 2),
+    proton_color = `cornflowerblue`,
+    neutron_color = `orange`,
+    stroke = ``,
+    proton_label = ` P`,
+    neutron_label = ` N`,
+    text_color = `white`,
+    symbol = ``,
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    protons: number
+    neutrons: number
+    radius?: number
+    size?: number
+    proton_color?: string
+    neutron_color?: string
+    stroke?: string
+    proton_label?: string
+    neutron_label?: string
+    text_color?: string
+    symbol?: string
+  } = $props()
+
+  $effect(() => {
+    radius = size / 2
+  })
+  let proton_frac = $derived(protons / (protons + neutrons))
+  let neutron_frac = $derived(1 - proton_frac)
+  let proton_circ = $derived(Math.PI * radius * proton_frac)
+  let dash_array = $derived(`0 ${Math.PI * radius - proton_circ} ${proton_circ}`)
+  let text = $derived({
     'dominant-baseline': `middle`,
     'text-anchor': `middle`,
     fill: text_color,
-});
-export {};
+  })
 </script>
 
 <svg width="100%" height="100%" viewBox="0 0 {size} {size}" {...rest}>