acttrader-charts 1.4.0-beta.3 → 1.4.0-beta.5

package/README.md

@@ -1203,7 +1203,7 @@ Sub-pane heights are user-resizable by dragging the separator between panes.
 | `horizontalLine` | Horizontal Line | Single click |
 | `verticalLine` | Vertical Line | Single click |
 | `trendLine` | Trend Line | 2 clicks |
-| `trendAngle` | Trend Angle | 2 clicks. The angle is the drawing's own property: measured when a point is placed or dragged, kept while zooming, and saved as `angle` on the serialized drawing — so a synced drawing shows the same degrees on web, Android and iOS. |
+| `trendAngle` | Trend Angle | 2 clicks. The angle is the drawing's own property: measured when a point is placed or dragged, kept while zooming, and saved as `angle` on the serialized drawing — so a synced drawing shows the same degrees on web, Android and iOS. The line is drawn from the first point at that angle, as far as the second point projects; the stored points are never rewritten by rendering (before 1.4.0-beta.4 the second point was re-anchored onto the line on every render, which lengthened the line on every zoom or tick until it ran off the pane). |
 | `crossLine` | Cross Line | Single click (H+V) |
 | `parallelChannel` | Parallel Channel | 3 clicks |
 | `flatChannel` | Flat Channel | 2 clicks |
@@ -2266,6 +2266,22 @@ Two details worth knowing:
   in hand. It deletes via select-then-delete, so it shares the undo history with
   every other delete.
 
