gladly-plot 0.0.4 → 0.0.6

package/src/axes/Camera.js

@@ -0,0 +1,47 @@
+import {
+  mat4Identity, mat4Multiply, mat4Perspective, mat4LookAt,
+  sphericalToCartesian, vec3Normalize, vec3Cross,
+} from '../math/mat4.js'
+
+/**
+ * Camera manages the MVP matrix for the plot.
+ *
+ * In 2D mode (is3D=false): getMVP() returns the identity matrix.
+ * In 3D mode (is3D=true):  orbit camera (y-up) with perspective projection.
+ * Mouse interaction is handled by ZoomController.
+ */
+export class Camera {
+  constructor(is3D) {
+    this._is3D   = is3D
+    this._theta  = Math.PI / 4   // azimuth (rotation around y-axis)
+    this._phi    = Math.PI / 6   // elevation (clamped away from poles)
+    this._radius = 3.0
+    this._fov    = Math.PI / 4   // vertical field-of-view (45°)
+    this._aspect = 1.0           // width / height, updated by resize()
+  }
+
+  resize(width, height) {
+    this._aspect = width / height
+  }
+
+  // Returns the camera MVP matrix as a column-major Float32Array[16].
+  // In 2D mode this is the identity (data coordinates already map to NDC via domain uniforms).
+  getMVP() {
+    if (!this._is3D) return mat4Identity()
+    const eye  = sphericalToCartesian(this._theta, this._phi, this._radius)
+    const view = mat4LookAt(eye, [0, 0, 0], [0, 1, 0])
+    const proj = mat4Perspective(this._fov, this._aspect, 0.1, 100)
+    return mat4Multiply(proj, view)
+  }
+
+  // Returns the camera right and up unit vectors in world space.
+  // Used to orient billboard quads so they always face the camera.
+  getCameraVectors() {
+    if (!this._is3D) return { right: [1, 0, 0], up: [0, 1, 0] }
+    const eye = sphericalToCartesian(this._theta, this._phi, this._radius)
+    const fwd = vec3Normalize([-eye[0], -eye[1], -eye[2]])
+    const right = vec3Normalize(vec3Cross(fwd, [0, 1, 0]))
+    const up    = vec3Normalize(vec3Cross(right, fwd))
+    return { right, up }
+  }
+}

package/src/axes/ColorAxisRegistry.js

