matterviz 0.3.4 → 0.3.6

package/dist/src/lib/plot/PortalSelect.svelte

@@ -0,0 +1,253 @@
+<script module lang="ts">
+  // Track active dropdown across all instances - only one can be open at a time
+  let active_close_fn: (() => void) | null = null
+</script>
+
+<script lang="ts">
+  import { sanitize_html } from '$lib/sanitize'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  type Option = { key: string; label: string; unit?: string }
+
+  let {
+    options,
+    selected_key = $bindable(),
+    on_select,
+    disabled = false,
+    format_option = (
+      opt: Option,
+    ) => (opt.unit ? `${opt.label} (${opt.unit})` : opt.label),
+    ...rest
+  }: Omit<HTMLButtonAttributes, `onclick`> & {
+    options: Option[]
+    selected_key?: string
+    on_select?: (key: string, prev_key?: string) => void | Promise<void>
+    disabled?: boolean
+    format_option?: (opt: Option) => string
+  } = $props()
+
+  let dropdown_open = $state(false)
+  let trigger_el: HTMLButtonElement | undefined = $state()
+  let portal_el: HTMLDivElement | undefined
+
+  const selected_option = $derived(
+    options?.find((opt) => opt.key === selected_key) ?? options?.[0],
+  )
+
+  function update_position() {
+    if (!trigger_el || !portal_el) return
+    const rect = trigger_el.getBoundingClientRect()
+    const dropdown_rect = portal_el.getBoundingClientRect()
+    const gap = 4
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+
+    // Vertical: prefer below, flip above if no room
+    const below_y = rect.bottom + gap
+    const above_y = rect.top - gap - dropdown_rect.height
+    const fits_below = below_y + dropdown_rect.height <= vh
+    portal_el.style.top = `${fits_below ? below_y : Math.max(gap, above_y)}px`
+
+    // Horizontal: center, but clamp to viewport edges
+    const center_x = rect.left + rect.width / 2
+    const half_width = dropdown_rect.width / 2
+    const min_x = half_width + gap
+    const max_x = vw - half_width - gap
+    portal_el.style.left = `${Math.max(min_x, Math.min(max_x, center_x))}px`
+  }
+
+  // Inline styles for portal elements (can't use scoped CSS for elements in document.body)
+  const portal_styles = {
+    container: `position: fixed; transform: translateX(-50%); z-index: 10000;`,
+    ul:
+      `margin: 0; padding: 0; list-style: none; background: var(--dropdown-bg, white); border: 1px solid var(--dropdown-border, #ccc); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: max-content; max-height: 300px; overflow-y: auto; font-size: 14px;`,
+    li: `margin: 0;`,
+    btn:
+      `display: block; width: 100%; padding: var(--dropdown-padding-v, 3px) var(--dropdown-padding-h, 10px); border: none; background: transparent; font: inherit; color: var(--dropdown-color, black); text-align: left; cursor: pointer; white-space: nowrap;`,
+    btn_selected: `font-weight: 500; background: rgba(0, 100, 200, 0.15);`,
+  }
+
+  function style_sub_sup(el: HTMLElement) {
+    for (const sub of el.querySelectorAll(`sub`)) {
+      ;(sub as HTMLElement).style.cssText =
+        `font-size: 0.75em; line-height: 0; margin: 0; padding: 0; position: relative; top: 0.15em;`
+    }
+    for (const sup of el.querySelectorAll(`sup`)) {
+      ;(sup as HTMLElement).style.cssText =
+        `font-size: 0.75em; line-height: 0; margin: 0; padding: 0; position: relative; top: -0.4em;`
+    }
+  }
+
+  function open_dropdown() {
+    if (!trigger_el || !options?.length) return
+    if (active_close_fn && active_close_fn !== close_dropdown) active_close_fn()
+
+    portal_el = document.createElement(`div`)
+    portal_el.className = `portal-select-dropdown`
+    portal_el.style.cssText = portal_styles.container
+    portal_el.setAttribute(`role`, `listbox`)
+
+    const ul = document.createElement(`ul`)
+    ul.style.cssText = portal_styles.ul
+    let selected_btn: HTMLButtonElement | undefined
+    for (const opt of options) {
+      const li = document.createElement(`li`)
+      li.style.cssText = portal_styles.li
+      li.setAttribute(`role`, `presentation`)
+      const btn = document.createElement(`button`)
+      btn.type = `button`
+      btn.style.cssText = portal_styles.btn
+      btn.setAttribute(`role`, `option`)
+      btn.innerHTML = sanitize_html(format_option(opt))
+      style_sub_sup(btn)
+      btn.addEventListener(`click`, () => select(opt.key))
+      btn.addEventListener(`mouseenter`, () => {
+        if (!btn.classList.contains(`selected`)) {
+          btn.style.background = `rgba(128, 128, 128, 0.15)`
+        }
+      })
+      btn.addEventListener(`mouseleave`, () => {
+        if (!btn.classList.contains(`selected`)) btn.style.background = `transparent`
+      })
+      if (opt.key === selected_key) {
+        btn.classList.add(`selected`)
+        btn.style.cssText = portal_styles.btn + portal_styles.btn_selected
+        btn.setAttribute(`aria-selected`, `true`)
+        selected_btn = btn
+      }
+      li.appendChild(btn)
+      ul.appendChild(li)
+    }
+
+    portal_el.appendChild(ul)
+    document.body.appendChild(portal_el)
+    update_position()
+    dropdown_open = true
+    active_close_fn = close_dropdown
+    window.addEventListener(`scroll`, update_position, true)
+    window.addEventListener(`resize`, update_position)
+    window.addEventListener(`keydown`, handle_keydown)
+    selected_btn?.focus()
+  }
+
+  function close_dropdown(return_focus = true) {
+    if (portal_el) {
+      window.removeEventListener(`scroll`, update_position, true)
+      window.removeEventListener(`resize`, update_position)
+      window.removeEventListener(`keydown`, handle_keydown)
+      portal_el.remove()
+      portal_el = undefined
+    }
+    if (active_close_fn === close_dropdown) active_close_fn = null
+    dropdown_open = false
+    if (return_focus) trigger_el?.focus()
+  }
+
+  async function select(key: string) {
+    if (key !== selected_key) {
+      const prev_key = selected_key
+      selected_key = key // Optimistic update for responsive UI
+      try {
+        await on_select?.(key, prev_key)
+      } catch {
+        selected_key = prev_key // Roll back on error
+      }
+    }
+    close_dropdown()
+  }
+
+  function handle_click_outside(evt: MouseEvent) {
+    if (!dropdown_open) return
+    const target = evt.target
+    if (
+      !(target instanceof Node) ||
+      (!trigger_el?.contains(target) && !portal_el?.contains(target))
+    ) {
+      close_dropdown()
+    }
+  }
+
+  function handle_keydown(evt: KeyboardEvent) {
+    if (!portal_el) return
+    const buttons = [...portal_el.querySelectorAll(`button`)] as HTMLButtonElement[]
+    const idx = buttons.indexOf(document.activeElement as HTMLButtonElement)
+    const len = buttons.length
+
+    if (evt.key === `Escape`) {
+      evt.preventDefault()
+      close_dropdown()
+    } else if (evt.key === `ArrowDown`) {
+      evt.preventDefault()
+      buttons[(idx + 1) % len]?.focus()
+    } else if (evt.key === `ArrowUp`) {
+      evt.preventDefault()
+      buttons[idx < 0 ? len - 1 : (idx - 1 + len) % len]?.focus()
+    } else if (evt.key === `Enter` && idx >= 0) {
+      evt.preventDefault()
+      buttons[idx].click()
+    }
+  }
+
+  // Close dropdown when disabled, options empty, or component unmounts
+  $effect(() => {
+    if ((disabled || !options?.length) && dropdown_open) close_dropdown(false)
+    return () => close_dropdown(false)
+  })
+</script>
+
+<svelte:window onclick={handle_click_outside} />
+
+{#if selected_option}
+  <button
+    bind:this={trigger_el}
+    type="button"
+    onclick={() => (dropdown_open ? close_dropdown() : open_dropdown())}
+    {disabled}
+    aria-expanded={dropdown_open}
+    aria-haspopup="listbox"
+    {...rest}
+    class="portal-select-trigger {rest.class ?? ``}"
+  >
+    {@html sanitize_html(format_option(selected_option))}
+    <span class="arrow">▾</span>
+  </button>
+{/if}
+
+<style>
+  .portal-select-trigger {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.3em;
+    background: transparent;
+    border: none;
+    border-radius: 3px;
+    padding: 2px 4px;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  .portal-select-trigger:hover {
+    background-color: var(--portal-select-hover-bg, rgba(128, 128, 128, 0.15));
+  }
+  .portal-select-trigger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .arrow {
+    font-size: 1.4em;
+    opacity: 0.8;
+  }
+  .portal-select-trigger :global(:is(sub, sup)) {
+    font-size: 0.75em;
+    line-height: 0;
+    margin: 0 0 0 -0.25em;
+    padding: 0;
+    position: relative;
+  }
+  .portal-select-trigger :global(sub) {
+    top: 0.25em;
+  }
+  .portal-select-trigger :global(sup) {
+    top: -0.4em;
+  }
+</style>

package/dist/src/lib/plot/ReferenceLine3D.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  // ReferenceLine3D: 3D reference lines for axis-parallel, segments, and extended lines
+  // Uses Line2 for proper variable-width lines (WebGL ignores linewidth on basic lines)
+  import type { Point3D, Vec3 } from '$lib/math'
+  import { T, useThrelte } from '@threlte/core'
+  import * as THREE from 'three'
+  import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+  import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+  import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+  import { create_to_threejs, span_or } from './reference-line'
+  import type { RefLine3D } from './types'
+
+  let { ref_line, scene_size = [10, 10, 5], ranges }: {
+    ref_line: RefLine3D
+    scene_size?: Vec3
+    ranges: { x: [number, number]; y: [number, number]; z: [number, number] }
+  } = $props()
+
+  const { size } = useThrelte()
+  let [scene_x, scene_y, scene_z] = $derived(scene_size)
+  let { x: x_range, y: y_range, z: z_range } = $derived(ranges)
+
+  // Transform data coords to Three.js coordinates
+  let to_coords = $derived.by(() => {
+    const transform = create_to_threejs({
+      scene_x,
+      scene_y,
+      scene_z,
+      x_range,
+      y_range,
+      z_range,
+    })
+    return (ux: number, uy: number, uz: number) => transform(ux, uy, uz)
+  })
+  const endpoints_from = (point_a: Vec3, point_b: Vec3): [Point3D, Point3D] => [
+    to_coords(...point_a),
+    to_coords(...point_b),
+  ]
+
+  // Compute line endpoints based on type
+  let endpoints = $derived.by(
+    (): [Point3D, Point3D] | null => {
+      if (ref_line.visible === false) return null
+      const [x_min, x_max] = span_or(ref_line.x_span, x_range)
+      const [y_min, y_max] = span_or(ref_line.y_span, y_range)
+      const [z_min, z_max] = span_or(ref_line.z_span, z_range)
+
+      if (ref_line.type === `x-axis`) {
+        return endpoints_from([x_min, ref_line.y, ref_line.z], [x_max, ref_line.y, ref_line.z])
+      }
+      if (ref_line.type === `y-axis`) {
+        return endpoints_from([ref_line.x, y_min, ref_line.z], [ref_line.x, y_max, ref_line.z])
+      }
+      if (ref_line.type === `z-axis`) {
+        return endpoints_from([ref_line.x, ref_line.y, z_min], [ref_line.x, ref_line.y, z_max])
+      }
+      if (ref_line.type === `segment`) {
+        return endpoints_from(ref_line.p1, ref_line.p2)
+      }
+      if (ref_line.type === `line`) {
+        // Extend line through two points to bounding box
+        const [p1x, p1y, p1z] = ref_line.p1
+        const [dx, dy, dz] = [
+          ref_line.p2[0] - p1x,
+          ref_line.p2[1] - p1y,
+          ref_line.p2[2] - p1z,
+        ]
+        // Find t values at each boundary plane
+        const t_values = [
+          ...(dx !== 0 ? [(x_min - p1x) / dx, (x_max - p1x) / dx] : []),
+          ...(dy !== 0 ? [(y_min - p1y) / dy, (y_max - p1y) / dy] : []),
+          ...(dz !== 0 ? [(z_min - p1z) / dz, (z_max - p1z) / dz] : []),
+        ]
+        // Keep only t values where the resulting point is inside bounds
+        const eps = 1e-6
+        const valid_t = t_values.filter((t_value) => {
+          const [px, py, pz] = [
+            p1x + t_value * dx,
+            p1y + t_value * dy,
+            p1z + t_value * dz,
+          ]
+          return (
+            px >= x_min - eps && px <= x_max + eps &&
+            py >= y_min - eps && py <= y_max + eps &&
+            pz >= z_min - eps && pz <= z_max + eps
+          )
+        })
+        if (valid_t.length < 2) return null
+        const t_min = Math.min(...valid_t)
+        const t_max = Math.max(...valid_t)
+        return endpoints_from(
+          [p1x + t_min * dx, p1y + t_min * dy, p1z + t_min * dz],
+          [p1x + t_max * dx, p1y + t_max * dy, p1z + t_max * dz],
+        )
+      }
+      return null
+    },
+  )
+
+  // Line style (with defaults)
+  let style = $derived({
+    color: ref_line.style?.color ?? `white`,
+    opacity: ref_line.style?.opacity ?? 1,
+    width: ref_line.style?.width ?? 2,
+    dashed: !!ref_line.style?.dash,
+  })
+
+  // Create Line2 with LineGeometry and LineMaterial for proper variable-width lines
+  let line2: Line2 | null = $state(null)
+  let material: LineMaterial | null = $state(null)
+
+  $effect(() => {
+    if (!endpoints) {
+      line2 = null
+      material = null
+      return
+    }
+    const [p1, p2] = endpoints
+
+    const geo = new LineGeometry()
+    geo.setPositions([p1.x, p1.y, p1.z, p2.x, p2.y, p2.z])
+
+    const mat = new LineMaterial({
+      color: new THREE.Color(style.color).getHex(),
+      linewidth: style.width,
+      transparent: style.opacity < 1,
+      opacity: style.opacity,
+      dashed: style.dashed,
+      dashSize: 0.3,
+      gapSize: 0.1,
+      resolution: new THREE.Vector2($size.width || 1, $size.height || 1),
+    })
+
+    const line = new Line2(geo, mat)
+    line.computeLineDistances() // Required for dashed lines
+
+    material = mat
+    line2 = line
+
+    return () => {
+      geo.dispose()
+      mat.dispose()
+    }
+  })
+
+  // Update material resolution when canvas size changes
+  $effect(() => {
+    if (material) {
+      material.resolution.set($size.width || 1, $size.height || 1)
+    }
+  })
+</script>
+
+{#if line2}
+  <T is={line2} />
+{/if}

package/dist/src/lib/plot/ReferencePlane.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  // ReferencePlane: 3D reference planes (axis-aligned, normal-defined, or point-defined)
+  import type { Vec3 } from '$lib/math'
+  import { cross_3d, normalize_vec3 } from '$lib/math'
+  import { T } from '@threlte/core'
+  import * as THREE from 'three'
+  import { create_to_threejs, span_or } from './reference-line'
+  import type { RefPlane } from './types'
+
+  let { ref_plane, scene_size = [10, 10, 5], ranges }: {
+    ref_plane: RefPlane
+    scene_size?: Vec3
+    ranges: { x: [number, number]; y: [number, number]; z: [number, number] }
+  } = $props()
+
+  let [scene_x, scene_y, scene_z] = $derived(scene_size)
+  let { x: x_range, y: y_range, z: z_range } = $derived(ranges)
+
+  // Transform data coords to Three.js Vector3
+  let to_vec3 = $derived.by(() => {
+    const transform = create_to_threejs({
+      scene_x,
+      scene_y,
+      scene_z,
+      x_range,
+      y_range,
+      z_range,
+    })
+    return (ux: number, uy: number, uz: number) => {
+      const { x, y, z } = transform(ux, uy, uz)
+      return new THREE.Vector3(x, y, z)
+    }
+  })
+
+  // Apply span constraints or use full range
+  let [x_min, x_max] = $derived(span_or(ref_plane.x_span, x_range))
+  let [y_min, y_max] = $derived(span_or(ref_plane.y_span, y_range))
+  let [z_min, z_max] = $derived(span_or(ref_plane.z_span, z_range))
+
+  // Helper to create quad from 4 corner coords
+  const quad = (coords: Vec3[]) =>
+    create_quad_geometry(coords.map(([ux, uy, uz]) => to_vec3(ux, uy, uz)))
+
+  // Compute plane geometry based on type - returns result to use in $effect
+  function compute_geometry(): THREE.BufferGeometry | null {
+    if (ref_plane.visible === false) return null
+
+    if (ref_plane.type === `xy`) {
+      const zval = ref_plane.z
+      return quad([
+        [x_min, y_min, zval],
+        [x_max, y_min, zval],
+        [x_max, y_max, zval],
+        [x_min, y_max, zval],
+      ])
+    }
+    if (ref_plane.type === `xz`) {
+      const yval = ref_plane.y
+      return quad([
+        [x_min, yval, z_min],
+        [x_max, yval, z_min],
+        [x_max, yval, z_max],
+        [x_min, yval, z_max],
+      ])
+    }
+    if (ref_plane.type === `yz`) {
+      const xval = ref_plane.x
+      return quad([
+        [xval, y_min, z_min],
+        [xval, y_max, z_min],
+        [xval, y_max, z_max],
+        [xval, y_min, z_max],
+      ])
+    }
+    if (ref_plane.type === `normal`) {
+      if (Math.hypot(...ref_plane.normal) < 1e-9) return null // degenerate normal
+      return create_plane_from_normal(ref_plane.normal, ref_plane.point)
+    }
+    if (ref_plane.type === `points`) {
+      const { p1, p2, p3 } = ref_plane
+      const v1: Vec3 = [p2[0] - p1[0], p2[1] - p1[1], p2[2] - p1[2]]
+      const v2: Vec3 = [p3[0] - p1[0], p3[1] - p1[1], p3[2] - p1[2]]
+      const cross = cross_3d(v1, v2)
+      if (Math.hypot(...cross) < 1e-9) return null // collinear points
+      return create_plane_from_normal(normalize_vec3(cross), p1)
+    }
+    return null
+  }
+
+  // Create geometry with proper disposal on dependency change
+  let geometry: THREE.BufferGeometry | null = $state(null)
+
+  $effect(() => {
+    const geo = compute_geometry()
+    geometry = geo
+    return () => geo?.dispose()
+  })
+
+  // Create a quad geometry from 4 corners (two triangles: 0-1-2 and 0-2-3)
+  function create_quad_geometry(corners: THREE.Vector3[]): THREE.BufferGeometry {
+    const geo = new THREE.BufferGeometry()
+    const [c0, c1, c2, c3] = corners
+    const verts = [c0, c1, c2, c0, c2, c3].flatMap((corner) => [corner.x, corner.y, corner.z])
+    geo.setAttribute(
+      `position`,
+      new THREE.BufferAttribute(new Float32Array(verts), 3),
+    )
+    geo.computeVertexNormals()
+    return geo
+  }
+
+  // Create plane from normal and point, scaled to cover bounding box
+  function create_plane_from_normal(normal: Vec3, point: Vec3): THREE.BufferGeometry {
+    const normalized = normalize_vec3(normal)
+    // Pick u perpendicular to normal (use axis least aligned with normal)
+    const u_dir = normalize_vec3(
+      cross_3d(normalized, Math.abs(normalized[0]) < 0.9 ? [1, 0, 0] : [0, 1, 0]),
+    )
+    const v_dir = cross_3d(normalized, u_dir)
+    // Scale to cover bounding box
+    const scale = Math.max(x_max - x_min, y_max - y_min, z_max - z_min) * 2
+    const [px, py, pz] = point
+    // Helper to offset point by u*su + v*sv
+    const corner = (su: number, sv: number): Vec3 => [
+      px + u_dir[0] * su + v_dir[0] * sv,
+      py + u_dir[1] * su + v_dir[1] * sv,
+      pz + u_dir[2] * su + v_dir[2] * sv,
+    ]
+    const corners = [
+      corner(-scale, -scale),
+      corner(scale, -scale),
+      corner(scale, scale),
+      corner(-scale, scale),
+    ]
+    return create_quad_geometry(corners.map(([ux, uy, uz]) => to_vec3(ux, uy, uz)))
+  }
+
+  // Material properties (with defaults)
+  let style = $derived({
+    color: ref_plane.style?.color ?? `#4488ff`,
+    opacity: ref_plane.style?.opacity ?? 0.3,
+    wireframe: ref_plane.style?.wireframe ?? false,
+    wireframe_color: ref_plane.style?.wireframe_color ?? `white`,
+    double_sided: ref_plane.style?.double_sided ?? true,
+  })
+
+  // Create wireframe geometry with automatic disposal when dependencies change
+  let wireframe_geometry: THREE.WireframeGeometry | null = $state(null)
+
+  $effect(() => {
+    const wf_geo = geometry && style.wireframe
+      ? new THREE.WireframeGeometry(geometry)
+      : null
+    wireframe_geometry = wf_geo
+    return () => wf_geo?.dispose()
+  })
+</script>
+
+{#if geometry}
+  <T.Mesh {geometry}>
+    <T.MeshBasicMaterial
+      color={style.color}
+      opacity={style.opacity}
+      transparent={true}
+      side={style.double_sided ? THREE.DoubleSide : THREE.FrontSide}
+      depthWrite={false}
+    />
+  </T.Mesh>
+
+  {#if wireframe_geometry}
+    <T.LineSegments geometry={wireframe_geometry}>
+      <T.LineBasicMaterial color={style.wireframe_color} />
+    </T.LineSegments>
+  {/if}
+{/if}