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

package/README.md

@@ -2272,9 +2272,10 @@ Two details worth knowing:
 | --- | --- |
 | 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 along the time (x) axis | Zooms the time axis the way TradingView does: the right edge (normally the latest bar) stays put, drag right to zoom in and left to zoom out. Zooming out stops when the oldest bar reaches the left edge, so the candles always fill the full width. The mouse drag on the time axis behaves the same way |
 | 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** on the chart | Zooms the price axis in one step around the tapped price |
+| One-finger **double tap** on the price (y) axis | Resets the view, the same as the Reset view button |
 | 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 |
 

package/dist/index.cjs

@@ -37085,6 +37085,9 @@ var DOUBLE_TAP_SLOP_PX = 30;
 var TAP_MAX_MS = 250;
 var TAP_MAX_MOVE_PX = 10;
 var DOUBLE_TAP_ZOOM_STEP = 0.7;
+var TIME_AXIS_DRAG_SPEED = 2.5;
+var MIN_VISIBLE_BARS_AXIS = 10;
+var MAX_VISIBLE_BARS_AXIS = 500;
 function lastIndexAtOrBefore(bars, time) {
   let lo = 0, hi = bars.length - 1, ans = -1;
   while (lo <= hi) {
@@ -37753,19 +37756,7 @@ var _ChartEngine = class _ChartEngine {
           );
           this.subPaneScaleFactors.set(this.axisDrag.instanceId, newFactor);
         } else {
-          const delta = x - this.axisDrag.startPos;
-          const newVisible = Math.max(
-            10,
-            Math.min(500, Math.round(this.axisDrag.startSize + delta * 0.5))
-          );
-          const mid = (this.viewport.startIndex + this.viewport.endIndex) / 2;
-          const newStart = Math.max(0, mid - newVisible / 2);
-          this.viewport = {
-            ...this.viewport,
-            startIndex: newStart,
-            endIndex: newStart + newVisible
-          };
-          this._targetViewport = { ...this.viewport };
+          this.applyTimeAxisDrag(x);
         }
         this.drawCanvas.style.cursor = this.axisDrag.axis === "time" ? "ew-resize" : "ns-resize";
         this.scheduleRender();
@@ -38021,7 +38012,13 @@ var _ChartEngine = class _ChartEngine {
       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);
+        this.axisDrag = null;
+        if (x >= chartW) {
+          this.resetView();
+          this.scheduleViewportPersist();
+        } else {
+          this.startTapZoom(y, priceH);
+        }
         return;
       }
       const axisTapHit = hitTestAxisTagCluster(x, y, this.axisTagClusterAreas);
@@ -38069,7 +38066,8 @@ var _ChartEngine = class _ChartEngine {
         this.axisDrag = {
           axis: "time",
           startPos: x,
-          startSize: this.viewport.endIndex - this.viewport.startIndex
+          startSize: this.viewport.endIndex - this.viewport.startIndex,
+          startEnd: this.viewport.endIndex
         };
         this.scheduleRender();
         return;
@@ -38286,19 +38284,7 @@ var _ChartEngine = class _ChartEngine {
           );
           this.subPaneScaleFactors.set(this.axisDrag.instanceId, newFactor);
         } else {
-          const delta = tx - this.axisDrag.startPos;
-          const newVisible = Math.max(
-            10,
-            Math.min(500, Math.round(this.axisDrag.startSize + delta * 0.5))
-          );
-          const mid = (this.viewport.startIndex + this.viewport.endIndex) / 2;
-          const newStart = Math.max(0, mid - newVisible / 2);
-          this.viewport = {
-            ...this.viewport,
-            startIndex: newStart,
-            endIndex: newStart + newVisible
-          };
-          this._targetViewport = { ...this.viewport };
+          this.applyTimeAxisDrag(tx);
         }
         this.scheduleRender();
         return;
@@ -38716,7 +38702,8 @@ var _ChartEngine = class _ChartEngine {
         this.axisDrag = {
           axis: "time",
           startPos: x,
-          startSize: this.viewport.endIndex - this.viewport.startIndex
+          startSize: this.viewport.endIndex - this.viewport.startIndex,
+          startEnd: this.viewport.endIndex
         };
         this.scheduleRender();
         return;
@@ -40306,6 +40293,7 @@ var _ChartEngine = class _ChartEngine {
         endIndex: this.viewport.endIndex + n
       };
       this._targetViewport = { ...this.viewport };
+      if (this.axisDrag?.startEnd !== void 0) this.axisDrag.startEnd += n;
       this.drawingManager.shiftBarIndices(n);
       this.reanchorDrawingsByTimestamp();
       this.recomputeIndicators();
@@ -46938,6 +46926,30 @@ var _ChartEngine = class _ChartEngine {
     const all = this.dataStore.raw;
     return all[all.length - 1]?.close ?? 0;
   }
+  /**
+   * Time-axis drag (mouse or touch), the way TradingView does it: the right
+   * edge — normally the latest bar — stays where it was, dragging right
+   * spreads the bars (zoom in) and left packs more in (zoom out). The scale is
+   * proportional to the drag, and zooming out stops once the oldest bar
+   * reaches the left edge, so the candles always fill the full width.
+   */
+  applyTimeAxisDrag(x) {
+    const drag = this.axisDrag;
+    if (!drag || drag.axis !== "time") return;
+    const { chartW } = this.getChartLayout();
+    const end = drag.startEnd ?? this.viewport.endIndex;
+    const delta = x - drag.startPos;
+    const wanted = drag.startSize * Math.exp(-delta / Math.max(1, chartW) * TIME_AXIS_DRAG_SPEED);
+    const maxVisible = Math.max(MIN_VISIBLE_BARS_AXIS, Math.min(MAX_VISIBLE_BARS_AXIS, end));
+    const newVisible = Math.max(MIN_VISIBLE_BARS_AXIS, Math.min(maxVisible, wanted));
+    this.viewport = {
+      ...this.viewport,
+      startIndex: end - newVisible,
+      endIndex: end
+    };
+    this._targetViewport = { ...this.viewport };
+    this.checkNeedMoreData();
+  }
   /**
    * 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