@@ -0,0 +1,101 @@
+import { getAxisQuantityKind, getScaleTypeFloat } from './AxisQuantityKindRegistry.js'
+import { getColorscaleIndex } from '../colorscales/ColorscaleRegistry.js'
+
+export class ColorAxisRegistry {
+  constructor() {
+    this._axes = new Map()
+  }
+
+  ensureColorAxis(quantityKind, colorscaleOverride = null) {
+    if (!this._axes.has(quantityKind)) {
+      this._axes.set(quantityKind, { colorscaleOverride, range: null, alphaBlend: 0.0 })
+    } else if (colorscaleOverride !== null) {
+      this._axes.get(quantityKind).colorscaleOverride = colorscaleOverride
+    }
+  }
+
+  getAlphaBlend(quantityKind) {
+    return this._axes.get(quantityKind)?.alphaBlend ?? 0.0
+  }
+
+  setRange(quantityKind, min, max) {
+    if (!this._axes.has(quantityKind)) {
+      throw new Error(`Color axis '${quantityKind}' not found in registry`)
+    }
+    this._axes.get(quantityKind).range = [min, max]
+  }
+
+  getRange(quantityKind) {
+    return this._axes.get(quantityKind)?.range ?? null
+  }
+
+  getColorscale(quantityKind) {
+    const entry = this._axes.get(quantityKind)
+    if (!entry) return null
+    if (entry.colorscaleOverride) return entry.colorscaleOverride
+    const unitDef = getAxisQuantityKind(quantityKind)
+    return unitDef.colorscale ?? null
+  }
+
+  getColorscaleIndex(quantityKind) {
+    const colorscale = this.getColorscale(quantityKind)
+    if (colorscale === null) return 0
+    return getColorscaleIndex(colorscale)
+  }
+
+  hasAxis(quantityKind) {
+    return this._axes.has(quantityKind)
+  }
+
+  getQuantityKinds() {
+    return Array.from(this._axes.keys())
+  }
+
+  applyAutoDomainsFromLayers(layers, axesOverrides) {
+    for (const quantityKind of this.getQuantityKinds()) {
+      const override = axesOverrides[quantityKind]
+      if (override?.colorscale && override?.colorscale != "none")
+        this.ensureColorAxis(quantityKind, override.colorscale)
+      if (override?.alpha_blend !== undefined)
+        this._axes.get(quantityKind).alphaBlend = override.alpha_blend
+      
+      let min = Infinity, max = -Infinity
+
+      for (const layer of layers) {
+        for (const qk of Object.values(layer.colorAxes)) {
+          if (qk !== quantityKind) continue
+          if (layer.domains[qk] !== undefined) {
+            const [dMin, dMax] = layer.domains[qk]
+            if (dMin < min) min = dMin
+            if (dMax > max) max = dMax
+          } else {
+            const data = layer.attributes[qk]
+            if (!data) continue
+            for (let i = 0; i < data.length; i++) {
+              if (data[i] < min) min = data[i]
+              if (data[i] > max) max = data[i]
+            }
+          }
+        }
+      }
+
+      if (min !== Infinity) {
+        this.setRange(quantityKind, override?.min ?? min, override?.max ?? max)
+      } else if (override?.min !== undefined && override?.max !== undefined) {
+        this.setRange(quantityKind, override.min, override.max)
+      }
+    }
+
+    for (const quantityKind of this.getQuantityKinds()) {
+      if (getScaleTypeFloat(quantityKind, axesOverrides) <= 0.5) continue
+      const range = this.getRange(quantityKind)
+      if (!range) continue
+      if (range[0] <= 0 || range[1] <= 0) {
+        throw new Error(
+          `Color axis '${quantityKind}' uses log scale but has non-positive range [${range[0]}, ${range[1]}]. ` +
+          `All data values and min/max must be > 0 for log scale.`
+        )
+      }
+    }
+  }
+}

package/src/{FilterAxisRegistry.js → axes/FilterAxisRegistry.js}