+### Touch gestures (iOS / Android)
+
+| Gesture | Effect |
+| --- | --- |
+| One-finger drag on the chart | Scrolls through time (with momentum) |
+| Pinch | Zooms the time axis |
+| One-finger drag along the time (x) axis | Zooms the time axis: drag right to show more bars, left to show fewer |
+| One-finger drag on the price (y) axis | Zooms the price axis |
+| One-finger **double tap** on the chart or price axis | Zooms the price axis in one step around the tapped price |
+| One-finger **double tap, then drag** up/down | Zooms the price axis continuously: up zooms in, down zooms out (the same direction as the price-axis drag) |
+| Long press | Shows the crosshair |
+
+Once the view has moved away from its default, a round **Reset view** button
+appears just above the time axis. It is shown even when `showUI: false`, so a
+bare chart with no toolbar always has a way back. No configuration is needed.
+
 ### Value tooltip on long press
 
 ```ts
@@ -2337,6 +2353,13 @@ Three consequences worth knowing:
   different number of elements.
 - **Market price still comes off the raw feed.** Trade levels and P&L price
   against the real last close, never a brick top.
+- **Live ticks move the element count both ways.** The forming bar completes a
+  brick, line or column on one tick and takes it back on the next. The view
+  keeps tracking the live edge either way — same width, same room past the
+  last element — and a view scrolled into history stays put. Box and reversal
+  sizes are measured over **closed** bars, so a tick never re-grids the series;
+  an ATR box changes once per completed bar. (Before 1.4.0-beta.4 the view only
+  ever moved forward, so these types went blank after a while on a live feed.)
 
 ### Parameters
 
@@ -2362,12 +2385,12 @@ Renko leaves Kagi and P&F alone.
 
 | `BoxSizeMode` | Meaning |
 | --- | --- |
-| `{ kind: 'atr', length }` | Wilder ATR over the last `length` bars. Default `14`. |
+| `{ kind: 'atr', length }` | Wilder ATR over the last `length` closed bars (the forming bar is excluded). Default `14`. |
 | `{ kind: 'fixed', size }` | A fixed price distance. |
-| `{ kind: 'percent', percent }` | A percentage of the latest close. |
+| `{ kind: 'percent', percent }` | A percentage of the last closed bar's close. |
 
-When a box cannot be sized — fewer than `length + 1` bars for the ATR, or a
-non-positive size — the transform returns **no elements** rather than guessing. A
+When a box cannot be sized — fewer than `length + 1` closed bars for the ATR, or
+a non-positive size — the transform returns **no elements** rather than guessing. A
 wrong box size does not look wrong; it looks like a different market.
 
 ### The rules each type implements

package/dist/index.cjs

@@ -159,6 +159,28 @@ var DataStore = class {
   }
 };
 
+// src/core/viewportSync.ts
+function maxViewportStart(total, width) {
+  return Math.max(0, total - Math.floor(width / 2));
+}
+function syncViewportToElementCount(viewport, before, after) {
+  if (after === before || after <= 0) return viewport;
+  const width = viewport.endIndex - viewport.startIndex;
+  if (viewport.endIndex >= before) {
+    const slack = viewport.endIndex - before;
+    const endIndex = after + slack;
+    return { ...viewport, startIndex: endIndex - width, endIndex };
+  }
+  return clampViewportToData(viewport, after);
+}
+function clampViewportToData(viewport, total) {
+  if (total <= 0) return viewport;
+  const width = viewport.endIndex - viewport.startIndex;
+  const maxStart = maxViewportStart(total, width);
+  if (viewport.startIndex <= maxStart) return viewport;
+  return { ...viewport, startIndex: maxStart, endIndex: maxStart + width };
+}
+
 // src/core/ScaleManager.ts
 var _ScaleManager = class _ScaleManager {
   // ── X axis: bar index → canvas pixel ──────────────────────────────────────
@@ -15725,41 +15747,54 @@ var TrendAngle = class {
   onPointsEdited() {
     this.pendingMeasure = true;
   }
+  /** Whether the angle is (re)measured from the points rather than applied to them. */
+  get measuring() {
+    return this.angle === void 0 || this.pendingMeasure || !this.complete;
+  }
   /**
-   * Applies the angle rule and returns the pixel geometry to draw.
+   * The pixel geometry of the line on the given scales — a pure projection
+   * of the stored points, with no side effects, shared by rendering and
+   * hit-testing so a tap lands on what was drawn.
    *
    * - no stored angle, the drawing is still being placed, or the user has
-   *   just moved a point: measure the angle from the current pixels;
-   * - otherwise the points only moved because the scale or the data did:
-   *   keep the angle and move the second point onto the line, so
-   *   hit-testing, handles and persistence agree with what is drawn. Its
-   *   length is whatever the stored point projects to on this screen.
+   *   just moved a point: the line joins the points as they are, and
+   *   `measured` is the angle that run makes on this screen;
+   * - otherwise the line leaves the first point at the stored angle and
+   *   runs as far as the second point projects on this screen.
    */
-  resolve(scale, viewport, priceRange, chartW, chartH) {
+  geometry(scale, viewport, priceRange, chartW, chartH) {
     const [p1, p2] = this.points;
     const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
     const y1 = scale.yToPixel(p1.price, priceRange, chartH);
     const px2 = scale.xToPixel(p2.barIndex, viewport, chartW);
     const py2 = scale.yToPixel(p2.price, priceRange, chartH);
     const measured = Math.atan2(-(py2 - y1), px2 - x1) * 180 / Math.PI;
-    if (this.angle === void 0 || this.pendingMeasure || !this.complete) {
-      if (Number.isFinite(measured) && chartW > 0 && chartH > 0) {
-        this.angle = measured;
-        this.pendingMeasure = false;
-      }
-      return { x1, y1, x2: px2, y2: py2, angleDeg: this.angle ?? measured };
+    if (this.measuring || this.angle === void 0) {
+      return { x1, y1, x2: px2, y2: py2, angleDeg: this.angle ?? measured, measured };
     }
     const len = Math.hypot(px2 - x1, py2 - y1);
     const rad = this.angle * Math.PI / 180;
     const x22 = x1 + len * Math.cos(rad);
     const y22 = y1 - len * Math.sin(rad);
-    if (Number.isFinite(x22) && Number.isFinite(y22) && (Math.abs(x22 - px2) > 0.01 || Math.abs(y22 - py2) > 0.01)) {
-      this.points[1] = {
-        barIndex: scale.pixelToBarIndex(x22, viewport, chartW),
-        price: scale.pixelToPrice(y22, priceRange, chartH)
-      };
+    if (!Number.isFinite(x22) || !Number.isFinite(y22)) {
+      return { x1, y1, x2: px2, y2: py2, angleDeg: this.angle, measured };
+    }
+    return { x1, y1, x2: x22, y2: y22, angleDeg: this.angle, measured };
+  }
+  /**
+   * The geometry to draw, recording the angle when it is due to be measured.
+   * The stored points are left exactly as the user placed them.
+   */
+  resolve(scale, viewport, priceRange, chartW, chartH) {
+    const g = this.geometry(scale, viewport, priceRange, chartW, chartH);
+    if (this.measuring) {
+      if (Number.isFinite(g.measured) && chartW > 0 && chartH > 0) {
+        this.angle = g.measured;
+        this.pendingMeasure = false;
+      }
+      return { x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2, angleDeg: this.angle ?? g.measured };
     }
-    return { x1, y1, x2: x22, y2: y22, angleDeg: this.angle };
+    return g;
   }
   render(ctx, scale, viewport, priceRange, chartW, chartH, isSelected, _pricePrecision, theme) {
     if (this.points.length < 2) return;
@@ -15803,18 +15838,15 @@ var TrendAngle = class {
   }
   hitTest(x, y, scale, viewport, priceRange, chartW, chartH) {
     if (this.points.length < 2) return false;
-    const [p1, p2] = this.points;
-    const x1 = scale.xToPixel(p1.barIndex, viewport, chartW);
-    const y1 = scale.yToPixel(p1.price, priceRange, chartH);
-    const x22 = scale.xToPixel(p2.barIndex, viewport, chartW);
-    const y22 = scale.yToPixel(p2.price, priceRange, chartH);
+    const { x1, y1, x2: x22, y2: y22 } = this.geometry(scale, viewport, priceRange, chartW, chartH);
     return pointToSegmentDist3(x, y, x1, y1, x22, y22) <= HIT_TOLERANCE24;
   }
   getHandle(x, y, scale, viewport, priceRange, chartW, chartH) {
     if (this.points.length < 2) return null;
+    const { x1, y1, x2: x22, y2: y22 } = this.geometry(scale, viewport, priceRange, chartW, chartH);
     const pts = [
-      { px: scale.xToPixel(this.points[0].barIndex, viewport, chartW), py: scale.yToPixel(this.points[0].price, priceRange, chartH) },
-      { px: scale.xToPixel(this.points[1].barIndex, viewport, chartW), py: scale.yToPixel(this.points[1].price, priceRange, chartH) }
+      { px: x1, py: y1 },
+      { px: x22, py: y22 }
     ];
     for (let i = 0; i < pts.length; i++) {
       if (Math.hypot(x - pts[i].px, y - pts[i].py) <= HIT_TOLERANCE24 + 2) {
@@ -27448,15 +27480,19 @@ function resolveBoxSize(bars, mode) {
     case "fixed":
       return mode.size > 0 ? mode.size : null;
     case "percent": {
-      const last = bars[bars.length - 1];
+      const closed = closedBars(bars);
+      const last = closed[closed.length - 1];
       if (!last || mode.percent <= 0) return null;
       const size = last.close * mode.percent / 100;
       return size > 0 ? size : null;
     }
     case "atr":
-      return atrValue(bars, mode.length);
+      return atrValue(closedBars(bars), mode.length);
   }
 }
+function closedBars(bars) {
+  return bars.length > 1 ? bars.slice(0, -1) : bars;
+}
 function enforceIncreasingTimes(bars) {
   for (let i = 1; i < bars.length; i++) {
     const prev = bars[i - 1];
@@ -37044,6 +37080,11 @@ function initialVisibleBars(mobileBarDivisor = 2, forceApply = false, defaultBar
 }
 var LOOKAHEAD = 4;
 var LONG_PRESS_CANCEL_ARM_MS = 300;
+var DOUBLE_TAP_MS = 300;
+var DOUBLE_TAP_SLOP_PX = 30;
+var TAP_MAX_MS = 250;
+var TAP_MAX_MOVE_PX = 10;
+var DOUBLE_TAP_ZOOM_STEP = 0.7;
 function lastIndexAtOrBefore(bars, time) {
   let lo = 0, hi = bars.length - 1, ans = -1;
   while (lo <= hi) {
@@ -37346,6 +37387,16 @@ var _ChartEngine = class _ChartEngine {
      */
     this._viewportPersistTimer = null;
     this.axisDrag = null;
+    /**
+     * One-finger double-tap zoom on the price scale (the TradingView app's
+     * gesture). Second tap down arms it; dragging up/down zooms Y continuously,
+     * and lifting without a drag steps one zoom-in around the tapped price.
+     */
+    this.tapZoom = null;
+    /** Where and when the last quick one-finger tap ended — the first half of a double tap. */
+    this._lastTap = null;
+    /** Down position/time of the current one-finger touch, to tell a tap from a drag. */
+    this._touchDown = null;
     /** Per-instance sub-pane Y-scale factors, keyed by ActiveIndicatorState.instanceId. */
     this.subPaneScaleFactors = /* @__PURE__ */ new Map();
     this._mobileCrosshairActive = false;
@@ -37963,6 +38014,16 @@ var _ChartEngine = class _ChartEngine {
       const y = touch.clientY - rect.top;
       const { chartW, priceH } = this.getChartLayout();
       const priceRange = this.getScaledPriceRange(this.viewport);
+      const now = performance.now();
+      const lastTap = this._lastTap;
+      this._lastTap = null;
+      this._touchDown = null;
+      if (lastTap && now - lastTap.at < DOUBLE_TAP_MS && Math.hypot(x - lastTap.x, y - lastTap.y) < DOUBLE_TAP_SLOP_PX && y < priceH && !this._mobileCrosshairActive) {
+        e.preventDefault();
+        this.panHandler.cancel();
+        this.startTapZoom(y, priceH);
+        return;
+      }
       const axisTapHit = hitTestAxisTagCluster(x, y, this.axisTagClusterAreas);
       if (axisTapHit) {
         e.preventDefault();
@@ -37979,6 +38040,7 @@ var _ChartEngine = class _ChartEngine {
         e.preventDefault();
         if (y <= priceH) {
           this.axisDrag = { axis: "price", startPos: y, startSize: this.priceScaleFactor };
+          this._touchDown = { x, y, at: now };
         } else {
           const subPaneStates = this.activeIndicators.filter(
             (s) => s.indicator.pane === "sub"
@@ -38161,6 +38223,7 @@ var _ChartEngine = class _ChartEngine {
           }
         }
       }
+      this._touchDown = { x, y, at: now };
       this.drawingManager.selectDrawing(null);
       this.hideMobileDrawingFlyout();
       if (this.expandedClusters.size > 0) {
@@ -38198,6 +38261,11 @@ var _ChartEngine = class _ChartEngine {
       const point = this.touchToDrawingPoint(e.touches[0]);
       const tp = this.touchToPixels(e.touches[0]);
       this._lastDrawingTouchPoint = point;
+      if (this.tapZoom) {
+        e.preventDefault();
+        this.moveTapZoom(tp.y);
+        return;
+      }
       if (this.axisDrag) {
         e.preventDefault();
         const touch = e.touches[0];
@@ -38230,6 +38298,7 @@ var _ChartEngine = class _ChartEngine {
             startIndex: newStart,
             endIndex: newStart + newVisible
           };
+          this._targetViewport = { ...this.viewport };
         }
         this.scheduleRender();
         return;
@@ -38373,6 +38442,9 @@ var _ChartEngine = class _ChartEngine {
      * back to its start; an in-progress price drag is also cancelled defensively.
      */
     this.onDrawingTouchCancel = (_e) => {
+      this._touchDown = null;
+      this._lastTap = null;
+      if (this.tapZoom) this.endTapZoom();
       if (this._longPressTimer !== null) {
         clearTimeout(this._longPressTimer);
         this._longPressTimer = null;
@@ -38406,6 +38478,22 @@ var _ChartEngine = class _ChartEngine {
         this._longPressTimer = null;
         this._longPressPoint = null;
       }
+      if (this.tapZoom) {
+        this.endTapZoom();
+        return;
+      }
+      const down = this._touchDown;
+      this._touchDown = null;
+      const lifted = _e.changedTouches[0];
+      if (down && lifted && _e.touches.length === 0) {
+        const rect = this._cachedDrawRect ?? this.drawCanvas.getBoundingClientRect();
+        const ux = lifted.clientX - rect.left;
+        const uy = lifted.clientY - rect.top;
+        const now = performance.now();
+        if (now - down.at < TAP_MAX_MS && Math.hypot(ux - down.x, uy - down.y) < TAP_MAX_MOVE_PX) {
+          this._lastTap = { x: down.x, y: down.y, at: now };
+        }
+      }
       if (this._pendingTradeDrag) {
         const { level } = this._pendingTradeDrag;
         this._pendingTradeDrag = null;
@@ -38805,7 +38893,7 @@ var _ChartEngine = class _ChartEngine {
         };
         all[all.length - 1] = updated;
         this.dataStore.invalidate();
-        this.followLiveEdge(before);
+        this.syncViewportToData(before);
       } else {
         const completedBar = last;
         const newBarTime = Math.floor(tick.time / intervalMs) * intervalMs;
@@ -38824,7 +38912,7 @@ var _ChartEngine = class _ChartEngine {
           );
         }
         const openingBar = all[all.length - 1];
-        this.followLiveEdge(before);
+        this.syncViewportToData(before);
         this.emitter.emit("newBar", { completedBar, openingBar, intervalMs });
         this.correctCompletedBar(completedBar.time, intervalMs);
         if (newBarTime > completedBar.time + intervalMs) {
@@ -39660,12 +39748,12 @@ var _ChartEngine = class _ChartEngine {
       this.applyScrollToEndBtnStyles();
       this.scrollToEndBtn.addEventListener("click", () => this.scrollToEnd());
       this.canvasWrap.appendChild(this.scrollToEndBtn);
-      this.resetViewBtn = document.createElement("button");
-      this.resetViewBtn.title = "Reset view";
-      this.applyResetViewBtnStyles();
-      this.resetViewBtn.addEventListener("click", () => this.resetView());
-      this.canvasWrap.appendChild(this.resetViewBtn);
     }
+    this.resetViewBtn = document.createElement("button");
+    this.resetViewBtn.title = "Reset view";
+    this.applyResetViewBtnStyles();
+    this.resetViewBtn.addEventListener("click", () => this.resetView());
+    this.canvasWrap.appendChild(this.resetViewBtn);
     this.tradeDragHandler = new TradeDragHandler();
     this.orderTimeDragHandler = new OrderLineTimeDragHandler();
     if (config.onLevelDragEnd) {
@@ -39939,7 +40027,7 @@ var _ChartEngine = class _ChartEngine {
       },
       () => this.dataStore.length,
       () => this.scheduleRender(),
-      () => this.drawingManager.getActiveTool() !== null || this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing() || this.separatorDrag !== null || this.axisDrag !== null || (this.tradeDragHandler?.active ?? false) || (this.orderTimeDragHandler?.active ?? false) || this._pendingTradeDrag !== null || this._mobileCrosshairActive,
+      () => this.drawingManager.getActiveTool() !== null || this.drawingManager.isDraggingDrawing() || this.drawingManager.isResizingDrawing() || this.separatorDrag !== null || this.axisDrag !== null || this.tapZoom !== null || (this.tradeDragHandler?.active ?? false) || (this.orderTimeDragHandler?.active ?? false) || this._pendingTradeDrag !== null || this._mobileCrosshairActive,
       (deltaY) => {
         if (this.priceScaleFactor === 1) return;
         const { priceH } = this.getChartLayout();
@@ -40224,6 +40312,12 @@ var _ChartEngine = class _ChartEngine {
       this.updateCompareRange();
       this.scheduleRender();
     }
+    const clamped = clampViewportToData(this._targetViewport, this.dataStore.length);
+    if (clamped !== this._targetViewport) {
+      this._targetViewport = clamped;
+      this.viewport = { ...clamped };
+      this.scheduleRender();
+    }
     this.isFetching = false;
     return this;
   }
@@ -40410,15 +40504,8 @@ var _ChartEngine = class _ChartEngine {
     const before = this.dataStore.length;
     this.dataStore.raw.push({ ...bar });
     this.dataStore.invalidate();
-    const grew = this.dataStore.length - before;
-    if (grew > 0 && this._targetViewport.endIndex >= before) {
-      this.viewport = {
-        ...this.viewport,
-        startIndex: this.viewport.startIndex + grew,
-        endIndex: this.viewport.endIndex + grew
-      };
-      this._targetViewport = { ...this.viewport };
-    }
+    this.syncViewportToData(before);
+    this.viewport = { ...this._targetViewport };
     r.time = bar.time;
     this.recomputeIndicators();
     this.updateReplayBar();
@@ -45136,6 +45223,10 @@ var _ChartEngine = class _ChartEngine {
   }
   render() {
     if (this._isDestroyed) return;
+    {
+      const clamped = clampViewportToData(this._targetViewport, this.dataStore.length);
+      if (clamped !== this._targetViewport) this._targetViewport = clamped;
+    }
     const { ctx, canvas, theme, viewport } = this;
     const dpr = window.devicePixelRatio || 1;
     const totalW = canvas.width;
@@ -45150,6 +45241,11 @@ var _ChartEngine = class _ChartEngine {
     const absBars = this.dataStore.getVisible(viewport);
     if (absBars.length === 0) {
       this.drawCtx.clearRect(0, 0, this.drawCanvas.width, this.drawCanvas.height);
+      const target = this._targetViewport;
+      if (!this._isPanning && (viewport.startIndex !== target.startIndex || viewport.endIndex !== target.endIndex)) {
+        this.viewport = { ...target };
+        this.scheduleRender();
+      }
       return;
     }
     let bars = absBars;
@@ -46595,20 +46691,31 @@ var _ChartEngine = class _ChartEngine {
     }, this.tickActivityMs);
   }
   /**
-   * Shifts the target viewport by however many displayed elements the last
-   * raw-bar mutation added, when the view was sitting at the live edge.
-   * `before` is `dataStore.length` captured before the mutation. Without a
-   * transform this is the old "+1 on a new bar" rule; with one it is the
-   * number of bricks / columns the tick completed.
+   * Re-aligns the view after a raw-bar mutation changed the number of
+   * displayed elements. `before` is `dataStore.length` captured before the
+   * mutation. The rule lives in `core/viewportSync.ts`: a view tracking the
+   * live edge keeps tracking it whether the count grew or shrank; a view
+   * scrolled into history is only clamped so it cannot sit past the data.
+   *
+   * The old rule shifted the view forward by the growth and did nothing on
+   * a shrink. A time-based series never shrinks, but under Renko / Line
+   * Break / Kagi / P&F the forming bar completes an element on one tick and
+   * takes it back on the next, so the view ratcheted ahead one element per
+   * oscillation until it sat past the data — a blank chart "after a while".
+   *
+   * Under a price transform the elements are rebuilt rather than shifted,
+   * so there is nothing for the per-frame lerp to animate between and the
+   * view snaps. A time-based series keeps its one-bar slide.
    */
-  followLiveEdge(before) {
-    const grew = this.dataStore.length - before;
-    if (grew <= 0 || this._targetViewport.endIndex < before) return;
-    this._targetViewport = {
-      ...this._targetViewport,
-      startIndex: this._targetViewport.startIndex + grew,
-      endIndex: this._targetViewport.endIndex + grew
-    };
+  syncViewportToData(before) {
+    const synced = syncViewportToElementCount(
+      this._targetViewport,
+      before,
+      this.dataStore.length
+    );
+    if (synced === this._targetViewport) return;
+    this._targetViewport = synced;
+    if (isPriceTransformSeries(this.series)) this.viewport = { ...synced };
   }
   /** Fetch bars that fall in a gap between the last historical bar and the first live bar.
    *  This happens when the system clock was behind feed time during the initial data load. */
@@ -46629,12 +46736,14 @@ var _ChartEngine = class _ChartEngine {
       const liveBar = all[all.length - 1];
       const before = this.dataStore.length;
       let insertCount = 0;
+      let replaceCount = 0;
       for (const bar of bars) {
         if (bar.time >= liveBar.time) continue;
         const existingIdx = all.findIndex((b) => b.time === bar.time);
         if (existingIdx !== -1) {
           all[existingIdx] = bar;
           this.dataStore.invalidate();
+          replaceCount++;
         } else {
           const insertAt = all.findIndex((b) => b.time > bar.time);
           all.splice(insertAt === -1 ? all.length - 1 : insertAt, 0, bar);
@@ -46642,13 +46751,8 @@ var _ChartEngine = class _ChartEngine {
           insertCount++;
         }
       }
-      const grew = this.dataStore.length - before;
-      if (insertCount > 0 && grew > 0) {
-        this.viewport = {
-          ...this.viewport,
-          startIndex: this.viewport.startIndex + grew,
-          endIndex: this.viewport.endIndex + grew
-        };
+      if (insertCount > 0 || replaceCount > 0) {
+        this.syncViewportToData(before);
         this.reanchorDrawingsByTimestamp();
         this.recomputeIndicators();
         this.scheduleRender();
@@ -46669,6 +46773,7 @@ var _ChartEngine = class _ChartEngine {
       if (bars.length === 0) return;
       const all = this.dataStore.raw;
       const liveBarIndex = all.length - 1;
+      const before = this.dataStore.length;
       let changed = false;
       for (const bar of bars) {
         const idx = all.findIndex((b) => b.time === bar.time);
@@ -46679,6 +46784,7 @@ var _ChartEngine = class _ChartEngine {
         }
       }
       if (changed) {
+        this.syncViewportToData(before);
         this.recomputeIndicators();
         this.scheduleRender();
       }
@@ -46708,8 +46814,10 @@ var _ChartEngine = class _ChartEngine {
     const all = this.dataStore.raw;
     const idx = all.findIndex((b) => b.time === barTime);
     if (idx === -1) return;
+    const before = this.dataStore.length;
     all[idx] = bar;
     this.dataStore.invalidate();
+    this.syncViewportToData(before);
     this.recomputeIndicators();
     this.scheduleRender();
   }
@@ -46830,6 +46938,55 @@ var _ChartEngine = class _ChartEngine {
     const all = this.dataStore.raw;
     return all[all.length - 1]?.close ?? 0;
   }
+  /**
+   * Arms a one-finger double-tap zoom at pane-local `y`. Locks the current
+   * auto-fit range as the manual base so the zoom is relative to what is on
+   * screen, and anchors on the tapped price so it stays under the finger.
+   */
+  startTapZoom(y, priceH) {
+    if (this._longPressTimer !== null) {
+      clearTimeout(this._longPressTimer);
+      this._longPressTimer = null;
+      this._longPressPoint = null;
+    }
+    const displayed = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
+    if (!this._lockedAutoFitBase) this._lockedAutoFitBase = { ...displayed };
+    const t = Math.max(0, Math.min(1, y / Math.max(1, priceH)));
+    this.tapZoom = {
+      startY: y,
+      startFactor: this.priceScaleFactor,
+      anchorPrice: displayed.max - t * (displayed.max - displayed.min),
+      moved: false
+    };
+  }
+  /** Sets the price-scale factor, keeping the tap-zoom anchor price at the same pixel. */
+  applyTapZoomFactor(factor) {
+    const tz = this.tapZoom;
+    const base = this._lockedAutoFitBase;
+    if (!tz || !base) return;
+    const clamped = Math.max(0.1, Math.min(10, factor));
+    const baseMid = (base.min + base.max) / 2;
+    const mid = baseMid + this.pricePanOffset;
+    const newMid = tz.anchorPrice + (mid - tz.anchorPrice) * (clamped / this.priceScaleFactor);
+    this.priceScaleFactor = clamped;
+    this.pricePanOffset = newMid - baseMid;
+    this.scheduleRender();
+  }
+  moveTapZoom(y) {
+    const tz = this.tapZoom;
+    if (!tz) return;
+    const dy = y - tz.startY;
+    if (!tz.moved && Math.abs(dy) < TAP_MAX_MOVE_PX) return;
+    tz.moved = true;
+    this.applyTapZoomFactor(tz.startFactor * Math.pow(1.01, dy));
+  }
+  endTapZoom() {
+    const tz = this.tapZoom;
+    if (!tz) return;
+    if (!tz.moved) this.applyTapZoomFactor(tz.startFactor * DOUBLE_TAP_ZOOM_STEP);
+    this.tapZoom = null;
+    this.scheduleViewportPersist();
+  }
   resetPriceAxis() {
     this.priceScaleFactor = 1;
     this.pricePanOffset = 0;