@devexperts/dxcharts-lite 2.6.0 → 2.6.1

package/dist/chart/inputhandlers/hover-producer.component.d.ts

@@ -17,6 +17,7 @@ import { ScaleModel } from '../model/scale.model';
 import VisualCandle from '../model/visual-candle';
 import { CrossEvent, CrossEventProducerComponent } from './cross-event-producer.component';
 import { TimeZoneModel } from '../model/time-zone.model';
+import { MainCanvasTouchHandler } from './main-canvas-touch.handler';
 export interface BaseHover {
     readonly x: number;
     readonly y: number;
@@ -52,13 +53,14 @@ export declare class HoverProducerComponent extends ChartBaseElement {
     private canvasBoundsContainer;
     private paneManager;
     private timeZoneModel;
+    private mainCanvasTouchHandler;
     private formatterFactory;
     hoverSubject: BehaviorSubject<Hover | null>;
     get hover(): Hover | null;
-    private longTouchActivatedSubject;
+    longTouchActivatedSubject: BehaviorSubject<boolean>;
     private hoverProducerParts;
     xFormatter: DateTimeFormatter;
-    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number) => string);
+    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, mainCanvasTouchHandler: MainCanvasTouchHandler, formatterFactory: (format: string) => (timestamp: number) => string);
     /**
      * This method is responsible for activating the chart hover functionality. It subscribes to several observables to
      * update the hover when the chart is updated or when the user interacts with it. It also handles special behavior
@@ -89,7 +91,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
      * @returns {Hover | undefined} - The hover object or undefined if there are no candles in the chart model.
      * @todo Check if uuid is still useful here.
      */
