matterviz 0.3.2 → 0.3.3

package/dist/plot/ReferenceLine3D.svelte

@@ -1,127 +1,152 @@
-<script lang="ts">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';
-let { ref_line, scene_size = [10, 10, 5], ranges } = $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(() => {
+<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 { Vec3 } from '../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, uy, uz) => transform(ux, uy, uz);
-});
-// Compute line endpoints based on type
-let endpoints = $derived.by(() => {
-    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);
-    switch (ref_line.type) {
+      scene_x,
+      scene_y,
+      scene_z,
+      x_range,
+      y_range,
+      z_range,
+    })
+    return (ux: number, uy: number, uz: number) => transform(ux, uy, uz)
+  })
+
+  // Compute line endpoints based on type
+  let endpoints = $derived.by(
+    ():
+      | [{ x: number; y: number; z: number }, { x: number; y: number; z: number }]
+      | 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)
+
+      switch (ref_line.type) {
         case `x-axis`:
-            return [
-                to_coords(x_min, ref_line.y, ref_line.z),
-                to_coords(x_max, ref_line.y, ref_line.z),
-            ];
+          return [
+            to_coords(x_min, ref_line.y, ref_line.z),
+            to_coords(x_max, ref_line.y, ref_line.z),
+          ]
         case `y-axis`:
-            return [
-                to_coords(ref_line.x, y_min, ref_line.z),
-                to_coords(ref_line.x, y_max, ref_line.z),
-            ];
+          return [
+            to_coords(ref_line.x, y_min, ref_line.z),
+            to_coords(ref_line.x, y_max, ref_line.z),
+          ]
         case `z-axis`:
-            return [
-                to_coords(ref_line.x, ref_line.y, z_min),
-                to_coords(ref_line.x, ref_line.y, z_max),
-            ];
+          return [
+            to_coords(ref_line.x, ref_line.y, z_min),
+            to_coords(ref_line.x, ref_line.y, z_max),
+          ]
         case `segment`:
-            return [to_coords(...ref_line.p1), to_coords(...ref_line.p2)];
+          return [to_coords(...ref_line.p1), to_coords(...ref_line.p2)]
         case `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) => {
-                const [px, py, pz] = [p1x + t * dx, p1y + t * dy, p1z + t * 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 [
-                to_coords(p1x + t_min * dx, p1y + t_min * dy, p1z + t_min * dz),
-                to_coords(p1x + t_max * dx, p1y + t_max * dy, p1z + t_max * dz),
-            ];
+          // 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) => {
+            const [px, py, pz] = [p1x + t * dx, p1y + t * dy, p1z + t * 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 [
+            to_coords(p1x + t_min * dx, p1y + t_min * dy, p1z + t_min * dz),
+            to_coords(p1x + t_max * dx, p1y + t_max * dy, p1z + t_max * dz),
+          ]
         }
-    }
-});
-// Line style (with defaults)
-let style = $derived({
+      }
+    },
+  )
+
+  // 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 = $state(null);
-let material = $state(null);
-$effect(() => {
+  })
+
+  // 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;
+      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 [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;
+      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(() => {
+      geo.dispose()
+      mat.dispose()
+    }
+  })
+
+  // Update material resolution when canvas size changes
+  $effect(() => {
     if (material) {
-        material.resolution.set($size.width || 1, $size.height || 1);
+      material.resolution.set($size.width || 1, $size.height || 1)
     }
-});
+  })
 </script>
 
 {#if line2}

package/dist/plot/ReferencePlane.svelte

@@ -1,137 +1,162 @@
-<script lang="ts">import { cross_3d, normalize_vec3 } from '../math';
-import { T } from '@threlte/core';
-import * as THREE from 'three';
-import { create_to_threejs, span_or } from './reference-line';
-let { ref_plane, scene_size = [10, 10, 5], ranges } = $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(() => {
+<script lang="ts">
+  // ReferencePlane: 3D reference planes (axis-aligned, normal-defined, or point-defined)
+  import type { Vec3 } from '../math'
+  import { cross_3d, normalize_vec3 } from '../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, uy, uz) => {
-        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) => 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() {
-    if (ref_plane.visible === false)
-        return null;
+      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
+
     switch (ref_plane.type) {
-        case `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],
-            ]);
-        }
-        case `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],
-            ]);
-        }
-        case `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],
-            ]);
-        }
-        case `normal`: {
-            if (Math.hypot(...ref_plane.normal) < 1e-9)
-                return null; // degenerate normal
-            return create_plane_from_normal(ref_plane.normal, ref_plane.point);
-        }
-        case `points`: {
-            const { p1, p2, p3 } = ref_plane;
-            const v1 = [p2[0] - p1[0], p2[1] - p1[1], p2[2] - p1[2]];
-            const v2 = [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);
-        }
-        default:
-            return null;
+      case `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],
+        ])
+      }
+      case `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],
+        ])
+      }
+      case `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],
+        ])
+      }
+      case `normal`: {
+        if (Math.hypot(...ref_plane.normal) < 1e-9) return null // degenerate normal
+        return create_plane_from_normal(ref_plane.normal, ref_plane.point)
+      }
+      case `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)
+      }
+      default:
+        return null
     }
-}
-// Create geometry with proper disposal on dependency change
-let geometry = $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) {
-    const geo = new THREE.BufferGeometry();
-    const [c0, c1, c2, c3] = corners;
-    const verts = [c0, c1, c2, c0, c2, c3].flatMap((c) => [c.x, c.y, c.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, point) {
-    const normalized = normalize_vec3(normal);
+  }
+
+  // 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);
+    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;
+    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, sv) => [
-        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 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({
+      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 = $state(null);
-$effect(() => {
+  })
+
+  // 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();
-});
+      ? new THREE.WireframeGeometry(geometry)
+      : null
+    wireframe_geometry = wf_geo
+    return () => wf_geo?.dispose()
+  })
 </script>
 
 {#if geometry}