@devexperts/dxcharts-lite 2.4.5 → 2.5.0

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));
@@ -119,10 +121,11 @@ export class PaneComponent extends ChartBaseElement {
         const chartPaneId = CanvasElement.PANE_UUID(this.uuid);
         const getBounds = () => this.canvasBoundsContainer.getBounds(chartPaneId);
         const scaleModel = (_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : new SyncedByXScaleModel(this.mainScale, this.config, getBounds, this.canvasAnimation);
+        const initialYAxisState = options === null || options === void 0 ? void 0 : options.initialYAxisState;
         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, this.hitTestCanvasModel);
+        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, initialYAxisState);
         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));
@@ -175,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.
@@ -238,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);
@@ -245,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);
@@ -252,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;
@@ -73,10 +75,12 @@ export class BarResizerComponent extends ChartBaseElement {
         const fixedMode = this.config.components.paneResizer.fixedMode;
         if (!fixedMode) {
             const dragNDropYComponent = new DragNDropYComponent(this.hitTest, {
-                onDragTick: callIfPredicateTrue(this.onYDragTick, this.dragPredicate),
-                onDragStart: callIfPredicateTrue(this.onYDragStart, this.dragPredicate),
-                onDragEnd: callIfPredicateTrue(this.onYDragEnd, this.dragPredicate)
-            }, this.canvasInputListener, this.chartPanComponent);
+                onDragTick: this.onYDragTick,
+                onDragStart: this.onYDragStart,
+                onDragEnd: this.onYDragEnd,
+            }, this.canvasInputListener, this.chartPanComponent, {
+                dragPredicate: this.dragPredicate,
+            });
             this.addChildEntity(dragNDropYComponent);
             if (this.config.animation.paneResizer.enabled) {
                 this.addRxSubscription(this.canvasInputListener
@@ -148,4 +152,3 @@ export class BarResizerComponent extends ChartBaseElement {
         }
     }
 }
-const callIfPredicateTrue = (fun, predicate) => (...args) => predicate() && fun(...args);

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

@@ -51,7 +51,7 @@ export class XAxisScaleHandler extends ChartBaseElement {
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
-            disableChartPanning: false,
+            dragPredicate: () => chartPanComponent.chartAreaPanHandler.chartPanningOptions.horizontal,
         });
         this.addChildEntity(dragNDropXComponent);
     }

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

@@ -65,11 +65,9 @@ export declare class FancyYAxisLabelsModel extends ChartBaseElement {
     /**
      * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
      * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:
-     * - chartModel.observeCandlesChanged()
      * - canvasBoundsContainer.observeBoundsChanged(CanvasElement.CHART)
-     * - chartModel.nextCandleTimeStampSubject
      * - canvasBoundsContainer.barResizerChangedSubject
-     * - chartModel.scale.changed
+     * - scale changed
      * When any of these observables emit a new value, the updateLabels() method is called.
      * @protected
      */

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

@@ -48,11 +48,9 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
     /**
      * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
      * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:
-     * - chartModel.observeCandlesChanged()
      * - canvasBoundsContainer.observeBoundsChanged(CanvasElement.CHART)
-     * - chartModel.nextCandleTimeStampSubject
      * - canvasBoundsContainer.barResizerChangedSubject
-     * - chartModel.scale.changed
+     * - scale changed
      * When any of these observables emit a new value, the updateLabels() method is called.
      * @protected
      */

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);
         };
@@ -68,13 +68,12 @@ export class YAxisScaleHandler extends ChartBaseElement {
         };
         // drag to Y-scale and double click to auto scale
         if (config.customScale) {
-            const dragPredicate = () => config.type !== 'percent' && config.visible;
             const dragNDropYComponent = new DragNDropYComponent(hitTest, {
-                onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
-                onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),
-                onDragEnd: callIfPredicateTrue(this.onYDragEnd, dragPredicate),
+                onDragTick: this.onYDragTick,
+                onDragStart: this.onYDragStart,
+                onDragEnd: this.onYDragEnd,
             }, canvasInputListener, panning, {
-                disableChartPanning: false,
+                dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent',
             });
             this.addChildEntity(dragNDropYComponent);
         }
