@devexperts/dxcharts-lite 2.5.8 → 2.6.1

package/dist/chart/components/x_axis/x-axis-time-labels.drawer.js

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { CanvasElement, X_AXIS_MOBILE_PADDING } from '../../canvas/canvas-bounds-container';
 import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 /**
  * This Drawer draws regular time labels for X Axis.
@@ -38,7 +38,7 @@ export class XAxisTimeLabelsDrawer {
             ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
             const color = this.config.colors.xAxis.labelTextColor;
             const labels = this.labelsProvider();
-            this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop);
+            this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop + X_AXIS_MOBILE_PADDING / 2);
             ctx.restore();
         }
     }

package/dist/chart/components/x_axis/x-axis.component.js

@@ -82,7 +82,7 @@ export class XAxisComponent extends ChartBaseElement {
             this.xAxisLabelsGenerator.recalculateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject
-            .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.timestamp) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.timestamp); }), filter(notEmpty))
+            .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.id) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.id); }), filter(notEmpty))
             .subscribe(x => { var _a, _b; return (_b = (_a = this.xAxisLabelsGenerator) === null || _a === void 0 ? void 0 : _a.updateLastLabel) === null || _b === void 0 ? void 0 : _b.call(_a, x); }));
     }
     /**

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -4,7 +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 { Subject } from 'rxjs';
-import { CanvasElement, DEFAULT_MIN_PANE_HEIGHT } from '../../canvas/canvas-bounds-container';
+import { CanvasElement, DEFAULT_MIN_PANE_HEIGHT, } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 // if you drag full Y height from top to bottom - you will have x3 zoom, and vice-versa
@@ -73,8 +73,8 @@ export class YAxisScaleHandler extends ChartBaseElement {
             // Continue redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
-        this.setDblTapCallback = (cb) => this.dblTapCallback = cb;
-        this.setDblClickCallback = (cb) => this.dblClickCallback = cb;
+        this.setDblTapCallback = (cb) => (this.dblTapCallback = cb);
+        this.setDblClickCallback = (cb) => (this.dblClickCallback = cb);
         this.dblClickCallback = () => scale.autoScale(true);
         this.dblTapCallback = () => scale.autoScale(true);
         // drag to Y-scale and double click to auto scale

package/dist/chart/drawers/drawing-manager.d.ts

@@ -6,7 +6,7 @@
 import EventBus from '../events/event-bus';
 import { ChartResizeHandler } from '../inputhandlers/chart-resize.handler';
 export declare const HIT_TEST_PREFIX = "HIT_TEST_";
-declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "UNDERLAY_VOLUMES_AREA", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DYNAMIC_OBJECTS", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
+declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DYNAMIC_OBJECTS", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
 export type DrawerType = typeof drawerTypes[number];
 /**
  * Manages the drawing process.

package/dist/chart/drawers/drawing-manager.js

@@ -18,7 +18,6 @@ const drawerTypes = [
     'OVER_SERIES_CLEAR',
     'HIT_TEST_DRAWINGS',
     'GRID',
-    'UNDERLAY_VOLUMES_AREA',
     'X_AXIS',
     'Y_AXIS',
     'HIGH_LOW',

package/dist/chart/inputhandlers/cross-event-producer.component.d.ts

@@ -8,15 +8,36 @@ import { CanvasBoundsContainer, HitBoundsTest, HitBoundsTestOptionsPartial } fro
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { Unsubscriber } from '../utils/function.utils';
+import { Pixel } from '../model/scaling/viewport.model';
+import { Hover } from './hover-producer.component';
 /**
  * [x, y, uuid - Unique identifier for the subscription]
  */
 export type CrossEvent = [number, number, string];
+interface CrossToolTouchInfo {
+    fixed: {
+        x: Pixel;
+        y: Pixel;
+    };
+    temp: {
+        x: Pixel;
+        y: Pixel;
+    };
+    isSet: boolean;
+    /**
+     * additional flag to determine ordinary and long taps
+     * crosstool shouldn't be hidden after longtouch event even if coordinates are the same
+     * becomes true after touchStart and false after longTouchStart
+     */
+    isCommonTap: boolean;
+}
 export declare class CrossEventProducerComponent extends ChartBaseElement {
     private canvasInputListener;
     private canvasBoundsContainer;
     panesSubscriptions: Partial<Record<string, Subscription>>;
     crossSubject: BehaviorSubject<CrossEvent | null>;
+    crossToolHover: Hover | null;
+    crossToolTouchInfo: CrossToolTouchInfo;
     constructor(canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer);
     protected doActivate(): void;
     /**
@@ -45,3 +66,4 @@ export declare class CrossEventProducerComponent extends ChartBaseElement {
      */
     subscribeMouseOverHT(uuid: string, hitTest: HitBoundsTest): Unsubscriber;
 }
