@devexperts/dxcharts-lite 2.0.2 → 2.1.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/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

@@ -85,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;

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:
@@ -114,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);
@@ -155,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) => {
@@ -185,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
@@ -237,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'));
@@ -260,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;

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;

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

@@ -45,7 +45,8 @@ export interface DataSeriesViewportIndexes {
  */
 export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint, V extends VisualSeriesPoint = VisualSeriesPoint> extends ChartBaseElement {
     extentComponent: YExtentComponent;
-    id: number;
+    id: string;
+    htId: number;
     name: string;
     hovered: boolean;
     yAxisLabelProvider: DataSeriesYAxisLabelsProvider;
@@ -70,7 +71,7 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
     get visualPoints(): V[];
     get visualPoints2D(): V[][];
     set visualPoints(points: V[][] | V[]);
-    constructor(extentComponent: YExtentComponent, id: number, _config?: AtLeastOne<DataSeriesConfig>);
+    constructor(extentComponent: YExtentComponent, id: string, htId: number, _config?: AtLeastOne<DataSeriesConfig>);
     protected doActivate(): void;
     /**
      * Sets the data points and recalculates internal state

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

@@ -65,11 +65,12 @@ export class DataSeriesModel extends ChartBaseElement {
         this._visualPoints = create2DArray(points);
         this._visualPointsFlat = this._visualPoints.flat();
     }
-    constructor(extentComponent, id, _config = cloneUnsafe(DEFAULT_DATA_SERIES_CONFIG)) {
+    constructor(extentComponent, id, htId, _config = cloneUnsafe(DEFAULT_DATA_SERIES_CONFIG)) {
         var _a;
         super();
         this.extentComponent = extentComponent;
         this.id = id;
+        this.htId = htId;
         this.name = '';
         this.hovered = false;
         this._dataPoints = [];

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

@@ -18,7 +18,7 @@ import VisualCandle from './visual-candle';
  */
 export declare class MainCandleSeriesModel extends CandleSeriesModel {
     private readonly baseModel;
-    constructor(baseModel: ChartBaseModel<'candle'>, extentComponent: YExtentComponent, id: number, eventBus: EventBus, scale: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors: CandleSeriesColors);
+    constructor(baseModel: ChartBaseModel<'candle'>, extentComponent: YExtentComponent, id: string, htId: number, eventBus: EventBus, scale: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors: CandleSeriesColors);
     set visualPoints(candles: VisualCandle[] | VisualCandle[][]);
     get visualPoints(): VisualCandle[];
     set dataPoints(candles: Candle[] | Candle[][]);

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

@@ -8,8 +8,8 @@ import { CandleSeriesModel } from './candle-series.model';
  * This model represents main chart data series and is highly tied to chartBaseModel, @see ChartBaseModel
  */
 export class MainCandleSeriesModel extends CandleSeriesModel {
-    constructor(baseModel, extentComponent, id, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors) {
-        super(extentComponent, id, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors);
+    constructor(baseModel, extentComponent, id, htId, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors) {
+        super(extentComponent, id, htId, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors);
         this.baseModel = baseModel;
     }
     set visualPoints(candles) {

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

@@ -91,6 +91,7 @@ export declare class ScaleModel extends ViewportModel {
     setXScale(xStart: Unit, xEnd: Unit): void;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
+     * Works without animation.
      * WILL CHANGE the Y axis if scale.auto=true.
      * @param xStart - starting point in units
      */
@@ -98,6 +99,7 @@ export declare class ScaleModel extends ViewportModel {
     private scalePostProcessor;
     /**
      * Moves both yStart and yEnd without changing the viewport height (zoom).
+     * Works without animation.
      * Will not move viewport if scale.auto=true
      * @param yStart - starting point in units
      */

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

@@ -82,10 +82,14 @@ export class ScaleModel extends ViewportModel {
      * @param zoomSensitivity The sensitivity of the zoom.
      */
     zoomXToPercent(viewportPercent, zoomIn, forceNoAnimation = false, zoomSensitivity = this.config.scale.zoomSensitivity) {
+        const disabledAnimations = this.config.scale.disableAnimations || forceNoAnimation;
+        if (disabledAnimations) {
+            this.haltAnimation();
+        }
         this.beforeStartAnimationSubject.next();
         const state = this.export();
         zoomXToPercentViewportCalculator(this, state, viewportPercent, zoomSensitivity, zoomIn);
-        this.zoomXTo(state, forceNoAnimation);
+        this.zoomXTo(state, disabledAnimations);
     }
     /**
      * Zooms the X axis of the chart relativly to the end of the data range.
@@ -93,10 +97,13 @@ export class ScaleModel extends ViewportModel {
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
     zoomXToEnd(zoomIn, zoomSensitivity = this.config.scale.zoomSensitivity) {
+        if (this.config.scale.disableAnimations) {
+            this.haltAnimation();
+        }
         this.beforeStartAnimationSubject.next();
         const state = this.export();
         zoomXToEndViewportCalculator(this, state, zoomSensitivity, zoomIn);
-        this.zoomXTo(state);
+        this.zoomXTo(state, this.config.scale.disableAnimations);
     }
     haltAnimation() {
         var _a;
@@ -144,6 +151,7 @@ export class ScaleModel extends ViewportModel {
     }
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
+     * Works without animation.
      * WILL CHANGE the Y axis if scale.auto=true.
      * @param xStart - starting point in units
      */
@@ -162,6 +170,7 @@ export class ScaleModel extends ViewportModel {
     }
     /**
      * Moves both yStart and yEnd without changing the viewport height (zoom).
+     * Works without animation.
      * Will not move viewport if scale.auto=true
      * @param yStart - starting point in units
      */

package/dist/chart/utils/dom.utils.d.ts

@@ -3,6 +3,12 @@
  * 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/.
  */
+export declare const MouseButton: {
+    left: number;
+    middle: number;
+    right: number;
+};
+export type MouseButtonType = typeof MouseButton[keyof typeof MouseButton];
 /**
  * @param {Element} element
  * @param {function} listener
@@ -11,3 +17,4 @@
  * @return {Function}
  */
 export declare function subscribeListener<K extends keyof GlobalEventHandlersEventMap>(element: EventTarget, listener: (e: GlobalEventHandlersEventMap[K]) => void, eventType: K, useCapture?: boolean): () => void;
+export declare function leftMouseButtonListener(cb: (e: MouseEvent) => void): (e: MouseEvent) => void;

package/dist/chart/utils/dom.utils.js

@@ -3,6 +3,11 @@
  * 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/.
  */
+export const MouseButton = {
+    left: 0,
+    middle: 1,
+    right: 2,
+};
 /**
  * @param {Element} element
  * @param {function} listener
@@ -18,3 +23,10 @@ export function subscribeListener(element, listener, eventType, useCapture) {
         element.removeEventListener(eventType, listener, useCapture);
     };
 }
+export function leftMouseButtonListener(cb) {
+    return (e) => {
+        if (e.button === MouseButton.left) {
+            cb(e);
+        }
+    };
+}

package/dist/chart/utils/linkedList.utils.d.ts

@@ -17,9 +17,9 @@ export declare class LinkedList<T> {
     private _tail;
     private length;
     constructor(head?: ListNode<T>);
-    insertAtEnd(data: T): ListNode<T>;
-    insertAt(position: number, data: T): ListNode<T> | null;
-    removeAt(position: number): ListNode<T> | null;
+    insertAtEnd(data: T): void;
+    insertAt(position: number, data: T): null | undefined;
+    removeAt(position: number): null | undefined;
     getNodePosition(node: ListNode<T>): number;
     size(): number;
     get head(): ListNode<T> | null;