matterviz 0.3.6 → 0.3.7

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

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

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

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