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

package/README.md

@@ -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

package/dist/index.cjs

@@ -37080,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) {
@@ -37382,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;
@@ -37999,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();
@@ -38015,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"
@@ -38197,6 +38223,7 @@ var _ChartEngine = class _ChartEngine {
           }
         }
       }
+      this._touchDown = { x, y, at: now };
       this.drawingManager.selectDrawing(null);
       this.hideMobileDrawingFlyout();
       if (this.expandedClusters.size > 0) {
@@ -38234,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];
@@ -38266,6 +38298,7 @@ var _ChartEngine = class _ChartEngine {
             startIndex: newStart,
             endIndex: newStart + newVisible
           };
+          this._targetViewport = { ...this.viewport };
         }
         this.scheduleRender();
         return;
@@ -38409,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;
@@ -38442,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;
@@ -39696,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) {
@@ -39975,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();
@@ -46886,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;