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

package/README.md

@@ -2266,6 +2266,23 @@ 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 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 | 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 |
+
+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

package/dist/index.cjs

@@ -37080,6 +37080,14 @@ 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;
+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) {
@@ -37382,6 +37390,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;
@@ -37738,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();
@@ -37999,6 +38005,22 @@ 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.axisDrag = null;
+        if (x >= chartW) {
+          this.resetView();
+          this.scheduleViewportPersist();
+        } else {
+          this.startTapZoom(y, priceH);
+        }
+        return;
+      }
       const axisTapHit = hitTestAxisTagCluster(x, y, this.axisTagClusterAreas);
       if (axisTapHit) {
         e.preventDefault();
@@ -38015,6 +38037,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"
@@ -38043,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;
@@ -38197,6 +38221,7 @@ var _ChartEngine = class _ChartEngine {
           }
         }
       }
+      this._touchDown = { x, y, at: now };
       this.drawingManager.selectDrawing(null);
       this.hideMobileDrawingFlyout();
       if (this.expandedClusters.size > 0) {
@@ -38234,6 +38259,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];
@@ -38254,18 +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.applyTimeAxisDrag(tx);
         }
         this.scheduleRender();
         return;
@@ -38409,6 +38428,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;
@@ -38442,6 +38464,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;
@@ -38664,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;
@@ -39696,12 +39735,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) {
@@ -39975,7 +40014,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();
@@ -40254,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();
@@ -46886,6 +46926,79 @@ 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
+   * 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;