@@ -88,4 +87,3 @@ export class YAxisScaleHandler extends ChartBaseElement {
         }
     }
 }
-const callIfPredicateTrue = (fun, predicate) => (...args) => predicate() && fun(...args);

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

@@ -40,7 +40,7 @@ export declare class YAxisComponent extends ChartBaseElement {
     model: YAxisModel;
     axisTypeSetSubject: Subject<PriceAxisType>;
     readonly state: YAxisConfig;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, initialState?: YAxisConfig);
     /**
      * Registers default label color resolvers for different chart types.
      * @private

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

@@ -6,17 +6,17 @@
 import { Subject } from 'rxjs';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { cloneUnsafe } from '../../utils/object.utils';
 import { uuid } from '../../utils/uuid.utils';
 import { resolveColorForArea, resolveColorForBar, resolveColorForBaseLine, resolveColorForCandle, resolveColorForHistogram, resolveColorForLine, resolveColorForScatterPlot, resolveColorForTrendAndHollow, resolveDefaultColorForLabel, } from './label-color.functions';
 import { LabelsGroups } from './price_labels/y-axis-labels.model';
 import { YAxisScaleHandler } from './y-axis-scale.handler';
 import { YAxisModel } from './y-axis.model';
+import { merge as mergeObj } from '../../utils/merge.utils';
 /**
  * Y axis component. Contains all Y axis related logic.
  */
 export class YAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel) {
+    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, initialState) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -28,7 +28,10 @@ export class YAxisComponent extends ChartBaseElement {
         this.extentIdx = extentIdx;
         this.labelsColorByChartTypeMap = {};
         this.axisTypeSetSubject = new Subject();
-        this.state = cloneUnsafe(config.components.yAxis);
+        this.state = mergeObj(initialState !== null && initialState !== void 0 ? initialState : {}, config.components.yAxis, {
+            overrideExisting: false,
+            addIfMissing: true,
+        });
         //#region init yAxisScaleHandler
         this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), auto => scale.autoScale(auto), hitTestCanvasModel);
         this.addChildEntity(this.yAxisScaleHandler);
@@ -173,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,13 +35,13 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
      * Handles touch move event
      * @param {TouchEvent} e - The touch event object
      * @returns {void}
-     
-    private handleTouchMoveEvent(e: TouchEvent): void {
-        if (e.touches.length === 2) {
-            this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
-        }
-    }*/
+     */
     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,17 +50,22 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * Handles touch move event
      * @param {TouchEvent} e - The touch event object
      * @returns {void}
-     
-    private handleTouchMoveEvent(e: TouchEvent): void {
-        if (e.touches.length === 2) {
-            this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
-        }
-    }*/
+     */
     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
@@ -75,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);
     }
 }

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

@@ -51,8 +51,6 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private longTouchStartSubject;
     private longTouchEndSubject;
     private contextMenuSubject;
-    private pinchSubject;
-    private scrollGestureSubject;
     private fastTouchScroll;
     mouseLeavesCanvasSubject: Subject<boolean>;
     dragStartPoint: Point;
@@ -242,18 +240,6 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent objects.
      */
     observeWheel(hitBoundsTest?: HitBoundsTest): Observable<WheelEvent>;
-    /**
-     * Returns an Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
-     * @param {HitBoundsTest} hitBoundsTest - A function that takes the current point's x and y coordinates as arguments and returns a boolean indicating whether the point is within the desired bounds.
-     * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
-     */
-    observePinch(hitBoundsTest?: HitBoundsTest): Observable<WheelEvent>;
-    /**
-     * Returns an Observable that emits a WheelEvent whenever a scroll gesture is detected.
-     * The Observable is created from a Subject that is subscribed to by the component's template.
-     * @returns {Observable<WheelEvent>} An Observable that emits a WheelEvent whenever a scroll gesture is detected.
-     */
-    observeScrollGesture(): Observable<WheelEvent>;
     /**
      * Returns an Observable that emits TouchEvent when a touchstart event occurs within the bounds of the current point.
      * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the touch event occurred within the bounds of the current point.