matterviz 0.3.5 → 0.3.6

package/dist/src/lib/effects.svelte.ts

@@ -0,0 +1,48 @@
+type PulseAnimationOptions = {
+  step?: number
+  frequency?: number
+  on_tick?: () => void
+  reset_when_inactive?: boolean
+}
+
+type PulseAnimation = { readonly time: number; readonly unit: number }
+
+export function create_pulse_animation(
+  active: () => boolean,
+  options: PulseAnimationOptions = {},
+): PulseAnimation {
+  let time = $state(0)
+  let frame_id: number | null = null
+  const { step = 0.02, frequency = 4, on_tick, reset_when_inactive = true } = options
+  const cancel_frame = () => {
+    if (frame_id == null) return
+    cancelAnimationFrame(frame_id)
+    frame_id = null
+  }
+  const stop = () => {
+    cancel_frame()
+    if (reset_when_inactive) time = 0
+  }
+
+  $effect(() => {
+    if (!active()) return stop()
+
+    const animate = () => {
+      time += step
+      on_tick?.()
+      if (!active()) return stop()
+      frame_id = requestAnimationFrame(animate)
+    }
+    frame_id = requestAnimationFrame(animate)
+    return cancel_frame
+  })
+
+  return {
+    get time() {
+      return time
+    },
+    get unit() {
+      return 0.5 + 0.5 * Math.sin(time * frequency)
+    },
+  }
+}

