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

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 |
@@ -2337,6 +2337,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 +2369,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];
@@ -38805,7 +38841,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 +38860,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) {
@@ -40224,6 +40260,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 +40452,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 +45171,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 +45189,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 +46639,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 +46684,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 +46699,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 +46721,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 +46732,7 @@ var _ChartEngine = class _ChartEngine {
         }
       }
       if (changed) {
+        this.syncViewportToData(before);
         this.recomputeIndicators();
         this.scheduleRender();
       }
@@ -46708,8 +46762,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();
   }