@devexperts/dxcharts-lite 2.4.5 → 2.5.0

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

@@ -3,21 +3,19 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { merge, animationFrameScheduler } from 'rxjs';
-import { throttleTime } from 'rxjs/operators';
+import { animationFrameScheduler } from 'rxjs';
+import { throttleTime, filter } from 'rxjs/operators';
 import { VIEWPORT_ANIMATION_ID } from '../../animation/canvas-animation';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
-import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { pixelsToUnits } from '../../model/scaling/viewport.model';
 import { deviceDetector } from '../../utils/device/device-detector.utils';
-import { getTouchpadSensitivity, touchpadDetector } from '../../utils/device/touchpad.utils';
+import { getTouchpadSensitivity } from '../../utils/device/touchpad.utils';
 import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 /**
  * ChartAreaPanHandler is a class that handles the panning and zooming of the chart area.
  * It extends the ChartBaseElement class and has the following properties:
- * @property {MainCanvasTouchHandler} touchHandler - An instance of the MainCanvasTouchHandler class.
  * @property {Point} currentPoint - An object that represents the current point of the chart area.
  * @property {number} xDraggedCandlesDelta - A number that represents the number of candles delta changed during X dragging.
  * @property {number} lastXStart - A number that represents the last X start position.
@@ -27,7 +25,6 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
  * @param {EventBus} bus - An instance of the EventBus class.
  * @param {FullChartConfig} config - An instance of the FullChartConfig class.
  * @param {ScaleModel} scaleModel - An instance of the ScaleModel class.
- * @param {Element} mainCanvasParent - The parent element of the main canvas.
  * @param {CanvasInputListenerComponent} canvasInputListener - An instance of the CanvasInputListenerComponent class.
  * @param {CanvasBoundsContainer} canvasBoundsContainer - An instance of the CanvasBoundsContainer class.
  * @param {CanvasAnimation} canvasAnimation - An instance of the CanvasAnimation class.
@@ -35,12 +32,11 @@ 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, hitTestCanvasModel) {
+    constructor(bus, config, scale, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
         super();
         this.bus = bus;
         this.config = config;
         this.scale = scale;
-        this.mainCanvasParent = mainCanvasParent;
         this.canvasInputListener = canvasInputListener;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.canvasAnimation = canvasAnimation;
@@ -50,7 +46,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         // number of candles delta changed during X dragging: 1, 5 or -3 for ex.
         this.xDraggedCandlesDelta = 0;
         this.lastXStart = 0;
-        this.wheelTrottleTime = 15; // in ms
+        this.wheelThrottleTime = 15; // in ms
+        this.chartPanningOptions = { horizontal: true, vertical: true };
         /**
          * 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.
@@ -96,7 +93,6 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             // 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, {
@@ -104,7 +100,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
-            disableChartPanning: false,
+            dragPredicate: () => this.chartPanningOptions.horizontal,
         });
         this.addChildEntity(dragNDropXComponent);
         //#endregion
@@ -119,45 +115,50 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         //#region hit tests
         const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         //#endregion
-        this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
-            .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
-            .subscribe(e => {
-            const isTouchpad = touchpadDetector(e);
-            const zoomSensitivity = isTouchpad
-                ? getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.pinch)
-                : this.config.scale.zoomSensitivity.wheel;
-            this.zoomXHandler(e, zoomSensitivity);
-        }));
         this.addRxSubscription(this.canvasInputListener
-            .observeScrollGesture()
-            .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
-            .subscribe((e) => {
-            let direction = -1;
+            .observeWheel(allPanesHitTest)
+            .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), throttleTime(this.wheelThrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
+            .subscribe(e => {
             const device = deviceDetector();
-            if (device === 'apple' || device === 'mobile') {
-                direction = 1;
+            const direction = device === 'apple' || device === 'mobile' ? 1 : -1;
+            const deltaX = 0 + e.deltaX * direction;
+            const deltaY = 0 + e.deltaY * -direction;
+            if (e.ctrlKey) {
+                const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
+                this.zoomXHandler(e, zoomSensitivity);
+                this.bus.fireDraw();
+                return;
+            }
+            // also works for geasture touchpad vertical case
+            if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
+                this.zoomXHandler(e, zoomSensitivity);
+                this.bus.fireDraw();
             }
-            let deltaX = 0;
-            let deltaY = 0;
-            deltaX += e.deltaX * direction;
-            deltaY += e.deltaY * -direction;
+            // also works for geasture touchpad horizontal case
             if (deltaX !== 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
                 const unitsDelta = pixelsToUnits(deltaX, this.scale.zoomX);
                 this.scale.moveXStart(this.scale.xStart - unitsDelta);
+                this.bus.fireDraw();
+                return;
             }
-            else if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
-                const zoomSensitivity = getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.glide);
-                this.zoomXHandler(e, zoomSensitivity);
-            }
-            this.bus.fireDraw();
         }));
         this.addRxSubscription(this.chartPanComponent.chartBaseModel.dataPrependSubject
             .asObservable()
             .subscribe(({ prependedCandlesWidth }) => {
             this.lastXStart += prependedCandlesWidth;
         }));
-        this.touchHandler.activate();
-        this.addSubscription(this.touchHandler.deactivate.bind(this.touchHandler));
+    }
+    calculateDynamicSesitivity(e, maxSensitivity) {
+        // max delta distance that touchpad can provide
+        const MAX_POSSIBLE_DELTA = 100;
+        // get max delta
+        const delta = Math.max(Math.abs(e.deltaY), Math.abs(e.deltaX));
+        // calculate sensitivity for max delta based on touchpad it's distance
+        const caclulatedSensitivity = (maxSensitivity * delta) / MAX_POSSIBLE_DELTA;
+        // adjust sencitivity for percent axis type
+        const zoomSensitivity = getTouchpadSensitivity(this.config.components.yAxis.type, caclulatedSensitivity);
+        return zoomSensitivity;
     }
     /**
      * Registers a handler for panning the chart along the Y-axis.
@@ -173,6 +174,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             this.canvasAnimation.forceStopAnimation(VIEWPORT_ANIMATION_ID);
             this.currentPoint = { x: 0, y: 0 };
             lastYStart = scale.yStart;
+            // Stop redrawing hit test
+            this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         const onYDragTick = (dragInfo) => {
             const { delta: absoluteDelta } = dragInfo;
@@ -196,7 +199,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             onDragStart: onYDragStart,
             onDragEnd: onYDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
-            disableChartPanning: false,
+            dragPredicate: () => this.chartPanningOptions.vertical,
         });
         this.addChildEntity(dragNDropYComponent);
         return dragNDropYComponent;

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

@@ -46,7 +46,6 @@ export declare class ChartModel extends ChartBaseElement {
     candleSeries: Array<CandleSeriesModel>;
     get mainCandleSeries(): CandleSeriesModel;
     get secondaryCandleSeries(): Array<CandleSeriesModel>;
-    readonly nextCandleTimeStampSubject: Subject<void>;
     readonly chartTypeChanged: Subject<BarType>;
     readonly mainInstrumentChangedSubject: Subject<ChartInstrument>;
     readonly offsetsChanged: Subject<void>;

package/dist/chart/components/chart/chart.model.js

@@ -47,7 +47,6 @@ export class ChartModel extends ChartBaseElement {
         this.prevChartWidth = 0;
         this.prevYWidth = 0;
         this.candleSeries = [];
-        this.nextCandleTimeStampSubject = new Subject();
         this.chartTypeChanged = new Subject();
         this.mainInstrumentChangedSubject = new Subject();
         this.offsetsChanged = new Subject();

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

@@ -18,10 +18,4 @@ export declare class DragNDropXComponent extends DragNDropComponent {
      * @returns {void}
      */
     protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is used to deactivate the current object and perform any necessary cleanup operations.
