gladly-plot 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladly-plot",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "GPU-powered multi-axis plotting library with regl + d3",
   "type": "module",
   "exports": {
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "prepare": "node scripts/fix-numjs-wasm.js",
-    "dev": "parcel serve example/index.html --open",
+    "dev": "parcel serve example/index.html --no-cache",
     "build:example": "parcel build example/index.html --dist-dir dist-example --public-url ./",
     "preview": "npm run build:example && npx serve dist-example"
   },

package/src/axes/Axis.js

@@ -0,0 +1,253 @@
+import { axisBottom, axisTop, axisLeft, axisRight } from "d3-axis"
+import { AXES } from "./AxisRegistry.js"
+import { getAxisQuantityKind } from "./AxisQuantityKindRegistry.js"
+
+const AXIS_CONSTRUCTORS = {
+  xaxis_bottom: axisBottom,
+  xaxis_top:    axisTop,
+  yaxis_left:   axisLeft,
+  yaxis_right:  axisRight,
+}
+
+function formatTick(v) {
+  if (v === 0) return "0"
+  const abs = Math.abs(v)
+  if (abs >= 10000 || abs < 0.01) {
+    return v.toExponential(2).replace(/\.?0+(e)/, '$1')
+  }
+  const s = v.toPrecision(4)
+  if (s.includes('.') && !s.includes('e')) {
+    return s.replace(/\.?0+$/, '')
+  }
+  return s
+}
+
+// Returns tick values for a log scale using the 1-2-5 sequence (1×, 2×, 5× per decade),
+// which gives evenly-spaced marks in log space across any domain size.
+// Falls back to powers-of-10 (subsampled if needed) when the domain is too wide for
+// 1-2-5 ticks to fit within pixelCount. Returns null for very narrow domains where
+// no "nice" values land inside, so the caller can fall back to D3's default logic.
+function logTickValues(scale, pixelCount) {
+  const [dMin, dMax] = scale.domain()
+  if (dMin <= 0 || dMax <= 0) return null
+
+  const logMin = Math.log10(dMin)
+  const logMax = Math.log10(dMax)
+  const startExp = Math.floor(logMin)
+  const endExp = Math.ceil(logMax)
+
+  const candidate = []
+  for (let e = startExp; e < endExp; e++) {
+    const base = Math.pow(10, e)
+    for (const mult of [1, 2, 5]) {
+      const v = base * mult
+      if (v >= dMin * (1 - 1e-10) && v <= dMax * (1 + 1e-10)) candidate.push(v)
+    }
+  }
+  const upperPow = Math.pow(10, endExp)
+  if (upperPow >= dMin * (1 - 1e-10) && upperPow <= dMax * (1 + 1e-10)) candidate.push(upperPow)
+
+  if (candidate.length >= 2 && candidate.length <= pixelCount) {
+    return candidate
+  }
+
+  const firstExp = Math.ceil(logMin)
+  const lastExp = Math.floor(logMax)
+  if (firstExp > lastExp) {
+    return candidate.length >= 2 ? candidate : null
+  }
+  const numPowers = lastExp - firstExp + 1
+  const step = numPowers > pixelCount ? Math.ceil(numPowers / pixelCount) : 1
+  const powers = []
+  for (let e = firstExp; e <= lastExp; e += step) {
+    powers.push(Math.pow(10, e))
+  }
+  return powers.length >= 2 ? powers : null
+}
+
+/**
+ * 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.isSpatial      — boolean; true for xaxis_bottom/xaxis_top/yaxis_left/yaxis_right
+ *   - 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) }
+
+  /** True if this is a spatial (D3-rendered) axis; false for color/filter axes. */
+  get isSpatial() { return AXES.includes(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) }
+
+  // ─── Spatial axis rendering ───────────────────────────────────────────────
+
+  _tickCount(rotate = false) {
+    const { plotWidth, plotHeight } = this._plot
+    if (this._name.includes("y")) {
+      return Math.max(2, Math.floor(plotHeight / 27))
+    }
+    const pixelsPerTick = rotate ? 28 : 40
+    return Math.max(2, Math.floor(plotWidth / pixelsPerTick))
+  }
+
+  _makeD3Axis(scale, { rotate = false } = {}) {
+    const isLog = typeof scale.base === 'function'
+    const count = this._tickCount(rotate)
+    const gen = AXIS_CONSTRUCTORS[this._name](scale).tickFormat(formatTick)
+    if (isLog) {
+      const tv = logTickValues(scale, count)
+      if (tv !== null) {
+        gen.tickValues(tv)
+      } else {
+        gen.ticks(count)
+      }
+    } else if (count <= 2) {
+      gen.tickValues(scale.domain())
+    } else {
+      gen.ticks(count)
+    }
+    return gen
+  }
+
+  _renderLabel(axisGroup, availableMargin) {
+    const { axisRegistry, currentConfig, plotWidth, plotHeight } = this._plot
+    const axisQuantityKind = axisRegistry.axisQuantityKinds[this._name]
+    if (!axisQuantityKind) return
+
+    const unitLabel = currentConfig?.axes?.[axisQuantityKind]?.label
+      ?? getAxisQuantityKind(axisQuantityKind).label
+    const isVertical = this._name.includes("y")
+    const centerPos = isVertical ? -plotHeight / 2 : plotWidth / 2
+
+    axisGroup.select(".axis-label").remove()
+
+    const text = axisGroup.append("text")
+      .attr("class", "axis-label")
+      .attr("fill", "#000")
+      .style("text-anchor", "middle")
+      .style("font-size", "14px")
+      .style("font-weight", "bold")
+
+    const lines = unitLabel.split('\n')
+    if (lines.length > 1) {
+      lines.forEach((line, i) => {
+        text.append("tspan")
+          .attr("x", 0)
+          .attr("dy", i === 0 ? "0em" : "1.2em")
+          .text(line)
+      })
+    } else {
+      text.text(unitLabel)
+    }
+
+    if (isVertical) text.attr("transform", "rotate(-90)")
+    text.attr("x", centerPos).attr("y", 0)
+
+    const bbox = text.node().getBBox()
+    const tickSpace = 25
+    let yOffset
+
+    if (this._name === "xaxis_bottom") {
+      yOffset = (tickSpace + (availableMargin - tickSpace) / 2) - (bbox.y + bbox.height / 2)
+    } else if (this._name === "xaxis_top") {
+      yOffset = -(tickSpace + (availableMargin - tickSpace) / 2) - (bbox.y + bbox.height / 2)
+    } else if (this._name === "yaxis_left") {
+      yOffset = -(tickSpace + (availableMargin - tickSpace) / 2) - (bbox.y + bbox.height / 2)
+    } else if (this._name === "yaxis_right") {
+      yOffset = (tickSpace + (availableMargin - tickSpace) / 2) - (bbox.y + bbox.height / 2)
+    }
+
+    text.attr("y", yOffset)
+  }
+
+  /**
+   * Renders this axis into the plot's SVG. No-op for non-spatial axes (color/filter).
+   * Called by Plot.render() after each WebGL frame.
+   */
+  render() {
+    if (!this.isSpatial) return
+    const { svg, margin, plotWidth, plotHeight, axisRegistry, currentConfig } = this._plot
+    const scale = axisRegistry.getScale(this._name)
+    if (!scale) return
+
+    const axisConfig = currentConfig?.axes?.[this._name] ?? {}
+    const rotate = axisConfig.rotate ?? false
+
+    let transform, availableMargin
+    if (this._name === "xaxis_bottom") {
+      transform = `translate(${margin.left},${margin.top + plotHeight})`
+      availableMargin = margin.bottom
+    } else if (this._name === "xaxis_top") {
+      transform = `translate(${margin.left},${margin.top})`
+      availableMargin = margin.top
+    } else if (this._name === "yaxis_left") {
+      transform = `translate(${margin.left},${margin.top})`
+      availableMargin = margin.left
+    } else if (this._name === "yaxis_right") {
+      transform = `translate(${margin.left + plotWidth},${margin.top})`
+      availableMargin = margin.right
+    }
+
+    const g = svg.select(`.${this._name}`)
+      .attr("transform", transform)
+      .call(this._makeD3Axis(scale, { rotate }))
+
+    g.select(".domain").attr("stroke", "#000").attr("stroke-width", 2)
+    g.selectAll(".tick line").attr("stroke", "#000")
+    g.selectAll(".tick text").attr("fill", "#000").style("font-size", "12px")
+
+    if (rotate && this._name === "xaxis_bottom") {
+      g.selectAll(".tick text")
+        .style("text-anchor", "end")
+        .attr("dx", "-0.8em")
+        .attr("dy", "0.15em")
+        .attr("transform", "rotate(-45)")
+    } else if (rotate && this._name === "xaxis_top") {
+      g.selectAll(".tick text")
+        .style("text-anchor", "start")
+        .attr("dx", "0.8em")
+        .attr("dy", "-0.35em")
+        .attr("transform", "rotate(45)")
+    }
+
+    this._renderLabel(g, availableMargin)
+  }
+}

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

