gladly-plot 0.0.2 → 0.0.4

package/README.md

@@ -17,6 +17,7 @@ Gladly combines WebGL rendering (via regl) with D3.js for interactive axes and z
 - 🎨 Supports all standard colorscales
 - 🔗 Subplot axis linking
 - 🌈 Axis to coloring or filtering linking
+- 🌎 Basemap layer with XYZ,WMS and WMTS support and CRS reprojection
 
 ## Documentation
 

package/package.json

@@ -1,30 +1,38 @@
 {
   "name": "gladly-plot",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "GPU-powered multi-axis plotting library with regl + d3",
   "type": "module",
-
   "exports": {
     ".": "./src/index.js"
   },
-
-  "files": ["src"],
-
+  "files": [
+    "src"
+  ],
   "scripts": {
+    "prepare": "node scripts/fix-numjs-wasm.js",
     "dev": "parcel serve example/index.html --open",
     "build:example": "parcel build example/index.html --dist-dir dist-example --public-url ./",
     "preview": "npm run build:example && npx serve dist-example"
   },
-
   "dependencies": {
     "d3": "^7.8.5",
     "proj4": "^2.15.0",
     "projnames": "^0.0.2",
     "regl": "^2.1.0"
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Edge versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions"
+  ],
 
   "devDependencies": {
+    "@jayce789/numjs": "^2.2.6",
+    "@json-editor/json-editor": "^2.15.1",
     "parcel": "^2.9.0",
-    "@json-editor/json-editor": "^2.15.1"
+    "process": "^0.11.10",
+    "url": "^0.11.4"
   }
 }

package/src/ColorbarLayer.js

