@devexperts/dxcharts-lite 2.0.1 → 2.1.0

package/dist/chart/components/y_axis/price_labels/data-series-y-axis-labels.provider.js

@@ -21,32 +21,34 @@ export class DataSeriesYAxisLabelsProvider {
      */
     getUnorderedLabels() {
         const visible = this.config.visible;
-        if (visible) {
-            const getLastPointForLabel = this.config.labelLastValue === 'series'
-                ? this.series.getLastDataSeriesPoint
-                : this.series.getLastVisualSeriesPoint;
-            const bounds = this.yAxisBoundsProvider();
-            const mode = this.config.labelMode;
-            const appearanceType = this.config.labelAppearanceType;
-            const lastPoint = getLastPointForLabel();
-            if (lastPoint !== undefined) {
-                const lastPointY = this.series.view.toY(lastPoint.close);
-                if (isFinite(lastPointY)) {
-                    const label = this.series.valueFormatter(lastPoint.close);
-                    const drawConfig = this.getLabelDrawConfig();
-                    return [
-                        {
-                            labels: [
-                                Object.assign({ y: lastPointY, description: this.series.name, mode, labelType: appearanceType, labelText: label }, drawConfig),
-                            ],
-                            axisState: this.axisState,
-                            bounds,
-                        },
-                    ];
-                }
-            }
+        if (!visible) {
+            return [];
         }
-        return [];
+        const getLastPointForLabel = this.config.labelLastValue === 'series'
+            ? this.series.getLastDataSeriesPoint
+            : this.series.getLastVisualSeriesPoint;
+        const bounds = this.yAxisBoundsProvider();
+        const mode = this.config.labelMode;
+        const appearanceType = this.config.labelAppearanceType;
+        const lastPoint = getLastPointForLabel();
+        if (lastPoint === undefined) {
+            return [];
+        }
+        const lastPointY = this.series.view.toY(lastPoint.close);
+        if (!isFinite(lastPointY)) {
+            return [];
+        }
+        const label = this.series.valueFormatter(lastPoint.close);
+        const drawConfig = this.getLabelDrawConfig();
+        return [
+            {
+                labels: [
+                    Object.assign({ y: lastPointY, description: this.series.name, mode, labelType: appearanceType, labelText: label }, drawConfig),
+                ],
+                axisState: this.axisState,
+                bounds,
+            },
+        ];
     }
     /**
      * Retrieves the `config` object from the `series` object and then retrieves the `paintConfig` object from the `config` object.

package/dist/chart/components/y_axis/price_labels/labels-positions-calculator.js

@@ -21,23 +21,34 @@ export function calcLabelsYCoordinates(points, labelHeight) {
         .filter(notEmpty)
         .sort(sortLabels); // sort labels in ascending order, top -> down
     const newCoordinates = new Array(formattedCoordinates.length);
-    formattedCoordinates.forEach((current, idx) => {
-        if (current === null) {
-            return;
+    const lowestWeight = formattedCoordinates.reduce((acc, curr) => Math.min(acc, curr.labelWeight), Number.POSITIVE_INFINITY);
+    const lowestWeightIndex = formattedCoordinates.findIndex(x => x.labelWeight === lowestWeight);
+    for (let i = lowestWeightIndex; i >= 0; i--) {
+        const current = formattedCoordinates[i];
+        const prev = formattedCoordinates[i - 1];
+        if (!current) {
+            continue;
+        }
+        if (prev && prev.bottom > current.top) {
+            const paddingAdjust = Math.abs(prev.labelWeight - current.labelWeight) === 1 ? 2 : 0;
+            prev.bottom = current.top - paddingAdjust;
+            prev.top = prev.bottom - labelHeight;
+        }
+        newCoordinates[current.actualIndex] = (current.top + current.bottom) / 2;
+    }
+    for (let i = lowestWeightIndex; i < formattedCoordinates.length; i++) {
+        const current = formattedCoordinates[i];
+        const next = formattedCoordinates[i + 1];
+        if (!current) {
+            break;
         }
-        const next = formattedCoordinates[idx + 1];
         if (next && next.top < current.bottom) {
-            /**
-             * adjust padding if weight diff is 1, used for countdown label padding
-             * @doc-tags tricky
-             */
-            const paddingAdjust = next.labelWeight - current.labelWeight === 1 ? 2 : 0;
-            const delta = current.bottom - next.top + paddingAdjust;
-            next.top += delta;
-            next.bottom += delta;
+            const paddingAdjust = Math.abs(next.labelWeight - current.labelWeight) === 1 ? 2 : 0;
+            next.top = current.bottom + paddingAdjust;
+            next.bottom = next.top + labelHeight;
         }
         newCoordinates[current.actualIndex] = (current.top + current.bottom) / 2;
-    });
+    }
     return newCoordinates;
 }
 const toLabel = (point, index, labelHeight) => point

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