+export {};

package/dist/chart/inputhandlers/cross-event-producer.component.js

@@ -6,6 +6,7 @@
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
+import { isMobile } from '../utils/device/browser.utils';
 export class CrossEventProducerComponent extends ChartBaseElement {
     constructor(canvasInputListener, canvasBoundsContainer) {
         super();
@@ -13,6 +14,14 @@ export class CrossEventProducerComponent extends ChartBaseElement {
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.panesSubscriptions = {};
         this.crossSubject = new BehaviorSubject(null);
+        // mobile specific crosstool hover and touch info
+        this.crossToolHover = null;
+        this.crossToolTouchInfo = {
+            fixed: { x: 0, y: 0 },
+            temp: { x: 0, y: 0 },
+            isSet: false,
+            isCommonTap: false,
+        };
     }
     doActivate() {
         super.doActivate();
@@ -62,7 +71,8 @@ export class CrossEventProducerComponent extends ChartBaseElement {
                 this.crossSubject.next(cross);
                 closeHoverFired = false;
             }
-            else {
+            // crosstool should be hidden if hovering nonpane only on desktop
+            if (!enter && !isMobile()) {
                 this.crossSubject.next(null);
                 closeHoverFired = true;
             }

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

@@ -4,12 +4,14 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { BehaviorSubject, merge } from 'rxjs';
+import { filter, switchMap } from 'rxjs/operators';
 import { CHART_UUID, CanvasElement } from '../canvas/canvas-bounds-container';
 import { CandleHoverProducerPart } from '../model/candle-hover';
 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.
@@ -18,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;
@@ -28,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);
@@ -50,8 +53,13 @@ export class HoverProducerComponent extends ChartBaseElement {
      */
     doActivate() {
         super.doActivate();
-        this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(() => {
-            // required for initial legend initialization, do not show cross tool
+        this.addRxSubscription(
+        // required for initial legend initialization, do not show cross tool
+        this.chartModel.candlesSetSubject
+            .pipe(
+        // check the scale is valid before doing candle-based hover event
+        switchMap(() => this.scale.initialViewportValidSubject.pipe(filter(Boolean))))
+            .subscribe(() => {
             const lastCandle = this.chartModel.getLastVisualCandle();
             lastCandle && this.createAndFireHoverFromCandle(lastCandle);
         }));
@@ -73,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.
@@ -192,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.

package/dist/chart/model/candle.model.d.ts

@@ -11,6 +11,7 @@ export declare const BASIC_CANDLE_WIDTH: Unit;
  * @doc-tags-name Candle
  */
 export interface Candle {
+    readonly id: string;
     readonly hi: number;
     readonly lo: number;
     readonly open: number;
@@ -22,6 +23,8 @@ export interface Candle {
     readonly impVolatility?: number;
     readonly vwap?: number;
 }
+export declare const defaultSortCandles: (candles: Candle[]) => Candle[];
+export declare const generateCandleId: (timestamp: number, hashValue: number | string) => string;
 /**
  * Provides the name of candle difference
  * @param {Number} open

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

@@ -3,9 +3,14 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+import { hashCode } from '../utils/string.utils';
 // Has no specific rule, just any number to use in units calculation.
 // 1 - because why not? Easy to debug.
 export const BASIC_CANDLE_WIDTH = 1;
+export const defaultSortCandles = (candles) => candles.slice().sort((a, b) => (a.timestamp === b.timestamp ? 0 : a.timestamp > b.timestamp ? 1 : -1));
+export const generateCandleId = (timestamp, hashValue) => {
+    return `${timestamp}_${hashCode(hashValue.toString())}`;
+};
 /**
  * Provides the name of candle difference
  * @param {Number} open
@@ -45,7 +50,7 @@ export function hollowDirection(open, close) {
  * @returns {Candle} A new Candle object with the same properties as the base object, with the option to modify the prices.
  */
 export function copyCandle(base, idx, pricesAsClose = false) {
-    const { expansion, impVolatility, vwap, volume, timestamp } = base;
+    const { id, expansion, impVolatility, vwap, volume, timestamp } = base;
     let hi = base.hi;
     let lo = base.lo;
     let open = base.open;
@@ -60,6 +65,7 @@ export function copyCandle(base, idx, pricesAsClose = false) {
         _idx = idx;
     }
     return {
+        id,
         hi,
         lo,
         open,

package/dist/chart/model/data-series.model.d.ts

@@ -11,7 +11,7 @@ import { DataSeriesView } from './data-series-view';
 import { DataSeriesConfig, DataSeriesPaintConfig, DataSeriesType } from './data-series.config';
 import { HighLowWithIndex, ScaleModel } from './scale.model';
 import { HighLowProvider } from './scaling/auto-scale.model';
-import { Index, Unit, Viewable } from './scaling/viewport.model';
+import { Index, Pixel, Unit, Viewable } from './scaling/viewport.model';
 /**
  * Properties are named in order to match VisualCandle interface
  */
@@ -22,11 +22,11 @@ export declare class VisualSeriesPoint {
     /**
      * returns y coordinate in pixels
      */
-    y(viewable: Viewable): Unit;
+    y(viewable: Viewable): Pixel;
     /**
      * returns x coordinate in pixels
      */
-    x(viewable: Viewable): Unit;
+    x(viewable: Viewable): Pixel;
     clone(): VisualSeriesPoint;
 }
 export interface DataSeriesPoint {

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

@@ -30,7 +30,7 @@ export class VisualSeriesPoint {
      * returns x coordinate in pixels
      */
     x(viewable) {
-        return floorToDPR(viewable.toX(this.centerUnit));
+        return viewable.toX(this.centerUnit);
     }
     clone() {
         return new VisualSeriesPoint(this.centerUnit, this.close);

package/dist/chart/model/scale.model.js

@@ -125,7 +125,7 @@ export class ScaleModel extends ViewportModel {
         }
     }
     zoomXTo(state, zoomIn, forceNoAnimation) {
-        const initialStateCopy = Object.assign({}, state);
+        const initialStateCopy = this.export();
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
         this.zoomReached = this.calculateZoomReached(constrainedState.zoomX, zoomIn);
         if (this.zoomReached.zoomIn || this.zoomReached.zoomOut) {

package/dist/chart/model/scaling/viewport.model.d.ts

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { ChartBaseElement } from '../chart-base-element';
 import { ViewportMovementAnimation } from '../../animation/types/viewport-movement-animation';
 import { Bounds } from '../bounds.model';
@@ -92,6 +92,7 @@ export declare abstract class ViewportModel extends ChartBaseElement implements
         start: number;
         end: number;
     }>;
+    initialViewportValidSubject: BehaviorSubject<boolean>;
     protected doActivate(): void;
     protected doDeactivate(): void;
     /**

package/dist/chart/model/scaling/viewport.model.js

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { distinctUntilChanged, map, share } from 'rxjs/operators';
 import { ChartBaseElement } from '../chart-base-element';
 import { keys } from '../../utils/object.utils';
@@ -50,10 +50,15 @@ export class ViewportModel extends ChartBaseElement {
             start: this.yStart,
             end: this.yEnd,
         })), distinctUntilChanged((p, c) => p.start === c.start && p.end === c.end), share());
+        this.initialViewportValidSubject = new BehaviorSubject(false);
     }
     //endregion
     doActivate() {
         super.doActivate();
+        this.addRxSubscription(this.changed.subscribe(() => {
+            !this.initialViewportValidSubject.getValue() &&
+                this.initialViewportValidSubject.next(this.isViewportValid());
+        }));
     }
     doDeactivate() {
         super.doDeactivate();

package/dist/chart/model/time-zone.model.js

@@ -87,9 +87,7 @@ export class TimeZoneModel {
             // In JS Date object is created with local tz offset,
             // so we have to subtract localOffset from current time
             return time => {
-                return new Date(time +
-                    getTimezoneOffset(timezone, time) +
-                    new Date(time).getTimezoneOffset() * timeMultiplier);
+                return new Date(time + getTimezoneOffset(timezone, time) + new Date(time).getTimezoneOffset() * timeMultiplier);
             };
         }
     }

package/dist/chart/utils/candles-generator-ts.utils.d.ts

@@ -32,6 +32,7 @@ export interface GenerateCandlesDataConfig {
  * @doc-tags tricky
  */
 export declare function generateCandlesDataTS(config?: GenerateCandlesDataConfig): {
+    id: string;
     hi: number;
     lo: number;
     open: any;

package/dist/chart/utils/candles-generator.utils.d.ts

@@ -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/.
  */
 export default function generateCandlesData(config: any): {
+    id: string;
     hi: number;
     lo: number;
     open: any;