@@ -41,7 +41,7 @@ export const colorbarLayerType = new LayerType({
       float r0 = color_scale_type > 0.5 ? log(color_range.x) : color_range.x;
       float r1 = color_scale_type > 0.5 ? log(color_range.y) : color_range.y;
       float v  = r0 + tval * (r1 - r0);
-      gl_FragColor = map_color(colorscale, vec2(r0, r1), v);
+      gl_FragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
     }
   `,
 

package/src/ColorscaleRegistry.js

@@ -38,11 +38,14 @@ export function buildColorGlsl() {
   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) {')
+  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('  return map_color(cs, vec2(r0, r1), vt);')
+  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/FilterbarLayer.js

@@ -24,7 +24,7 @@ export const filterbarLayerType = new LayerType({
   `,
   frag: `
     precision mediump float;
-    void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); }
+    void main() { gl_FragColor = gladly_apply_color(vec4(0.0, 0.0, 0.0, 0.0)); }
   `,
 
   schema: () => ({

package/src/LayerType.js

@@ -11,6 +11,44 @@ function buildSpatialGlsl() {
 }`
 }
 
+function buildApplyColorGlsl() {
+  return `uniform float u_pickingMode;
+uniform float u_pickLayerIndex;
+varying float v_pickId;
+vec4 gladly_apply_color(vec4 color) {
+  if (u_pickingMode > 0.5) {
+    float layerIdx = u_pickLayerIndex + 1.0;
+    float dataIdx = floor(v_pickId + 0.5);
+    return vec4(
+      layerIdx / 255.0,
+      floor(dataIdx / 65536.0) / 255.0,
+      floor(mod(dataIdx, 65536.0) / 256.0) / 255.0,
+      mod(dataIdx, 256.0) / 255.0
+    );
+  }
+  return color;
+}`
+}
+
+function injectPickIdAssignment(src) {
+  const lastBrace = src.lastIndexOf('}')
+  if (lastBrace === -1) return src
+  return src.slice(0, lastBrace) + '  v_pickId = a_pickId;\n}'
+}
+
+function injectInto(src, helpers) {
+  const injected = helpers.filter(Boolean).join('\n')
+  if (!injected) return src
+  const versionRe = /^[ \t]*#version[^\n]*\n?/
+  const versionMatch = src.match(versionRe)
+  const version = versionMatch ? versionMatch[0] : ''
+  const rest = version ? src.slice(version.length) : src
+  const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
+  const precisions = rest.match(precisionRe) ?? []
+  const body = rest.replace(precisionRe, '')
+  return version + precisions.join('\n') + '\n' + injected + '\n' + body
+}
+
 export class LayerType {
   constructor({
     name,
@@ -48,19 +86,29 @@ export class LayerType {
     // Build a single-entry uniform object with renamed key reading from the internal prop name.
     const u = (internalName) => ({ [shaderName(internalName)]: regl.prop(internalName) })
 
-    const attributes = Object.fromEntries(
-      Object.entries(layer.attributes).map(([key, buffer]) => {
-        const divisor = layer.attributeDivisors[key]
-        const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
-        return [shaderName(key), attrObj]
-      })
-    )
+    const isInstanced = layer.instanceCount !== null
+    const pickCount = isInstanced ? layer.instanceCount : (layer.vertexCount ?? layer.attributes.x?.length ?? 0)
+    const pickIds = new Float32Array(pickCount)
+    for (let i = 0; i < pickCount; i++) pickIds[i] = i
+
+    const attributes = {
+      ...Object.fromEntries(
+        Object.entries(layer.attributes).map(([key, buffer]) => {
+          const divisor = layer.attributeDivisors[key]
+          const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
+          return [shaderName(key), attrObj]
+        })
+      ),
+      a_pickId: isInstanced ? { buffer: regl.buffer(pickIds), divisor: 1 } : regl.buffer(pickIds)
+    }
 
     const uniforms = {
       ...u("xDomain"),
       ...u("yDomain"),
       ...u("xScaleType"),
       ...u("yScaleType"),
+      u_pickingMode: regl.prop('u_pickingMode'),
+      u_pickLayerIndex: regl.prop('u_pickLayerIndex'),
       ...Object.fromEntries(
         Object.entries(layer.uniforms).map(([key, value]) => [shaderName(key), value])
       )
@@ -80,22 +128,11 @@ export class LayerType {
     const spatialGlsl = buildSpatialGlsl()
     const colorGlsl = layer.colorAxes.length > 0 ? buildColorGlsl() : ''
     const filterGlsl = layer.filterAxes.length > 0 ? buildFilterGlsl() : ''
-    const injectInto = (src, helpers) => {
-      const injected = helpers.filter(Boolean).join('\n')
-      if (!injected) return src
-      const versionRe = /^[ \t]*#version[^\n]*\n?/
-      const versionMatch = src.match(versionRe)
-      const version = versionMatch ? versionMatch[0] : ''
-      const rest = version ? src.slice(version.length) : src
-      const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
-      const precisions = rest.match(precisionRe) ?? []
-      const body = rest.replace(precisionRe, '')
-      return version + precisions.join('\n') + '\n' + injected + '\n' + body
-    }
+    const pickVertDecls = `attribute float a_pickId;\nvarying float v_pickId;`
 
     const drawConfig = {
-      vert: injectInto(this.vert, [spatialGlsl, colorGlsl, filterGlsl]),
-      frag: injectInto(this.frag, [colorGlsl, filterGlsl]),
+      vert: injectPickIdAssignment(injectInto(this.vert, [spatialGlsl, filterGlsl, pickVertDecls])),
+      frag: injectInto(this.frag, [buildApplyColorGlsl(), colorGlsl, filterGlsl]),
       attributes,
       uniforms,
       viewport: regl.prop("viewport"),

package/src/Plot.js

@@ -90,11 +90,13 @@ export class Plot {
 
       const width = this.container.clientWidth
       const height = this.container.clientHeight
+      const plotWidth = width - this.margin.left - this.margin.right
+      const plotHeight = height - this.margin.top - this.margin.bottom
 
-      // Container is hidden or not yet laid out (e.g. inside display:none tab).
+      // Container is hidden, not yet laid out, or too small to fit the margins.
       // Store config/data and return; ResizeObserver will call forceUpdate() once
       // the container gets real dimensions.
-      if (width === 0 || height === 0) {
+      if (width === 0 || height === 0 || plotWidth <= 0 || plotHeight <= 0) {
         return
       }
 
@@ -104,8 +106,8 @@ export class Plot {
 
       this.width = width
       this.height = height
-      this.plotWidth = width - this.margin.left - this.margin.right
-      this.plotHeight = height - this.margin.top - this.margin.bottom
+      this.plotWidth = plotWidth
+      this.plotHeight = plotHeight
 
       if (this.regl) {
         this.regl.destroy()
@@ -221,7 +223,10 @@ export class Plot {
   _setupResizeObserver() {
     if (typeof ResizeObserver !== 'undefined') {
       this.resizeObserver = new ResizeObserver(() => {
-        this.forceUpdate()
+        // Defer to next animation frame so the ResizeObserver callback exits
+        // before any DOM/layout changes happen, avoiding the "loop completed
+        // with undelivered notifications" browser error.
+        requestAnimationFrame(() => this.forceUpdate())
       })
       this.resizeObserver.observe(this.container)
     } else {
@@ -355,7 +360,8 @@ export class Plot {
   }
 
   _processLayers(layersConfig, data) {
-    for (const layerSpec of layersConfig) {
+    for (let configLayerIndex = 0; configLayerIndex < layersConfig.length; configLayerIndex++) {
+      const layerSpec = layersConfig[configLayerIndex]
       const entries = Object.entries(layerSpec)
       if (entries.length !== 1) {
         throw new Error("Each layer specification must have exactly one layer type key")
@@ -385,6 +391,7 @@ export class Plot {
 
       // Create one draw command per GPU config returned by the layer type.
       for (const layer of layerType.createLayer(parameters, data)) {
+        layer.configLayerIndex = configLayerIndex
         layer.draw = layer.type.createDrawCommand(this.regl, layer, this)
         this.layers.push(layer)
       }
@@ -811,7 +818,9 @@ export class Plot {
         xScaleType: xIsLog ? 1.0 : 0.0,
         yScaleType: yIsLog ? 1.0 : 0.0,
         viewport: viewport,
-        count: layer.vertexCount ?? layer.attributes.x?.length ?? 0
+        count: layer.vertexCount ?? layer.attributes.x?.length ?? 0,
+        u_pickingMode: 0.0,
+        u_pickLayerIndex: 0.0,
       }
 
       if (layer.instanceCount !== null) {
@@ -973,4 +982,92 @@ export class Plot {
 
     fullOverlay.call(zoomBehavior)
   }
+
+  lookup(x, y) {
+    const result = {}
+    if (!this.axisRegistry) return result
+    const plotX = x - this.margin.left
+    const plotY = y - this.margin.top
+    for (const axisId of AXES) {
+      const scale = this.axisRegistry.getScale(axisId)
+      if (!scale) continue
+      const qk = this.axisRegistry.axisQuantityKinds[axisId]
+      const value = axisId.includes('y') ? scale.invert(plotY) : scale.invert(plotX)
+      result[axisId] = value
+      if (qk) result[qk] = value
+    }
+    return result
+  }
+
+  on(eventType, callback) {
+    const handler = (e) => {
+      if (!this.container.contains(e.target)) return
+      const rect = this.container.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      callback(e, this.lookup(x, y))
+    }
+    window.addEventListener(eventType, handler, { capture: true })
+    return { remove: () => window.removeEventListener(eventType, handler, { capture: true }) }
+  }
+
+  pick(x, y) {
+    if (!this.regl || !this.layers.length) return null
+
+    const fbo = this.regl.framebuffer({
+      width: this.width, height: this.height,
+      colorFormat: 'rgba', colorType: 'uint8', depth: false,
+    })
+
+    const glX = Math.round(x)
+    const glY = this.height - Math.round(y) - 1
+
+    let result = null
+    this.regl({ framebuffer: fbo })(() => {
+      this.regl.clear({ color: [0, 0, 0, 0] })
+      const viewport = {
+        x: this.margin.left, y: this.margin.bottom,
+        width: this.plotWidth, height: this.plotHeight
+      }
+      for (let i = 0; i < this.layers.length; i++) {
+        const layer = this.layers[i]
+        const xIsLog = layer.xAxis ? this.axisRegistry.isLogScale(layer.xAxis) : false
+        const yIsLog = layer.yAxis ? this.axisRegistry.isLogScale(layer.yAxis) : false
+        const props = {
+          xDomain: layer.xAxis ? this.axisRegistry.getScale(layer.xAxis).domain() : [0, 1],
+          yDomain: layer.yAxis ? this.axisRegistry.getScale(layer.yAxis).domain() : [0, 1],
+          xScaleType: xIsLog ? 1.0 : 0.0,
+          yScaleType: yIsLog ? 1.0 : 0.0,
+          viewport,
+          count: layer.vertexCount ?? layer.attributes.x?.length ?? 0,
+          u_pickingMode: 1.0,
+          u_pickLayerIndex: i,
+        }
+        if (layer.instanceCount !== null) props.instances = layer.instanceCount
+        for (const qk of layer.colorAxes) {
+          props[`colorscale_${qk}`] = this.colorAxisRegistry.getColorscaleIndex(qk)
+          const range = this.colorAxisRegistry.getRange(qk)
+          props[`color_range_${qk}`] = range ?? [0, 1]
+          props[`color_scale_type_${qk}`] = this._getScaleTypeFloat(qk)
+        }
+        for (const qk of layer.filterAxes) {
+          props[`filter_range_${qk}`] = this.filterAxisRegistry.getRangeUniform(qk)
+          props[`filter_scale_type_${qk}`] = this._getScaleTypeFloat(qk)
+        }
+        layer.draw(props)
+      }
+      const pixels = this.regl.read({ x: glX, y: glY, width: 1, height: 1 })
+      if (pixels[0] === 0) {
+        result = null
+      } else {
+        const layerIndex = pixels[0] - 1
+        const dataIndex = (pixels[1] << 16) | (pixels[2] << 8) | pixels[3]
+        const layer = this.layers[layerIndex]
+        result = { layerIndex, configLayerIndex: layer.configLayerIndex, dataIndex, layer }
+      }
+    })
+
+    fbo.destroy()
+    return result
+  }
 }

package/src/ScatterLayer.js

@@ -3,10 +3,100 @@ import { AXES } from "./AxisRegistry.js"
 import { registerLayerType } from "./LayerTypeRegistry.js"
 import { Data } from "./Data.js"
 
-export const scatterLayerType = new LayerType({
-  name: "scatter",
+const POINTS_VERT = `
+  precision mediump float;
+  attribute float x;
+  attribute float y;
+  attribute float color_data;
+  uniform vec2 xDomain;
+  uniform vec2 yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  varying float value;
+  void main() {
+    float nx = normalize_axis(x, xDomain, xScaleType);
+    float ny = normalize_axis(y, yDomain, yScaleType);
+    gl_Position = vec4(nx*2.0-1.0, ny*2.0-1.0, 0, 1);
+    gl_PointSize = 4.0;
+    value = color_data;
+  }
+`
+
+const POINTS_FRAG = `
+  precision mediump float;
+  uniform int colorscale;
+  uniform vec2 color_range;
+  uniform float color_scale_type;
+  uniform float alphaBlend;
+  varying float value;
+  void main() {
+    gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type, alphaBlend);
+  }
+`
+
+// Lines mode uses instanced rendering:
+//   - Template: 2 vertices with a_endPoint in {0.0, 1.0}  (divisor=0 → interpolates)
+//   - Per-segment: a_x0/x1, a_y0/y1, a_v0/v1, a_seg0/seg1 (divisor=1 → constant per instance)
+//
+// Because a_v0 and a_v1 are instanced, they are the same at both template vertices for a given
+// segment, so varyings set from them are constant across the line (no GPU interpolation).
+// Only v_t (from a_endPoint) interpolates, giving the position along the segment.
+//
+// Segment boundary handling: when a_seg0 != a_seg1, collapse both template vertices to
+// (a_x0, a_y0) producing a zero-length degenerate line that the rasterizer discards.
+
+const LINES_VERT = `
+  precision mediump float;
+  attribute float a_endPoint;
+  attribute float a_x0, a_y0;
+  attribute float a_x1, a_y1;
+  attribute float a_v0, a_v1;
+  attribute float a_seg0, a_seg1;
+  uniform vec2 xDomain;
+  uniform vec2 yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  varying float v_color_start;
+  varying float v_color_end;
+  varying float v_t;
+  void main() {
+    float same_seg = abs(a_seg0 - a_seg1) < 0.5 ? 1.0 : 0.0;
+    float t = same_seg * a_endPoint;
+    float x = mix(a_x0, a_x1, t);
+    float y = mix(a_y0, a_y1, t);
+    float nx = normalize_axis(x, xDomain, xScaleType);
+    float ny = normalize_axis(y, yDomain, yScaleType);
+    gl_Position = vec4(nx * 2.0 - 1.0, ny * 2.0 - 1.0, 0, 1);
+    v_color_start = a_v0;
+    v_color_end   = a_v1;
+    v_t = a_endPoint;
+  }
+`
+
+const LINES_FRAG = `
+  precision mediump float;
+  uniform int colorscale;
+  uniform vec2 color_range;
+  uniform float color_scale_type;
+  uniform float alphaBlend;
+  uniform float u_lineColorMode;
+  varying float v_color_start;
+  varying float v_color_end;
+  varying float v_t;
+  void main() {
+    float value = u_lineColorMode > 0.5
+      ? (v_t < 0.5 ? v_color_start : v_color_end)
+      : mix(v_color_start, v_color_end, v_t);
+    gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type, alphaBlend);
+  }
+`
+
+class ScatterLayerType extends LayerType {
+  constructor() {
+    super({ name: "scatter", vert: POINTS_VERT, frag: POINTS_FRAG })
+  }
 
-  getAxisConfig: function(parameters, data) {
+  _getAxisConfig(parameters, data) {
     const d = Data.wrap(data)
     const { xData, yData, vData, xAxis, yAxis } = parameters
     return {
@@ -16,39 +106,9 @@ export const scatterLayerType = new LayerType({
       yAxisQuantityKind: d.getQuantityKind(yData) ?? yData,
       colorAxisQuantityKinds: [d.getQuantityKind(vData) ?? vData],
     }
-  },
-
-  vert: `
-    precision mediump float;
-    attribute float x;
-    attribute float y;
-    attribute float color_data;
-    uniform vec2 xDomain;
-    uniform vec2 yDomain;
-    uniform float xScaleType;
-    uniform float yScaleType;
-    varying float value;
-    void main() {
-      float nx = normalize_axis(x, xDomain, xScaleType);
-      float ny = normalize_axis(y, yDomain, yScaleType);
-      gl_Position = vec4(nx*2.0-1.0, ny*2.0-1.0, 0, 1);
-      gl_PointSize = 4.0;
-      value = color_data;
-    }
-  `,
-  frag: `
-    precision mediump float;
-    uniform int colorscale;
-    uniform vec2 color_range;
-    uniform float color_scale_type;
-    varying float value;
-    void main() {
-      float t = clamp((value - color_range.x) / (color_range.y - color_range.x), 0.0, 1.0);
-      vec4 color = map_color_s(colorscale, color_range, value, color_scale_type);
-      gl_FragColor = vec4(color.rgb, t);
-    }
-  `,
-  schema: (data) => {
+  }
+
+  schema(data) {
     const dataProperties = Data.wrap(data).columns()
     return {
       $schema: "https://json-schema.org/draft/2020-12/schema",
@@ -85,26 +145,57 @@ export const scatterLayerType = new LayerType({
           type: "boolean",
           default: false,
           description: "Map the normalized color value to alpha so low values fade to transparent"
+        },
+        mode: {
+          type: "string",
+          enum: ["points", "lines"],
+          default: "points",
+          description: "Render as individual points or connected lines"
+        },
+        lineSegmentIdData: {
+          type: "string",
+          enum: dataProperties,
+          description: "Column for segment IDs; only consecutive points sharing the same ID are connected"
+        },
+        lineColorMode: {
+          type: "string",
+          enum: ["gradient", "midpoint"],
+          default: "gradient",
+          description: "Color mode for lines: gradient interpolates vData linearly; midpoint uses each endpoint's color up to the segment center"
+        },
+        lineWidth: {
+          type: "number",
+          default: 1.0,
+          minimum: 1,
+          description: "Line width in pixels (note: browsers may clamp values above 1)"
         }
       },
       required: ["xData", "yData", "vData"]
     }
-  },
-  createLayer: function(parameters, data) {
+  }
+
+  _createLayer(parameters, data) {
     const d = Data.wrap(data)
-    const { xData, yData, vData, alphaBlend = false } = parameters
+    const {
+      xData, yData, vData,
+      alphaBlend = false,
+      mode = "points",
+      lineSegmentIdData,
+      lineColorMode = "gradient",
+      lineWidth = 1.0,
+    } = parameters
 
     const xQK = d.getQuantityKind(xData) ?? xData
     const yQK = d.getQuantityKind(yData) ?? yData
     const vQK = d.getQuantityKind(vData) ?? vData
 
-    const x = d.getData(xData)
-    const y = d.getData(yData)
-    const v = d.getData(vData)
+    const srcX = d.getData(xData)
+    const srcY = d.getData(yData)
+    const srcV = d.getData(vData)
 
-    if (!x) throw new Error(`Data column '${xData}' not found`)
-    if (!y) throw new Error(`Data column '${yData}' not found`)
-    if (!v) throw new Error(`Data column '${vData}' not found`)
+    if (!srcX) throw new Error(`Data column '${xData}' not found`)
+    if (!srcY) throw new Error(`Data column '${yData}' not found`)
+    if (!srcV) throw new Error(`Data column '${vData}' not found`)
 
     const domains = {}
     const xDomain = d.getDomain(xData)
@@ -114,9 +205,59 @@ export const scatterLayerType = new LayerType({
     if (yDomain) domains[yQK] = yDomain
     if (vDomain) domains[vQK] = vDomain
 
+    const blendConfig = alphaBlend ? {
+      enable: true,
+      func: { srcRGB: 'src alpha', dstRGB: 'one minus src alpha', srcAlpha: 0, dstAlpha: 1 },
+    } : null
+
+    if (mode === "lines") {
+      const N = srcX.length
+      const segIds = lineSegmentIdData ? d.getData(lineSegmentIdData) : null
+      // Zero-init array used when no segment IDs: abs(0-0) < 0.5 → always same segment
+      const zeroSegs = new Float32Array(N - 1)
+      const seg0 = segIds ? segIds.subarray(0, N - 1) : zeroSegs
+      const seg1 = segIds ? segIds.subarray(1, N) : zeroSegs
+
+      return [{
+        attributes: {
+          a_endPoint: new Float32Array([0.0, 1.0]),
+          a_x0: srcX.subarray(0, N - 1),
+          a_x1: srcX.subarray(1, N),
+          a_y0: srcY.subarray(0, N - 1),
+          a_y1: srcY.subarray(1, N),
+          a_v0: srcV.subarray(0, N - 1),
+          a_v1: srcV.subarray(1, N),
+          a_seg0: seg0,
+          a_seg1: seg1,
+        },
+        attributeDivisors: {
+          a_x0: 1, a_x1: 1,
+          a_y0: 1, a_y1: 1,
+          a_v0: 1, a_v1: 1,
+          a_seg0: 1, a_seg1: 1,
+        },
+        uniforms: {
+          alphaBlend: alphaBlend ? 1.0 : 0.0,
+          u_lineColorMode: lineColorMode === "midpoint" ? 1.0 : 0.0,
+        },
+        nameMap: {
+          [`colorscale_${vQK}`]: 'colorscale',
+          [`color_range_${vQK}`]: 'color_range',
+          [`color_scale_type_${vQK}`]: 'color_scale_type',
+        },
+        domains,
+        primitive: "lines",
+        lineWidth,
+        vertexCount: 2,
+        instanceCount: N - 1,
+        blend: blendConfig,
+      }]
+    }
+
+    // Points mode — existing behaviour
     return [{
-      attributes: { x, y, [vQK]: v },
-      uniforms: {},
+      attributes: { x: srcX, y: srcY, [vQK]: srcV },
+      uniforms: { alphaBlend: alphaBlend ? 1.0 : 0.0 },
       domains,
       nameMap: {
         [vQK]: 'color_data',
@@ -124,11 +265,23 @@ export const scatterLayerType = new LayerType({
         [`color_range_${vQK}`]: 'color_range',
         [`color_scale_type_${vQK}`]: 'color_scale_type',
       },
-      blend: alphaBlend ? {
-        enable: true,
-        func: { srcRGB: 'src alpha', dstRGB: 'one minus src alpha', srcAlpha: 0, dstAlpha: 1 },
-      } : null,
+      blend: blendConfig,
     }]
   }
-})
+
+  // Swap vert/frag to the lines variants before letting the parent build the draw command,
+  // then restore. JS is single-threaded so the temporary swap is safe.
+  createDrawCommand(regl, layer) {
+    if (layer.primitive === "lines") {
+      this.vert = LINES_VERT
+      this.frag = LINES_FRAG
+    } else {
+      this.vert = POINTS_VERT
+      this.frag = POINTS_FRAG
+    }
+    return super.createDrawCommand(regl, layer)
+  }
+}
+
+export const scatterLayerType = new ScatterLayerType()
 registerLayerType("scatter", scatterLayerType)