@wick-charts/vue 0.6.0 → 0.6.2

package/dist/core/dist/components/crosshair.js

@@ -1,9 +1,11 @@
-function d(r, s, l, x) {
-  const { context: t, bitmapSize: e, horizontalPixelRatio: o, verticalPixelRatio: c } = r, a = Math.max(1, Math.round(c)), i = Math.max(1, Math.round(o));
-  t.strokeStyle = x.crosshair.color, t.lineWidth = Math.max(a, i), t.setLineDash([4 * o, 4 * o]);
-  const h = Math.round(s) + (i % 2 === 1 ? 0.5 : 0), n = Math.round(l) + (a % 2 === 1 ? 0.5 : 0);
-  t.beginPath(), t.moveTo(h, 0), t.lineTo(h, e.height), t.moveTo(0, n), t.lineTo(e.width, n), t.stroke(), t.setLineDash([]);
+function u(m) {
+  const { scope: x, bitmapX: o, bitmapY: i, theme: M, pane: a } = m, { context: t, bitmapSize: h, horizontalPixelRatio: e, verticalPixelRatio: p } = x, n = o <= a.width, r = i <= a.height;
+  if (!n && !r) return;
+  const s = Math.max(1, Math.round(p)), c = Math.max(1, Math.round(e));
+  t.strokeStyle = M.crosshair.color, t.lineWidth = Math.max(s, c), t.setLineDash([4 * e, 4 * e]);
+  const l = Math.round(o) + (c % 2 === 1 ? 0.5 : 0), d = Math.round(i) + (s % 2 === 1 ? 0.5 : 0);
+  t.beginPath(), n && (t.moveTo(l, 0), t.lineTo(l, h.height)), r && (t.moveTo(0, d), t.lineTo(h.width, d)), t.stroke(), t.setLineDash([]);
 }
 export {
-  d as renderCrosshair
+  u as renderCrosshair
 };

package/dist/core/dist/components/grid.js

@@ -1,22 +1,26 @@
-function T({ scope: c, timeScale: h, yScale: d, theme: a, yTicks: m, timeTicks: p }) {
-  const { context: t, bitmapSize: s, horizontalPixelRatio: e, verticalPixelRatio: u } = c;
-  t.save(), t.strokeStyle = a.grid.color, a.grid.style === "dashed" ? t.setLineDash([4 * e, 4 * e]) : a.grid.style === "dotted" && t.setLineDash([1 * e, 3 * e]);
-  const l = Math.max(1, Math.round(u)), g = l % 2 === 1 ? 0.5 : 0;
-  t.lineWidth = l;
-  for (const { value: n, opacity: o } of m.entries) {
-    if (o <= 0.01) continue;
-    const i = Math.round(d.valueToBitmapY(n)) + g;
-    t.globalAlpha = o, t.beginPath(), t.moveTo(0, i), t.lineTo(s.width, i), t.stroke();
+import { crispLineWidth as h, crispCenterOffset as d } from "../utils/pixel-grid.js";
+function x({ scope: p, timeScale: m, yScale: f, theme: a, yTicks: u, timeTicks: T, alpha: n = 1 }) {
+  if (n <= 0.01) return;
+  const { context: e, bitmapSize: c, horizontalPixelRatio: t, verticalPixelRatio: l } = p;
+  e.save(), e.strokeStyle = a.grid.color, a.grid.style === "dashed" ? e.setLineDash([4 * t, 4 * t]) : a.grid.style === "dotted" && e.setLineDash([1 * t, 3 * t]);
+  const g = h(l), v = d(l);
+  e.lineWidth = g;
+  for (const { value: r, opacity: s } of u.entries) {
+    const i = s * n;
+    if (i <= 0.01) continue;
+    const o = Math.round(f.valueToBitmapY(r)) + v;
+    e.globalAlpha = i, e.beginPath(), e.moveTo(0, o), e.lineTo(c.width, o), e.stroke();
   }
-  const r = Math.max(1, Math.round(e)), y = r % 2 === 1 ? 0.5 : 0;
-  t.lineWidth = r;
-  for (const { value: n, opacity: o } of p.entries) {
-    if (o <= 0.01) continue;
-    const i = Math.round(h.timeToBitmapX(n)) + y;
-    t.globalAlpha = o, t.beginPath(), t.moveTo(i, 0), t.lineTo(i, s.height), t.stroke();
+  const y = h(t), b = d(t);
+  e.lineWidth = y;
+  for (const { value: r, opacity: s } of T.entries) {
+    const i = s * n;
+    if (i <= 0.01) continue;
+    const o = Math.round(m.timeToBitmapX(r)) + b;
+    e.globalAlpha = i, e.beginPath(), e.moveTo(o, 0), e.lineTo(o, c.height), e.stroke();
   }
-  t.restore();
+  e.restore();
 }
 export {
-  T as renderGrid
+  x as renderGrid
 };

package/dist/core/dist/interactions/handler.js

@@ -6,8 +6,8 @@ function i(o, e) {
   const t = o.clientX - e.clientX, s = o.clientY - e.clientY;
   return Math.hypot(t, s);
 }
-const d = 5, v = 500;
-class M extends a {
+const d = 5, m = 500;
+class T extends a {
   zoom;
   pan;
   canvas;
@@ -15,13 +15,27 @@ class M extends a {
   yScale;
   target;
   constructor(e, t, s, n) {
-    super(), this.canvas = e, this.target = t, this.timeScale = s, this.yScale = n, this.zoom = new r(t, s), this.pan = new u(t, s, e), e.style.cursor = "crosshair", e.style.touchAction = "none", e.addEventListener("wheel", this.onWheel, { passive: !1 }), e.addEventListener("mousedown", this.onMouseDown), e.addEventListener("mousemove", this.onMouseMove), e.addEventListener("mouseup", this.onMouseUp), e.addEventListener("mouseleave", this.onMouseLeave), e.addEventListener("click", this.onClick), e.addEventListener("dblclick", this.onDblClick), e.addEventListener("touchstart", this.onTouchStart, { passive: !1 }), e.addEventListener("touchmove", this.onTouchMove, { passive: !1 }), e.addEventListener("touchend", this.onTouchEnd), e.addEventListener("touchcancel", this.onTouchCancel);
+    super(), this.canvas = e, this.target = t, this.timeScale = s, this.yScale = n, this.zoom = new r(t, s), this.pan = new u(t, s, e), e.style.cursor = "crosshair", this.syncPanZoomMode(), e.addEventListener("wheel", this.onWheel, { passive: !1 }), e.addEventListener("mousedown", this.onMouseDown), e.addEventListener("mousemove", this.onMouseMove), e.addEventListener("mouseup", this.onMouseUp), e.addEventListener("mouseleave", this.onMouseLeave), e.addEventListener("click", this.onClick), e.addEventListener("dblclick", this.onDblClick), e.addEventListener("touchstart", this.onTouchStart, { passive: !1 }), e.addEventListener("touchmove", this.onTouchMove, { passive: !1 }), e.addEventListener("touchend", this.onTouchEnd), e.addEventListener("touchcancel", this.onTouchCancel);
+  }
+  /** Live read of the target's capability — series can be added or removed at any time. */
+  panZoomEnabled() {
+    return this.target.canPanZoom?.() ?? !0;
+  }
+  /**
+   * Reflect the target's pan/zoom capability into the canvas CSS. While
+   * pan/zoomable, `touch-action: none` hands every touch gesture to the
+   * chart; on a spatial-only target native scrolling stays enabled so the
+   * chart doesn't trap the page. The host re-invokes this whenever the
+   * series mix changes.
+   */
+  syncPanZoomMode() {
+    this.canvas.style.touchAction = this.panZoomEnabled() ? "none" : "auto";
   }
   onWheel = (e) => {
-    this.zoom.handleWheel(e);
+    this.panZoomEnabled() && this.zoom.handleWheel(e);
   };
   onMouseDown = (e) => {
-    this.zoom.cancelPendingRebound(), this.pan.handleMouseDown(e), this.downClient = { x: e.clientX, y: e.clientY };
+    this.zoom.cancelPendingRebound(), this.panZoomEnabled() && this.pan.handleMouseDown(e), this.downClient = { x: e.clientX, y: e.clientY };
   };
   onMouseMove = (e) => {
     this.pan.isDragging() && this.pan.handleMouseMove(e), this.emitCrosshair(e.offsetX, e.offsetY);
@@ -54,36 +68,38 @@ class M extends a {
   // synthesize a phantom 'click'.
   gestureHadTwoFingers = !1;
   onTouchStart = (e) => {
-    e.preventDefault(), this.zoom.cancelPendingRebound(), this.touchCount = e.touches.length, e.touches.length === 1 ? (this.pan.handleMouseDown({
+    this.panZoomEnabled() && (e.preventDefault(), this.zoom.cancelPendingRebound(), this.touchCount = e.touches.length, e.touches.length === 1 ? (this.pan.handleMouseDown({
       button: 0,
       clientX: e.touches[0].clientX
-    }), this.downClient = { x: e.touches[0].clientX, y: e.touches[0].clientY }, this.touchDownTime = Date.now(), this.gestureHadTwoFingers = !1) : e.touches.length === 2 && (this.lastTouchDist = i(e.touches[0], e.touches[1]), this.gestureHadTwoFingers = !0);
+    }), this.downClient = { x: e.touches[0].clientX, y: e.touches[0].clientY }, this.touchDownTime = Date.now(), this.gestureHadTwoFingers = !1) : e.touches.length === 2 && (this.lastTouchDist = i(e.touches[0], e.touches[1]), this.gestureHadTwoFingers = !0));
   };
   onTouchMove = (e) => {
-    if (e.preventDefault(), e.touches.length === 1 && this.touchCount === 1)
-      this.pan.handleMouseMove({
-        clientX: e.touches[0].clientX
-      });
-    else if (e.touches.length === 2) {
-      const t = i(e.touches[0], e.touches[1]), s = (e.touches[0].clientX + e.touches[1].clientX) / 2, n = this.canvas.getBoundingClientRect();
-      if (t > 0 && this.lastTouchDist > 0) {
-        const h = l(this.lastTouchDist / t, 0.1, 10), c = this.timeScale.xToTime(s - n.left);
-        this.target.zoomAt(c, h, this.timeScale.getMediaWidth());
+    if (this.panZoomEnabled()) {
+      if (e.preventDefault(), e.touches.length === 1 && this.touchCount === 1)
+        this.pan.handleMouseMove({
+          clientX: e.touches[0].clientX
+        });
+      else if (e.touches.length === 2) {
+        const t = i(e.touches[0], e.touches[1]), s = (e.touches[0].clientX + e.touches[1].clientX) / 2, n = this.canvas.getBoundingClientRect();
+        if (t > 0 && this.lastTouchDist > 0) {
+          const h = l(this.lastTouchDist / t, 0.1, 10), c = this.timeScale.xToTime(s - n.left);
+          this.target.zoomAt(c, h, this.timeScale.getMediaWidth());
+        }
+        this.lastTouchDist = t;
       }
-      this.lastTouchDist = t;
     }
   };
   onTouchEnd = (e) => {
     if (e.touches.length === 0) {
       const t = e.changedTouches[0];
-      if (this.touchCount === 1 && !this.gestureHadTwoFingers && t && !this.movedBeyondClickTolerance(t.clientX, t.clientY) && Date.now() - this.touchDownTime <= v) {
+      if (this.touchCount === 1 && !this.gestureHadTwoFingers && t && !this.movedBeyondClickTolerance(t.clientX, t.clientY) && Date.now() - this.touchDownTime <= m) {
         const s = this.canvas.getBoundingClientRect();
         this.emit("click", this.posFromOffset(t.clientX - s.left, t.clientY - s.top));
       }
       this.pan.handleMouseUp(), this.touchCount = 0, this.lastTouchDist = 0, this.downClient = null, this.gestureHadTwoFingers = !1, this.emit("crosshairMove", null);
       return;
     }
-    e.touches.length === 1 && (this.touchCount = 1, this.lastTouchDist = 0, this.pan.handleMouseDown({ button: 0, clientX: e.touches[0].clientX }), this.downClient = { x: e.touches[0].clientX, y: e.touches[0].clientY }, this.touchDownTime = Date.now());
+    e.touches.length === 1 && this.touchCount === 2 && (this.touchCount = 1, this.lastTouchDist = 0, this.pan.handleMouseDown({ button: 0, clientX: e.touches[0].clientX }), this.downClient = { x: e.touches[0].clientX, y: e.touches[0].clientY }, this.touchDownTime = Date.now());
   };
   onTouchCancel = () => {
     this.pan.handleMouseUp(), this.touchCount = 0, this.lastTouchDist = 0, this.downClient = null, this.gestureHadTwoFingers = !1, this.emit("crosshairMove", null);
@@ -104,5 +120,5 @@ class M extends a {
   }
 }
 export {
-  M as InteractionHandler
+  T as InteractionHandler
 };

package/dist/core/dist/navigator/controller.js

@@ -2,8 +2,8 @@ import { DEFAULT_LINE_ENTRY as w } from "../animation/config.js";
 import { XScale as T } from "../scales/x-scale.js";
 import { YScale as R } from "../scales/y-scale.js";
 import { decimateCandles as k, decimateLinear as C } from "./decimate.js";
-import { hitTest as y, computeSnapCenter as E, computePan as I, computeResize as M } from "./interactions.js";
-import { computeWindowGeometry as $, renderBackground as V, renderMiniCandlestick as L, renderMiniBar as N, renderMiniLine as P } from "./render.js";
+import { hitTest as y, computeSnapCenter as E, computePan as I, computeResize as $ } from "./interactions.js";
+import { computeWindowGeometry as M, renderBackground as V, renderMiniCandlestick as L, renderMiniBar as N, renderMiniLine as P } from "./render.js";
 import { Animator as S } from "../animation/animator.js";
 import { easeOutCubic as z } from "../animation/easing.js";
 class G {
@@ -58,8 +58,8 @@ class G {
   #g = null;
   // Bound listeners so we can remove the same references on destroy.
   #I;
-  #M;
   #$;
+  #M;
   #V;
   #L;
   #b;
@@ -68,9 +68,9 @@ class G {
     this.#s = t.container, this.#e = t.chart, this.#x = t.data, this.#v = t.options ?? {}, window.getComputedStyle(this.#s).position === "static" && (this.#s.style.position = "relative"), this.#t = document.createElement("canvas"), this.#t.style.position = "absolute", this.#t.style.left = "0", this.#t.style.top = "0", this.#t.style.height = "100%", this.#t.style.touchAction = "none", this.#s.appendChild(this.#t);
     const e = this.#t.getContext("2d", { alpha: !0 });
     if (!e) throw new Error("NavigatorController: failed to acquire 2D context");
-    this.#z = e, this.#o = document.createElement("div"), this.#o.dataset.chartNavigatorOverlay = "", this.#o.style.cssText = "position:absolute;left:0;top:0;height:100%;pointer-events:none;", this.#d = document.createElement("div"), this.#d.style.cssText = "position:absolute;left:0;top:0;bottom:0;", this.#r = document.createElement("div"), this.#r.style.cssText = "position:absolute;top:0;bottom:0;", this.#l = document.createElement("div"), this.#l.style.cssText = "position:absolute;top:0;bottom:0;box-sizing:border-box;", this.#a = b(), this.#c = b(), this.#o.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#o), this.#I = () => this.#B(), this.#M = () => this.#f(), this.#$ = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#M), this.#e.on("tickFrame", this.#$), this.#V = (s) => this.#H(s), this.#L = (s) => this.#J(s), this.#b = (s) => this.#K(s), this.#N = () => {
+    this.#z = e, this.#o = document.createElement("div"), this.#o.dataset.chartNavigatorOverlay = "", this.#o.style.cssText = "position:absolute;left:0;top:0;height:100%;pointer-events:none;", this.#d = document.createElement("div"), this.#d.style.cssText = "position:absolute;left:0;top:0;bottom:0;", this.#r = document.createElement("div"), this.#r.style.cssText = "position:absolute;top:0;bottom:0;", this.#l = document.createElement("div"), this.#l.style.cssText = "position:absolute;top:0;bottom:0;box-sizing:border-box;", this.#a = b(), this.#c = b(), this.#o.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#o), this.#I = () => this.#B(), this.#$ = () => this.#f(), this.#M = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#$), this.#e.on("tickFrame", this.#M), this.#V = (s) => this.#U(s), this.#L = (s) => this.#J(s), this.#b = (s) => this.#K(s), this.#N = () => {
       this.#g === null && (this.#t.style.cursor = "default");
-    }, this.#t.addEventListener("pointerdown", this.#V), this.#t.addEventListener("pointermove", this.#L), this.#t.addEventListener("pointerup", this.#b), this.#t.addEventListener("pointercancel", this.#b), this.#t.addEventListener("pointerleave", this.#N), this.#E = new ResizeObserver((s) => this.#U(s[0])), this.#E.observe(this.#s), this.#D();
+    }, this.#t.addEventListener("pointerdown", this.#V), this.#t.addEventListener("pointermove", this.#L), this.#t.addEventListener("pointerup", this.#b), this.#t.addEventListener("pointercancel", this.#b), this.#t.addEventListener("pointerleave", this.#N), this.#E = new ResizeObserver((s) => this.#j(s[0])), this.#E.observe(this.#s), this.#D();
     const i = this.#s.getBoundingClientRect();
     i.width > 0 && i.height > 0 && this.#W(i.width, i.height), this.#f();
   }
@@ -100,7 +100,7 @@ class G {
     t !== void 0 && (this.#s.style.height = `${t}px`);
   }
   destroy() {
-    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#M), this.#e.off("tickFrame", this.#$), this.#t.removeEventListener("pointerdown", this.#V), this.#t.removeEventListener("pointermove", this.#L), this.#t.removeEventListener("pointerup", this.#b), this.#t.removeEventListener("pointercancel", this.#b), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#o.remove();
+    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#$), this.#e.off("tickFrame", this.#M), this.#t.removeEventListener("pointerdown", this.#V), this.#t.removeEventListener("pointermove", this.#L), this.#t.removeEventListener("pointerup", this.#b), this.#t.removeEventListener("pointercancel", this.#b), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#o.remove();
   }
   /** CSS pixel height of the strip — theme default unless overridden. */
   get height() {
@@ -112,7 +112,7 @@ class G {
   get #i() {
     return Math.max(0, this.#A - this.#e.yAxisWidth);
   }
-  #U(t) {
+  #j(t) {
     if (!t) return;
     const e = t.contentBoxSize?.[0], i = e?.inlineSize ?? t.contentRect.width, s = e?.blockSize ?? t.contentRect.height;
     i <= 0 || s <= 0 || (this.#W(i, s), this.#f());
@@ -169,17 +169,17 @@ class G {
     return this.#g !== null ? this.#e.getVisibleRange() : this.#e.getAnimationState().xRange;
   }
   #S() {
-    return this.#P(), $(this.#u, this.#Y(), this.#y());
+    return this.#P(), M(this.#u, this.#Y(), this.#y());
   }
-  #j() {
+  #H() {
     const t = this.#y(), e = t.to - t.from;
     return e <= 0 || this.#i <= 0 ? 0 : this.#i / e;
   }
-  #H(t) {
+  #U(t) {
     if (t.button !== void 0 && t.button !== 0) return;
     const e = this.#w(t), i = this.#y();
     if (i.to <= i.from) return;
-    const s = this.#S(), n = y(e, s), h = this.#j();
+    const s = this.#S(), n = y(e, s), h = this.#H();
     if (h === 0) return;
     let l = this.#e.getVisibleRange();
     if (n.snapToCenter) {
@@ -216,7 +216,7 @@ class G {
       });
     else {
       const h = e.gesture === "resize-left" ? "left" : "right";
-      n = M({
+      n = $({
         edge: h,
         startVisible: e.startVisible,
         deltaPx: i,

package/dist/core/dist/scales/tick-tracker.js

@@ -8,7 +8,7 @@ function f(s, t) {
     if (s[e] !== t[e]) return !1;
   return !0;
 }
-class m {
+let m = class {
   #e = [];
   #r = [];
   #t = /* @__PURE__ */ new Map();
@@ -104,7 +104,7 @@ class m {
   reset() {
     this.#e = [], this.#r = [], this.#t.clear(), this.#s = !1;
   }
-}
+};
 export {
   m as AxisTickTracker
 };

package/dist/core/dist/scales/x-scale.js

@@ -1,13 +1,14 @@
-import { formatTime as m, niceTimeIntervals as c } from "../utils/time.js";
-import { AxisTickTracker as f } from "./tick-tracker.js";
-const o = 50, v = 80;
-class p {
+import { crispCenterOffset as m } from "../utils/pixel-grid.js";
+import { formatTime as c, niceTimeIntervals as f } from "../utils/time.js";
+import { AxisTickTracker as v } from "./tick-tracker.js";
+const o = 50, d = 80;
+class b {
   /**
    * Shared fade state for time ticks. Grid lines (canvas) and DOM tick labels
    * read opacity from the same tracker, so a tick fading in/out looks
    * identical on both surfaces.
    */
-  tickTracker = new f();
+  tickTracker = new v();
   from = 0;
   to = 0;
   width = 1;
@@ -37,17 +38,17 @@ class p {
     return this.labelCountHintValue;
   }
   get minLabelSpacing() {
-    return this.minSpacingValue ?? v;
+    return this.minSpacingValue ?? d;
   }
-  update(t, e, n, r) {
-    if (this.from = t.from, this.to = t.to, this.width = e, this.pixelRatio = n, r !== void 0 && r > 0) {
-      const a = h(r);
-      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = r;
+  update(t, e, n, l) {
+    if (this.from = t.from, this.to = t.to, this.width = e, this.pixelRatio = n, l !== void 0 && l > 0) {
+      const a = h(l);
+      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = l;
     }
     this.resolveInterval();
   }
   setLabelCount(t) {
-    this.labelCountHintValue = d(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = p(t), this.resetHysteresis(), this.resolveInterval();
   }
   setMinSpacing(t) {
     this.minSpacingValue = I(t), this.resetHysteresis(), this.resolveInterval();
@@ -88,7 +89,7 @@ class p {
    * `formatTime`, applying the installed locale/timezone.
    */
   formatX(t, e) {
-    return this.customFormat ? this.customFormat(t, e) : m(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
+    return this.customFormat ? this.customFormat(t, e) : c(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastWant = null;
@@ -96,8 +97,22 @@ class p {
   timeToX(t) {
     return this.to <= this.from ? 0 : (t - this.from) / (this.to - this.from) * this.width;
   }
+  /** X in physical (bitmap) pixels, snapped to the pixel grid — for
+   *  axis-aligned edges that have to stay crisp. */
   timeToBitmapX(t) {
-    return Math.round(this.timeToX(t) * this.pixelRatio);
+    return Math.round(this.timeToBitmapXExact(t));
+  }
+  /** Same in physical pixels, off the grid — see {@link YScale.valueToBitmapYExact}. */
+  timeToBitmapXExact(t) {
+    return this.timeToX(t) * this.pixelRatio;
+  }
+  /**
+   * X position in CSS pixels of the *stroke center* the canvas grid draws for
+   * `time`. DOM axis labels position off this instead of raw {@link timeToX}
+   * so text and gridline share one pixel grid.
+   */
+  timeToSnappedX(t) {
+    return (this.timeToBitmapX(t) + m(this.pixelRatio)) / this.pixelRatio;
   }
   xToTime(t) {
     return this.to <= this.from ? this.from : this.from + t / this.width * (this.to - this.from);
@@ -119,16 +134,16 @@ class p {
   niceTickValues(t) {
     if (this.to <= this.from) return { ticks: [], tickInterval: 0 };
     if (this.customTickGenerator) {
-      const i = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), l = i.length >= 2 ? i[1] - i[0] : t;
-      return { ticks: i, tickInterval: l };
+      const i = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), r = i.length >= 2 ? i[1] - i[0] : t;
+      return { ticks: i, tickInterval: r };
     }
     if (this.dataInterval !== t) {
       const i = h(t);
       this.lastBucketKey !== null && this.lastBucketKey !== i && this.resetHysteresis(), this.lastBucketKey = i, this.dataInterval = t, this.resolveInterval();
     }
     if (this.resolvedInterval == null) return { ticks: [], tickInterval: 0 };
-    const e = this.resolvedInterval, n = Math.ceil(this.from / e) * e, r = Math.max(0, Math.min(o, Math.floor((this.to - n) / e) + 1)), a = [];
-    for (let i = 0; i < r; i++) a.push(n + i * e);
+    const e = this.resolvedInterval, n = Math.ceil(this.from / e) * e, l = Math.max(0, Math.min(o, Math.floor((this.to - n) / e) + 1)), a = [];
+    for (let i = 0; i < l; i++) a.push(n + i * e);
     return { ticks: a, tickInterval: e };
   }
   getRange() {
@@ -147,31 +162,31 @@ class p {
       this.resolvedInterval = null;
       return;
     }
-    const t = c(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
-    let r;
+    const t = f(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
+    let l;
     if (this.labelCountHint != null) {
-      const l = Math.max(1, this.labelCountHint);
-      r = Math.max(e / l, n);
+      const r = Math.max(1, this.labelCountHint);
+      l = Math.max(e / r, n);
     } else
-      r = n;
+      l = n;
     if (this.lastInterval != null && this.lastWant != null && t.includes(this.lastInterval)) {
-      const l = r >= this.lastWant * 0.8 && r <= this.lastWant * 1.25, u = this.lastInterval >= n;
-      if (l && u) {
+      const r = l >= this.lastWant * 0.8 && l <= this.lastWant * 1.25, u = this.lastInterval >= n;
+      if (r && u) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
     let a = t[t.length - 1], i = t.length - 1;
-    for (let l = 0; l < t.length; l++)
-      if (t[l] >= r) {
-        a = t[l], i = l;
+    for (let r = 0; r < t.length; r++)
+      if (t[r] >= l) {
+        a = t[r], i = r;
         break;
       }
     if (this.labelCountHint != null && i > 0 && this.countTicks(a) < this.labelCountHint) {
-      const l = t[i - 1];
-      l >= n && (a = l);
+      const r = t[i - 1];
+      r >= n && (a = r);
     }
-    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = r;
+    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = l;
   }
   countTicks(t) {
     if (!(t > 0)) return 0;
@@ -182,12 +197,12 @@ class p {
 function h(s) {
   return s < 6e4 ? 0 : s < 36e5 ? 1 : s < 864e5 ? 2 : 3;
 }
-function d(s) {
+function p(s) {
   return typeof s == "number" && Number.isFinite(s) && s >= 2 ? Math.floor(s) : null;
 }
 function I(s) {
   return typeof s == "number" && Number.isFinite(s) && s > 0 ? s : null;
 }
 export {
-  p as XScale
+  b as XScale
 };

package/dist/core/dist/scales/y-scale.js

@@ -1,19 +1,20 @@
 import { formatCompact as o } from "../utils/format.js";
-import { AxisTickTracker as u } from "./tick-tracker.js";
-function m(e) {
+import { crispCenterOffset as u } from "../utils/pixel-grid.js";
+import { AxisTickTracker as m } from "./tick-tracker.js";
+function c(e) {
   if (!Number.isFinite(e) || e <= 0) return 1;
   const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
   return (i <= 1 ? 1 : i <= 2 ? 2 : i <= 5 ? 5 : 10) * t;
 }
-function c(e) {
+function v(e) {
   if (!Number.isFinite(e) || e <= 0) return 1;
   const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
   return (i >= 5 ? 5 : i >= 2 ? 2 : 1) * t;
 }
-const r = 50, v = 50;
-class M {
+const l = 50, f = 50;
+class T {
   /** Shared fade state for Y ticks; see {@link TimeScale.tickTracker}. */
-  tickTracker = new u();
+  tickTracker = new m();
   min = 0;
   max = 0;
   height = 1;
@@ -41,7 +42,7 @@ class M {
     return this.labelCountHintValue;
   }
   get minLabelSpacing() {
-    return this.minSpacingValue ?? v;
+    return this.minSpacingValue ?? f;
   }
   /** Recalculate the scale with a new Y range, chart height, and device pixel ratio. */
   update(t, i, a) {
@@ -49,11 +50,11 @@ class M {
   }
   /** Desired label count. Invalid values (NaN, <2, Infinity) clear the hint. */
   setLabelCount(t) {
-    this.labelCountHintValue = f(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = x(t), this.resetHysteresis(), this.resolveInterval();
   }
   /** Minimum pixel gap between adjacent labels. */
   setMinSpacing(t) {
-    this.minSpacingValue = g(t), this.resetHysteresis(), this.resolveInterval();
+    this.minSpacingValue = p(t), this.resetHysteresis(), this.resolveInterval();
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastRawInterval = null;
@@ -79,9 +80,26 @@ class M {
     const i = this.max - this.min;
     return i === 0 ? this.height / 2 : (1 - (t - this.min) / i) * this.height;
   }
-  /** Convert a value to a Y position in physical (bitmap) pixels. */
+  /** Convert a value to a Y position in physical (bitmap) pixels, snapped to
+   *  the pixel grid — for axis-aligned edges that have to stay crisp. */
   valueToBitmapY(t) {
-    return Math.round(this.valueToY(t) * this.pixelRatio);
+    return Math.round(this.valueToBitmapYExact(t));
+  }
+  /**
+   * Same in physical pixels, off the grid. Anti-aliased geometry reads this
+   * one: snapping buys a diagonal stroke no sharpness, and during a slow
+   * animation it quantises the motion into whole-pixel jumps.
+   */
+  valueToBitmapYExact(t) {
+    return this.valueToY(t) * this.pixelRatio;
+  }
+  /**
+   * Y position in CSS pixels of the *stroke center* the canvas grid draws for
+   * `value`. DOM axis labels position off this instead of raw {@link valueToY}
+   * so text and gridline share one pixel grid.
+   */
+  valueToSnappedY(t) {
+    return (this.valueToBitmapY(t) + u(this.pixelRatio)) / this.pixelRatio;
   }
   /** Convert a Y position in CSS pixels back to a value. */
   yToValue(t) {
@@ -93,9 +111,9 @@ class M {
    * chart height. Pure read — resolution happens in `update()`.
    */
   niceTickValues() {
-    if (this.customTickGenerator) return this.customTickGenerator({ min: this.min, max: this.max }).slice(0, r);
+    if (this.customTickGenerator) return this.customTickGenerator({ min: this.min, max: this.max }).slice(0, l);
     if (this.resolvedInterval == null) return [];
-    const t = this.resolvedInterval, i = Math.ceil(this.min / t) * t, a = Math.max(0, Math.min(r, Math.floor((this.max - i) / t) + 1)), s = [];
+    const t = this.resolvedInterval, i = Math.ceil(this.min / t) * t, a = Math.max(0, Math.min(l, Math.floor((this.max - i) / t) + 1)), s = [];
     for (let n = 0; n < a; n++) s.push(i + n * t);
     return s;
   }
@@ -137,16 +155,16 @@ class M {
     const t = this.max - this.min, i = t * this.minLabelSpacing / this.height, a = this.labelCountHint != null ? Math.max(1, this.labelCountHint) : Math.max(1, Math.floor(this.height / this.minLabelSpacing));
     let s = t / a;
     if (s < i && (s = i), this.lastInterval != null && this.lastRawInterval != null) {
-      const l = s >= this.lastRawInterval * 0.8 && s <= this.lastRawInterval * 1.25, h = this.lastInterval >= i;
-      if (l && h) {
+      const r = s >= this.lastRawInterval * 0.8 && s <= this.lastRawInterval * 1.25, h = this.lastInterval >= i;
+      if (r && h) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
-    let n = m(s);
+    let n = c(s);
     if (this.labelCountHint != null && this.countTicks(n) < this.labelCountHint) {
-      const l = c(s);
-      l >= i && l > 0 && (n = l);
+      const r = v(s);
+      r >= i && r > 0 && (n = r);
     }
     this.resolvedInterval = n, this.lastInterval = n, this.lastRawInterval = s;
   }
@@ -156,12 +174,12 @@ class M {
     return Math.max(0, Math.floor((this.max - i) / t) + 1);
   }
 }
-function f(e) {
+function x(e) {
   return typeof e == "number" && Number.isFinite(e) && e >= 2 ? Math.floor(e) : null;
 }
-function g(e) {
+function p(e) {
   return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : null;
 }
 export {
-  M as YScale
+  T as YScale
 };