@livo-build/charts 0.2.1 → 0.2.3

package/dist/core/chart.js

@@ -1,11 +1,42 @@
 import { DEFAULT_THEME } from "./theme";
-import { draw } from "./renderer";
-import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
+import { heikinAshi } from "./ohlc";
+import { computeProjection, draw, resolveOverlays, slotWidth } from "./renderer";
+let drawingSeq = 0;
+const nextDrawingId = () => `d${++drawingSeq}`;
+/**
+ * Whether a feed should be asked for older candles, given the loaded length and the
+ * current view. Returns true when the visible window's left edge is within ~one screen
+ * (`max(floor, visibleCount)`) of the start of loaded data — so zooming out / panning
+ * left keeps deepening the window (prefetching a viewport of buffer) instead of hitting
+ * a wall at the oldest loaded candle and just fattening the bars. Pure + exported so the
+ * prefetch trigger is testable without a DOM.
+ */
+export function needsHistory(length, count, offset, floor = 8) {
+    if (length <= 0)
+        return false;
+    const visible = Math.min(count, length);
+    const start = Math.max(0, length - offset - visible);
+    return start <= Math.max(floor, visible);
+}
+/** Largest pan offset that still fills the window — pins the OLDEST candle to the left edge
+ *  so a left-drag can't expose empty space past the start of the data. Pure + exported for
+ *  testing; the controller clamps every pan/zoom to it. */
+export function maxPanOffset(length, count) {
+    return Math.max(0, length - Math.min(count, length));
+}
+/** Pixel distance from point P to segment A–B (for drawing hit-testing). */
+function distToSeg(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const len2 = dx * dx + dy * dy;
+    const t = len2 ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / len2)) : 0;
+    return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
 const DEFAULTS = {
     height: 420,
     initialBars: 120,
     minBars: 20,
-    maxBarWidth: 18,
+    maxBarWidth: 26, // max candle SLOT width when fitContent is off (tight, right-anchored)
     volumeRatio: 0.18,
     rightPad: 66,
     bottomPad: 22,
@@ -32,11 +63,25 @@ export class Chart {
     constructor(container, opts = {}) {
         this.container = container;
         this.candles = [];
+        /** Price-series candles (Heikin-Ashi in "heikin" mode), precomputed on data/type change
+         *  so the O(n) transform doesn't run every frame. */
+        this.priceCandles = [];
         this.indicators = [];
+        this.oscillators = [];
+        this.drawings = [];
+        this.drawMode = "none";
+        this.selectedDrawing = null;
+        /** in-progress trendline (drag from anchor A to B). */
+        this.draftDrawing = null;
+        /** active move of an existing drawing: its id + the data-space grab anchor + originals. */
+        this.drawingDrag = null;
         /** Indicator values precomputed on data/indicator change (not per frame). */
         this.overlays = [];
         this.interval = 300;
         this.type = "candle";
+        this.showVolume = true;
+        this.logScale = false;
+        this.fitContent = true;
         /** requestAnimationFrame handle coalescing high-frequency redraws (0 = none queued). */
         this.raf = 0;
         this.historyReqLen = -1;
@@ -45,9 +90,18 @@ export class Chart {
         this.yZoom = 1;
         this.hover = null;
         this.drag = null;
+        /** two-finger pinch baseline: finger spreads + view at gesture start. */
+        this.pinch = null;
         this.lastActive = null;
         this.onWheel = (e) => {
             e.preventDefault();
+            // Horizontal intent (trackpad swipe / shift+wheel) pans through time — which lazy-loads
+            // older candles as the view nears the start (see maybeRequestHistory). Vertical zooms.
+            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                this.panByPixels(e.deltaX);
+                this.scheduleRender();
+                return;
+            }
             const f = e.deltaY > 0 ? 1.15 : 0.87;
             if (e.offsetX > this.plotW) {
                 this.yZoom = Math.min(50, Math.max(0.2, this.yZoom / f));
@@ -59,8 +113,39 @@ export class Chart {
         };
         this.onDown = (e) => {
             const r = this.canvas.getBoundingClientRect();
+            const x = e.clientX - r.left;
+            const y = e.clientY - r.top;
+            const proj = this.projection();
+            if (proj && this.region(x, y) === "plot") {
+                if (this.drawMode === "hline") {
+                    const d = { id: nextDrawingId(), type: "hline", a: { time: proj.timeOfX(x), price: proj.priceOfY(y) } };
+                    this.drawings = [...this.drawings, d];
+                    this.selectedDrawing = d.id;
+                    this.emitDrawings();
+                    this.exitDrawMode();
+                    this.render();
+                    return;
+                }
+                if (this.drawMode === "trendline" || this.drawMode === "fib" || this.drawMode === "rect") {
+                    const p = { time: proj.timeOfX(x), price: proj.priceOfY(y) };
+                    this.draftDrawing = { id: nextDrawingId(), type: this.drawMode, a: p, b: { ...p } };
+                    this.render();
+                    return;
+                }
+                const hit = this.hitTest(x, y, proj);
+                if (hit) {
+                    this.selectedDrawing = hit.id;
+                    this.drawingDrag = { id: hit.id, grabT: proj.timeOfX(x), grabP: proj.priceOfY(y), a: { ...hit.a }, b: hit.b ? { ...hit.b } : undefined };
+                    this.render();
+                    return;
+                }
+                if (this.selectedDrawing) {
+                    this.selectedDrawing = null;
+                    this.render();
+                }
+            }
             this.drag = {
-                reg: this.region(e.clientX - r.left, e.clientY - r.top),
+                reg: this.region(x, y),
                 x: e.clientX,
                 y: e.clientY,
                 offset: this.view.offset,
@@ -70,42 +155,140 @@ export class Chart {
         };
         this.onMove = (e) => {
             const r = this.canvas.getBoundingClientRect();
-            const d = this.drag;
-            if (d) {
-                if (d.reg === "y") {
-                    this.yZoom = Math.min(50, Math.max(0.2, d.yZoom * Math.exp(-(e.clientY - d.y) / 160)));
-                }
-                else if (d.reg === "x") {
-                    const n = this.candles.length;
-                    this.view = { ...this.view, count: Math.min(Math.max(this.minBars, Math.round(d.count * Math.exp((e.clientX - d.x) / 260))), Math.max(this.minBars, n)) };
-                }
-                else {
-                    const cw = Math.min(this.plotW / Math.max(Math.min(this.view.count, this.candles.length || 1), 1), this.maxBarWidth);
-                    const offset = Math.max(0, Math.min(this.candles.length - this.minBars, d.offset + Math.round((e.clientX - d.x) / cw)));
-                    this.view = { ...this.view, offset };
-                }
-                this.canvas.style.cursor = "grabbing";
+            const x = e.clientX - r.left;
+            const y = e.clientY - r.top;
+            if (this.draftDrawing) {
+                const proj = this.projection();
+                if (proj)
+                    this.draftDrawing = { ...this.draftDrawing, b: { time: proj.timeOfX(x), price: proj.priceOfY(y) } };
+                this.hover = { x, y };
+                this.scheduleRender();
+                return;
+            }
+            if (this.drawingDrag) {
+                const proj = this.projection();
+                if (proj)
+                    this.applyDrawingDrag(x, y, proj);
+                this.hover = { x, y };
+                this.scheduleRender();
+                return;
             }
-            this.hover = { x: e.clientX - r.left, y: e.clientY - r.top };
+            if (this.applyDrag(e.clientX, e.clientY))
+                this.canvas.style.cursor = "grabbing";
+            this.hover = { x, y };
             this.scheduleRender();
         };
         this.onUp = () => {
+            if (this.draftDrawing) {
+                const d = this.draftDrawing;
+                this.draftDrawing = null;
+                // commit only a real drag — a click without movement is discarded
+                if (d.b && (d.a.time !== d.b.time || d.a.price !== d.b.price)) {
+                    this.drawings = [...this.drawings, d];
+                    this.selectedDrawing = d.id;
+                    this.emitDrawings();
+                }
+                this.exitDrawMode();
+                this.render();
+                return;
+            }
+            if (this.drawingDrag) {
+                this.drawingDrag = null;
+                this.emitDrawings();
+            }
             this.drag = null;
-            this.canvas.style.cursor = "crosshair";
+            this.canvas.style.cursor = this.drawMode === "none" ? "crosshair" : "copy";
         };
         this.onLeave = () => {
             this.drag = null;
+            if (this.drawingDrag) {
+                this.drawingDrag = null;
+                this.emitDrawings();
+            }
+            this.draftDrawing = null;
             this.hover = null;
-            this.canvas.style.cursor = "crosshair";
+            this.canvas.style.cursor = this.drawMode === "none" ? "crosshair" : "copy";
             this.scheduleRender();
         };
-        this.onDouble = () => {
+        this.onDouble = (e) => {
+            const r = this.canvas.getBoundingClientRect();
+            const proj = this.projection();
+            if (proj) {
+                const hit = this.hitTest(e.clientX - r.left, e.clientY - r.top, proj);
+                if (hit) {
+                    this.removeDrawing(hit.id);
+                    return;
+                }
+            }
             this.resetView();
         };
+        // ---- touch: one finger pans / axis-zooms (like the mouse), two fingers pinch-zoom ----
+        this.onTouchStart = (e) => {
+            const r = this.canvas.getBoundingClientRect();
+            if (e.touches.length >= 2) {
+                const [a, b] = [e.touches[0], e.touches[1]];
+                this.drag = null;
+                this.pinch = {
+                    dx: Math.abs(a.clientX - b.clientX) || 1,
+                    dy: Math.abs(a.clientY - b.clientY) || 1,
+                    cx: (a.clientX + b.clientX) / 2 - r.left,
+                    count: this.view.count,
+                    offset: this.view.offset,
+                    yZoom: this.yZoom,
+                };
+            }
+            else if (e.touches.length === 1) {
+                const t = e.touches[0];
+                const x = t.clientX - r.left;
+                const y = t.clientY - r.top;
+                this.pinch = null;
+                this.drag = { reg: this.region(x, y), x: t.clientX, y: t.clientY, offset: this.view.offset, count: this.view.count, yZoom: this.yZoom };
+                this.hover = { x, y };
+            }
+            e.preventDefault();
+            this.scheduleRender();
+        };
+        this.onTouchMove = (e) => {
+            const r = this.canvas.getBoundingClientRect();
+            if (this.pinch && e.touches.length >= 2) {
+                const [a, b] = [e.touches[0], e.touches[1]];
+                const dx = Math.abs(a.clientX - b.clientX) || 1;
+                const dy = Math.abs(a.clientY - b.clientY) || 1;
+                // Reset to the gesture baseline, then apply an anchored time-zoom by the horizontal
+                // spread ratio (spread wider → fewer candles) and a price-zoom by the vertical ratio.
+                this.view = { count: this.pinch.count, offset: this.pinch.offset };
+                this.zoomTimeAt(this.pinch.cx, this.pinch.dx / dx);
+                this.yZoom = Math.min(50, Math.max(0.2, this.pinch.yZoom * (dy / this.pinch.dy)));
+            }
+            else if (this.drag && e.touches.length === 1) {
+                const t = e.touches[0];
+                this.applyDrag(t.clientX, t.clientY);
+                this.hover = { x: t.clientX - r.left, y: t.clientY - r.top };
+            }
+            e.preventDefault();
+            this.scheduleRender();
+        };
+        this.onTouchEnd = (e) => {
+            if (e.touches.length === 0) {
+                this.drag = null;
+                this.pinch = null;
+                this.hover = null;
+            }
+            else if (e.touches.length === 1) {
+                // dropped from two fingers to one — restart a pan from the remaining finger.
+                this.pinch = null;
+                const r = this.canvas.getBoundingClientRect();
+                const t = e.touches[0];
+                this.drag = { reg: this.region(t.clientX - r.left, t.clientY - r.top), x: t.clientX, y: t.clientY, offset: this.view.offset, count: this.view.count, yZoom: this.yZoom };
+            }
+            this.scheduleRender();
+        };
         this.theme = { ...DEFAULT_THEME, ...(opts.theme || {}) };
         this.height = opts.height ?? DEFAULTS.height;
         this.minBars = opts.minBars ?? DEFAULTS.minBars;
         this.maxBarWidth = opts.maxBarWidth ?? DEFAULTS.maxBarWidth;
+        this.maxBodyWidth = opts.maxBodyWidth;
+        this.showVolume = opts.showVolume ?? true;
         this.volumeRatio = opts.volumeRatio ?? DEFAULTS.volumeRatio;
         this.onCrosshair = opts.onCrosshair;
         this.pads = {
@@ -115,6 +298,20 @@ export class Chart {
         };
         this.view = { count: opts.initialBars ?? DEFAULTS.initialBars, offset: 0 };
         this.indicators = opts.indicators ?? [];
+        this.oscillators = opts.oscillators ?? [];
+        this.drawings = opts.drawings ?? [];
+        this.onDrawingsChange = opts.onDrawingsChange;
+        this.onDrawModeChange = opts.onDrawModeChange;
+        this.logScale = opts.logScale ?? false;
+        this.emptyText = opts.emptyText;
+        this.baselinePrice = opts.baselinePrice;
+        this.volumeProfile = opts.volumeProfile;
+        this.fitContent = opts.fitContent ?? true;
+        this.priceFormat = opts.priceFormat;
+        this.timeFormat = opts.timeFormat;
+        this.priceTicks = opts.priceTicks;
+        this.timeTicks = opts.timeTicks;
+        this.axisFont = opts.axisFont;
         this.onNeedHistory = opts.onNeedHistory;
         const doc = container.ownerDocument;
         this.canvas = doc.createElement("canvas");
@@ -131,12 +328,17 @@ export class Chart {
         this.canvas.addEventListener("mouseup", this.onUp);
         this.canvas.addEventListener("mouseleave", this.onLeave);
         this.canvas.addEventListener("dblclick", this.onDouble);
+        this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: false });
+        this.canvas.addEventListener("touchmove", this.onTouchMove, { passive: false });
+        this.canvas.addEventListener("touchend", this.onTouchEnd);
+        this.canvas.style.touchAction = "none";
         this.ro = new ResizeObserver(() => this.measure());
         this.ro.observe(container);
         this.measure();
     }
     setCandles(candles) {
         this.candles = candles;
+        this.recomputePriceCandles();
         this.recomputeOverlays();
         this.clampView();
         this.render();
@@ -149,6 +351,59 @@ export class Chart {
     }
     setChartType(type) {
         this.type = type;
+        this.recomputePriceCandles();
+        this.render();
+        return this;
+    }
+    /** Show or hide the volume panel (the price pane reclaims the space when hidden). */
+    setShowVolume(on) {
+        this.showVolume = on;
+        this.render();
+        return this;
+    }
+    /** Toggle the logarithmic price axis (equal pixels = equal % move). */
+    setLogScale(on) {
+        this.logScale = on;
+        this.render();
+        return this;
+    }
+    /** Set the empty-state text (e.g. "Loading…" while a feed's first page is in flight; "" hides it). */
+    setEmptyText(text) {
+        this.emptyText = text;
+        this.render();
+        return this;
+    }
+    /** Set the reference price for the `baseline` chart type (undefined = first visible close). */
+    setBaseline(price) {
+        this.baselinePrice = price;
+        this.render();
+        return this;
+    }
+    /** Show/configure (or hide, with `false`) the volume-by-price histogram. */
+    setVolumeProfile(config) {
+        this.volumeProfile = config;
+        this.render();
+        return this;
+    }
+    /** Style the axes: fill-vs-tight candle spacing, custom price/time label formatters,
+     *  tick counts, and the label font. Only the provided keys change. */
+    setAxis(opts) {
+        if (opts.fitContent !== undefined)
+            this.fitContent = opts.fitContent;
+        if (opts.priceFormat !== undefined)
+            this.priceFormat = opts.priceFormat;
+        if (opts.timeFormat !== undefined)
+            this.timeFormat = opts.timeFormat;
+        if (opts.priceTicks !== undefined)
+            this.priceTicks = opts.priceTicks;
+        if (opts.timeTicks !== undefined)
+            this.timeTicks = opts.timeTicks;
+        if (opts.axisFont !== undefined)
+            this.axisFont = opts.axisFont;
+        if (opts.maxBarWidth !== undefined)
+            this.maxBarWidth = opts.maxBarWidth;
+        if (opts.maxBodyWidth !== undefined)
+            this.maxBodyWidth = opts.maxBodyWidth;
         this.render();
         return this;
     }
@@ -158,6 +413,63 @@ export class Chart {
         this.render();
         return this;
     }
+    /** Set the oscillator sub-panes (RSI / MACD) drawn below the volume panel. */
+    setOscillators(oscillators) {
+        this.oscillators = oscillators;
+        this.render();
+        return this;
+    }
+    /** Arm a drawing tool ("trendline" / "hline"), or "none" for pan/zoom + select/move.
+     *  Drawing tools are one-shot: after one drawing the mode auto-resets to "none". */
+    setDrawMode(mode) {
+        this.drawMode = mode;
+        this.canvas.style.cursor = mode === "none" ? "crosshair" : "copy";
+        return this;
+    }
+    /** Replace all drawings (does not fire onDrawingsChange). */
+    setDrawings(drawings) {
+        this.drawings = drawings;
+        this.selectedDrawing = null;
+        this.render();
+        return this;
+    }
+    /** Current drawings (a copy). */
+    getDrawings() {
+        return this.drawings.map((d) => ({ ...d }));
+    }
+    /** Remove a drawing by id. */
+    removeDrawing(id) {
+        this.drawings = this.drawings.filter((d) => d.id !== id);
+        if (this.selectedDrawing === id)
+            this.selectedDrawing = null;
+        this.emitDrawings();
+        this.render();
+        return this;
+    }
+    /** Remove the currently selected drawing, if any. */
+    deleteSelected() {
+        if (this.selectedDrawing)
+            this.removeDrawing(this.selectedDrawing);
+        return this;
+    }
+    /** Remove all drawings. */
+    clearDrawings() {
+        if (!this.drawings.length)
+            return this;
+        this.drawings = [];
+        this.selectedDrawing = null;
+        this.emitDrawings();
+        this.render();
+        return this;
+    }
+    emitDrawings() {
+        this.onDrawingsChange?.(this.getDrawings());
+    }
+    exitDrawMode() {
+        this.drawMode = "none";
+        this.canvas.style.cursor = "crosshair";
+        this.onDrawModeChange?.("none");
+    }
     /** Register a callback fired when the user pans/zooms near the start of loaded data
      *  (so a feed can lazily load older candles). See connectFeed. */
     setNeedHistory(cb) {
@@ -189,12 +501,17 @@ export class Chart {
         this.canvas.removeEventListener("mouseup", this.onUp);
         this.canvas.removeEventListener("mouseleave", this.onLeave);
         this.canvas.removeEventListener("dblclick", this.onDouble);
+        this.canvas.removeEventListener("touchstart", this.onTouchStart);
+        this.canvas.removeEventListener("touchmove", this.onTouchMove);
+        this.canvas.removeEventListener("touchend", this.onTouchEnd);
         this.ro.disconnect();
         if (this.raf)
             this.container.ownerDocument.defaultView?.cancelAnimationFrame(this.raf);
         this.canvas.remove();
     }
     get volH() {
+        if (!this.showVolume)
+            return 0;
         return Math.round((this.height - this.pads.bottom - this.pads.top) * this.volumeRatio);
     }
     get plotW() {
@@ -210,31 +527,68 @@ export class Chart {
         this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         this.render();
     }
+    /** Largest pan offset that still fills the window — pins the OLDEST candle to the left
+     *  edge instead of letting a left-drag expose empty space past the start of the data.
+     *  (When a feed is attached, reaching this edge trips the older-history load, so the
+     *  data deepens and this max grows; without one, the pan simply stops here.) */
+    maxOffset(count = this.view.count) {
+        return maxPanOffset(this.candles.length, count);
+    }
+    /** Most-negative offset — how far the view may scroll PAST the newest candle into the
+     *  future (empty space on the right), so the user can pull the current price toward the
+     *  centre. Capped at half the visible window. */
+    minOffset(count = this.view.count) {
+        return -Math.floor(Math.min(count, this.candles.length) / 2);
+    }
     clampView() {
         const n = this.candles.length;
         const count = Math.min(Math.max(this.minBars, this.view.count), Math.max(this.minBars, n || this.minBars));
-        const offset = Math.min(Math.max(0, this.view.offset), Math.max(0, n - this.minBars));
+        const offset = Math.min(Math.max(this.minOffset(count), this.view.offset), this.maxOffset(count));
         this.view = { count, offset };
     }
-    render() {
-        if (!this.width)
-            return;
-        const active = draw({
+    /** Assemble the {@link RenderInput} from current state — shared by render() and projection(). */
+    buildInput() {
+        return {
             ctx: this.ctx,
             width: this.width,
             height: this.height,
             candles: this.candles,
+            priceCandles: this.priceCandles,
             view: this.view,
             hover: this.hover,
             interval: this.interval,
             type: this.type,
             yZoom: this.yZoom,
             maxBarWidth: this.maxBarWidth,
+            maxBodyWidth: this.maxBodyWidth,
             volH: this.volH,
             theme: this.theme,
             pads: this.pads,
             overlays: this.overlays,
-        });
+            oscillators: this.oscillators,
+            drawings: this.drawings,
+            drawPreview: this.draftDrawing,
+            selectedDrawing: this.selectedDrawing,
+            logScale: this.logScale,
+            emptyText: this.emptyText,
+            baselinePrice: this.baselinePrice,
+            volumeProfile: this.volumeProfile,
+            fitContent: this.fitContent,
+            priceFormat: this.priceFormat,
+            timeFormat: this.timeFormat,
+            priceTicks: this.priceTicks,
+            timeTicks: this.timeTicks,
+            axisFont: this.axisFont,
+        };
+    }
+    /** Pixel↔data projection for the current frame (null when there are no candles). */
+    projection() {
+        return computeProjection(this.buildInput());
+    }
+    render() {
+        if (!this.width)
+            return;
+        const active = draw(this.buildInput());
         if (this.onCrosshair && active !== this.lastActive) {
             this.lastActive = active;
             this.onCrosshair(active);
@@ -257,19 +611,21 @@ export class Chart {
     }
     /** Recompute indicator value-series once when data or config changes (not per frame). */
     recomputeOverlays() {
-        this.overlays = this.indicators.map((ind, i) => ({
-            color: ind.color || INDICATOR_PALETTE[i % INDICATOR_PALETTE.length],
-            values: computeIndicator(this.candles, ind),
-        }));
+        this.overlays = resolveOverlays(this.candles, this.indicators);
+    }
+    /** Recompute the price-series candles (Heikin-Ashi transform) on data/type change, so the
+     *  O(n) pass doesn't run on every redraw or projection lookup. */
+    recomputePriceCandles() {
+        this.priceCandles = this.type === "heikin" ? heikinAshi(this.candles) : this.candles;
     }
-    /** When the view nears the start of loaded data, ask the feed for older candles
-     *  (once per data length, so it stops at the end of history). */
+    /** When the view nears the start of loaded data, ask the feed for older candles. Fires
+     *  at most once per data length, so it advances page-by-page and stops at the end of
+     *  history. The trigger leads the left edge by ~one viewport (see {@link needsHistory}),
+     *  so zooming out keeps loading deeper data rather than stalling at the oldest candle. */
     maybeRequestHistory() {
         if (!this.onNeedHistory || !this.candles.length)
             return;
-        const end = this.candles.length - this.view.offset;
-        const start = Math.max(0, end - Math.min(this.view.count, this.candles.length));
-        if (start <= this.historyThreshold && this.historyReqLen !== this.candles.length) {
+        if (needsHistory(this.candles.length, this.view.count, this.view.offset, this.historyThreshold) && this.historyReqLen !== this.candles.length) {
             this.historyReqLen = this.candles.length;
             this.onNeedHistory();
         }
@@ -281,6 +637,16 @@ export class Chart {
             return "x";
         return "plot";
     }
+    /** Pan the time axis by a horizontal pixel delta (wheel/trackpad). Scrolling right
+     *  (`dx > 0`) moves toward newer candles; scrolling left walks back into history. */
+    panByPixels(dx) {
+        const n = this.candles.length;
+        if (!n)
+            return;
+        const cw = slotWidth(this.plotW, Math.min(this.view.count, n), this.maxBarWidth, this.fitContent) || 1;
+        const offset = Math.min(this.maxOffset(), Math.max(this.minOffset(), this.view.offset - Math.round(dx / cw)));
+        this.view = { ...this.view, offset };
+    }
     /** Zoom the time axis by factor `f`, keeping the candle under `cursorX` anchored. */
     zoomTimeAt(cursorX, f) {
         const n = this.candles.length;
@@ -293,7 +659,84 @@ export class Chart {
         const count = Math.round(Math.min(Math.max(this.minBars, this.view.count * f), Math.max(this.minBars, n)));
         const nVisNew = Math.min(count, n);
         const startNew = absUnder - Math.round(frac * (nVisNew - 1));
-        const offset = Math.max(0, Math.min(Math.max(0, n - this.minBars), n - startNew - nVisNew));
+        const offset = Math.max(0, Math.min(this.maxOffset(count), n - startNew - nVisNew));
         this.view = { count, offset };
     }
+    /** Topmost drawing under the pointer (within tolerance), or null. */
+    hitTest(x, y, proj) {
+        const TOL = 6;
+        for (let i = this.drawings.length - 1; i >= 0; i--) {
+            const d = this.drawings[i];
+            if (d.type === "hline") {
+                if (Math.abs(y - proj.yOfPrice(d.a.price)) <= TOL)
+                    return d;
+            }
+            else if (d.type === "fib" && d.b) {
+                const ax = proj.xOfTime(d.a.time);
+                const bx = proj.xOfTime(d.b.time);
+                if (x >= Math.min(ax, bx) - TOL) {
+                    const p0 = d.a.price;
+                    const p1 = d.b.price;
+                    for (const r of [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]) {
+                        if (Math.abs(y - proj.yOfPrice(p0 + (p1 - p0) * r)) <= TOL)
+                            return d;
+                    }
+                }
+                if (distToSeg(x, y, ax, proj.yOfPrice(d.a.price), bx, proj.yOfPrice(d.b.price)) <= TOL)
+                    return d;
+            }
+            else if (d.type === "rect" && d.b) {
+                const ax = proj.xOfTime(d.a.time);
+                const ay = proj.yOfPrice(d.a.price);
+                const bx = proj.xOfTime(d.b.time);
+                const by = proj.yOfPrice(d.b.price);
+                if (x >= Math.min(ax, bx) - TOL && x <= Math.max(ax, bx) + TOL && y >= Math.min(ay, by) - TOL && y <= Math.max(ay, by) + TOL)
+                    return d;
+            }
+            else if (d.b) {
+                const dist = distToSeg(x, y, proj.xOfTime(d.a.time), proj.yOfPrice(d.a.price), proj.xOfTime(d.b.time), proj.yOfPrice(d.b.price));
+                if (dist <= TOL)
+                    return d;
+            }
+        }
+        return null;
+    }
+    /** Translate the dragged drawing by the pointer's data-space delta from the grab anchor. */
+    applyDrawingDrag(x, y, proj) {
+        const dd = this.drawingDrag;
+        if (!dd)
+            return;
+        const dt = proj.timeOfX(x) - dd.grabT;
+        const dp = proj.priceOfY(y) - dd.grabP;
+        this.drawings = this.drawings.map((d) => d.id !== dd.id
+            ? d
+            : {
+                ...d,
+                a: { time: dd.a.time + dt, price: dd.a.price + dp },
+                b: dd.b ? { time: dd.b.time + dt, price: dd.b.price + dp } : undefined,
+            });
+    }
+    /** Apply an in-progress drag (pan or axis-zoom) from the current pointer position.
+     *  Shared by mouse-move and single-finger touch-move. Returns true if a drag is active. */
+    applyDrag(clientX, clientY) {
+        const d = this.drag;
+        if (!d)
+            return false;
+        if (d.reg === "y") {
+            this.yZoom = Math.min(50, Math.max(0.2, d.yZoom * Math.exp(-(clientY - d.y) / 160)));
+        }
+        else if (d.reg === "x") {
+            const n = this.candles.length;
+            const count = Math.min(Math.max(this.minBars, Math.round(d.count * Math.exp((clientX - d.x) / 260))), Math.max(this.minBars, n));
+            // a wider window changes the offset bounds — re-clamp so zooming the x-axis never voids
+            // the left nor over-scrolls the right.
+            this.view = { count, offset: Math.min(this.maxOffset(count), Math.max(this.minOffset(count), this.view.offset)) };
+        }
+        else {
+            const cw = slotWidth(this.plotW, Math.min(this.view.count, this.candles.length || 1), this.maxBarWidth, this.fitContent);
+            const offset = Math.min(this.maxOffset(), Math.max(this.minOffset(), d.offset + Math.round((clientX - d.x) / cw)));
+            this.view = { ...this.view, offset };
+        }
+        return true;
+    }
 }