@devexperts/dxcharts-lite 2.4.3 → 2.4.4

package/dist/chart/bootstrap.js

@@ -122,11 +122,11 @@ export default class ChartBootstrap {
         this.chartComponents.push(this.crossEventProducer);
         const chartBaseModel = new ChartBaseModel('candle');
         this.chartBaseModel = chartBaseModel;
-        const chartPanComponent = new ChartPanComponent(eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel);
+        const chartPanComponent = new ChartPanComponent(eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel, hitTestCanvasModel);
         this.chartPanComponent = chartPanComponent;
         this.chartComponents.push(chartPanComponent);
         this.userInputListenerComponents.push(chartPanComponent.chartAreaPanHandler);
-        const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel);
+        const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, this.hitTestCanvasModel);
         this.paneManager = paneManager;
         const mainPane = this.paneManager.panes[CHART_UUID];
         this.mainPane = mainPane;
@@ -144,7 +144,7 @@ export default class ChartBootstrap {
         this.canvasBoundsContainer.setMainCandleSeries(this.chartModel.mainCandleSeries);
         hitTestCanvasModel.addSubscriber(paneManager.hitTestController);
         // X-axis component
-        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler);
+        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler, this.hitTestCanvasModel);
         this.chartComponents.push(this.xAxisComponent);
         this.userInputListenerComponents.push(this.xAxisComponent.xAxisScaleHandler);
         const mainCanvasClearDrawer = new ClearCanvasDrawer(mainCanvasModel);

package/dist/chart/canvas/canvas-bounds-container.js

@@ -226,37 +226,34 @@ export class CanvasBoundsContainer {
         this.panesOrder.forEach((uuid, index) => {
             var _a;
             const paneHeightRatio = this.graphsHeightRatio[this.panesOrder[index]];
-            const resizerVisible = this.config.components.paneResizer.visible;
+            // hide resizer for first pane with index === 0
+            const resizerVisible = this.config.components.paneResizer.visible && index !== 0;
+            const resizerUUID = CanvasElement.PANE_UUID_RESIZER(uuid);
+            const paneUUID = CanvasElement.PANE_UUID(uuid);
             if (resizerVisible) {
-                if (index !== 0) {
-                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_RESIZER(uuid), 0, nextY, canvas.width, paneResizerHeight, this.canvasOnPageLocation);
-                }
-                else {
-                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_RESIZER(uuid), 0, 0, 0, 0, this.canvasOnPageLocation);
-                }
+                upsertBounds(this.bounds, resizerUUID, 0, nextY, canvas.width, paneResizerHeight, this.canvasOnPageLocation);
+            }
+            else {
+                upsertBounds(this.bounds, resizerUUID, 0, 0, 0, 0, this.canvasOnPageLocation);
             }
-            const paneBounds = upsertBounds(this.bounds, CanvasElement.PANE_UUID(uuid), paneXStart, resizerVisible ? nextY + paneResizerHeight : nextY, chartWidth, resizerVisible
-                ? chartHeight * paneHeightRatio - this.config.components.paneResizer.height
-                : chartHeight * paneHeightRatio, this.canvasOnPageLocation);
+            const paneYStart = nextY + (resizerVisible ? paneResizerHeight : 0);
+            const paneBounds = upsertBounds(this.bounds, paneUUID, paneXStart, paneYStart, chartWidth, chartHeight * paneHeightRatio - (resizerVisible ? this.config.components.paneResizer.height : 0), this.canvasOnPageLocation);
             // y axis
             if (this.config.components.yAxis.visible) {
                 const extents = this.yAxisBoundsContainer.extentsOrder.get(uuid);
                 if (extents === undefined) {
                     return;
                 }
-                const y = resizerVisible ? nextY + paneResizerHeight : nextY;
-                const height = resizerVisible
-                    ? chartHeight * paneHeightRatio - paneResizerHeight
-                    : chartHeight * paneHeightRatio;
+                const height = chartHeight * paneHeightRatio - (resizerVisible ? paneResizerHeight : 0);
                 let startXLeft = paneXStart - ((_a = yAxisWidths.left[0]) !== null && _a !== void 0 ? _a : 0); // we need to provide right to left order on the left y-axis side
                 let startXRight = yAxisXRight;
                 extents.left.forEach((extentIdx, i) => {
                     var _a;
-                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid, extentIdx), startXLeft, y, yAxisWidths.left[i], height, this.canvasOnPageLocation);
+                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid, extentIdx), startXLeft, paneYStart, yAxisWidths.left[i], height, this.canvasOnPageLocation);
                     startXLeft -= (_a = yAxisWidths.left[i + 1]) !== null && _a !== void 0 ? _a : 0;
                 });
                 extents.right.forEach((extentIdx, i) => {
-                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid, extentIdx), startXRight, y, yAxisWidths.right[i], height, this.canvasOnPageLocation);
+                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid, extentIdx), startXRight, paneYStart, yAxisWidths.right[i], height, this.canvasOnPageLocation);
                     startXRight += yAxisWidths.right[i];
                 });
             }
