@devexperts/dxcharts-lite 2.0.2 → 2.2.0

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.js

@@ -3,13 +3,13 @@
  * 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 { getPrimaryLabelTextColor } from '../label-color.functions';
+import { getPlainLabelTextColor, getPrimaryLabelTextColor } from '../label-color.functions';
 import { lastOf } from '../../../utils/array.utils';
 import { getLabelTextColorByBackgroundColor } from '../../../utils/canvas/canvas-text-functions.utils';
 export class LastCandleLabelsProvider {
-    constructor(chartModel, fullConfig, yAxisConfig, lastCandleLabelsByChartType, resolveLabelColorFn) {
+    constructor(chartModel, chartConfig, yAxisConfig, lastCandleLabelsByChartType, resolveLabelColorFn) {
         this.chartModel = chartModel;
-        this.fullConfig = fullConfig;
+        this.chartConfig = chartConfig;
         this.yAxisConfig = yAxisConfig;
         this.lastCandleLabelsByChartType = lastCandleLabelsByChartType;
         this.resolveLabelColorFn = resolveLabelColorFn;
@@ -20,36 +20,37 @@ export class LastCandleLabelsProvider {
      */
     getUnorderedLabels() {
         const collectedLabels = [];
-        const visible = this.yAxisConfig.labels.settings.lastPrice.mode !== 'none';
-        if (visible) {
-            // main candle series
-            const yAxisVisualLabel = this.getYAxisVisualLabel(this.chartModel.mainCandleSeries);
-            const mainCandleSeriesVisualLabel = yAxisVisualLabel
-                ? Object.assign(Object.assign({}, yAxisVisualLabel), this.getLabelDrawConfig(this.chartModel.mainCandleSeries, true)) : yAxisVisualLabel;
-            if (mainCandleSeriesVisualLabel) {
-                const mainCandleSeriesLabels = { labels: [mainCandleSeriesVisualLabel] };
-                const handler = this.lastCandleLabelsByChartType[this.fullConfig.components.chart.type];
-                handler === null || handler === void 0 ? void 0 : handler(mainCandleSeriesLabels, this.chartModel.mainCandleSeries);
-                collectedLabels.push(mainCandleSeriesLabels);
-            }
-            // compare candle series
-            this.chartModel.candleSeries.forEach((series, index) => {
-                if (index === 0) {
-                    return;
-                }
-                const yAxisVisualLabel = this.getYAxisVisualLabel(series);
-                const secondarySeriesVisualLabel = yAxisVisualLabel
-                    ? Object.assign(Object.assign({}, yAxisVisualLabel), this.getLabelDrawConfig(series, false)) : yAxisVisualLabel;
-                if (secondarySeriesVisualLabel) {
-                    const secondarySeriesLabel = {
-                        labels: [secondarySeriesVisualLabel],
-                    };
-                    const handler = this.lastCandleLabelsByChartType[series.config.type];
-                    handler === null || handler === void 0 ? void 0 : handler(secondarySeriesLabel, this.chartModel.mainCandleSeries);
-                    collectedLabels.push(secondarySeriesLabel);
-                }
-            });
+        const visible = this.yAxisConfig.labels.settings.lastPrice.mode !== 'none' && this.yAxisConfig.visible;
+        if (!visible) {
+            return collectedLabels;
+        }
+        // main candle series
+        const yAxisVisualLabel = this.getYAxisVisualLabel(this.chartModel.mainCandleSeries);
+        const mainCandleSeriesVisualLabel = yAxisVisualLabel
+            ? Object.assign(Object.assign({}, yAxisVisualLabel), this.getLabelDrawConfig(this.chartModel.mainCandleSeries, true)) : yAxisVisualLabel;
+        if (mainCandleSeriesVisualLabel) {
+            const mainCandleSeriesLabels = { labels: [mainCandleSeriesVisualLabel] };
+            const handler = this.lastCandleLabelsByChartType[this.chartConfig.components.chart.type];
+            handler === null || handler === void 0 ? void 0 : handler(mainCandleSeriesLabels, this.chartModel.mainCandleSeries);
+            collectedLabels.push(mainCandleSeriesLabels);
         }
+        // compare candle series
+        this.chartModel.candleSeries.forEach((series, index) => {
+            if (index === 0) {
+                return;
+            }
+            const yAxisVisualLabel = this.getYAxisVisualLabel(series);
+            const secondarySeriesVisualLabel = yAxisVisualLabel
+                ? Object.assign(Object.assign({}, yAxisVisualLabel), this.getLabelDrawConfig(series, false)) : yAxisVisualLabel;
+            if (secondarySeriesVisualLabel) {
+                const secondarySeriesLabel = {
+                    labels: [secondarySeriesVisualLabel],
+                };
+                const handler = this.lastCandleLabelsByChartType[series.config.type];
+                handler === null || handler === void 0 ? void 0 : handler(secondarySeriesLabel, this.chartModel.mainCandleSeries);
+                collectedLabels.push(secondarySeriesLabel);
+            }
+        });
         return collectedLabels;
     }
     /**
@@ -79,22 +80,39 @@ export class LastCandleLabelsProvider {
     /**
      * Returns the configuration object for drawing the label of the Y-axis.
      * @param {CandleSeriesModel} series - The series model for which the label configuration is to be returned.
-     * @param {boolean} primary - A boolean value indicating whether the label is primary or not.
+     * @param {boolean} primary - A boolean value indicating whether the label is for the main series or not.
      * @returns {YAxisLabelDrawConfig} - The configuration object for drawing the label of the Y-axis.
      */
     getLabelDrawConfig(series, primary) {
+        const appearanceType = this.yAxisConfig.labels.settings.lastPrice.type;
         const colors = series.colors.labels;
+        const { rectLabelTextColor = 'white', rectLabelInvertedTextColor = 'black' } = this.chartConfig.colors.yAxis;
         const getLabelBoxColor = this.resolveLabelColorFn(series.config.type);
-        const { rectLabelTextColor, rectLabelInvertedTextColor } = this.chartModel.config.colors.yAxis;
-        let boxColor = '#FFFFFF';
-        let textColor = '#FFFFFF';
-        if (colors) {
-            boxColor = getLabelBoxColor(series.lastPriceMovement, series.colors);
-            textColor = primary ? getPrimaryLabelTextColor(series.lastPriceMovement, colors) : rectLabelTextColor;
+        if (!colors) {
+            return {
+                bgColor: '#FFFFFF',
+                textColor: getLabelTextColorByBackgroundColor('#FFFFFF', '#000000', rectLabelInvertedTextColor),
+                rounded: true,
+            };
+        }
+        const boxColor = getLabelBoxColor(series.lastPriceMovement, series.colors);
+        // if the label is for the main candle series
+        if (primary) {
+            const textColor = getPrimaryLabelTextColor(series.lastPriceMovement, colors);
+            return {
+                bgColor: boxColor,
+                textColor: appearanceType === 'plain'
+                    ? getPlainLabelTextColor(this.chartConfig.colors, textColor, rectLabelInvertedTextColor, this.yAxisConfig)
+                    : getLabelTextColorByBackgroundColor(boxColor, textColor, rectLabelInvertedTextColor),
+                rounded: true,
+            };
         }
+        // if the label is for the secondary candle series
         return {
             bgColor: boxColor,
-            textColor: getLabelTextColorByBackgroundColor(boxColor, textColor, rectLabelInvertedTextColor),
+            textColor: appearanceType === 'plain'
+                ? getPlainLabelTextColor(this.chartConfig.colors, rectLabelTextColor, rectLabelInvertedTextColor, this.yAxisConfig)
+                : getLabelTextColorByBackgroundColor(boxColor, rectLabelTextColor, rectLabelInvertedTextColor),
             rounded: true,
         };
     }

package/dist/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.d.ts

@@ -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 { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
-import { FullChartColors } from '../../../chart.config';
+import { FullChartConfig } from '../../../chart.config';
 import { Drawer } from '../../../drawers/drawing-manager';
 import { CanvasModel } from '../../../model/canvas.model';
 import { PaneManager } from '../../pane/pane-manager.component';
@@ -13,9 +13,9 @@ export declare class YAxisPriceLabelsDrawer implements Drawer {
     private yAxisLabelsCanvasModel;
     private backgroundCanvasModel;
     private canvasBoundsContainer;
-    private yAxisColors;
+    private fullConfig;
     private paneManager;
-    constructor(yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, yAxisColors: FullChartColors['yAxis'], paneManager: PaneManager);
+    constructor(yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, fullConfig: FullChartConfig, paneManager: PaneManager);
     draw(): void;
     drawHighlightedBackgroundBetweenLabels(orderedLabels: LabelGroup[]): void;
     getCanvasIds(): Array<string>;

package/dist/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.js

@@ -7,28 +7,30 @@ import { CanvasElement, CHART_UUID, limitYToBounds, } from '../../../canvas/canv
 import { fillRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { drawLabel } from './price-label.drawer';
 export class YAxisPriceLabelsDrawer {
-    constructor(yAxisLabelsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, yAxisColors, paneManager) {
+    constructor(yAxisLabelsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, fullConfig, paneManager) {
         this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
         this.backgroundCanvasModel = backgroundCanvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
-        this.yAxisColors = yAxisColors;
+        this.fullConfig = fullConfig;
         this.paneManager = paneManager;
     }
     draw() {
         const ctx = this.yAxisLabelsCanvasModel.ctx;
         const backgroundCtx = this.backgroundCanvasModel.ctx;
         this.paneManager.yExtents.forEach(extent => {
-            const yAxisBounds = extent.getYAxisBounds();
-            const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
-            const orderedLabels = extent.yAxis.model.fancyLabelsModel.orderedLabels;
-            this.drawHighlightedBackgroundBetweenLabels(orderedLabels);
-            orderedLabels.forEach(l => {
-                var _a;
-                const bounds = (_a = l.bounds) !== null && _a !== void 0 ? _a : yAxisBounds;
-                l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.yAxisColors));
-            });
-            // TODO I added this as a simple mechanism to add custom labels, we need to review it
-            Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.yAxisColors));
+            if (extent.yAxis.state.visible) {
+                const yAxisBounds = extent.getYAxisBounds();
+                const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
+                const orderedLabels = extent.yAxis.model.fancyLabelsModel.orderedLabels;
+                this.drawHighlightedBackgroundBetweenLabels(orderedLabels);
+                orderedLabels.forEach(l => {
+                    var _a;
+                    const bounds = (_a = l.bounds) !== null && _a !== void 0 ? _a : yAxisBounds;
+                    l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors.yAxis));
+                });
+                // TODO I added this as a simple mechanism to add custom labels, we need to review it
+                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors.yAxis));
+            }
         });
     }
     // this is a very simple solution which matches 2 labels with same "subGroupId"

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

@@ -56,7 +56,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
         };
         // drag to Y-scale and double click to auto scale
         if (config.customScale) {
-            const dragPredicate = () => config.type !== 'percent';
+            const dragPredicate = () => config.type !== 'percent' && config.visible;
             const dragNDropYComponent = new DragNDropYComponent(hitTest, {
                 onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
                 onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),

package/dist/chart/components/y_axis/y-axis.component.d.ts

@@ -27,6 +27,7 @@ export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChar
  */
 export declare class YAxisComponent extends ChartBaseElement {
     private eventBus;
+    private config;
     private canvasModel;
     scale: ScaleModel;
     private canvasBoundsContainer;
@@ -111,7 +112,7 @@ export declare class YAxisComponent extends ChartBaseElement {
      */
     setYAxisAlign(align: YAxisAlign): void;
     /**
-     * Controls visibility of the y-axis
+     * Controls visibility of the y-axis (additionally disable/enable component)
      */
     setVisible(isVisible: boolean): void;
     /**

package/dist/chart/components/y_axis/y-axis.component.js

@@ -19,6 +19,7 @@ export class YAxisComponent extends ChartBaseElement {
     constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx) {
         super();
         this.eventBus = eventBus;
+        this.config = config;
         this.canvasModel = canvasModel;
         this.scale = scale;
         this.canvasBoundsContainer = canvasBoundsContainer;
@@ -166,11 +167,14 @@ export class YAxisComponent extends ChartBaseElement {
         this.eventBus.fireDraw();
     }
     /**
-     * Controls visibility of the y-axis
+     * Controls visibility of the y-axis (additionally disable/enable component)
      */
     setVisible(isVisible) {
         this.state.visible = isVisible;
-        this.eventBus.fireDraw();
+        this.config.components.yAxis.visible = isVisible;
+        isVisible ? this.enable() : this.disable();
+        this.model.fancyLabelsModel.updateLabels();
+        this.model.baseLabelsModel.updateLabels();
     }
     /**
      * If visible, when you can see the y-axis on the chart

package/dist/chart/drawers/ht-data-series.drawer.js

@@ -28,7 +28,7 @@ export class HTDataSeriesDrawer {
             const drawer = this.seriesDrawers[paintTool];
             if (drawer) {
                 const drawConfig = {
-                    singleColor: this.canvasModel.idToColor(series.id),
+                    singleColor: this.canvasModel.idToColor(series.htId),
                     forceBold: 7,
                 };
                 // +- 1 to correctly draw points which are partly inside bounds

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

@@ -3,7 +3,8 @@
  * 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 { BehaviorSubject, combineLatest, filter } from 'rxjs';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
 export class CrossEventProducerComponent extends ChartBaseElement {
     constructor(canvasInputListener, canvasBoundsContainer) {

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

@@ -55,7 +55,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
     private formatterFactory;
     hoverSubject: BehaviorSubject<Hover | null>;
     get hover(): Hover | null;
-    private longTouchActivated;
+    private longTouchActivatedSubject;
     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 | Date) => string);

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

@@ -30,7 +30,7 @@ export class HoverProducerComponent extends ChartBaseElement {
         this.timeZoneModel = timeZoneModel;
         this.formatterFactory = formatterFactory;
         this.hoverSubject = new BehaviorSubject(null);
-        this.longTouchActivated = false;
+        this.longTouchActivatedSubject = new BehaviorSubject(false);
         this.xFormatter = () => '';
         const candleHoverProducerPart = new CandleHoverProducerPart(this.chartModel);
         const compareSeriesHoverProducerPart = new CompareSeriesHoverProducerPart(this.chartModel);
@@ -74,7 +74,7 @@ export class HoverProducerComponent extends ChartBaseElement {
         }));
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.fireLastCross()));
         this.addRxSubscription(this.canvasInputListener.observeTouchStart().subscribe(event => {
-            const x = event.touches[0].clientX;
+            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);
             if (candle) {
@@ -84,17 +84,18 @@ export class HoverProducerComponent extends ChartBaseElement {
         // 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.observeLongTouch(hitTest).subscribe(event => {
+        this.addRxSubscription(this.canvasInputListener.observeLongTouchStart(hitTest).subscribe(event => {
             this.paneManager.chartPanComponent.deactivatePanHandlers();
-            this.longTouchActivated = true;
-            const x = event.touches[0].clientX;
+            this.longTouchActivatedSubject.next(true);
+            const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
             const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
             this.createAndFireHover([x, y, '']);
+            this.crossEventProducer.crossSubject.next([x, y, '']);
         }));
         this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(() => {
             this.paneManager.chartPanComponent.activateChartPanHandlers();
-            if (this.longTouchActivated) {
-                this.longTouchActivated = false;
+            if (this.longTouchActivatedSubject.getValue()) {
+                this.longTouchActivatedSubject.next(false);
                 this.crossEventProducer.fireCrossClose();
             }
         }));
@@ -195,7 +196,6 @@ export class HoverProducerComponent extends ChartBaseElement {
                 const candle = (_a = hover.candleHover) === null || _a === void 0 ? void 0 : _a.visualCandle.candle;
                 candle && this.chartModel.mainCandleSeries.setActiveCandle(candle);
             }
-            // const showCrossToolOverride = isMobile() ? this.longTouchActivated : showCrossTool;
             this.hoverSubject.next(hover);
         }
         else {

package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts

@@ -47,8 +47,9 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private touchMoveSubject;
     private touchEndSubject;
     private touchCancelSubject;
+    private longTouchStartSubject;
+    private longTouchEndSubject;
     private contextMenuSubject;
-    private longTouchSubject;
     private pinchSubject;
     private scrollGestureSubject;
     mouseLeavesCanvasSubject: Subject<boolean>;
@@ -85,9 +86,9 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private dragListener;
     private updateElementOffsetListener;
     private dragEndListener;
-    private clickHandler;
     /**
-     * Prevents text selection inside chart-core canvas. TODO Do we need it?
+     * TODO: Do we need it?
+     * Prevents text selection inside chart-core canvas.
      */
     private fixTextSelection;
     doActivate(): void;
@@ -300,11 +301,17 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      */
     observeContextMenu(hitBoundsTest?: HitBoundsTest): Observable<MouseEvent>;
     /**
-     * Returns an Observable that emits a TouchEvent when a long touch is detected on the current element.
+     * Returns an Observable that emits a TouchEvent when a long touch start is detected on the current element.
      * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
      * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
      */
-    observeLongTouch(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    observeLongTouchStart(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch end is detected on the current element.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
+     * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
+     */
+    observeLongTouchEnd(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

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

@@ -3,19 +3,13 @@
  * 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 { subscribeListener } from '../utils/dom.utils';
+import { MouseButton, leftMouseButtonListener, subscribeListener } from '../utils/dom.utils';
 import { merge, Subject } from 'rxjs';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
 import { EVENT_RESIZED } from '../events/events';
-import { deviceDetector } from '../utils/device/device-detector.utils';
 import { touchpadDetector } from '../utils/device/touchpad.utils';
-var MouseButton;
-(function (MouseButton) {
-    MouseButton[MouseButton["left"] = 0] = "left";
-    MouseButton[MouseButton["middle"] = 1] = "middle";
-    MouseButton[MouseButton["right"] = 2] = "right";
-})(MouseButton || (MouseButton = {}));
+import { deviceDetector } from '../utils/device/device-detector.utils';
 /**
  * Gathers user input on canvas element:
  * Chart update order should be following:
@@ -55,8 +49,9 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.touchMoveSubject = new Subject();
         this.touchEndSubject = new Subject();
         this.touchCancelSubject = new Subject();
+        this.longTouchStartSubject = new Subject();
+        this.longTouchEndSubject = new Subject();
         this.contextMenuSubject = new Subject();
-        this.longTouchSubject = new Subject();
         this.pinchSubject = new Subject();
         this.scrollGestureSubject = new Subject();
         this.mouseLeavesCanvasSubject = new Subject();
@@ -114,7 +109,6 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             this.xDragEndSubject.next();
             this.yDragEndSubject.next();
         };
-        this.clickHandler = () => this.clickSubject.next(this.currentPoint);
         this.updateCurrentPoints = (e) => {
             this.updateCurrentDocumentPoint(e);
             this.updateCurrentMousePoint(e);
@@ -155,7 +149,8 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.dragEndListener();
     }
     /**
-     * Prevents text selection inside chart-core canvas. TODO Do we need it?
+     * TODO: Do we need it?
+     * Prevents text selection inside chart-core canvas.
      */
     fixTextSelection() {
         const selectListener = (e) => {
@@ -185,59 +180,64 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             document.addEventListener(dragEndEvent, this.dragEndListener);
             this.addSubscription(document.removeEventListener.bind(document, dragEndEvent, this.dragEndListener));
         });
-        this.addSubscription(subscribeListener(this.element, this.clickHandler, 'click'));
-        const clickDocumentListener = (e) => {
-            this.clickDocumentSubject.next(e);
-        };
-        this.addSubscription(subscribeListener(document, clickDocumentListener, 'click'));
+        this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.clickSubject.next(this.currentPoint)), 'click'));
+        this.addSubscription(subscribeListener(document, leftMouseButtonListener(e => this.clickDocumentSubject.next(e)), 'click'));
         const device = deviceDetector();
         if (device === 'apple' || device === 'mobile') {
             // workaround to handle double taps for iOS
-            const doubleTapListenerProducer = () => {
-                let timeoutId = null;
-                return () => {
-                    if (timeoutId) {
-                        this.dbTapSubject.next(this.currentPoint);
-                        clearTimeout(timeoutId);
-                        timeoutId = null;
+            let dbTapTimeout = null;
+            const doubleTapListenerProducer = (e) => {
+                e.preventDefault();
+                if (dbTapTimeout) {
+                    this.dbTapSubject.next(this.currentPoint);
+                    clearTimeout(dbTapTimeout);
+                    dbTapTimeout = null;
+                }
+                else {
+                    dbTapTimeout = window.setTimeout(() => {
+                        dbTapTimeout = null;
+                    }, 250);
+                }
+            };
+            this.addSubscription(subscribeListener(this.element, doubleTapListenerProducer, 'touchend'));
+            // workaround to handle long touch start/end for iOS
+            const longTouchListeners = (e, delay = 700, pixelsForMoveReset = 3) => {
+                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
+                timerLongTouchStart = setTimeout(() => {
+                    longTouchStart = true;
+                    this.longTouchStartSubject.next(e);
+                }, 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) {
+                        timerLongTouchStart && clearTimeout(timerLongTouchStart);
                     }
-                    else {
-                        timeoutId = window.setTimeout(() => {
-                            timeoutId = null;
-                        }, 250);
+                };
+                const touchEndHandler = (e) => {
+                    e.preventDefault();
+                    timerLongTouchStart && clearTimeout(timerLongTouchStart);
+                    if (longTouchStart) {
+                        longTouchStart = false;
+                        this.longTouchEndSubject.next(e);
                     }
+                    this.element.removeEventListener('touchend', touchEndHandler);
+                    this.element.removeEventListener('touchmove', touchMoveHandler);
                 };
+                this.element.addEventListener('touchmove', touchMoveHandler);
+                this.element.addEventListener('touchend', touchEndHandler);
             };
-            const doubleTapListener = doubleTapListenerProducer();
-            this.addSubscription(subscribeListener(this.element, doubleTapListener, 'touchend'));
+            this.addSubscription(subscribeListener(this.element, (e) => longTouchListeners(e), 'touchstart'));
         }
-        const longTouchListener = (e, delay = 500, pixelsForMoveReset = 2) => {
-            e.preventDefault();
-            let timer = null;
-            const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-            let coords = { x: 0, y: 0 };
-            const touchMoveHandler = (e) => {
-                coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-                if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
-                    pixelsForMoveReset ||
-                    e.touches.length > 1) {
-                    touchEnd();
-                }
-            };
-            const touchEnd = () => {
-                if (timer) {
-                    clearTimeout(timer);
-                    timer = null;
-                }
-                this.element.removeEventListener('touchend', touchEnd);
-                this.element.removeEventListener('touchmove', touchMoveHandler);
-            };
-            timer = setTimeout(() => this.longTouchSubject.next(e), delay);
-            this.element.addEventListener('touchmove', touchMoveHandler, { passive: true });
-            this.element.addEventListener('touchend', touchEnd);
-        };
-        this.addSubscription(subscribeListener(this.element, (e) => longTouchListener(e), 'touchstart'));
-        this.addSubscription(subscribeListener(this.element, () => this.dbClickSubject.next(this.currentPoint), 'dblclick'));
+        this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.dbClickSubject.next(this.currentPoint)), 'dblclick'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchStartSubject.next(e), 'touchstart'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchMoveSubject.next(e), 'touchmove', true));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
@@ -260,9 +260,9 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             e.preventDefault(); // to disable the scroll over the document, if for example chart is used as widget
         }, 'wheel'));
         this.addSubscription(subscribeListener(this.element, (e) => this.contextMenuSubject.next(e), 'contextmenu'));
-        this.addSubscription(subscribeListener(this.element, () => this.mouseDownSubject.next(this.currentPoint), 'mousedown'));
-        this.addSubscription(subscribeListener(this.element, () => this.mouseUpSubject.next(this.currentPoint), 'mouseup'));
-        this.addSubscription(subscribeListener(document, () => this.mouseUpDocumentSubject.next(this.currentPoint), 'mouseup'));
+        this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.mouseDownSubject.next(this.currentPoint)), 'mousedown'));
+        this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.mouseUpSubject.next(this.currentPoint)), 'mouseup'));
+        this.addSubscription(subscribeListener(document, leftMouseButtonListener(() => this.mouseUpDocumentSubject.next(this.currentPoint)), 'mouseup'));
         this.addRxSubscription(this.eventBus.observe(EVENT_RESIZED).subscribe(() => {
             const bcr = this.element.getBoundingClientRect();
             this.canvasBounds.x = bcr.left;
@@ -624,12 +624,24 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         return this.contextMenuSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)), tap(p => p.preventDefault()));
     }
     /**
-     * Returns an Observable that emits a TouchEvent when a long touch is detected on the current element.
+     * Returns an Observable that emits a TouchEvent when a long touch start is detected on the current element.
      * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
      * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
      */
