@devexperts/dxcharts-lite 2.4.6 → 2.5.0

package/dist/chart/components/dran-n-drop_helper/drag-n-drop.component.d.ts

@@ -29,17 +29,6 @@ export declare class DragNDropComponent extends ChartBaseElement {
     dragging: boolean;
     draggedPixels: number;
     constructor(hitTest: HitBoundsTest, dragCallbacks: DragNDropComponentCallbacks, canvasInputListener: CanvasInputListenerComponent, chartPanComponent: ChartPanComponent, dragComponentOptions: DragComponentOptions);
-    /**
-     * Calls the parent class's doActivate method and performs any additional activation logic.
-     * This method is protected and can only be accessed by the class itself and its subclasses.
-     */
-    protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is a protected method that can only be accessed within the class and its subclasses.
-     * This method is responsible for deactivating the current object.
-     */
-    protected doDeactivate(): void;
     protected onDragStart: (point: Point) => void;
     protected onDragTick: (yDelta: number) => void;
     protected onDragEnd: () => void;

package/dist/chart/components/dran-n-drop_helper/drag-n-drop.component.js

@@ -40,24 +40,8 @@ export class DragNDropComponent extends ChartBaseElement {
                 if (this.dragging) {
                     this.dragging = false;
                     this.dragCallbacks.onDragEnd && this.dragCallbacks.onDragEnd(this.draggedPixels);
-                    this.chartPanComponent.activateChartPanHandlers();
                 }
             }
         };
     }
-    /**
-     * Calls the parent class's doActivate method and performs any additional activation logic.
-     * This method is protected and can only be accessed by the class itself and its subclasses.
-     */
-    doActivate() {
-        super.doActivate();
-    }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is a protected method that can only be accessed within the class and its subclasses.
-     * This method is responsible for deactivating the current object.
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }

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

