matterviz 0.3.5 → 0.3.7

package/dist/plot/PlotAxis.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { format_value } from '../labels'
+  import AxisLabel from './AxisLabel.svelte'
+  import type { Sides } from './layout'
+  import type { AxisConfig } from './types'
+  import { DEFAULT_GRID_STYLE } from './types'
+
+  type Side = `x` | `x2` | `y` | `y2`
+
+  // Reusable single-axis renderer: baseline, per-tick (grid + tick mark + label), and AxisLabel.
+  // One <g class="{side}-axis"> with per-tick <g class="tick">; mirror the structure across all
+  // four sides so consumers (ScatterPlot/BarPlot/Histogram/BinnedScatterPlot) share one template.
+  let {
+    side,
+    ticks,
+    place,
+    axis = {},
+    pad,
+    width,
+    height,
+    show_grid = false,
+    show_baseline = true,
+    tick_label,
+    domain,
+    unit_on_first_tick = false,
+    label_x,
+    label_y,
+    axis_loading = false,
+    on_axis_change,
+  }: {
+    side: Side
+    ticks: number[]
+    place: (value: number) => number // data value -> pixel for this axis
+    axis?: AxisConfig
+    pad: Required<Sides>
+    width: number
+    height: number
+    show_grid?: boolean
+    show_baseline?: boolean // axis spine line (ScatterPlot omits it)
+    tick_label?: (tick: number) => string | null | undefined // custom/categorical label
+    domain?: [number, number] // when set, cull off-plot ticks and hide out-of-domain labels
+    unit_on_first_tick?: boolean // append axis.unit after the first tick label (ScatterPlot)
+    label_x?: number
+    label_y?: number
+    axis_loading?: boolean
+    on_axis_change?: (key: string) => void
+  } = $props()
+
+  const is_x = $derived(side === `x` || side === `x2`)
+  const inside = $derived(axis.tick?.label?.inside ?? false)
+  const rotation = $derived(axis.tick?.label?.rotation ?? 0)
+  const shift_x = $derived(axis.tick?.label?.shift?.x ?? 0)
+  const shift_y = $derived(axis.tick?.label?.shift?.y ?? 0)
+  const stroke = $derived(axis.color || `var(--border-color, gray)`)
+  const text_fill = $derived(axis.color || `var(--text-color)`)
+  const plot_w = $derived(width - pad.l - pad.r)
+  const plot_h = $derived(height - pad.b - pad.t)
+  const axis_y = $derived(side === `x` ? height - pad.b : pad.t) // baseline y for x/x2
+  const axis_x = $derived(side === `y` ? pad.l : width - pad.r) // baseline x for y/y2
+
+  const show_label = $derived(
+    Boolean(axis.label || axis.options?.length) && label_x != null && label_y != null,
+  )
+
+  // Tick-invariant label geometry (depends only on side/inside/rotation/shift)
+  const text_x = $derived(
+    is_x ? shift_x : (side === `y` ? (inside ? 8 : -8) : (inside ? -8 : 8)) + shift_x,
+  )
+  const text_y = $derived(
+    is_x ? (side === `x` ? (inside ? -8 : 8) : (inside ? 8 : -8)) + shift_y : shift_y,
+  )
+  const text_anchor = $derived(
+    is_x
+      ? (rotation === 0
+        ? `middle`
+        : side === `x`
+        ? (inside ? `end` : `start`)
+        : (inside ? `start` : `end`)) // x2 rotates opposite to x
+      : (side === `y` ? (inside ? `start` : `end`) : (inside ? `end` : `start`)),
+  )
+  const text_baseline = $derived(
+    is_x
+      ? (side === `x` ? (inside ? `auto` : `hanging`) : (inside ? `hanging` : `auto`))
+      : `central`,
+  )
+  const text_transform = $derived(
+    rotation !== 0 ? `rotate(${rotation}, ${text_x}, ${text_y})` : undefined,
+  )
+
+  // Tick-invariant line geometry within the per-tick group (origin sits on the axis).
+  // Keep tick marks' y1="0"/x1="0" explicit: BarPlot's grid test selects `.tick line:not([y1='0'])`.
+  const grid_line = $derived(
+    is_x
+      ? (side === `x` ? { y1: -plot_h, y2: 0 } : { y1: 0, y2: plot_h })
+      : (side === `y` ? { x1: 0, x2: plot_w } : { x1: -plot_w, x2: 0 }),
+  )
+  const tick_mark = $derived(
+    is_x
+      ? (side === `x`
+        ? { y1: 0, y2: inside ? -5 : 5 }
+        : { y1: inside ? 0 : -5, y2: inside ? 5 : 0 })
+      : (side === `y`
+        ? { x1: inside ? 0 : -5, x2: inside ? 5 : 0 }
+        : { x1: inside ? -5 : 0, x2: inside ? 0 : 5 }),
+  )
+
+  // ScatterPlot mode: cull ticks whose pixel pos is off-plot and hide labels outside the data domain
+  const in_domain = (tick: number): boolean =>
+    !domain || (tick >= Math.min(...domain) && tick <= Math.max(...domain))
+  const in_plot = (pos: number): boolean =>
+    !domain ||
+    (is_x ? pos >= pad.l && pos <= width - pad.r : pos >= pad.t && pos <= height - pad.b)
+  const tick_text = (tick: number): string =>
+    tick_label?.(tick) ?? format_value(tick, axis.format ?? ``)
+</script>
+
+<g class="{side}-axis">
+  {#if show_baseline}
+    {#if is_x}
+      <line x1={pad.l} x2={width - pad.r} y1={axis_y} y2={axis_y} {stroke} stroke-width="1" />
+    {:else}
+      <line x1={axis_x} x2={axis_x} y1={pad.t} y2={height - pad.b} {stroke} stroke-width="1" />
+    {/if}
+  {/if}
+  {#each ticks as tick, idx (tick)}
+    {@const pos = place(tick)}
+    {#if isFinite(pos) && in_plot(pos)}
+      <g class="tick" transform="translate({is_x ? pos : axis_x}, {is_x ? axis_y : pos})">
+        {#if show_grid}
+          <line {...grid_line} {...DEFAULT_GRID_STYLE} {...axis.grid_style} />
+        {/if}
+        <line {...tick_mark} {stroke} stroke-width="1" />
+        {#if in_domain(tick)}
+          <text
+            x={text_x}
+            y={text_y}
+            text-anchor={text_anchor}
+            dominant-baseline={text_baseline}
+            fill={text_fill}
+            transform={text_transform}
+          >
+            {tick_text(tick)}{#if unit_on_first_tick && idx === 0 && axis.unit}&zwnj;&ensp;{axis
+                .unit}{/if}
+          </text>
+        {/if}
+      </g>
+    {/if}
+  {/each}
+  {#if show_label}
+    <AxisLabel
+      x={label_x ?? 0}
+      y={label_y ?? 0}
+      rotate={side === `y` || side === `y2`}
+      label={axis.label ?? ``}
+      options={axis.options}
+      selected_key={axis.selected_key}
+      loading={axis_loading}
+      axis_type={side}
+      color={axis.color}
+      on_select={(key) => on_axis_change?.(key)}
+    />
+  {/if}
+</g>
+
+<style>
+  .tick text {
+    font-size: var(--tick-font-size, 0.8em);
+  }
+</style>

package/dist/plot/PlotAxis.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Sides } from './layout';
+import type { AxisConfig } from './types';
+type Side = `x` | `x2` | `y` | `y2`;
+type $$ComponentProps = {
+    side: Side;
+    ticks: number[];
+    place: (value: number) => number;
+    axis?: AxisConfig;
+    pad: Required<Sides>;
+    width: number;
+    height: number;
+    show_grid?: boolean;
+    show_baseline?: boolean;
+    tick_label?: (tick: number) => string | null | undefined;
+    domain?: [number, number];
+    unit_on_first_tick?: boolean;
+    label_x?: number;
+    label_y?: number;
+    axis_loading?: boolean;
+    on_axis_change?: (key: string) => void;
+};
+declare const PlotAxis: import("svelte").Component<$$ComponentProps, {}, "">;
+type PlotAxis = ReturnType<typeof PlotAxis>;
+export default PlotAxis;

package/dist/plot/PlotControls.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { PlotControlsProps } from './index';
-declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "x2_axis" | "y2_axis">;
+declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "x_axis" | "y_axis" | "controls_open" | "x2_axis" | "y2_axis">;
 type PlotControls = ReturnType<typeof PlotControls>;
 export default PlotControls;

package/dist/plot/ReferenceLine3D.svelte

@@ -1,7 +1,7 @@
 <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 type { Point3D, Vec3 } from '../math'
   import { T, useThrelte } from '@threlte/core'
   import * as THREE from 'three'
   import { Line2 } from 'three/examples/jsm/lines/Line2.js'
@@ -32,66 +32,68 @@
     })
     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(
-    ():
-      | [{ x: number; y: number; z: number }, { x: number; y: number; z: number }]
-      | null => {
+    (): [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)
 
-      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),
-          ]
-        case `y-axis`:
-          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),
-          ]
-        case `segment`:
-          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),
+      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
     },
   )
 

package/dist/plot/ReferencePlane.svelte

@@ -45,49 +45,46 @@
   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: 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
+    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