-    private createHover;
+    createHover(x: number, y: number, uuid: string): Hover | undefined;
     /**
      * Creates a hover from a VisualCandle object and fires it.
      * @param {VisualCandle} candle - The VisualCandle object to create the hover from.

package/dist/chart/inputhandlers/hover-producer.component.js

@@ -11,6 +11,7 @@ import { ChartBaseElement } from '../model/chart-base-element';
 import { CompareSeriesHoverProducerPart } from '../model/compare-series-hover';
 import { recalculateXFormatter } from '../model/date-time.formatter';
 import { isMobile } from '../utils/device/browser.utils';
+import { checkChartIsMoving } from './main-canvas-touch.handler';
 /**
  * Produces the Hover event.
  * Hover is used for displaying values in legend and NOT related to displaying cross tool.
@@ -19,7 +20,7 @@ export class HoverProducerComponent extends ChartBaseElement {
     get hover() {
         return this.hoverSubject.getValue();
     }
-    constructor(crossEventProducer, scale, config, chartModel, canvasInputListener, canvasBoundsContainer, paneManager, timeZoneModel, formatterFactory) {
+    constructor(crossEventProducer, scale, config, chartModel, canvasInputListener, canvasBoundsContainer, paneManager, timeZoneModel, mainCanvasTouchHandler, formatterFactory) {
         super();
         this.crossEventProducer = crossEventProducer;
         this.scale = scale;
@@ -29,6 +30,7 @@ export class HoverProducerComponent extends ChartBaseElement {
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.paneManager = paneManager;
         this.timeZoneModel = timeZoneModel;
+        this.mainCanvasTouchHandler = mainCanvasTouchHandler;
         this.formatterFactory = formatterFactory;
         this.hoverSubject = new BehaviorSubject(null);
         this.longTouchActivatedSubject = new BehaviorSubject(false);
@@ -79,37 +81,86 @@ export class HoverProducerComponent extends ChartBaseElement {
             }
         }));
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.fireLastCross()));
+        this.addRxSubscription(merge(this.chartModel.candlesSetSubject, this.timeZoneModel.observeTimeZoneChanged()).subscribe(() => this.recalculateCrossToolXFormatter()));
+        //#region crosstool touch events, special handling for mobile
         this.addRxSubscription(this.canvasInputListener.observeTouchStart().subscribe(event => {
             var _a;
-            const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
-            const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
-            const candle = this.chartModel.candleFromX(x, true);
-            const paneId = ((_a = this.paneManager.getPaneIfHit({ x, y })) === null || _a === void 0 ? void 0 : _a.uuid) || '';
-            if (candle) {
-                this.createAndFireHover([x, y, paneId]);
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = true;
+            const { clientX, clientY } = event.touches[0];
+            // if common tap - fire hover
+            if (!this.longTouchActivatedSubject.getValue()) {
+                const paneId = ((_a = this.paneManager.getPaneIfHit({ x: clientX, y: clientY })) === null || _a === void 0 ? void 0 : _a.uuid) || '';
+                this.createAndFireHover([clientX, clientY, paneId]);
+            }
+            else {
+                // update crosstool placement coordinates
+                this.crossEventProducer.crossToolTouchInfo.temp = {
+                    x: clientX - this.canvasBoundsContainer.canvasOnPageLocation.x,
+                    y: clientY - this.canvasBoundsContainer.canvasOnPageLocation.y,
+                };
             }
         }));
-        // special handling for mobile
         // on long touch - disable panning and show cross tool
         const hitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         this.addRxSubscription(this.canvasInputListener.observeLongTouchStart(hitTest).subscribe(event => {
             var _a;
-            this.paneManager.chartPanComponent.deactivatePanHandlers();
+            this.crossEventProducer.crossToolHover = null;
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = false;
+            // don't lock chart and show crosshair if chart is being moved, crosstool is not enabled or we do pinch event
+            const longTouchCrosshairPredicate = this.mainCanvasTouchHandler.canvasTouchInfo.isMoving ||
+                this.chartModel.config.components.crossTool.type === 'none' ||
+                event.touches.length > 1;
+            if (longTouchCrosshairPredicate) {
+                return;
+            }
             this.longTouchActivatedSubject.next(true);
+            this.crossEventProducer.crossToolTouchInfo.isSet = false;
             const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
             const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
+            this.crossEventProducer.crossToolTouchInfo.fixed = {
+                x,
+                y,
+            };
             const paneId = ((_a = this.paneManager.getPaneIfHit({ x, y })) === null || _a === void 0 ? void 0 : _a.uuid) || '';
             this.createAndFireHover([x, y, paneId]);
             this.crossEventProducer.crossSubject.next([x, y, paneId]);
+            this.paneManager.chartPanComponent.setChartPanningOptions(false, false);
         }));
-        this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(() => {
-            this.paneManager.chartPanComponent.activateChartPanHandlers();
-            if (this.longTouchActivatedSubject.getValue()) {
+        this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(event => {
+            var _a, _b;
+            const { clientX, clientY } = event.changedTouches[0];
+            const { fixed, temp } = this.crossEventProducer.crossToolTouchInfo;
+            const x = clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
+            const y = clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
+            // common tap without moving, hide crosstool
+            if (this.crossEventProducer.crossToolTouchInfo.isCommonTap &&
+                !checkChartIsMoving(x, temp.x, y, temp.y)) {
+                this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
                 this.longTouchActivatedSubject.next(false);
                 this.crossEventProducer.fireCrossClose();
+                this.crossEventProducer.crossToolHover = null;
+            }
+            if (!this.crossEventProducer.crossToolTouchInfo.isSet) {
+                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+                this.crossEventProducer.crossToolTouchInfo.fixed = {
+                    x,
+                    y,
+                };
+                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+            }
+            else {
+                const pane = (_b = (_a = this.crossEventProducer.crossToolHover) === null || _a === void 0 ? void 0 : _a.paneId) !== null && _b !== void 0 ? _b : 'CHART';
+                const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(pane));
+                const paneYStart = paneBounds.y + 5;
+                const paneYEnd = paneBounds.y + paneBounds.height - 5;
+                const xDiff = x - temp.x;
+                const yDiff = y - temp.y;
+                const newX = fixed.x < 0 ? 0 : fixed.x > paneBounds.width ? paneBounds.width : (fixed.x += xDiff);
+                const newY = fixed.y < paneYStart ? paneYStart : fixed.y > paneYEnd ? paneYEnd : (fixed.y += yDiff);
+                this.crossEventProducer.crossToolTouchInfo.fixed = { x: newX, y: newY };
             }
         }));
-        this.addRxSubscription(merge(this.chartModel.candlesSetSubject, this.timeZoneModel.observeTimeZoneChanged()).subscribe(() => this.recalculateCrossToolXFormatter()));
+        //#endregion
     }
     /**
      * Recalculates the cross tool X formatter.
@@ -198,12 +249,15 @@ export class HoverProducerComponent extends ChartBaseElement {
      * @returns {void}
      */
     fireHover(hover) {
-        var _a;
+        var _a, _b;
         if (hover) {
             // special handling for mobile
-            // set active candle + show cross tool only when long tap
+            // set active candle + show cross tool only when crosstool is active
             if (isMobile() && this.config.components.crossTool.type !== 'none') {
-                const candle = (_a = hover.candleHover) === null || _a === void 0 ? void 0 : _a.visualCandle.candle;
+                const crossToolHover = this.crossEventProducer.crossToolHover;
+                const candle = crossToolHover
+                    ? (_a = crossToolHover.candleHover) === null || _a === void 0 ? void 0 : _a.visualCandle.candle
+                    : (_b = hover.candleHover) === null || _b === void 0 ? void 0 : _b.visualCandle.candle;
                 candle && this.chartModel.mainCandleSeries.setActiveCandle(candle);
             }
             this.hoverSubject.next(hover);

package/dist/chart/inputhandlers/main-canvas-touch.handler.d.ts

@@ -8,6 +8,8 @@ import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-lis
 import { ScaleModel } from '../model/scale.model';
 import { ChartAreaPanHandler } from '../components/chart/chart-area-pan.handler';
 import { HitBoundsTest } from '../canvas/canvas-bounds-container';
+import { Pixel } from '../model/scaling/viewport.model';
+export declare const PIXELS_FOR_MOVE = 2;
 /**
  * Handles chart touch events.
  */
@@ -18,6 +20,13 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
     private mainCanvasParent;
     private hitTest;
     private touchedCandleIndexes;
+    canvasTouchInfo: {
+        touchStart: {
+            x: Pixel;
+            y: Pixel;
+        };
+        isMoving?: boolean;
+    };
     constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element, hitTest: HitBoundsTest);
     /**
      * Activates canvas input listeners for touch start and touch move events.
@@ -56,3 +65,4 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
      */
     pinchHandler(candleIndexes: Array<number>, touchPositions: number[]): void;
 }