-     * @protected
-     */
-    protected doDeactivate(): void;
 }

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

@@ -22,12 +22,4 @@ export class DragNDropXComponent extends DragNDropComponent {
         this.addRxSubscription(this.canvasInputListener.observeXDrag().subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeXDragEnd().subscribe(this.onDragEnd));
     }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is used to deactivate the current object and perform any necessary cleanup operations.
-     * @protected
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }

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

@@ -15,9 +15,4 @@ export declare class DragNDropYComponent extends DragNDropComponent {
      * @returns {void}
      */
     protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls the parent method before executing its own code.
-     * It is a protected method, which means it can only be accessed within the class and its subclasses.
-     */
-    protected doDeactivate(): void;
 }

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

@@ -19,11 +19,4 @@ export class DragNDropYComponent extends DragNDropComponent {
         this.addRxSubscription(this.canvasInputListener.observeYDrag().subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeYDragEnd().subscribe(this.onDragEnd));
     }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls the parent method before executing its own code.
-     * It is a protected method, which means it can only be accessed within the class and its subclasses.
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }

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

@@ -12,7 +12,7 @@ export interface DragInfo {
     draggedPixels: number;
 }
 export interface DragComponentOptions {
-    disableChartPanning: boolean;
+    dragPredicate: () => boolean;
 }
 export interface DragNDropComponentCallbacks {
     onDragStart?: (point: Point) => void;
@@ -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

@@ -5,7 +5,7 @@
  */
 import { ChartBaseElement } from '../../model/chart-base-element';
 export const defaultDragComponentOptions = {
-    disableChartPanning: true,
+    dragPredicate: () => true,
 };
 export class DragNDropComponent extends ChartBaseElement {
     constructor(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions) {
@@ -18,41 +18,30 @@ export class DragNDropComponent extends ChartBaseElement {
         this.dragging = false;
         this.draggedPixels = 0;
         this.onDragStart = (point) => {
-            this.dragging = true;
-            this.draggedPixels = 0;
-            this.dragCallbacks.onDragStart && this.dragCallbacks.onDragStart(point);
-            this.dragComponentOptions.disableChartPanning && this.chartPanComponent.deactivatePanHandlers();
+            if (this.dragComponentOptions.dragPredicate()) {
+                this.dragging = true;
+                this.draggedPixels = 0;
+                this.dragCallbacks.onDragStart && this.dragCallbacks.onDragStart(point);
+            }
         };
         this.onDragTick = (yDelta) => {
-            if (this.dragging) {
-                this.draggedPixels += yDelta;
-                this.dragCallbacks.onDragTick({
-                    delta: yDelta,
-                    draggedPixels: this.draggedPixels,
-                });
+            if (this.dragComponentOptions.dragPredicate()) {
+                if (this.dragging) {
+                    this.draggedPixels += yDelta;
+                    this.dragCallbacks.onDragTick({
+                        delta: yDelta,
+                        draggedPixels: this.draggedPixels,
+                    });
+                }
             }
         };
         this.onDragEnd = () => {
-            if (this.dragging) {
-                this.dragging = false;
-                this.dragCallbacks.onDragEnd && this.dragCallbacks.onDragEnd(this.draggedPixels);
-                this.dragComponentOptions.disableChartPanning && this.chartPanComponent.activateChartPanHandlers();
+            if (this.dragComponentOptions.dragPredicate()) {
+                if (this.dragging) {
+                    this.dragging = false;
+                    this.dragCallbacks.onDragEnd && this.dragCallbacks.onDragEnd(this.draggedPixels);
+                }
             }
         };
     }
-    /**
-     * 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/dynamic-objects/dynamic-objects.model.d.ts

@@ -34,15 +34,18 @@ export declare class DynamicObjectsModel extends ChartBaseElement {
     /**
      * Adds an object from outside chart-core into model
      * @param obj
-     * @param paneId
      */
     addObject(obj: DynamicObject): void;
     /**
      * Removes an object from model
-     * @param model
-     * @param paneId
+     * @param id
      */
     removeObject(id: DynamicObjectId): void;
+    /**
+     * Updates an object
+     * @param obj
+     */
+    updateObject(obj: DynamicObject): void;
     /**
      * Moves the object inside the associated LinkedList to the specified position
      */

package/dist/chart/components/dynamic-objects/dynamic-objects.model.js

@@ -47,7 +47,6 @@ export class DynamicObjectsModel extends ChartBaseElement {
     /**
      * Adds an object from outside chart-core into model
      * @param obj
-     * @param paneId
      */
     addObject(obj) {
         var _a;
@@ -63,8 +62,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
     }
     /**
      * Removes an object from model
-     * @param model
-     * @param paneId
+     * @param id
      */
     removeObject(id) {
         const objInfo = this.getObjectInfoById(id);
@@ -81,6 +79,19 @@ export class DynamicObjectsModel extends ChartBaseElement {
         }
         this.setDynamicObjects(this.objects);
     }
+    /**
+     * Updates an object
+     * @param obj
+     */
+    updateObject(obj) {
+        const objInfo = this.getObjectInfoById(obj.id);
+        if (!objInfo) {
+            return;
+        }
+        const [oldObj] = objInfo;
+        this.removeObject(oldObj.id);
+        this.addObject(obj);
+    }
     /**
      * Moves the object inside the associated LinkedList to the specified position
      */

package/dist/chart/components/hit-test/hit-test.component.d.ts

@@ -4,11 +4,13 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasAnimation } from '../../animation/canvas-animation';
+import EventBus from '../../events/event-bus';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 export declare class HitTestComponent extends ChartBaseElement {
     private hitTestCanvasModel;
     private canvasAnimation;
-    constructor(hitTestCanvasModel: HitTestCanvasModel, canvasAnimation: CanvasAnimation);
+    private eventBus;
+    constructor(hitTestCanvasModel: HitTestCanvasModel, canvasAnimation: CanvasAnimation, eventBus: EventBus);
     protected doActivate(): void;
 }

package/dist/chart/components/hit-test/hit-test.component.js

@@ -3,12 +3,14 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+import { distinctUntilChanged } from 'rxjs/operators';
 import { ChartBaseElement } from '../../model/chart-base-element';
 export class HitTestComponent extends ChartBaseElement {
-    constructor(hitTestCanvasModel, canvasAnimation) {
+    constructor(hitTestCanvasModel, canvasAnimation, eventBus) {
         super();
         this.hitTestCanvasModel = hitTestCanvasModel;
         this.canvasAnimation = canvasAnimation;
+        this.eventBus = eventBus;
     }
     doActivate() {
         super.doActivate();
@@ -16,5 +18,8 @@ export class HitTestComponent extends ChartBaseElement {
             const animationInProgress = this.canvasAnimation.animationInProgressSubject.getValue();
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(!animationInProgress);
         }));
+        this.addRxSubscription(this.hitTestCanvasModel.hitTestDrawersPredicateSubject
+            .pipe(distinctUntilChanged((prev, cur) => prev !== cur && prev === true && cur === false))
+            .subscribe(() => this.eventBus.fireDraw([this.hitTestCanvasModel.canvasId])));
     }
 }

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
@@ -51,4 +40,5 @@ export declare class ChartPanComponent extends ChartBaseElement {
      * Deactivates all the pan handlers of the chart.
      */
     deactivatePanHandlers(): void;
+    setChartPanningOptions(horizontal: boolean, vertical: boolean): void;
 }

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,12 +32,15 @@ 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/extent/y-extent-component.d.ts

@@ -4,6 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
+import { YAxisConfig } from '../../../chart.config';
 import { Bounds } from '../../../model/bounds.model';
 import { CanvasModel } from '../../../model/canvas.model';
 import { ChartBaseElement } from '../../../model/chart-base-element';
@@ -23,6 +24,7 @@ export interface YExtentCreationOptions {
     cursor: string;
     paneFormatters: YExtentFormatters;
     increment: number | null;
+    initialYAxisState: YAxisConfig;
 }
 export declare class YExtentComponent extends ChartBaseElement {
     paneUUID: string;

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