package/dist/src/lib/element/BohrAtom.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements'
+
+  let {
+    symbol = ``,
+    name = ``,
+    shells,
+    adapt_size = true,
+    shell_width = 20,
+    size = adapt_size ? (shells.length + 1) * 2 * shell_width + 30 : 270,
+    base_fill = `var(--text-color)`,
+    orbital_period = 3,
+    nucleus_props = {},
+    shell_props = {},
+    electron_props = {},
+    highlight_shell = null,
+    number_electrons = false,
+    electron_label_props = {},
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
+    // https://svelte.dev/repl/17d71b590f554b5a9eba6e04023dd41c
+    symbol?: string // usually H, He, etc. but can be anything
+    name?: string // usually Hydrogen, Helium, etc. but can be anything
+    shells: number[]
+    adapt_size?: boolean
+    shell_width?: number
+    size?: number
+    base_fill?: string
+    orbital_period?: number // time for inner-most electron orbit in seconds, 0 for no motion
+    // set properties like size, fill, stroke, stroke-width, for nucleus and electrons here
+    nucleus_props?: Record<string, string | number>
+    shell_props?: Record<string, string | number>
+    electron_props?: Record<string, string | number>
+    highlight_shell?: number | null
+    // if function, it'll be called with electron index and should return a string
+    number_electrons?:
+      | boolean
+      | `hierarchical`
+      | `sequential`
+      | ((idx: number) => string)
+    electron_label_props?: Record<string, string | number>
+  } = $props()
+
+  // Bohr atom electron orbital period is given by
+  // T = (n^3 h^3) / (4pi^2 m K e^4 Z^2) = 1.52 * 10^-16 * n^3 / Z^2 s
+  // with n the shell number, Z the atomic number, m the mass of the electron
+  let nucleus_svg_props = $derived({
+    r: 20,
+    fill: base_fill,
+    'fill-opacity': `0.3`,
+    ...nucleus_props,
+  })
+  let shell_svg_props = $derived({
+    stroke: base_fill,
+    fill: `none`,
+    ...shell_props,
+  })
+  let electron_svg_props = $derived({
+    r: 3,
+    stroke: base_fill,
+    fill: `blue`,
+    ...electron_props,
+  })
+  let viewBox = $derived(`-${size / 2}, -${size / 2}, ${size}, ${size}`)
+</script>
+
+<svg
+  fill={base_fill}
+  {viewBox}
+  role={name || symbol ? `img` : undefined}
+  aria-label={(name || symbol) || undefined}
+  aria-hidden={name || symbol ? undefined : `true`}
+  {...rest}
+>
+  <!-- nucleus -->
+  <circle class="nucleus" {...nucleus_svg_props}>
+    {#if name}
+      <title>{name}</title>
+    {/if}
+  </circle>
+  {#if symbol}
+    <text>{symbol}</text>
+  {/if}
+
+  <!-- electron orbitals -->
+  {#each shells as electrons, shell_idx (`${shell_idx}-${electrons}`)}
+    {@const shell_number = shell_idx + 1}
+    {@const shell_radius = nucleus_svg_props.r + shell_number * shell_width}
+    {@const active = shell_number === highlight_shell}
+    <g class="shell" style:animation-duration="{orbital_period * shell_number ** 1.5}s">
+      <circle
+        r={shell_radius}
+        {...shell_svg_props}
+        style:stroke-width={active ? 2 : 1}
+        style:stroke={active ? `yellow` : base_fill}
+      />
+
+      <!-- electrons -->
+      {#each Array(electrons) as _, elec_idx (elec_idx)}
+        {@const elec_x = Math.cos((2 * Math.PI * elec_idx) / electrons) * shell_radius}
+        {@const elec_y = Math.sin((2 * Math.PI * elec_idx) / electrons) * shell_radius}
+        <circle class="electron" cx={elec_x} cy={elec_y} {...electron_svg_props}>
+          <title>Electron {elec_idx + 1}</title>
+        </circle>
+        {#if number_electrons}
+          <text
+            x={elec_x}
+            y={elec_y}
+            {...electron_label_props}
+            transform="rotate({(elec_idx * 360) / electrons} {elec_x} {elec_y})"
+          >
+            {#if typeof number_electrons === `function`}
+              {number_electrons(elec_idx)}
+            {:else if number_electrons === `hierarchical`}
+              {shell_idx + 1}.{elec_idx + 1}
+              <!-- {:else if [`sequential`, true].includes(number_electrons)} -->
+            {:else}
+              {@const nth_electron = shells.slice(0, shell_idx).reduce((a, b) => a + b, 0) +
+          elec_idx + 1}
+              {nth_electron}
+            {/if}
+          </text>
+        {/if}
+      {/each}
+    </g>
+  {/each}
+</svg>
+
+<style>
+  svg {
+    overflow: visible;
+    width: 100%;
+    border-radius: var(--border-radius, 3pt);
+  }
+  g.shell {
+    animation: spin-right linear infinite;
+  }
+  text {
+    text-anchor: middle;
+    dominant-baseline: central;
+  }
+  @keyframes spin-right {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/src/lib/element/ElementHeading.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { ChemicalElement } from '$lib/element'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { element, ...rest }: HTMLAttributes<HTMLHeadingElement> & {
+    element: ChemicalElement
+  } = $props()
+</script>
+
+<h2 {...rest}>
+  {element.number} - {element.name} <small>{element.category}</small>
+</h2>
+
+<style>
+  h2 {
+    font-size: min(7vw, 3em);
+    white-space: nowrap;
+    text-align: center;
+    margin: 0 0 1em;
+  }
+  h2 > small {
+    margin-left: min(1vw, 10pt);
+    font-weight: 100;
+    opacity: 0.7;
+  }
+</style>

package/dist/src/lib/element/ElementPhoto.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { ChemicalElement } from '$lib/element'
+  import Icon from '$lib/Icon.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { element, missing_msg = `No image for `, ...rest }:
+    & HTMLAttributes<HTMLImageElement | HTMLDivElement>
+    & { element: ChemicalElement; missing_msg?: string } = $props()
+
+  let { name, number } = $derived(element ?? {})
+  let file = $derived(`elements/${number}-${name?.toLowerCase()}.avif`)
+  let hidden = $state(false)
+  $effect.pre(() => {
+    if (file) hidden = false
+  }) // reset hidden to false when file changes
+</script>
+
+{#if name && number}
+  {@const src = `https://github.com/janosh/matterviz/raw/main/static/${file}`}
+  <img {src} alt={name} onerror={() => (hidden = true)} {hidden} {...rest} />
+  {#if hidden && missing_msg}
+    <div {...rest}>
+      <span>
+        <Icon icon="NoImage" />&nbsp;{missing_msg} {name}
+      </span>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  img {
+    width: 100%;
+    object-fit: cover;
+    margin: 0;
+    border-radius: var(--element-photo-border-radius, var(--border-radius, 3pt));
+  }
+  div {
+    aspect-ratio: 1;
+    text-align: center;
+    display: flex;
+    padding: var(--element-photo-padding, 3pt);
+    box-sizing: border-box;
+    place-items: center;
+    background-image: linear-gradient(
+      to top left,
+      rgba(0, 100, 0, 0.5),
+      rgba(0, 0, 100, 0.3)
+    );
+    color: var(--text-color);
+    border-radius: var(--element-photo-border-radius, var(--border-radius, 3pt));
+    width: 100%;
+    container-type: inline-size;
+  }
+  div > span {
+    font-size: 15cqw;
+  }
+</style>

package/dist/src/lib/element/ElementStats.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { ChemicalElement } from '$lib/element'
+  import Icon from '$lib/Icon.svelte'
+  import { format_num } from '$lib/labels'
+  import ElementHeading from './ElementHeading.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { element, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    element: ChemicalElement | null
+  } = $props()
+</script>
+
+{#if element}
+  <div {...rest}>
+    <ElementHeading
+      {element}
+      style="font-size: 6cqw; grid-column: 1/-1; margin: auto 0 0"
+    />
+    <section>
+      <p>
+        Atomic Mass
+        <abbr title="Dalton aka atomic mass unit">(u)</abbr>
+      </p>
+      <strong>
+        <Icon icon="Weight" /> {format_num(element.atomic_mass)}
+      </strong>
+    </section>
+    <section>
+      <p>
+        Density
+        <abbr title="grams per cubic centimeter">(g/cm³)</abbr>
+      </p>
+      <strong>
+        <Icon icon="Scale" /> {format_num(element.density)}
+      </strong>
+    </section>
+    <section>
+      <p>Phase</p>
+      <strong>
+        <Icon icon={element.phase} /> {element.phase}</strong>
+    </section>
+    <section>
+      <p>Year of Discovery</p>
+      <strong>
+        <Icon icon="CalendarBlank" /> {element.year}
+      </strong>
+    </section>
+  </div>
+{:else}
+  <h3 style="text-align: center">Try hovering an element!</h3>
+{/if}
+
+<style>
+  div {
+    display: grid;
+    grid-template: auto auto / repeat(4, 1fr);
+    place-items: center;
+    text-align: center;
+    container-type: inline-size;
+  }
+  div > section > strong {
+    display: block;
+    margin-top: 1ex;
+    font-size: 3.5cqw;
+  }
+  div > section > p {
+    margin: 0;
+    font-weight: lighter;
+    font-size: 3cqw;
+  }
+  div > section > p > abbr {
+    font-size: 2cqw;
+    text-decoration: none;
+  }
+  h3 {
+    font-size: clamp(9pt, 3vw, 20pt);
+    white-space: nowrap;
+    align-self: center;
+  }
+</style>