-    observeLongTouch(hitBoundsTest = () => true) {
-        return this.longTouchSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)), tap(p => p.preventDefault()));
+    observeLongTouchStart(hitBoundsTest = () => true) {
+        return this.longTouchStartSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch end is detected on the current element.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
+     * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
+     */
+    observeLongTouchEnd(hitBoundsTest = () => true) {
+        return this.longTouchEndSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
     /**
      * Returns the current point of the object.

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

@@ -34,7 +34,7 @@ export declare class CandleSeriesModel extends DataSeriesModel<Candle, VisualCan
     get instrument(): ChartInstrument;
     set instrument(instrument: ChartInstrument);
     meanCandleWidth: Unit;
-    constructor(extentComponent: YExtentComponent, id: number, eventBus: EventBus, scale: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors?: CandleSeriesColors);
+    constructor(extentComponent: YExtentComponent, id: string, htId: number, eventBus: EventBus, scale: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors?: CandleSeriesColors);
     /**
      * Recalculates data viewport indexes based on xStart and xEnd parameters or values from scaleModel.
      * Calls superclass method for calculation, recalculates zipped high/low data points, and fires draw event.

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

@@ -31,8 +31,8 @@ export class CandleSeriesModel extends DataSeriesModel {
         this._instrument = instrument;
         this.pricePrecisions = PriceIncrementsUtils.computePrecisions((_a = instrument.priceIncrements) !== null && _a !== void 0 ? _a : [0.01]);
     }
-    constructor(extentComponent, id, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors = DEFAULT_CANDLE_SERIES_CONFIG) {
-        super(extentComponent, id);
+    constructor(extentComponent, id, htId, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors = DEFAULT_CANDLE_SERIES_CONFIG) {
+        super(extentComponent, id, htId);
         this.eventBus = eventBus;
         this.candlesTransformersByChartType = candlesTransformersByChartType;
         this.candleWidthByChartType = candleWidthByChartType;

package/dist/chart/model/compare-series-hover.d.ts

@@ -8,7 +8,8 @@ import { BaseHover, HoverProducerPart } from '../inputhandlers/hover-producer.co
 export interface CompareSeriesHover {
     instrument: string;
     price: string;
-    id: number;
+    id: string;
+    htId: number;
 }
 export declare class CompareSeriesHoverProducerPart implements HoverProducerPart<CompareSeriesHover[]> {
     private chartModel;

package/dist/chart/model/compare-series-hover.js

@@ -23,6 +23,7 @@ export class CompareSeriesHoverProducerPart {
                 instrument: series.instrument.symbol,
                 price: priceToShow,
                 id: series.id,
+                htId: series.htId,
             };
         });
         return compareSeriesHover;