@@ -1,3 +1,5 @@
+import { getScaleTypeFloat } from './AxisQuantityKindRegistry.js'
+
 export class FilterAxisRegistry {
   constructor() {
     // quantityKind -> { min: number|null, max: number|null, dataExtent: [number,number]|null }
@@ -57,6 +59,67 @@ export class FilterAxisRegistry {
   getQuantityKinds() {
     return Array.from(this._axes.keys())
   }
+
+  applyAutoDomainsFromLayers(layers, axesOverrides) {
+    for (const quantityKind of this.getQuantityKinds()) {
+      let extMin = Infinity, extMax = -Infinity
+
+      for (const layer of layers) {
+        for (const qk of Object.values(layer.filterAxes)) {
+          if (qk !== quantityKind) continue
+          if (layer.domains[qk] !== undefined) {
+            const [dMin, dMax] = layer.domains[qk]
+            if (dMin < extMin) extMin = dMin
+            if (dMax > extMax) extMax = dMax
+          } else {
+            const data = layer.attributes[qk]
+            if (!data) continue
+            for (let i = 0; i < data.length; i++) {
+              if (data[i] < extMin) extMin = data[i]
+              if (data[i] > extMax) extMax = data[i]
+            }
+          }
+        }
+      }
+
+      if (extMin !== Infinity) this.setDataExtent(quantityKind, extMin, extMax)
+
+      if (axesOverrides[quantityKind]) {
+        const override = axesOverrides[quantityKind]
+        this.setRange(
+          quantityKind,
+          override.min !== undefined ? override.min : null,
+          override.max !== undefined ? override.max : null
+        )
+      }
+    }
+
+    for (const quantityKind of this.getQuantityKinds()) {
+      if (getScaleTypeFloat(quantityKind, axesOverrides) <= 0.5) continue
+      const extent = this.getDataExtent(quantityKind)
+      if (extent && extent[0] <= 0) {
+        throw new Error(
+          `Filter axis '${quantityKind}' uses log scale but data minimum is ${extent[0]}. ` +
+          `All data values must be > 0 for log scale.`
+        )
+      }
+      const filterRange = this.getRange(quantityKind)
+      if (filterRange) {
+        if (filterRange.min !== null && filterRange.min <= 0) {
+          throw new Error(
+            `Filter axis '${quantityKind}' uses log scale but min is ${filterRange.min}. ` +
+            `min must be > 0 for log scale.`
+          )
+        }
+        if (filterRange.max !== null && filterRange.max <= 0) {
+          throw new Error(
+            `Filter axis '${quantityKind}' uses log scale but max is ${filterRange.max}. ` +
+            `max must be > 0 for log scale.`
+          )
+        }
+      }
+    }
+  }
 }
 
 // Injects a GLSL helper used by layer shaders to apply filter axis bounds.

package/src/axes/TickLabelAtlas.js

@@ -0,0 +1,99 @@
+// Canvas-backed texture atlas for tick and axis title labels.
+// Labels are rendered with Canvas 2D and packed into a single GPU texture (shelf packing).
+// UV coordinates use the convention: v = canvas_y / ATLAS_SIZE (v=0 = canvas top).
+// The atlas texture is uploaded with flipY: false, so texture(sampler, (u,v)) samples
+// canvas pixel (u*W, v*H). Billboard quads use matching UV assignments.
+
+const ATLAS_SIZE  = 1024
+const FONT        = '12px sans-serif'
+const PADDING     = 2
+const ROW_HEIGHT  = 16   // fixed text-line height in pixels
+
+export class TickLabelAtlas {
+  constructor(regl) {
+    this._regl   = regl
+    this._canvas = null
+    this._ctx    = null
+    this._texture     = null
+    this._entries     = new Map()   // text → { u, v, uw, vh, pw, ph } | null (pending)
+    this._needsRebuild = false
+  }
+
+  // Mark a set of label strings as needed. Call before flush().
+  markLabels(labels) {
+    for (const l of labels) {
+      if (!this._entries.has(l)) {
+        this._entries.set(l, null)
+        this._needsRebuild = true
+      }
+    }
+  }
+
+  // Re-render the atlas canvas and re-upload the GPU texture if anything changed.
+  flush() {
+    if (!this._needsRebuild) return
+    this._needsRebuild = false
+
+    if (!this._canvas) {
+      this._canvas = document.createElement('canvas')
+      this._canvas.width  = ATLAS_SIZE
+      this._canvas.height = ATLAS_SIZE
+      this._ctx = this._canvas.getContext('2d')
+    }
+
+    const ctx = this._ctx
+    ctx.clearRect(0, 0, ATLAS_SIZE, ATLAS_SIZE)
+    ctx.font         = FONT
+    ctx.fillStyle    = '#000'
+    ctx.textBaseline = 'top'
+
+    const rowH = ROW_HEIGHT + PADDING * 2
+    let x = 0, y = 0
+
+    for (const label of this._entries.keys()) {
+      const metrics = ctx.measureText(label)
+      const pw = Math.ceil(metrics.width) + PADDING * 2
+      const ph = rowH
+
+      if (x + pw > ATLAS_SIZE) { x = 0; y += rowH }
+      if (y + ph > ATLAS_SIZE) {
+        console.warn('[gladly] TickLabelAtlas: atlas is full; some labels may be missing')
+        break
+      }
+
+      ctx.fillText(label, x + PADDING, y + PADDING)
+
+      this._entries.set(label, {
+        u:  x  / ATLAS_SIZE,
+        v:  y  / ATLAS_SIZE,
+        uw: pw / ATLAS_SIZE,
+        vh: ph / ATLAS_SIZE,
+        pw,
+        ph,
+      })
+      x += pw
+    }
+
+    // flipY: false — v = canvas_y / ATLAS_SIZE; v=0 samples canvas top.
+    if (!this._texture) {
+      this._texture = this._regl.texture({
+        width:  ATLAS_SIZE,
+        height: ATLAS_SIZE,
+        format: 'rgba',
+        mag:    'nearest',
+        min:    'nearest',
+        flipY:  false,
+      })
+    }
+    this._texture.subimage({ data: this._canvas, x: 0, y: 0, flipY: false })
+  }
+
+  // Returns the atlas entry for a label, or null if it hasn't been built yet.
+  getEntry(label) { return this._entries.get(label) ?? null }
+
+  get texture() { return this._texture }
+
+  destroy() {
+    if (this._texture) { this._texture.destroy(); this._texture = null }
+  }
+}