+export declare const checkChartIsMoving: (x1: Pixel, x2: Pixel, y1: Pixel, y2: Pixel, pixelsToMove?: Pixel) => boolean;

package/dist/chart/inputhandlers/main-canvas-touch.handler.js

@@ -4,6 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartBaseElement } from '../model/chart-base-element';
+export const PIXELS_FOR_MOVE = 2;
 /**
  * Handles chart touch events.
  */
@@ -17,6 +18,12 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         this.hitTest = hitTest;
         // 2 candles indexes touched by 2 fingers when pinching
         this.touchedCandleIndexes = [0, 0];
+        // stores the information about touch events
+        this.canvasTouchInfo = {
+            touchStart: { x: 0, y: 0 },
+            // uses touch start to determine if chart is being moved
+            isMoving: false,
+        };
     }
     /**
      * Activates canvas input listeners for touch start and touch move events.
@@ -34,6 +41,10 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     handleTouchStartEvent(e) {
+        const { clientX, clientY } = e.touches[0];
+        if (e.touches.length === 1) {
+            this.canvasTouchInfo.touchStart = { x: clientX, y: clientY };
+        }
         if (e.touches.length === 2) {
             this.chartAreaPanHandler.deactivate();
             // @ts-ignore
@@ -47,6 +58,11 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     handleTouchMoveEvent(e) {
+        const { clientX, clientY } = e.touches[0];
+        const { touchStart } = this.canvasTouchInfo;
+        if (e.touches.length === 1) {
+            this.canvasTouchInfo.isMoving = checkChartIsMoving(clientX, touchStart.x, clientY, touchStart.y);
+        }
         if (e.touches.length === 2) {
             this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
         }
@@ -56,6 +72,7 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     handleTouchEndEvent(e) {
+        this.canvasTouchInfo.isMoving = false;
         // zero touches means the user stopped resizing completely (both fingers are up)
         if (e.touches.length === 0) {
             this.chartAreaPanHandler.activate();
@@ -95,3 +112,4 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         this.scale.setXScale(first, last);
     }
 }
+export const checkChartIsMoving = (x1, x2, y1, y2, pixelsToMove = PIXELS_FOR_MOVE) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) > pixelsToMove;

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -200,10 +200,8 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             };
             this.addSubscription(subscribeListener(this.element, doubleTapListenerProducer, 'touchend'));
             // workaround to handle long touch start/end for iOS
-            const longTouchListeners = (e, delay = 700, pixelsForMoveReset = 3) => {
+            const longTouchListeners = (e, delay = 200) => {
                 e.preventDefault();
-                const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                let coords = { x: 0, y: 0 };
                 let longTouchStart = false;
                 let timerLongTouchStart = null;
                 // start timeout for long touch
@@ -213,11 +211,8 @@ class CanvasInputListenerComponent extends ChartBaseElement {
                 }, delay);
                 const touchMoveHandler = (e) => {
                     e.preventDefault();
-                    coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
                     // clear long touch timeout if move area is bigger than pixelsForMove
-                    if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
-                        pixelsForMoveReset ||
-                        e.touches.length > 1) {
+                    if (e.touches.length > 1) {
                         timerLongTouchStart && clearTimeout(timerLongTouchStart);
                     }
                 };

package/dist/chart/model/candle-series.model.js

@@ -123,7 +123,7 @@ export class CandleSeriesModel extends DataSeriesModel {
      * @returns {HighLowWithIndex} - An object containing the high-low values along with their corresponding indexes.
      */
     recalculateZippedHighLow() {
-        return (this.zippedHighLow = calculateCandlesHighLow(this.visualPoints.slice(this.dataIdxStart, this.dataIdxEnd)));
+        return (this.zippedHighLow = calculateCandlesHighLow(this.visualPoints.slice(this.dataIdxStart, this.dataIdxEnd + 1)));
     }
     /**
      * Updates the current price and the last price movement.