@@ -10,11 +10,11 @@ import { LabelGroup, YAxisLabelsProvider } from './y-axis-labels.model';
 import { LabelColorResolver } from '../y-axis.component';
 export declare class LastCandleLabelsProvider implements YAxisLabelsProvider {
     private chartModel;
-    private fullConfig;
+    private chartConfig;
     private yAxisConfig;
     private lastCandleLabelsByChartType;
     private resolveLabelColorFn;
-    constructor(chartModel: ChartModel, fullConfig: FullChartConfig, yAxisConfig: YAxisConfig, lastCandleLabelsByChartType: Partial<Record<DataSeriesType, LastCandleLabelHandler>>, resolveLabelColorFn: (chartType: DataSeriesType) => LabelColorResolver);
+    constructor(chartModel: ChartModel, chartConfig: FullChartConfig, yAxisConfig: YAxisConfig, lastCandleLabelsByChartType: Partial<Record<DataSeriesType, LastCandleLabelHandler>>, resolveLabelColorFn: (chartType: DataSeriesType) => LabelColorResolver);
     /**
      * Returns an array of LabelGroup objects that contain the labels for the yAxis of the chart.
      * @returns {LabelGroup[]} An array of LabelGroup objects that contain the labels for the yAxis of the chart.
@@ -29,7 +29,7 @@ export declare class LastCandleLabelsProvider implements YAxisLabelsProvider {
     /**
      * 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.
      */
     private getLabelDrawConfig;

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/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) {
@@ -86,15 +86,16 @@ export class HoverProducerComponent extends ChartBaseElement {
         const hitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         this.addRxSubscription(this.canvasInputListener.observeLongTouch(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

@@ -38,6 +38,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private clickSubject;
     private clickDocumentSubject;
     private dbClickSubject;
+    private dbTapSubject;
     private mouseDownSubject;
     private mouseUpSubject;
     private mouseUpDocumentSubject;
@@ -84,9 +85,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;
@@ -224,6 +225,12 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      * @returns {Observable<Point>} An Observable that emits a Point object when a double click event occurs within the bounds of the current point.
      */
     observeDbClick(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the double click event occurred within the bounds of the current point.
+     * @returns {Observable<Point>} An Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
+     */
+    observeDbTap(hitBoundsTest?: HitBoundsTest): Observable<Point>;
     /**
      * Returns an Observable that emits WheelEvent objects when the wheelSubject emits a new value.
      * The emitted events are filtered by the hitBoundsTest function, which is passed as an optional parameter.

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 = {}));
 /**
  * Gathers user input on canvas element:
  * Chart update order should be following:
@@ -46,6 +40,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.clickSubject = new Subject();
         this.clickDocumentSubject = new Subject();
         this.dbClickSubject = new Subject();
+        this.dbTapSubject = new Subject();
         this.mouseDownSubject = new Subject();
         this.mouseUpSubject = new Subject();
         this.mouseUpDocumentSubject = new Subject();
@@ -113,7 +108,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);
@@ -154,7 +148,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) => {
@@ -184,11 +179,8 @@ 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
@@ -196,7 +188,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
                 let timeoutId = null;
                 return () => {
                     if (timeoutId) {
-                        this.dbClickSubject.next(this.currentPoint);
+                        this.dbTapSubject.next(this.currentPoint);
                         clearTimeout(timeoutId);
                         timeoutId = null;
                     }
@@ -236,7 +228,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             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'));
@@ -259,9 +251,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;
@@ -508,6 +500,16 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             .asObservable()
             .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
+    /**
+     * Returns an Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the double click event occurred within the bounds of the current point.
+     * @returns {Observable<Point>} An Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
+     */
+    observeDbTap(hitBoundsTest = () => true) {
+        return this.dbTapSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
     /**
      * Returns an Observable that emits WheelEvent objects when the wheelSubject emits a new value.
      * The emitted events are filtered by the hitBoundsTest function, which is passed as an optional parameter.

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;