gladly-plot 0.0.4 → 0.0.6

package/src/layers/ScatterShared.js

@@ -0,0 +1,98 @@
+import { LayerType } from "../core/LayerType.js"
+import { AXIS_GEOMETRY } from "../axes/AxisRegistry.js"
+import { Data } from "../data/Data.js"
+import { computationSchema, EXPRESSION_REF, EXPRESSION_REF_OPT, resolveQuantityKind } from "../compute/ComputationRegistry.js"
+
+const X_AXES = Object.keys(AXIS_GEOMETRY).filter(a => AXIS_GEOMETRY[a].dir === 'x')
+const Y_AXES = Object.keys(AXIS_GEOMETRY).filter(a => AXIS_GEOMETRY[a].dir === 'y')
+const Z_AXES = Object.keys(AXIS_GEOMETRY).filter(a => AXIS_GEOMETRY[a].dir === 'z')
+
+export class ScatterLayerTypeBase extends LayerType {
+  _getAxisConfig(parameters, data) {
+    const d = Data.wrap(data)
+    const {
+      xData, yData, zData: zDataRaw,
+      vData: vDataRaw, vData2: vData2Raw, fData: fDataRaw,
+      xAxis = "xaxis_bottom", yAxis = "yaxis_left", zAxis = "none",
+    } = parameters
+    const vDataIn  = (vDataRaw  == null || vDataRaw  === "none") ? null : vDataRaw
+    const vData2In = (vData2Raw == null || vData2Raw === "none") ? null : vData2Raw
+    const fData    = (fDataRaw  == null || fDataRaw  === "none") ? null : fDataRaw
+    const zData    = (zDataRaw  == null || zDataRaw  === "none") ? null : zDataRaw
+    const zAxisResolved = (zAxis == null || zAxis === "none") ? null : zAxis
+    const vData  = vDataIn
+    const vData2 = vData2In
+    const colorAxisQuantityKinds = {}
+    const vQK  = vData  ? resolveQuantityKind(vData,  d) : null
+    const vQK2 = vData2 ? resolveQuantityKind(vData2, d) : null
+    if (vQK)  colorAxisQuantityKinds['']  = vQK
+    if (vQK2) colorAxisQuantityKinds['2'] = vQK2
+    const colorAxis2dQuantityKinds = vData && vData2 ? { '': ['', '2'] } : {}
+    const filterAxisQuantityKinds  = fData ? { '': resolveQuantityKind(fData, d) } : {}
+    return {
+      xAxis,
+      xAxisQuantityKind: resolveQuantityKind(xData, d) ?? undefined,
+      yAxis,
+      yAxisQuantityKind: resolveQuantityKind(yData, d) ?? undefined,
+      zAxis: zData ? (zAxisResolved ?? "zaxis_bottom_left") : null,
+      zAxisQuantityKind: zData ? (resolveQuantityKind(zData, d) ?? undefined) : undefined,
+      colorAxisQuantityKinds,
+      colorAxis2dQuantityKinds,
+      filterAxisQuantityKinds,
+    }
+  }
+
+  _commonSchemaProperties(data) {
+    return {
+      xData: EXPRESSION_REF,
+      yData: EXPRESSION_REF,
+      zData: EXPRESSION_REF_OPT,
+      vData: EXPRESSION_REF_OPT,
+      vData2: EXPRESSION_REF_OPT,
+      fData: EXPRESSION_REF_OPT,
+      xAxis: {
+        type: "string",
+        enum: X_AXES,
+        default: "xaxis_bottom",
+        description: "Which x-axis to use for this layer",
+      },
+      yAxis: {
+        type: "string",
+        enum: Y_AXES,
+        default: "yaxis_left",
+        description: "Which y-axis to use for this layer",
+      },
+      zAxis: {
+        type: "string",
+        enum: ["none", ...Z_AXES],
+        default: "none",
+        description: "Which z-axis to use for this layer (enables 3D mode)",
+      },
+    }
+  }
+
+  _buildDomains(d, xData, yData, zData, vData, vData2, xQK, yQK, zQK, vQK, vQK2) {
+    const domains = {}
+    if (xQK && typeof xData === 'string') {
+      const xDomain = d.getDomain(xData)
+      if (xDomain) domains[xQK] = xDomain
+    }
+    if (yQK && typeof yData === 'string') {
+      const yDomain = d.getDomain(yData)
+      if (yDomain) domains[yQK] = yDomain
+    }
+    if (zData && zQK && typeof zData === 'string') {
+      const zDomain = d.getDomain(zData)
+      if (zDomain) domains[zQK] = zDomain
+    }
+    if (vData && vQK && typeof vData === 'string') {
+      const vDomain = d.getDomain(vData)
+      if (vDomain) domains[vQK] = vDomain
+    }
+    if (vData2 && vQK2 && typeof vData2 === 'string') {
+      const vDomain2 = d.getDomain(vData2)
+      if (vDomain2) domains[vQK2] = vDomain2
+    }
+    return domains
+  }
+}