@@ -21,3 +21,10 @@ export function getAxisQuantityKind(name) {
 export function getRegisteredAxisQuantityKinds() {
   return Array.from(registry.keys())
 }
+
+// Returns 1.0 for log scale, 0.0 for linear. axesConfig is the `axes` sub-object of plot config.
+export function getScaleTypeFloat(quantityKind, axesConfig) {
+  const configScale = axesConfig?.[quantityKind]?.scale
+  const defScale = getAxisQuantityKind(quantityKind).scale
+  return (configScale ?? defScale) === "log" ? 1.0 : 0.0
+}

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

@@ -38,6 +38,54 @@ export class AxisRegistry {
     return !!scale && typeof scale.base === 'function'
   }
 
+  applyAutoDomainsFromLayers(layers, axesOverrides) {
+    const autoDomains = {}
+
+    for (const axis of AXES) {
+      const layersUsingAxis = layers.filter(l => l.xAxis === axis || l.yAxis === axis)
+      if (layersUsingAxis.length === 0) continue
+
+      let min = Infinity, max = -Infinity
+      for (const layer of layersUsingAxis) {
+        const isXAxis = layer.xAxis === axis
+        const qk = isXAxis ? layer.xAxisQuantityKind : layer.yAxisQuantityKind
+        if (layer.domains[qk] !== undefined) {
+          const [dMin, dMax] = layer.domains[qk]
+          if (dMin < min) min = dMin
+          if (dMax > max) max = dMax
+        } else {
+          const dataArray = isXAxis ? layer.attributes.x : layer.attributes.y
+          if (!dataArray) continue
+          for (let i = 0; i < dataArray.length; i++) {
+            const val = dataArray[i]
+            if (val < min) min = val
+            if (val > max) max = val
+          }
+        }
+      }
+      if (min !== Infinity) autoDomains[axis] = [min, max]
+    }
+
+    for (const axis of AXES) {
+      const scale = this.getScale(axis)
+      if (!scale) continue
+      const override = axesOverrides[axis]
+      const domain = override ? [override.min, override.max] : autoDomains[axis]
+      if (domain) scale.domain(domain)
+    }
+
+    for (const axis of AXES) {
+      if (!this.isLogScale(axis)) continue
+      const [dMin, dMax] = this.getScale(axis).domain()
+      if ((isFinite(dMin) && dMin <= 0) || (isFinite(dMax) && dMax <= 0)) {
+        throw new Error(
+          `Axis '${axis}' uses log scale but has non-positive domain [${dMin}, ${dMax}]. ` +
+          `All data values and min/max must be > 0 for log scale.`
+        )
+      }
+    }
+  }
+
   setScaleType(axisName, scaleType) {
     const scale = this.scales[axisName]
     if (!scale) return

package/src/axes/ColorAxisRegistry.js

@@ -0,0 +1,93 @@
+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 })
+    } 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())
+  }
+
+  applyAutoDomainsFromLayers(layers, axesOverrides) {
+    for (const quantityKind of this.getQuantityKinds()) {
+      const override = axesOverrides[quantityKind]
+      if (override?.colorscale && override?.colorscale != "none")
+        this.ensureColorAxis(quantityKind, override.colorscale)
+      
+      let min = Infinity, max = -Infinity
+
+      for (const layer of layers) {
+        for (const qk of 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)
+      }
+    }
+
+    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 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/ZoomController.js

@@ -0,0 +1,141 @@
+import * as d3 from "d3-selection"
+import { zoom } from "d3-zoom"
+import { AXES } from "./AxisRegistry.js"
+
+export class ZoomController {
+  constructor(plot) {
+    this._plot = plot
+    this._init()
+  }
+
+  _init() {
+    const plot = this._plot
+
+    const fullOverlay = plot.svg.append("rect")
+      .attr("class", "zoom-overlay")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("width", plot.width)
+      .attr("height", plot.height)
+      .attr("fill", "none")
+      .attr("pointer-events", "all")
+      .style("cursor", "move")
+
+    let currentRegion = null
+    let gestureStartDomains = {}
+    let gestureStartMousePos = {}
+    let gestureStartDataPos = {}
+    let gestureStartTransform = null
+
+    const zoomBehavior = zoom()
+      .on("start", (event) => {
+        if (!event.sourceEvent) return
+
+        gestureStartTransform = { k: event.transform.k, x: event.transform.x, y: event.transform.y }
+        const [mouseX, mouseY] = d3.pointer(event.sourceEvent, plot.svg.node())
+        const { margin, plotWidth, plotHeight } = plot
+
+        const inPlotX = mouseX >= margin.left && mouseX < margin.left + plotWidth
+        const inPlotY = mouseY >= margin.top && mouseY < margin.top + plotHeight
+
+        if (inPlotX && mouseY < margin.top) {
+          currentRegion = "xaxis_top"
+        } else if (inPlotX && mouseY >= margin.top + plotHeight) {
+          currentRegion = "xaxis_bottom"
+        } else if (inPlotY && mouseX < margin.left) {
+          currentRegion = "yaxis_left"
+        } else if (inPlotY && mouseX >= margin.left + plotWidth) {
+          currentRegion = "yaxis_right"
+        } else if (inPlotX && inPlotY) {
+          currentRegion = "plot_area"
+        } else {
+          currentRegion = null
+        }
+
+        gestureStartDomains = {}
+        gestureStartMousePos = {}
+        gestureStartDataPos = {}
+
+        if (currentRegion && plot.axisRegistry) {
+          const axesToZoom = currentRegion === "plot_area" ? AXES : [currentRegion]
+          axesToZoom.forEach(axis => {
+            const scale = plot.axisRegistry.getScale(axis)
+            if (!scale) return
+
+            const { margin, plotWidth, plotHeight } = plot
+            const isY = axis.includes("y")
+            const mousePixel = isY ? (mouseY - margin.top) : (mouseX - margin.left)
+            const pixelSize = isY ? plotHeight : plotWidth
+            const currentDomain = scale.domain()
+            gestureStartDomains[axis] = currentDomain.slice()
+            gestureStartMousePos[axis] = mousePixel
+
+            const isLog = plot.axisRegistry.isLogScale(axis)
+            const [d0, d1] = currentDomain
+            const t0 = isLog ? Math.log(d0) : d0
+            const t1 = isLog ? Math.log(d1) : d1
+            const fraction = mousePixel / pixelSize
+            gestureStartDataPos[axis] = isY
+              ? t1 - fraction * (t1 - t0)
+              : t0 + fraction * (t1 - t0)
+          })
+        }
+      })
+      .on("zoom", (event) => {
+        if (!plot.axisRegistry || !currentRegion || !gestureStartTransform) return
+
+        const deltaK = event.transform.k / gestureStartTransform.k
+        const deltaX = event.transform.x - gestureStartTransform.x
+        const deltaY = event.transform.y - gestureStartTransform.y
+        const isWheel = event.sourceEvent && event.sourceEvent.type === 'wheel'
+        const axesToZoom = currentRegion === "plot_area" ? AXES : [currentRegion]
+
+        axesToZoom.forEach(axis => {
+          const scale = plot.axisRegistry.getScale(axis)
+          if (!scale || !gestureStartDomains[axis] || gestureStartDataPos[axis] === undefined) return
+
+          const { plotWidth, plotHeight } = plot
+          const isY = axis.includes("y")
+          const [d0, d1] = gestureStartDomains[axis]
+          const isLog = plot.axisRegistry.isLogScale(axis)
+          const t0 = isLog ? Math.log(d0) : d0
+          const t1 = isLog ? Math.log(d1) : d1
+          const tDomainWidth = t1 - t0
+
+          const pixelSize = isY ? plotHeight : plotWidth
+          const pixelDelta = isY ? deltaY : deltaX
+          const newTDomainWidth = tDomainWidth / deltaK
+          const targetDataPos = gestureStartDataPos[axis]
+          const mousePixelPos = gestureStartMousePos[axis]
+          const fraction = mousePixelPos / pixelSize
+
+          const panTDomainDelta = isWheel ? 0 : (isY
+            ? pixelDelta * tDomainWidth / pixelSize / deltaK
+            : -pixelDelta * tDomainWidth / pixelSize / deltaK)
+
+          const tCenter = isY
+            ? (targetDataPos + panTDomainDelta) + (fraction - 0.5) * newTDomainWidth
+            : (targetDataPos + panTDomainDelta) + (0.5 - fraction) * newTDomainWidth
+
+          const newTDomain = [tCenter - newTDomainWidth / 2, tCenter + newTDomainWidth / 2]
+          const newDomain = isLog
+            ? [Math.exp(newTDomain[0]), Math.exp(newTDomain[1])]
+            : newTDomain
+
+          plot._getAxis(axis).setDomain(newDomain)
+        })
+
+        plot.scheduleRender()
+      })
+      .on("end", () => {
+        currentRegion = null
+        gestureStartDomains = {}
+        gestureStartMousePos = {}
+        gestureStartDataPos = {}
+        gestureStartTransform = null
+        plot._zoomEndCallbacks.forEach(cb => cb())
+      })
+
+    fullOverlay.call(zoomBehavior)
+  }
+}