@@ -272,7 +269,7 @@ export class CanvasBoundsContainer {
         allPanesBounds.height = nextY;
         // chart with Y axis
         const chartWithYAxis = this.getBounds(CanvasElement.CHART_WITH_Y_AXIS);
-        const chartBounds = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        const chartBounds = this.getBounds(CanvasElement.CHART);
         this.getEventsBounds(chartBounds);
         this.copyBounds(chartBounds, chartWithYAxis);
         chartWithYAxis.width = canvas.width;
@@ -347,10 +344,11 @@ export class CanvasBoundsContainer {
     getXAxisBounds(nMap, canvas) {
         const xAxis = this.getBounds(CanvasElement.X_AXIS);
         if (this.config.components.xAxis.visible) {
+            const xAxisHeight = this.getXAxisHeight();
             xAxis.x = 0;
-            xAxis.y = canvas.height - this.getXAxisHeight() - nMap.height;
+            xAxis.y = canvas.height - xAxisHeight - nMap.height;
             xAxis.width = canvas.width;
-            xAxis.height = this.getXAxisHeight();
+            xAxis.height = xAxisHeight;
         }
         else {
             this.applyDefaultBounds(xAxis);

package/dist/chart/components/chart/chart-area-pan.handler.d.ts

@@ -12,6 +12,7 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 export interface ChartWheelEvent {
     readonly originalEvent: WheelEvent;
     readonly candleIdx: number;
@@ -45,12 +46,13 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     private canvasBoundsContainer;
     private canvasAnimation;
     private chartPanComponent;
+    private hitTestCanvasModel;
     private readonly touchHandler;
     private currentPoint;
     xDraggedCandlesDelta: number;
     lastXStart: number;
     wheelTrottleTime: number;
-    constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent);
+    constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
      * It then calculates the zoom sensitivity based on whether the event was triggered by a touchpad or not.
@@ -77,6 +79,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     registerChartYPanHandler(scale: ScaleModel, hitTest: HitBoundsTest): DragNDropYComponent;
     private onXDragStart;
     private onXDragTick;
+    private onXDragEnd;
 }
 /**
  * This function calculates angle between current point and point(0, 0), and compares the result with config values

package/dist/chart/components/chart/chart-area-pan.handler.js

@@ -35,7 +35,7 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
  
 */
 export class ChartAreaPanHandler extends ChartBaseElement {
-    constructor(bus, config, scale, mainCanvasParent, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent) {
+    constructor(bus, config, scale, mainCanvasParent, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
         super();
         this.bus = bus;
         this.config = config;
@@ -45,6 +45,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.canvasAnimation = canvasAnimation;
         this.chartPanComponent = chartPanComponent;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.currentPoint = { x: 0, y: 0 };
         // number of candles delta changed during X dragging: 1, 5 or -3 for ex.
         this.xDraggedCandlesDelta = 0;
@@ -81,6 +82,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             this.canvasAnimation.forceStopAnimation(VIEWPORT_ANIMATION_ID);
             this.xDraggedCandlesDelta = 0;
             this.lastXStart = this.scale.xStart;
+            // Stop redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         this.onXDragTick = (dragInfo) => {
             const { delta: absoluteXDelta } = dragInfo;
@@ -89,12 +92,17 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             this.scale.moveXStart(this.lastXStart - unitsDelta);
             this.bus.fireDraw();
         };
+        this.onXDragEnd = () => {
+            // Continue redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
+        };
         this.touchHandler = new MainCanvasTouchHandler(this.scale, this.canvasInputListener, this.mainCanvasParent);
         const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         //#region drag-n-drop logic
         const dragNDropXComponent = new DragNDropXComponent(allPanesHitTest, {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
+            onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             disableChartPanning: false,
         });
@@ -179,9 +187,14 @@ export class ChartAreaPanHandler extends ChartBaseElement {
                 scale.moveYStart(lastYStart + unitsDelta);
             }
         };
+        const onYDragEnd = () => {
+            // Continue redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
+        };
         const dragNDropYComponent = new DragNDropYComponent(hitTest, {
             onDragTick: onYDragTick,
             onDragStart: onYDragStart,
+            onDragEnd: onYDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             disableChartPanning: false,
         });

package/dist/chart/components/chart/chart.component.d.ts

@@ -65,7 +65,7 @@ export declare class ChartComponent extends ChartBaseElement {
     private readonly backgroundDrawer;
     private readonly _dataSeriesDrawers;
     private readonly dataSeriesDrawer;
-    private backgroundDrawPredicateSubj;
+    private backgroundDrawerPredicateSubject;
     constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler, dynamicObjects: DynamicObjectsComponent, chartResizeHandler: ChartResizeHandler);
     /**
      * This method overrides the doActivate method of the parent class and calls it.

package/dist/chart/components/chart/chart.component.js

@@ -63,20 +63,20 @@ export class ChartComponent extends ChartBaseElement {
         this.dynamicObjects = dynamicObjects;
         this.chartResizeHandler = chartResizeHandler;
         this._dataSeriesDrawers = {};
-        this.backgroundDrawPredicateSubj = new BehaviorSubject(true);
+        this.backgroundDrawerPredicateSubject = new BehaviorSubject(true);
         this.strToBarType = (str) => { var _a; return (_a = this.barTypeValues.find(t => t === str)) !== null && _a !== void 0 ? _a : 'candle'; };
         this.addChildEntity(this.chartModel);
         this.registerDefaultCandlesTransformers();
         this.baselineModel = new BaselineModel(this.chartModel, chartPanComponent, this.canvasModel, this.canvasInputListener, this.config, this.canvasBoundsContainer, cursorHandler);
         this.addChildEntity(this.baselineModel);
         //#region main chart drawers
-        const hTChartDrawer = new HTDataSeriesDrawer(this._dataSeriesDrawers, this.hitTestCanvasModel, paneManager);
+        const hTChartDrawer = new HTDataSeriesDrawer(this._dataSeriesDrawers, this.hitTestCanvasModel, paneManager, () => this.hitTestCanvasModel.hitTestDrawersPredicateSubject.getValue());
         this.drawingManager.addDrawerBefore(hTChartDrawer, HIT_TEST_PREFIX + 'DATA_SERIES', 'HIT_TEST_EVENTS');
         //#endregion
         //#region data series drawers
         this.registerDefaultDataSeriesDrawers();
         //#endregion
-        this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config, () => this.backgroundDrawPredicateSubj.getValue());
+        this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config, () => this.backgroundDrawerPredicateSubject.getValue());
         drawingManager.addDrawer(this.backgroundDrawer, 'MAIN_BACKGROUND');
         cursorHandler.setCursorForCanvasEl(CanvasElement.PANE_UUID(CHART_UUID), config.components.chart.cursor);
         this.dataSeriesDrawer = new DataSeriesDrawer(paneManager, this.dataSeriesDrawers);
@@ -109,10 +109,10 @@ export class ChartComponent extends ChartBaseElement {
         }));
         // redraw background only when chart is resized
         this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(() => {
-            this.backgroundDrawPredicateSubj.next(false);
+            this.backgroundDrawerPredicateSubject.next(false);
         }));
         this.addRxSubscription(this.chartResizeHandler.canvasResized.subscribe(() => {
-            this.backgroundDrawPredicateSubj.next(true);
+            this.backgroundDrawerPredicateSubject.next(true);
         }));
     }
     /**

package/dist/chart/components/events/events-hit-test.drawer.d.ts

@@ -15,7 +15,8 @@ export declare class EventsHitTestDrawer implements Drawer {
     private config;
     private canvasBoundsContainer;
     private model;
-    constructor(hitTestCanvasModel: HitTestCanvasModel, chartModel: ChartModel, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, model: EventsModel);
+    private drawPredicate;
+    constructor(hitTestCanvasModel: HitTestCanvasModel, chartModel: ChartModel, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, model: EventsModel, drawPredicate?: () => boolean);
     /**
      * Draws events on the hit test canvas.
      * @function

package/dist/chart/components/events/events-hit-test.drawer.js

@@ -7,12 +7,13 @@ import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { getEventSize } from './events.drawer';
 const hoverExtendedAreaPixels = 5;
 export class EventsHitTestDrawer {
-    constructor(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, model) {
+    constructor(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, model, drawPredicate = () => true) {
         this.hitTestCanvasModel = hitTestCanvasModel;
         this.chartModel = chartModel;
         this.config = config;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.model = model;
+        this.drawPredicate = drawPredicate;
     }
     /**
      * Draws events on the hit test canvas.
@@ -24,39 +25,41 @@ export class EventsHitTestDrawer {
       
     */
     draw() {
-        const ctx = this.hitTestCanvasModel.ctx;
-        const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.EVENTS);
-        ctx.save();
-        this.model.events.forEach((event, idx) => {
-            const prevEvent = this.model.events[idx - 1];
-            const prevX = prevEvent &&
-                this.chartModel.candleFromTimestamp(prevEvent.timestamp).xCenter(this.chartModel.scale);
-            const x = this.chartModel.candleFromTimestamp(event.timestamp).xCenter(this.chartModel.scale);
-            if (x > bounds.x && x < bounds.x + bounds.width) {
-                const color = this.config.colors.events[event.type].color;
-                ctx.strokeStyle = color;
-                ctx.fillStyle = color;
-                const size = getEventSize(event);
-                // draw hit test
-                ctx.fillStyle = this.hitTestCanvasModel.idToColor(event.id);
-                const hoverSize = (size + hoverExtendedAreaPixels) * 2;
-                if (prevX !== undefined) {
-                    const prevSize = getEventSize(prevEvent);
-                    const isIntersectsWithPrev = prevX + prevSize > x - hoverSize / 2;
-                    if (isIntersectsWithPrev) {
-                        const hoverSize = size * 2 + hoverExtendedAreaPixels;
-                        ctx.fillRect(prevX + prevSize, bounds.y, hoverSize, bounds.height);
+        if (this.drawPredicate()) {
+            const ctx = this.hitTestCanvasModel.ctx;
+            const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.EVENTS);
+            ctx.save();
+            this.model.events.forEach((event, idx) => {
+                const prevEvent = this.model.events[idx - 1];
+                const prevX = prevEvent &&
+                    this.chartModel.candleFromTimestamp(prevEvent.timestamp).xCenter(this.chartModel.scale);
+                const x = this.chartModel.candleFromTimestamp(event.timestamp).xCenter(this.chartModel.scale);
+                if (x > bounds.x && x < bounds.x + bounds.width) {
+                    const color = this.config.colors.events[event.type].color;
+                    ctx.strokeStyle = color;
+                    ctx.fillStyle = color;
+                    const size = getEventSize(event);
+                    // draw hit test
+                    ctx.fillStyle = this.hitTestCanvasModel.idToColor(event.id);
+                    const hoverSize = (size + hoverExtendedAreaPixels) * 2;
+                    if (prevX !== undefined) {
+                        const prevSize = getEventSize(prevEvent);
+                        const isIntersectsWithPrev = prevX + prevSize > x - hoverSize / 2;
+                        if (isIntersectsWithPrev) {
+                            const hoverSize = size * 2 + hoverExtendedAreaPixels;
+                            ctx.fillRect(prevX + prevSize, bounds.y, hoverSize, bounds.height);
+                        }
+                        else {
+                            ctx.fillRect(x - size - hoverExtendedAreaPixels, bounds.y, hoverSize, bounds.height);
+                        }
                     }
                     else {
                         ctx.fillRect(x - size - hoverExtendedAreaPixels, bounds.y, hoverSize, bounds.height);
                     }
                 }
-                else {
-                    ctx.fillRect(x - size - hoverExtendedAreaPixels, bounds.y, hoverSize, bounds.height);
-                }
-            }
-        });
-        ctx.restore();
+            });
+            ctx.restore();
+        }
     }
     /**
      * Returns an array of string containing the canvas ID of the hitTestCanvasModel.

package/dist/chart/components/events/events.component.js

@@ -25,7 +25,7 @@ export class EventsComponent extends ChartBaseElement {
         hitTestCanvasModel.addSubscriber(eventsModel);
         const eventsDrawer = new EventsDrawer(canvasModel, chartModel, config, canvasBoundsContainer, eventsModel, this.eventsXAxisLabelFormatterProvider);
         this.drawingManager.addDrawer(eventsDrawer, 'EVENTS');
-        const eventsHitTestDrawer = new EventsHitTestDrawer(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, eventsModel);
+        const eventsHitTestDrawer = new EventsHitTestDrawer(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, eventsModel, () => hitTestCanvasModel.hitTestDrawersPredicateSubject.getValue());
         this.drawingManager.addDrawerBefore(eventsHitTestDrawer, 'HIT_TEST_EVENTS', 'HIT_TEST_DRAWINGS');
         cursorHandler.setCursorForCanvasEl(CanvasElement.EVENTS, config.components.events.cursor);
     }

package/dist/chart/components/high_low/high-low.drawer.js

@@ -35,10 +35,7 @@ export class HighLowDrawer {
             ctx.font = this.config.components.highLow.font;
             this.drawMarkerLabel(ctx, finalHighIdx, high, 'high');
             this.drawMarkerLabel(ctx, finalLowIdx, low, 'low');
-            const chartBounds = this.canvasBoundsContainer.getBounds('PANE_CHART');
             ctx.restore();
-            // We need clip here so lowLabel won't overlap other panes
-            clipToBounds(ctx, chartBounds);
         }
     }
     /**
@@ -62,6 +59,9 @@ export class HighLowDrawer {
         ctx.fillStyle =
             type === 'high' ? this.config.colors.highLowTheme.highColor : this.config.colors.highLowTheme.lowColor;
         ctx.fillText(text, x, y);
+        const chartBounds = this.canvasBoundsContainer.getBounds('PANE_CHART');
+        // We need clip here so lowLabel won't overlap other panes
+        clipToBounds(ctx, chartBounds);
     }
     /**
      * Returns a string that represents a marker text for a given yValue and type.

package/dist/chart/components/pan/chart-pan.component.d.ts

@@ -12,6 +12,7 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { ScaleModel } from '../../model/scale.model';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
 import { BaseType, ChartBaseModel } from '../chart/chart-base.model';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 export declare class ChartPanComponent extends ChartBaseElement {
     private eventBus;
     private mainScale;
@@ -21,9 +22,10 @@ export declare class ChartPanComponent extends ChartBaseElement {
     private canvasInputListener;
     private mainCanvasParent;
     chartBaseModel: ChartBaseModel<BaseType>;
+    private hitTestCanvasModel;
     chartPanComponents: Array<ChartEntity>;
     chartAreaPanHandler: ChartAreaPanHandler;
-    constructor(eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, mainCanvasParent: Element, chartBaseModel: ChartBaseModel<BaseType>);
+    constructor(eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, mainCanvasParent: Element, chartBaseModel: ChartBaseModel<BaseType>, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * Activates the chart pan handlers.
      * @protected

package/dist/chart/components/pan/chart-pan.component.js

@@ -6,7 +6,7 @@
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
 export class ChartPanComponent extends ChartBaseElement {
-    constructor(eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel) {
+    constructor(eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel, hitTestCanvasModel) {
         super();
         this.eventBus = eventBus;
         this.mainScale = mainScale;
@@ -16,8 +16,9 @@ export class ChartPanComponent extends ChartBaseElement {
         this.canvasInputListener = canvasInputListener;
         this.mainCanvasParent = mainCanvasParent;
         this.chartBaseModel = chartBaseModel;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.chartPanComponents = [];
-        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.mainCanvasParent, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this);
+        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.mainCanvasParent, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this, this.hitTestCanvasModel);
         this.chartPanComponents.push(this.chartAreaPanHandler);
     }
     /**

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -22,6 +22,7 @@ import { YExtentComponent, YExtentCreationOptions } from './extent/y-extent-comp
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
 import { DataSeriesModel } from '../../model/data-series.model';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 export declare class PaneManager extends ChartBaseElement {
     private chartBaseModel;
     private dynamicObjectsCanvasModel;
@@ -38,6 +39,7 @@ export declare class PaneManager extends ChartBaseElement {
     chartPanComponent: ChartPanComponent;
     private mainCanvasModel;
     private yAxisLabelsCanvasModel;
+    private hitTestCanvasModel;
     panes: Record<string, PaneComponent>;
     paneRemovedSubject: Subject<PaneComponent>;
     paneAddedSubject: Subject<Record<string, PaneComponent>>;
@@ -48,7 +50,7 @@ export declare class PaneManager extends ChartBaseElement {
      * Returns order of panes in the chart from top to bottom.
      */
     get panesOrder(): string[];
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel);
     private addBounds;
     /**
      * Adds a resizer to the canvas bounds container for the given uuid.

package/dist/chart/components/pane/pane-manager.component.js

@@ -20,7 +20,7 @@ export class PaneManager extends ChartBaseElement {
     get panesOrder() {
         return this.canvasBoundsContainer.panesOrder;
     }
-    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel) {
+    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, hitTestCanvasModel) {
         super();
         this.chartBaseModel = chartBaseModel;
         this.dynamicObjectsCanvasModel = dynamicObjectsCanvasModel;
@@ -37,6 +37,7 @@ export class PaneManager extends ChartBaseElement {
         this.chartPanComponent = chartPanComponent;
         this.mainCanvasModel = mainCanvasModel;
         this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.panes = {};
         this.paneRemovedSubject = new Subject();
         this.paneAddedSubject = new Subject();
@@ -68,7 +69,7 @@ export class PaneManager extends ChartBaseElement {
             this.eventBus.fireDraw([this.mainCanvasModel.canvasId, 'dynamicObjectsCanvas']);
         };
         const resizerId = CanvasElement.PANE_UUID_RESIZER(uuid);
-        const barResizerComponent = new BarResizerComponent(resizerId, () => this.canvasBoundsContainer.getBounds(resizerId), resizerHT, dragTick, this.chartPanComponent, this.mainCanvasModel, this.drawingManager, this.canvasInputListener, this.canvasAnimation, this.config, this.canvasBoundsContainer);
+        const barResizerComponent = new BarResizerComponent(resizerId, () => this.canvasBoundsContainer.getBounds(resizerId), resizerHT, dragTick, this.chartPanComponent, this.mainCanvasModel, this.drawingManager, this.canvasInputListener, this.canvasAnimation, this.config, this.canvasBoundsContainer, this.hitTestCanvasModel);
         this.userInputListenerComponents.push(barResizerComponent);
         return barResizerComponent;
     }
@@ -93,7 +94,7 @@ export class PaneManager extends ChartBaseElement {
         if (this.panes[uuid] !== undefined) {
             return this.panes[uuid];
         }
-        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, options);
+        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, this.hitTestCanvasModel, options);
         // TODO: is resizer should be added always?
         if (this.config.components.paneResizer.visible) {
             paneComponent.addChildEntity(this.addResizer(uuid));

package/dist/chart/components/pane/pane.component.d.ts

@@ -24,6 +24,7 @@ import { ChartPanComponent } from '../pan/chart-pan.component';
 import { YAxisComponent } from '../y_axis/y-axis.component';
 import { YExtentComponent, YExtentCreationOptions } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 export declare class PaneComponent extends ChartBaseElement {
     chartBaseModel: ChartBaseModel<'candle'>;
     private mainCanvasModel;
@@ -42,6 +43,7 @@ export declare class PaneComponent extends ChartBaseElement {
     readonly uuid: string;
     seriesAddedSubject: Subject<DataSeriesModel>;
     seriesRemovedSubject: Subject<DataSeriesModel>;
+    private hitTestCanvasModel;
     private _paneOrder;
     /**
      * Pane hit test (without Y-Axis and resizer)
@@ -52,7 +54,7 @@ export declare class PaneComponent extends ChartBaseElement {
     get yAxis(): YAxisComponent;
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint>[];
     mainExtent: YExtentComponent;
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, options?: AtLeastOne<YExtentCreationOptions>);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, hitTestCanvasModel: HitTestCanvasModel, options?: AtLeastOne<YExtentCreationOptions>);
     /**
      * Method that activates the canvas bounds container and recalculates the zoom Y of the scale model.
      * @protected

package/dist/chart/components/pane/pane.component.js

@@ -22,7 +22,7 @@ export class PaneComponent extends ChartBaseElement {
     get dataSeries() {
         return flatMap(this.yExtentComponents, c => Array.from(c.dataSeries));
     }
-    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, options) {
+    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, options) {
         super();
         this.chartBaseModel = chartBaseModel;
         this.mainCanvasModel = mainCanvasModel;
@@ -41,6 +41,7 @@ export class PaneComponent extends ChartBaseElement {
         this.uuid = uuid;
         this.seriesAddedSubject = seriesAddedSubject;
         this.seriesRemovedSubject = seriesRemovedSubject;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this._paneOrder = 0;
         this.yExtentComponents = [];
         this.getYAxisBounds = () => {
@@ -121,7 +122,7 @@ export class PaneComponent extends ChartBaseElement {
         const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
         // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter
         // before y-extent is created
-        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx);
+        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel);
         const yExtentComponent = new YExtentComponent(this.uuid, extentIdx, this, this.chartBaseModel, this.canvasBoundsContainer, this.hitTestController, this.dynamicObjectsCanvasModel, scaleModel, createYAxisComponent, dragNDrop);
         yExtentComponent.addSubscription(unsub);
         yExtentComponent.addSubscription(this.addCursors(extentIdx, yExtentComponent.yAxis));

package/dist/chart/components/resizer/bar-resizer.component.d.ts

@@ -13,6 +13,7 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { BoundsProvider } from '../../model/bounds.model';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 /**
  * Bar separator between panes.
  * Used to resize the areas height or just draw a fixed line.
@@ -32,10 +33,11 @@ export declare class BarResizerComponent extends ChartBaseElement {
     private canvasAnimation;
     private config;
     private canvasBoundsContainer;
+    private hitTestCanvasModel;
     animationId: string;
     initialY: number;
     resizeEvent$: Subject<void>;
-    constructor(id: string, boundsProvider: BoundsProvider, hitTest: HitBoundsTest, dragTickCb: (yDelta: number) => void, chartPanComponent: ChartPanComponent, canvasModel: CanvasModel, drawingManager: DrawingManager, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer);
+    constructor(id: string, boundsProvider: BoundsProvider, hitTest: HitBoundsTest, dragTickCb: (yDelta: number) => void, chartPanComponent: ChartPanComponent, canvasModel: CanvasModel, drawingManager: DrawingManager, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * This method activates the pane resizer component.
      * It calls the parent class's doActivate method and then checks if the fixedMode property is set to false in the config object.

package/dist/chart/components/resizer/bar-resizer.component.js

@@ -17,7 +17,7 @@ import { BarResizerDrawer } from './bar-resizer.drawer';
  * @doc-tags chart-core,resizer
  */
 export class BarResizerComponent extends ChartBaseElement {
-    constructor(id, boundsProvider, hitTest, dragTickCb, chartPanComponent, canvasModel, drawingManager, canvasInputListener, canvasAnimation, config, canvasBoundsContainer) {
+    constructor(id, boundsProvider, hitTest, dragTickCb, chartPanComponent, canvasModel, drawingManager, canvasInputListener, canvasAnimation, config, canvasBoundsContainer, hitTestCanvasModel) {
         super();
         this.id = id;
         this.boundsProvider = boundsProvider;
@@ -30,16 +30,21 @@ export class BarResizerComponent extends ChartBaseElement {
         this.canvasAnimation = canvasAnimation;
         this.config = config;
         this.canvasBoundsContainer = canvasBoundsContainer;
+        this.hitTestCanvasModel = hitTestCanvasModel;
         this.initialY = 0;
         this.resizeEvent$ = new Subject();
         this.onYDragStart = () => {
             this.config.components.crossTool.type = 'none';
             this.initialY = this.boundsProvider().y;
+            // Stop redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         this.onYDragEnd = () => {
             this.config.components.crossTool.type = 'cross-and-labels';
             this.initialY = this.boundsProvider().y;
             this.canvasBoundsContainer.graphsHeightRatioChangedSubject.next(this.canvasBoundsContainer.graphsHeightRatio);
+            // Continue redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: yDelta, draggedPixels } = dragInfo;

package/dist/chart/components/x_axis/x-axis-scale.handler.d.ts

@@ -10,6 +10,7 @@ import { ScaleModel } from '../../model/scale.model';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartModel } from '../chart/chart.model';
 import { ChartPanComponent } from '../pan/chart-pan.component';
+import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 /**
  * Handles the mouse drag on X axis - to zoom the viewport horizontally.
  * @doc-tags scaling,zoom,viewport
@@ -20,10 +21,11 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     private canvasBoundsContainer;
     private chartPanComponent;
     private chartModel;
+    private hitTestCanvasModel;
     lastXStart: Unit;
     lastXWidth: Unit;
     lastXPxWidth: Pixel;
-    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel);
+    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * This method is used to activate the canvas input listener and add a subscription to it.
      * It calls the parent class's doActivate method and then subscribes to the canvasInputListener's observeDbClick method.
@@ -35,4 +37,5 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     protected doActivate(): void;
     private onXDragStart;
     private onXDragTick;
+    private onXDragEnd;
 }