package/src/{TileLayer.js → layers/TileLayer.js}

@@ -1,8 +1,8 @@
 import proj4 from 'proj4'
-import { LayerType } from './LayerType.js'
-import { AXES } from './AxisRegistry.js'
-import { registerLayerType } from './LayerTypeRegistry.js'
-import { parseCrsCode, crsToQkX, crsToQkY, ensureCrsDefined } from './EpsgUtils.js'
+import { LayerType } from '../core/LayerType.js'
+import { AXES } from '../axes/AxisRegistry.js'
+import { registerLayerType } from '../core/LayerTypeRegistry.js'
+import { parseCrsCode, crsToQkX, crsToQkY, ensureCrsDefined } from '../geo/EpsgUtils.js'
 
 // ─── Tile math (standard Web Mercator / "slippy map" grid) ────────────────────
 
@@ -410,15 +410,15 @@ class TileManager {
 
 // ─── GLSL ─────────────────────────────────────────────────────────────────────
 
-const TILE_VERT = `
+const TILE_VERT = `#version 300 es
   precision mediump float;
-  attribute vec2 position;
-  attribute vec2 uv;
+  in vec2 position;
+  in vec2 uv;
   uniform vec2 xDomain;
   uniform vec2 yDomain;
   uniform float xScaleType;
   uniform float yScaleType;
-  varying vec2 vUv;
+  out vec2 vUv;
 
   float normalize_axis(float v, vec2 domain, float scaleType) {
     float vt = scaleType > 0.5 ? log(v) : v;
@@ -426,24 +426,28 @@ const TILE_VERT = `
     float d1 = scaleType > 0.5 ? log(domain.y) : domain.y;
     return (vt - d0) / (d1 - d0);
   }
+  vec4 plot_pos(vec2 pos) {
+    float nx = normalize_axis(pos.x, xDomain, xScaleType);
+    float ny = normalize_axis(pos.y, yDomain, yScaleType);
+    return vec4(nx * 2.0 - 1.0, ny * 2.0 - 1.0, 0.0, 1.0);
+  }
 
   void main() {
-    float nx = normalize_axis(position.x, xDomain, xScaleType);
-    float ny = normalize_axis(position.y, yDomain, yScaleType);
-    gl_Position = vec4(nx * 2.0 - 1.0, ny * 2.0 - 1.0, 0.0, 1.0);
+    gl_Position = plot_pos(position);
     vUv = uv;
   }
 `
 
-const TILE_FRAG = `
+const TILE_FRAG = `#version 300 es
   precision mediump float;
   uniform sampler2D tileTexture;
   uniform float opacity;
-  varying vec2 vUv;
+  in vec2 vUv;
+  out vec4 fragColor;
 
   void main() {
-    vec4 color = texture2D(tileTexture, vUv);
-    gl_FragColor = vec4(color.rgb, color.a * opacity);
+    vec4 color = texture(tileTexture, vUv);
+    fragColor = vec4(color.rgb, color.a * opacity);
   }
 `
 
@@ -587,12 +591,12 @@ class TileLayerType extends LayerType {
       xAxisQuantityKind: crsToQkX(effectivePlotCrs),
       yAxis,
       yAxisQuantityKind: crsToQkY(effectivePlotCrs),
-      colorAxisQuantityKinds: [],
-      filterAxisQuantityKinds: [],
+      colorAxisQuantityKinds: {},
+      filterAxisQuantityKinds: {},
     }
   }
 
-  createLayer(parameters, _data) {
+  createLayer(regl, parameters, _data) {
     const {
       xAxis = 'xaxis_bottom',
       yAxis = 'yaxis_left',
@@ -609,8 +613,8 @@ class TileLayerType extends LayerType {
       yAxis,
       xAxisQuantityKind: crsToQkX(effectivePlotCrs),
       yAxisQuantityKind: crsToQkY(effectivePlotCrs),
-      colorAxes: [],
-      filterAxes: [],
+      colorAxes: {},
+      filterAxes: {},
       vertexCount: 0,
       instanceCount: null,
       attributes: {},

package/src/math/mat4.js

@@ -0,0 +1,100 @@
+// Column-major 4×4 matrix utilities matching WebGL/GLSL convention.
+// Element at row r, column c is stored at index c*4+r.
+
+export function mat4Identity() {
+  return new Float32Array([
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1,
+  ])
+}
+
+// a * b (left-multiplies a by b).
+export function mat4Multiply(a, b) {
+  const out = new Float32Array(16)
+  for (let col = 0; col < 4; col++) {
+    for (let row = 0; row < 4; row++) {
+      let s = 0
+      for (let k = 0; k < 4; k++) s += a[k * 4 + row] * b[col * 4 + k]
+      out[col * 4 + row] = s
+    }
+  }
+  return out
+}
+
+// Perspective projection. fovY in radians, aspect = width/height.
+export function mat4Perspective(fovY, aspect, near, far) {
+  const f = 1 / Math.tan(fovY / 2)
+  const nf = 1 / (near - far)
+  return new Float32Array([
+    f / aspect, 0,  0,                    0,
+    0,          f,  0,                    0,
+    0,          0,  (far + near) * nf,   -1,
+    0,          0,  2 * far * near * nf,  0,
+  ])
+}
+
+// View matrix looking from eye toward center with the given up vector.
+export function mat4LookAt(eye, center, up) {
+  const f = vec3Normalize([center[0] - eye[0], center[1] - eye[1], center[2] - eye[2]])
+  const r = vec3Normalize(vec3Cross(f, up))
+  const u = vec3Cross(r, f)
+  return new Float32Array([
+     r[0],  u[0], -f[0], 0,
+     r[1],  u[1], -f[1], 0,
+     r[2],  u[2], -f[2], 0,
+    -vec3Dot(r, eye), -vec3Dot(u, eye), vec3Dot(f, eye), 1,
+  ])
+}
+
+// Multiply a 4×4 column-major matrix by a vec4.
+export function mat4MulVec4(m, v) {
+  return [
+    m[0]*v[0] + m[4]*v[1] + m[8] *v[2] + m[12]*v[3],
+    m[1]*v[0] + m[5]*v[1] + m[9] *v[2] + m[13]*v[3],
+    m[2]*v[0] + m[6]*v[1] + m[10]*v[2] + m[14]*v[3],
+    m[3]*v[0] + m[7]*v[1] + m[11]*v[2] + m[15]*v[3],
+  ]
+}
+
+export function vec3Normalize(v) {
+  const len = Math.sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2])
+  return len > 1e-10 ? [v[0]/len, v[1]/len, v[2]/len] : [0, 0, 0]
+}
+
+export function vec3Cross(a, b) {
+  return [
+    a[1]*b[2] - a[2]*b[1],
+    a[2]*b[0] - a[0]*b[2],
+    a[0]*b[1] - a[1]*b[0],
+  ]
+}
+
+export function vec3Dot(a, b) {
+  return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]
+}
+
+// Convert spherical coords (azimuth theta around y-axis, elevation phi from equator)
+// to Cartesian.
+export function sphericalToCartesian(theta, phi, r) {
+  return [
+    r * Math.cos(phi) * Math.sin(theta),
+    r * Math.sin(phi),
+    r * Math.cos(phi) * Math.cos(theta),
+  ]
+}
+
+// Project a 3D model-space point to HTML screen coordinates (y from top) using an MVP
+// matrix that maps model space to full-canvas NDC, and the canvas dimensions.
+// Returns [htmlX, htmlY] or null if the point is behind the camera (w ≤ 0).
+export function projectToScreen(point, mvp, canvasWidth, canvasHeight) {
+  const clip = mat4MulVec4(mvp, [point[0], point[1], point[2], 1.0])
+  if (clip[3] <= 0) return null
+  const ndcX = clip[0] / clip[3]
+  const ndcY = clip[1] / clip[3]
+  return [
+    (ndcX + 1) * 0.5 * canvasWidth,
+    (1 - (ndcY + 1) * 0.5) * canvasHeight,
+  ]
+}

package/src/Axis.js

@@ -1,48 +0,0 @@
-/**
- * An Axis represents a single data axis on a plot. Axis instances are stable across
- * plot.update() calls and can be linked together with linkAxes().
- *
- * Public interface (duck-typing compatible):
- *   - axis.quantityKind   — string | null
- *   - axis.getDomain()    — [min, max] | null
- *   - axis.setDomain(domain) — update domain, schedule render, notify subscribers
- *   - axis.subscribe(callback)   — callback([min, max]) called on domain changes
- *   - axis.unsubscribe(callback) — remove a previously added callback
- */
-export class Axis {
-  constructor(plot, name) {
-    this._plot = plot
-    this._name = name
-    this._listeners = new Set()
-    this._propagating = false
-  }
-
-  /** The quantity kind for this axis, or null if the plot hasn't been initialized yet. */
-  get quantityKind() { return this._plot.getAxisQuantityKind(this._name) }
-
-  /** Returns [min, max], or null if the axis has no domain yet. */
-  getDomain() { return this._plot.getAxisDomain(this._name) }
-
-  /**
-   * Sets the axis domain, schedules a render on the owning plot, and notifies all
-   * subscribers (e.g. linked axes). A _propagating guard prevents infinite loops
-   * when axes are linked bidirectionally.
-   */
-  setDomain(domain) {
-    if (this._propagating) return
-    this._propagating = true
-    try {
-      this._plot.setAxisDomain(this._name, domain)
-      this._plot.scheduleRender()
-      for (const cb of this._listeners) cb(domain)
-    } finally {
-      this._propagating = false
-    }
-  }
-
-  /** Add a subscriber. callback([min, max]) is called after every setDomain(). */
-  subscribe(callback) { this._listeners.add(callback) }
-
-  /** Remove a previously added subscriber. */
-  unsubscribe(callback) { this._listeners.delete(callback) }
-}

package/src/AxisRegistry.js

@@ -1,54 +0,0 @@
-import * as d3 from "d3-scale"
-import { getAxisQuantityKind } from "./AxisQuantityKindRegistry.js"
-
-export const AXES = ["xaxis_bottom","xaxis_top","yaxis_left","yaxis_right"]
-
-export class AxisRegistry {
-  constructor(width, height) {
-    this.scales = {}
-    this.axisQuantityKinds = {}
-    this.width = width
-    this.height = height
-    AXES.forEach(a => {
-      this.scales[a] = null
-      this.axisQuantityKinds[a] = null
-    })
-  }
-
-  ensureAxis(axisName, axisQuantityKind, scaleOverride) {
-    if (!AXES.includes(axisName)) throw new Error(`Unknown axis ${axisName}`)
-    if (this.axisQuantityKinds[axisName] && this.axisQuantityKinds[axisName] !== axisQuantityKind)
-      throw new Error(`Axis quantity kind mismatch on axis ${axisName}: ${this.axisQuantityKinds[axisName]} vs ${axisQuantityKind}`)
-
-    if (!this.scales[axisName]) {
-      const quantityKindDef = getAxisQuantityKind(axisQuantityKind)
-      const scaleType = scaleOverride ?? quantityKindDef.scale
-      this.scales[axisName] = scaleType === "log"
-        ? d3.scaleLog().range(axisName.includes("y") ? [this.height,0] : [0,this.width])
-        : d3.scaleLinear().range(axisName.includes("y") ? [this.height,0] : [0,this.width])
-      this.axisQuantityKinds[axisName] = axisQuantityKind
-    }
-    return this.scales[axisName]
-  }
-
-  getScale(axisName) { return this.scales[axisName] }
-
-  isLogScale(axisName) {
-    const scale = this.scales[axisName]
-    return !!scale && typeof scale.base === 'function'
-  }
-
-  setScaleType(axisName, scaleType) {
-    const scale = this.scales[axisName]
-    if (!scale) return
-    const currentIsLog = typeof scale.base === 'function'
-    const wantLog = scaleType === "log"
-    if (currentIsLog === wantLog) return
-    const currentDomain = scale.domain()
-    const newScale = wantLog
-      ? d3.scaleLog().range(axisName.includes("y") ? [this.height, 0] : [0, this.width])
-      : d3.scaleLinear().range(axisName.includes("y") ? [this.height, 0] : [0, this.width])
-    newScale.domain(currentDomain)
-    this.scales[axisName] = newScale
-  }
-}

package/src/ColorAxisRegistry.js

@@ -1,49 +0,0 @@
-import { getAxisQuantityKind } from './AxisQuantityKindRegistry.js'
-import { getColorscaleIndex } from './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 })
-    } else if (colorscaleOverride !== null) {
-      this._axes.get(quantityKind).colorscaleOverride = colorscaleOverride
-    }
-  }
-
-  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())
-  }
-}

package/src/ColorscaleRegistry.js

@@ -1,52 +0,0 @@
-const colorscales = new Map()
-
-export function registerColorscale(name, glslFn) {
-  colorscales.set(name, glslFn)
-}
-
-export function getRegisteredColorscales() {
-  return colorscales
-}
-
-export function getColorscaleIndex(name) {
-  let idx = 0
-  for (const key of colorscales.keys()) {
-    if (key === name) return idx
-    idx++
-  }
-  return 0
-}
-
-export function buildColorGlsl() {
-  if (colorscales.size === 0) return ''
-
-  const parts = []
-
-  for (const glslFn of colorscales.values()) {
-    parts.push(glslFn)
-  }
-
-  parts.push('vec4 map_color(int cs, vec2 range, float value) {')
-  parts.push('  float t = clamp((value - range.x) / (range.y - range.x), 0.0, 1.0);')
-
-  let idx = 0
-  for (const name of colorscales.keys()) {
-    parts.push(`  if (cs == ${idx}) return colorscale_${name}(t);`)
-    idx++
-  }
-
-  parts.push('  return vec4(0.5, 0.5, 0.5, 1.0);')
-  parts.push('}')
-
-  parts.push('vec4 map_color_s(int cs, vec2 range, float v, float scaleType, float useAlpha) {')
-  parts.push('  float vt = scaleType > 0.5 ? log(v) : v;')
-  parts.push('  float r0 = scaleType > 0.5 ? log(range.x) : range.x;')
-  parts.push('  float r1 = scaleType > 0.5 ? log(range.y) : range.y;')
-  parts.push('  float t = clamp((vt - r0) / (r1 - r0), 0.0, 1.0);')
-  parts.push('  vec4 color = map_color(cs, vec2(r0, r1), vt);')
-  parts.push('  if (useAlpha > 0.5) color.a = t;')
-  parts.push('  return gladly_apply_color(color);')
-  parts.push('}')
-
-  return parts.join('\n')
-}

package/src/Data.js

@@ -1,67 +0,0 @@
-export class Data {
-  constructor(raw) {
-    raw = raw ?? {}
-    // Columnar format: { data: {col: Float32Array}, quantity_kinds?: {...}, domains?: {...} }
-    // Detected by the presence of a top-level `data` property that is a plain object.
-    if (raw.data != null && typeof raw.data === 'object' && !(raw.data instanceof Float32Array)) {
-      this._columnar = true
-      this._data = raw.data
-      this._quantityKinds = raw.quantity_kinds ?? {}
-      this._rawDomains = raw.domains ?? {}
-    } else {
-      this._columnar = false
-      this._raw = raw
-    }
-  }
-
-  static wrap(data) {
-    if (data != null && typeof data.columns === 'function' && typeof data.getData === 'function') {
-      return data
-    }
-    return new Data(data)
-  }
-
-  _entry(col) {
-    if (this._columnar) {
-      const rawDomain = this._rawDomains[col]
-      let domain
-      if (Array.isArray(rawDomain)) {
-        domain = [rawDomain[0], rawDomain[1]]
-      } else if (rawDomain && typeof rawDomain === 'object') {
-        domain = [rawDomain.min, rawDomain.max]
-      }
-      return { data: this._data[col], quantityKind: this._quantityKinds[col], domain }
-    }
-
-    const v = this._raw[col]
-    if (v instanceof Float32Array) {
-      return { data: v, quantityKind: undefined, domain: undefined }
-    }
-    if (v && typeof v === 'object') {
-      let domain
-      if (Array.isArray(v.domain)) {
-        domain = [v.domain[0], v.domain[1]]
-      } else if (v.domain && typeof v.domain === 'object') {
-        domain = [v.domain.min, v.domain.max]
-      }
-      return { data: v.data, quantityKind: v.quantity_kind, domain }
-    }
-    return { data: undefined, quantityKind: undefined, domain: undefined }
-  }
-
-  columns() {
-    return this._columnar ? Object.keys(this._data) : Object.keys(this._raw)
-  }
-
-  getData(col) {
-    return this._entry(col).data
-  }
-
-  getQuantityKind(col) {
-    return this._entry(col).quantityKind
-  }
-
-  getDomain(col) {
-    return this._entry(col).domain
-  }
-}