@@ -7,12 +7,13 @@ import { CanvasAnimation } from '../../animation/canvas-animation';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { FullChartConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
-import { ChartBaseElement, ChartEntity } from '../../model/chart-base-element';
+import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
 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';
+import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
 export declare class ChartPanComponent extends ChartBaseElement {
     private eventBus;
     private mainScale;
@@ -23,21 +24,9 @@ export declare class ChartPanComponent extends ChartBaseElement {
     private mainCanvasParent;
     chartBaseModel: ChartBaseModel<BaseType>;
     private hitTestCanvasModel;
-    chartPanComponents: Array<ChartEntity>;
     chartAreaPanHandler: ChartAreaPanHandler;
+    mainCanvasTouchHandler: MainCanvasTouchHandler;
     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
-     * @returns {void}
-     */
-    protected doActivate(): void;
-    /**
-     * This method is used to deactivate the pan handlers.
-     * @returns {void}
-     * @protected
-     */
-    protected doDeactivate(): void;
     /**
      * Activates user mouse handlers on main chart view.
      * @function

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

@@ -5,6 +5,7 @@
  */
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
+import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
 export class ChartPanComponent extends ChartBaseElement {
     constructor(eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel, hitTestCanvasModel) {
         super();
@@ -17,25 +18,10 @@ export class ChartPanComponent extends ChartBaseElement {
         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.hitTestCanvasModel);
-        this.chartPanComponents.push(this.chartAreaPanHandler);
-    }
-    /**
-     * Activates the chart pan handlers.
-     * @protected
-     * @returns {void}
-     */
-    doActivate() {
-        this.activateChartPanHandlers();
-    }
-    /**
-     * This method is used to deactivate the pan handlers.
-     * @returns {void}
-     * @protected
-     */
-    doDeactivate() {
-        this.deactivatePanHandlers();
+        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this, this.hitTestCanvasModel);
+        this.addChildEntity(this.chartAreaPanHandler);
+        this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent);
+        this.addChildEntity(this.mainCanvasTouchHandler);
     }
     /**
      * Activates user mouse handlers on main chart view.
@@ -46,13 +32,13 @@ export class ChartPanComponent extends ChartBaseElement {
      * @returns {void}
      */
     activateChartPanHandlers() {
-        this.chartPanComponents.forEach(c => c.activate());
+        this.activate();
     }
     /**
      * Deactivates all the pan handlers of the chart.
      */
     deactivatePanHandlers() {
-        this.chartPanComponents.forEach(c => c.deactivate());
+        this.deactivate();
     }
     setChartPanningOptions(horizontal, vertical) {
         this.chartAreaPanHandler.chartPanningOptions = { horizontal, vertical };

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

@@ -71,11 +71,40 @@ export declare class PaneManager extends ChartBaseElement {
      * @returns
      */
     createPane(uuid?: string, options?: AtLeastOne<YExtentCreationOptions>): PaneComponent;
+    /**
+     * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneUp(uuid: string): void;
+    /**
+     * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneDown(uuid: string): void;
+    /**
+     * Checks if the current pane can move up.
+     * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     */
+    canMovePaneUp(uuid: string): boolean;
+    /**
+     * Checks if the current pane can move down.
+     *
+     * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     */
+    canMovePaneDown(uuid: string): boolean;
     /**
      * Removes pane from the chart and all related components
      * @param uuid
      */
     removePane(uuid: string): void;
+    /**
+     * Hides a pane from the chart and all related components
+     */
+    hidePane(paneUUID: string): void;
+    /**
+     * Shows a pane, use if the pane is hidden
+     */
+    showPane(paneUUID: string): void;
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.
      * @private

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

@@ -12,7 +12,7 @@ import { BarResizerComponent } from '../resizer/bar-resizer.component';
 import { createDefaultYExtentHighLowProvider, } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
-import { flatMap } from '../../utils/array.utils';
+import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
 export class PaneManager extends ChartBaseElement {
     /**
      * Returns order of panes in the chart from top to bottom.
@@ -53,7 +53,7 @@ export class PaneManager extends ChartBaseElement {
     }
     addBounds(uuid, order) {
         this.canvasBoundsContainer.addPaneBounds(uuid, order);
-        return () => this.canvasBoundsContainer.removedPaneBounds(uuid);
+        return () => this.canvasBoundsContainer.removePaneBounds(uuid);
     }
     /**
      * Adds a resizer to the canvas bounds container for the given uuid.
@@ -110,19 +110,82 @@ export class PaneManager extends ChartBaseElement {
         this.paneAddedSubject.next(this.panes);
         return paneComponent;
     }
+    /**
+     * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneUp(uuid) {
+        this.canvasBoundsContainer.movePaneUp(uuid);
+    }
+    /**
+     * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
+     * @returns {void}
+     */
+    movePaneDown(uuid) {
+        this.canvasBoundsContainer.movePaneDown(uuid);
+    }
+    /**
+     * Checks if the current pane can move up.
+     * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     */
+    canMovePaneUp(uuid) {
+        var _a, _b;
+        const firstVisiblePane = firstOf(this.canvasBoundsContainer.panesOrder.filter(uuid => { var _a, _b; return (_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false; }));
+        return uuid !== firstVisiblePane && ((_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false);
+    }
+    /**
+     * Checks if the current pane can move down.
+     *
+     * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     */
+    canMovePaneDown(uuid) {
+        var _a, _b;
+        const lastVisiblePane = lastOf(this.canvasBoundsContainer.panesOrder.filter(uuid => { var _a, _b; return (_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false; }));
+        return uuid !== lastVisiblePane && ((_b = (_a = this.panes[uuid]) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : false);
+    }
     /**
      * Removes pane from the chart and all related components
      * @param uuid
      */
     removePane(uuid) {
         const pane = this.panes[uuid];
-        if (pane !== undefined) {
-            this.paneRemovedSubject.next(pane);
-            pane.disable();
-            pane.yExtentComponents.forEach(yExtentComponent => yExtentComponent.disable());
-            delete this.panes[uuid];
-            this.recalculateState();
+        if (pane === undefined) {
+            return;
+        }
+        this.paneRemovedSubject.next(pane);
+        pane.disable();
+        pane.yExtentComponents.forEach(yExtentComponent => yExtentComponent.disable());
+        delete this.panes[uuid];
+        this.recalculateState();
+    }
+    /**
+     * Hides a pane from the chart and all related components
+     */
+    hidePane(paneUUID) {
+        const pane = this.panes[paneUUID];
+        // hide pane only if we have more than one visible pane
+        if (pane === undefined || !pane.visible) {
+            return;
         }
+        const paneResizerId = CanvasElement.PANE_UUID_RESIZER(paneUUID);
+        const resizer = this.userInputListenerComponents.find(el => el instanceof BarResizerComponent && el.id === paneResizerId);
+        resizer === null || resizer === void 0 ? void 0 : resizer.disable();
+        this.canvasBoundsContainer.hidePaneBounds(paneUUID);
+        this.recalculateState();
+    }
+    /**
+     * Shows a pane, use if the pane is hidden
+     */
+    showPane(paneUUID) {
+        const pane = this.panes[paneUUID];
+        const paneResizerId = CanvasElement.PANE_UUID_RESIZER(paneUUID);
+        if (pane === undefined || pane.visible) {
+            return;
+        }
+        const resizer = this.userInputListenerComponents.find(el => el instanceof BarResizerComponent && el.id === paneResizerId);
+        resizer === null || resizer === void 0 ? void 0 : resizer.enable();
+        this.canvasBoundsContainer.showPaneBounds(paneUUID);
+        this.recalculateState();
     }
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.

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

@@ -44,7 +44,6 @@ export declare class PaneComponent extends ChartBaseElement {
     seriesAddedSubject: Subject<DataSeriesModel>;
     seriesRemovedSubject: Subject<DataSeriesModel>;
     private hitTestCanvasModel;
-    private _paneOrder;
     /**
      * Pane hit test (without Y-Axis and resizer)
      */
@@ -53,6 +52,7 @@ export declare class PaneComponent extends ChartBaseElement {
     get scale(): ScaleModel;
     get yAxis(): YAxisComponent;
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint>[];
+    get visible(): boolean;
     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>, hitTestCanvasModel: HitTestCanvasModel, options?: AtLeastOne<YExtentCreationOptions>);
     /**
@@ -96,22 +96,6 @@ export declare class PaneComponent extends ChartBaseElement {
      * Returns the bounds of the pane component.
      */
     getBounds(): Bounds;
-    /**
-     * Hides the pane by removing its bounds from the canvasBoundsContainer and firing a draw event.
-     * @function
-     * @name hide
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    hide(): void;
-    /**
-     * Adds the bounds of the pane to the canvas bounds container and fires a draw event.
-     * @function
-     * @name show
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    show(): void;
     /**
      * Creates a new DataSeriesModel object.
      * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
@@ -140,22 +124,26 @@ export declare class PaneComponent extends ChartBaseElement {
     /**
      * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneUp()` instead
      */
     moveUp(): void;
     /**
      * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneDown()` instead
      */
     moveDown(): void;
     /**
      * Checks if the current pane can move up.
      * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     * @deprecated Use `paneManager.canMovePaneUp()` instead
      */
     canMoveUp(): boolean;
     /**
      * Checks if the current pane can move down.
      *
      * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     * @deprecated Use `paneManager.canMovePaneDown()` instead
      */
     canMoveDown(): boolean;
     valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;

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

@@ -22,6 +22,9 @@ export class PaneComponent extends ChartBaseElement {
     get dataSeries() {
         return flatMap(this.yExtentComponents, c => Array.from(c.dataSeries));
     }
+    get visible() {
+        return this.canvasBoundsContainer.graphsHeightRatio[this.uuid] > 0;
+    }
     constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, options) {
         super();
         this.chartBaseModel = chartBaseModel;
@@ -42,7 +45,6 @@ export class PaneComponent extends ChartBaseElement {
         this.seriesAddedSubject = seriesAddedSubject;
         this.seriesRemovedSubject = seriesRemovedSubject;
         this.hitTestCanvasModel = hitTestCanvasModel;
-        this._paneOrder = 0;
         this.yExtentComponents = [];
         this.getYAxisBounds = () => {
             return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.uuid));
@@ -176,29 +178,6 @@ export class PaneComponent extends ChartBaseElement {
     getBounds() {
         return this.mainExtent.getBounds();
     }
-    /**
-     * Hides the pane by removing its bounds from the canvasBoundsContainer and firing a draw event.
-     * @function
-     * @name hide
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    hide() {
-        this._paneOrder = this.canvasBoundsContainer.panesOrder.indexOf(this.uuid);
-        this.canvasBoundsContainer.removedPaneBounds(this.uuid);
-        this.eventBus.fireDraw();
-    }
-    /**
-     * Adds the bounds of the pane to the canvas bounds container and fires a draw event.
-     * @function
-     * @name show
-     * @memberof PaneComponent
-     * @returns {void}
-     */
-    show() {
-        this.canvasBoundsContainer.addPaneBounds(this.uuid, this._paneOrder);
-        this.eventBus.fireDraw();
-    }
     /**
      * Creates a new DataSeriesModel object.
      * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
@@ -239,6 +218,7 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneUp()` instead
      */
     moveUp() {
         this.canvasBoundsContainer.movePaneUp(this.uuid);
@@ -246,6 +226,7 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
      * @returns {void}
+     * @deprecated Use `paneManager.movePaneDown()` instead
      */
     moveDown() {
         this.canvasBoundsContainer.movePaneDown(this.uuid);
@@ -253,19 +234,21 @@ export class PaneComponent extends ChartBaseElement {
     /**
      * Checks if the current pane can move up.
      * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     * @deprecated Use `paneManager.canMovePaneUp()` instead
      */
     canMoveUp() {
-        const firstPane = firstOf(this.canvasBoundsContainer.panesOrder);
-        return this.uuid !== firstPane;
+        const firstVisiblePane = firstOf(this.canvasBoundsContainer.panesOrder.filter(uuid => this.canvasBoundsContainer.graphsHeightRatio[uuid] > 0));
+        return this.uuid !== firstVisiblePane && this.visible;
     }
     /**
      * Checks if the current pane can move down.
      *
      * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     * @deprecated Use `paneManager.canMovePaneDown()` instead
      */
     canMoveDown() {
-        const lastPane = lastOf(this.canvasBoundsContainer.panesOrder);
-        return this.uuid !== lastPane;
+        const lastVisiblePane = lastOf(this.canvasBoundsContainer.panesOrder.filter(uuid => this.canvasBoundsContainer.graphsHeightRatio[uuid] > 0));
+        return this.uuid !== lastVisiblePane && this.visible;
     }
     get regularFormatter() {
         return this.mainExtent.formatters.regular;

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

@@ -22,7 +22,7 @@ import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
  * @doc-tags chart-core,resizer
  */
 export declare class BarResizerComponent extends ChartBaseElement {
-    private id;
+    readonly id: string;
     private boundsProvider;
     private hitTest;
     private dragTickCb;

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

@@ -39,6 +39,7 @@ export class BarResizerComponent extends ChartBaseElement {
             this.initialY = this.boundsProvider().y;
             // Stop redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
+            this.chartPanComponent.deactivatePanHandlers();
         };
         this.onYDragEnd = () => {
             this.config.components.crossTool.type = 'cross-and-labels';
@@ -46,6 +47,7 @@ export class BarResizerComponent extends ChartBaseElement {
             this.canvasBoundsContainer.graphsHeightRatioChangedSubject.next(this.canvasBoundsContainer.graphsHeightRatio);
             // Continue redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
+            this.chartPanComponent.activateChartPanHandlers();
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: yDelta, draggedPixels } = dragInfo;
@@ -75,7 +77,7 @@ export class BarResizerComponent extends ChartBaseElement {
             const dragNDropYComponent = new DragNDropYComponent(this.hitTest, {
                 onDragTick: this.onYDragTick,
                 onDragStart: this.onYDragStart,
-                onDragEnd: this.onYDragEnd
+                onDragEnd: this.onYDragEnd,
             }, this.canvasInputListener, this.chartPanComponent, {
                 dragPredicate: this.dragPredicate,
             });

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

@@ -4,7 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { Subject } from 'rxjs';
-import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { CanvasElement, DEFAULT_MIN_PANE_HEIGHT } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 // if you drag full Y height from top to bottom - you will have x3 zoom, and vice-versa
@@ -35,7 +35,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
             this.lastYStart = this.scale.yStart;
             this.lastYEnd = this.scale.yEnd;
             this.lastYHeight = this.scale.yEnd - this.scale.yStart;
-            this.lastYPxHeight = this.bounds.getBounds(CanvasElement.Y_AXIS).height;
+            this.lastYPxHeight = Math.max(this.bounds.getBounds(CanvasElement.Y_AXIS).height, DEFAULT_MIN_PANE_HEIGHT);
             // Stop redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
@@ -73,7 +73,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 onDragStart: this.onYDragStart,
                 onDragEnd: this.onYDragEnd,
             }, canvasInputListener, panning, {
-                dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent' && config.visible,
+                dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent',
             });
             this.addChildEntity(dragNDropYComponent);
         }

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

@@ -176,7 +176,7 @@ export class YAxisComponent extends ChartBaseElement {
     setVisible(isVisible) {
         this.state.visible = isVisible;
         this.config.components.yAxis.visible = isVisible;
-        isVisible ? this.enable() : this.disable();
+        isVisible ? this.activate() : this.deactivate();
         this.model.fancyLabelsModel.updateLabels();
         this.model.baseLabelsModel.updateLabels();
     }

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

@@ -58,7 +58,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
     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);
+    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number) => string);
     /**
      * This method is responsible for activating the chart hover functionality. It subscribes to several observables to
      * update the hover when the chart is updated or when the user interacts with it. It also handles special behavior

package/dist/chart/inputhandlers/main-canvas-touch.handler.d.ts

@@ -6,15 +6,19 @@
 import { ChartBaseElement } from '../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
 import { ScaleModel } from '../model/scale.model';
+import { ChartAreaPanHandler } from '../components/chart/chart-area-pan.handler';
 /**
  * Handles chart touch events.
  */
 export declare class MainCanvasTouchHandler extends ChartBaseElement {
+    private chartAreaPanHandler;
     private scale;
     private canvasInputListeners;
     private mainCanvasParent;
     private touchedCandleIndexes;
-    constructor(scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
+    private pinchDistance;
+    private isDraggable;
+    constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
     /**
      * Activates canvas input listeners for touch start and touch move events.
      * @protected
@@ -31,8 +35,13 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
      * Handles touch move event
      * @param {TouchEvent} e - The touch event object
      * @returns {void}
-    */
+     */
     private handleTouchMoveEvent;
+    /**
+     * Handles touch end event
+     * @returns {void}
+     */
+    private handleTouchEndEvent;
     /**
      * Gets candle positions touched by user in pixels.
      * @param e - touch event with "touches" array

package/dist/chart/inputhandlers/main-canvas-touch.handler.js

@@ -4,17 +4,23 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartBaseElement } from '../model/chart-base-element';
+const MIN_PINCH_DISTANCE = 30;
 /**
  * Handles chart touch events.
  */
 export class MainCanvasTouchHandler extends ChartBaseElement {
-    constructor(scale, canvasInputListeners, mainCanvasParent) {
+    constructor(chartAreaPanHandler, scale, canvasInputListeners, mainCanvasParent) {
         super();
+        this.chartAreaPanHandler = chartAreaPanHandler;
         this.scale = scale;
         this.canvasInputListeners = canvasInputListeners;
         this.mainCanvasParent = mainCanvasParent;
         // 2 candles indexes touched by 2 fingers when pinching
         this.touchedCandleIndexes = [0, 0];
+        // number of px between touch events
+        this.pinchDistance = 0;
+        // used when maximum zoom in/out reached, can't use deactivate because it unsubscribes from all touch events
+        this.isDraggable = true;
     }
     /**
      * Activates canvas input listeners for touch start and touch move events.
@@ -24,6 +30,7 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
     doActivate() {
         this.addRxSubscription(this.canvasInputListeners.observeTouchStart().subscribe(e => this.handleTouchStartEvent(e)));
         this.addRxSubscription(this.canvasInputListeners.observeTouchMove().subscribe(e => this.handleTouchMoveEvent(e)));
+        this.addRxSubscription(this.canvasInputListeners.observeTouchEndDocument().subscribe(e => this.handleTouchEndEvent(e)));
     }
     /**
      * Handles the touch start event.
@@ -32,6 +39,8 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      */
     handleTouchStartEvent(e) {
         if (e.touches.length === 2) {
+            this.isDraggable = true;
+            this.chartAreaPanHandler.deactivate();
             // @ts-ignore
             // TODO rework this
             this.touchedCandleIndexes = this.getXPositions(e).map(x => this.scale.fromX(x));
@@ -41,12 +50,22 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * Handles touch move event
      * @param {TouchEvent} e - The touch event object
      * @returns {void}
-    */
+     */
     handleTouchMoveEvent(e) {
         if (e.touches.length === 2) {
             this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
         }
     }
+    /**
+     * Handles touch end event
+     * @returns {void}
+     */
+    handleTouchEndEvent(e) {
+        // zero touches means the user stopped resizing completely (both fingers are up)
+        if (e.touches.length === 0) {
+            this.chartAreaPanHandler.activate();
+        }
+    }
     /**
      * Gets candle positions touched by user in pixels.
      * @param e - touch event with "touches" array
@@ -70,11 +89,24 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     pinchHandler(candleIndexes, touchPositions) {
+        const diff = Math.abs(touchPositions[0]) - Math.abs(touchPositions[1]);
+        const pinchDistance = Math.abs(diff);
+        const zoomIn = pinchDistance > this.pinchDistance;
+        if (this.scale.isMaxZoomXReached(zoomIn)) {
+            this.isDraggable = false;
+        }
+        if (!this.isDraggable || pinchDistance < MIN_PINCH_DISTANCE) {
+            return;
+        }
+        this.pinchDistance = pinchDistance;
         const first = (touchPositions[0] * candleIndexes[1] - touchPositions[1] * candleIndexes[0]) /
             (touchPositions[0] - touchPositions[1]);
         const last = first +
             ((candleIndexes[0] - candleIndexes[1]) / (touchPositions[0] - touchPositions[1])) *
                 this.scale.getBounds().width;
+        if (first >= last) {
+            return;
+        }
         this.scale.setXScale(first, last);
     }
 }