@devexperts/dxcharts-lite 2.2.0 → 2.4.0

package/dist/chart/drawers/chart-background.drawer.d.ts

@@ -9,10 +9,9 @@ import { FullChartConfig } from '../chart.config';
 export declare class BackgroundDrawer implements Drawer {
     private canvasModel;
     private config;
-    constructor(canvasModel: CanvasModel, config: FullChartConfig);
+    private backgroundDrawPredicate;
+    constructor(canvasModel: CanvasModel, config: FullChartConfig, backgroundDrawPredicate?: () => boolean);
     private prevState;
-    private prevWidth;
-    private prevHeight;
     draw(): void;
     getCanvasIds(): Array<string>;
 }

package/dist/chart/drawers/chart-background.drawer.js

@@ -4,39 +4,33 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { getDPR } from '../utils/device/device-pixel-ratio.utils';
-import { deepEqual } from '../utils/object.utils';
 import { floor } from '../utils/math.utils';
+import { deepEqual } from '../utils/object.utils';
 export class BackgroundDrawer {
-    constructor(canvasModel, config) {
+    constructor(canvasModel, config, backgroundDrawPredicate = () => true) {
         this.canvasModel = canvasModel;
         this.config = config;
+        this.backgroundDrawPredicate = backgroundDrawPredicate;
         // we need to save previous state to avoid unnecessary redraws
         this.prevState = {};
-        this.prevWidth = 0;
-        this.prevHeight = 0;
     }
     draw() {
-        if (deepEqual(this.config.colors.chartAreaTheme, this.prevState) &&
-            this.prevHeight === this.canvasModel.height &&
-            this.prevWidth === this.canvasModel.width) {
-            return;
-        }
-        this.canvasModel.clear();
-        const ctx = this.canvasModel.ctx;
-        if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {
-            const grd = ctx.createLinearGradient(0, 0, this.canvasModel.width, this.canvasModel.height);
-            grd.addColorStop(0, this.config.colors.chartAreaTheme.backgroundGradientTopColor);
-            grd.addColorStop(1, this.config.colors.chartAreaTheme.backgroundGradientBottomColor);
-            ctx.fillStyle = grd;
-        }
-        else {
-            ctx.fillStyle = this.config.colors.chartAreaTheme.backgroundColor;
+        if (this.backgroundDrawPredicate() || !deepEqual(this.config.colors.chartAreaTheme, this.prevState)) {
+            this.canvasModel.clear();
+            const ctx = this.canvasModel.ctx;
+            if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {
+                const grd = ctx.createLinearGradient(0, 0, this.canvasModel.width, this.canvasModel.height);
+                grd.addColorStop(0, this.config.colors.chartAreaTheme.backgroundGradientTopColor);
+                grd.addColorStop(1, this.config.colors.chartAreaTheme.backgroundGradientBottomColor);
+                ctx.fillStyle = grd;
+            }
+            else {
+                ctx.fillStyle = this.config.colors.chartAreaTheme.backgroundColor;
+            }
+            ctx.fillRect(0, 0, this.canvasModel.width, this.canvasModel.height);
         }
-        ctx.fillRect(0, 0, this.canvasModel.width, this.canvasModel.height);
         // save prev state
         this.prevState = Object.assign({}, this.config.colors.chartAreaTheme);
-        this.prevWidth = this.canvasModel.width;
-        this.prevHeight = this.canvasModel.height;
     }
     getCanvasIds() {
         return [this.canvasModel.canvasId];

package/dist/chart/drawers/data-series-drawers/candle-series-wrapper.js

@@ -3,7 +3,7 @@
  * 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 { clipToBounds } from '../data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 export const candleTypesList = [
     'candle',
     'bar',

package/dist/chart/drawers/data-series.drawer.d.ts

@@ -5,7 +5,6 @@
  */
 import { DynamicModelDrawer } from '../components/dynamic-objects/dynamic-objects.drawer';
 import { PaneManager } from '../components/pane/pane-manager.component';
-import { Bounds } from '../model/bounds.model';
 import { CanvasModel } from '../model/canvas.model';
 import { DataSeriesModel, VisualSeriesPoint } from '../model/data-series.model';
 export interface ChartDrawerConfig {
@@ -33,5 +32,4 @@ export declare class DataSeriesDrawer implements DynamicModelDrawer<DataSeriesMo
     draw(canvasModel: CanvasModel, model: DataSeriesModel, paneUUID?: string): void;
     drawSeries(ctx: CanvasRenderingContext2D, series: DataSeriesModel): void;
 }
-export declare const clipToBounds: (ctx: CanvasRenderingContext2D, bounds: Bounds) => void;
 export declare const setLineWidth: (ctx: CanvasRenderingContext2D, lineWidth: number, dataSeries: DataSeriesModel, drawerConfig: ChartDrawerConfig, seriesSelectedWidth?: number) => void;

package/dist/chart/drawers/data-series.drawer.js

@@ -3,6 +3,7 @@
  * 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 { clipToBounds } from '../utils/canvas/canvas-drawing-functions.utils';
 export const transformToTwoDimension = (points) => (Array.isArray(points[0]) ? points : [points]);
 /**
  * Basic data series drawer.
@@ -42,18 +43,12 @@ export class DataSeriesDrawer {
         }
     }
 }
-export const clipToBounds = (ctx, bounds) => {
-    ctx.beginPath();
-    ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
-    ctx.clip();
-    ctx.closePath();
-};
 export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSelectedWidth = lineWidth) => {
     if (drawerConfig.forceBold) {
         ctx.lineWidth = drawerConfig.forceBold;
     }
     else if (dataSeries.hovered) {
-        ctx.lineWidth = seriesSelectedWidth;
+        ctx.lineWidth = lineWidth !== seriesSelectedWidth ? lineWidth + 1 : seriesSelectedWidth;
     }
     else {
         ctx.lineWidth = lineWidth;

package/dist/chart/drawers/ht-data-series.drawer.js

@@ -3,7 +3,7 @@
  * 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 { clipToBounds } from './data-series.drawer';
+import { clipToBounds } from '../utils/canvas/canvas-drawing-functions.utils';
 /***
  * HitTest Chart drawer. It's used to draw hit test for chart types on the hit-test canvas.
  */

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

@@ -32,7 +32,7 @@ export interface HoverParts {
 export interface Hover extends BaseHover, HoverParts {
 }
 export interface HoverProducerPart<T = unknown> {
-    getData(hover: BaseHover): T;
+    getData(hover: BaseHover): T | undefined;
 }
 export interface HoverProducerParts {
     candleHover: CandleHoverProducerPart;

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

@@ -44,6 +44,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private mouseUpDocumentSubject;
     private wheelSubject;
     private touchStartSubject;
+    private touchStartTimestamp;
     private touchMoveSubject;
     private touchEndSubject;
     private touchCancelSubject;
@@ -52,6 +53,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private contextMenuSubject;
     private pinchSubject;
     private scrollGestureSubject;
+    private fastTouchScroll;
     mouseLeavesCanvasSubject: Subject<boolean>;
     dragStartPoint: Point;
     prevDragPoint: Point;
@@ -312,6 +314,13 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
      */
     observeLongTouchEnd(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a Touch whenever a fast scroll is detected.
+     * Fast scroll happens whenever chart or any other pane were moved faster than usual
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent whenever a fast scroll is detected.
+     */
+    observeFastTouchScroll(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -46,6 +46,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.mouseUpDocumentSubject = new Subject();
         this.wheelSubject = new Subject();
         this.touchStartSubject = new Subject();
+        this.touchStartTimestamp = 0;
         this.touchMoveSubject = new Subject();
         this.touchEndSubject = new Subject();
         this.touchCancelSubject = new Subject();
@@ -54,6 +55,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.contextMenuSubject = new Subject();
         this.pinchSubject = new Subject();
         this.scrollGestureSubject = new Subject();
+        this.fastTouchScroll = new Subject();
         this.mouseLeavesCanvasSubject = new Subject();
         // point at which start dragging
         this.dragStartPoint = { x: 0, y: 0 };
@@ -236,9 +238,33 @@ class CanvasInputListenerComponent extends ChartBaseElement {
                 this.element.addEventListener('touchend', touchEndHandler);
             };
             this.addSubscription(subscribeListener(this.element, (e) => longTouchListeners(e), 'touchstart'));
+            const fastScrollListenerProducer = (e) => {
+                e.preventDefault();
+                // should work only if dragged to the left
+                if (this.prevDragPoint.x > this.dragStartPoint.x) {
+                    // in percent, perhaps should be changed to just pixels,
+                    // because landscape and portait orientations would give different % results
+                    const minDistance = 35;
+                    // in ms, should be lower to detect as "fast"
+                    const maxTime = 250;
+                    const touchStartTs = this.touchStartTimestamp;
+                    const touchEndTs = Date.now();
+                    const time = touchEndTs - touchStartTs;
+                    const distance = ((this.prevDragPoint.x - this.dragStartPoint.x) / this.canvasBounds.width) * 100;
+                    const isRightDistance = distance > minDistance;
+                    const isRightTime = time <= maxTime;
+                    if (isRightDistance && isRightTime) {
+                        this.fastTouchScroll.next(e);
+                    }
+                }
+            };
+            this.addSubscription(subscribeListener(this.element, fastScrollListenerProducer, 'touchend'));
         }
         this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.dbClickSubject.next(this.currentPoint)), 'dblclick'));
-        this.addSubscription(subscribeListener(this.element, (e) => this.touchStartSubject.next(e), 'touchstart'));
+        this.addSubscription(subscribeListener(this.element, (e) => {
+            this.touchStartSubject.next(e);
+            this.touchStartTimestamp = Date.now();
+        }, 'touchstart'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchMoveSubject.next(e), 'touchmove', true));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchCancelSubject.next(e), 'touchcancel'));
@@ -643,6 +669,17 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             .asObservable()
             .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
+    /**
+     * Returns an Observable that emits a Touch whenever a fast scroll is detected.
+     * Fast scroll happens whenever chart or any other pane were moved faster than usual
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent whenever a fast scroll is detected.
+     */
+    observeFastTouchScroll(hitBoundsTest = () => true) {
+        return this.fastTouchScroll
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

package/dist/chart/model/compare-series-hover.d.ts

@@ -19,5 +19,5 @@ export declare class CompareSeriesHoverProducerPart implements HoverProducerPart
      * @param {BaseHover} hover - The hover object containing the x-coordinate.
      * @returns {CompareSeriesHover[]} An array of objects containing the instrument symbol, price and id of each series of candles.
      */
-    getData(hover: BaseHover): CompareSeriesHover[];
+    getData(hover: BaseHover): CompareSeriesHover[] | undefined;
 }

package/dist/chart/model/compare-series-hover.js

@@ -3,6 +3,7 @@
  * 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 { MainCandleSeriesModel } from './main-candle-series.model';
 export class CompareSeriesHoverProducerPart {
     constructor(chartModel) {
         this.chartModel = chartModel;
@@ -13,6 +14,10 @@ export class CompareSeriesHoverProducerPart {
      * @returns {CompareSeriesHover[]} An array of objects containing the instrument symbol, price and id of each series of candles.
      */
     getData(hover) {
+        if (this.chartModel.candleSeries.length === 1 &&
+            this.chartModel.candleSeries[0] instanceof MainCandleSeriesModel) {
+            return;
+        }
         const { x } = hover;
         const candle = this.chartModel.candleFromX(x);
         const idx = candle.idx || 0;

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

@@ -138,7 +138,7 @@ export class DataSeriesModel extends ChartBaseElement {
     }
     doActivate() {
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.recalculateDataViewportIndexes()));
-        this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => this.recalculateVisualPoints()));
+        this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => { this.recalculateVisualPoints(); }));
     }
     /**
      * Sets the data points and recalculates internal state

package/dist/chart/model/hit-test-canvas.model.js

@@ -3,7 +3,7 @@
  * 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, Subject } from 'rxjs';
+import { merge, Subject, animationFrameScheduler } from 'rxjs';
 import { map, throttleTime } from 'rxjs/operators';
 import { CanvasElement } from '../canvas/canvas-bounds-container';
 import { CanvasModel, initCanvasWithConfig } from './canvas.model';
@@ -50,7 +50,7 @@ export class HitTestCanvasModel extends CanvasModel {
             const bounds = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
             const hoverSub = this.canvasInputListener
                 .observeMouseMove()
-                .pipe(throttleTime(100, undefined, { trailing: true }))
+                .pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
                 .subscribe(point => this.eventHandler(point, 'hover'));
             const touchStartSub = this.canvasInputListener
                 .observeTouchStart()

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

@@ -48,6 +48,8 @@ export declare class ScaleModel extends ViewportModel {
     xConstraints: Constraints[];
     readonly state: ChartScale;
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
+    protected doActivate(): void;
+    protected doDeactivate(): void;
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
      * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
@@ -71,13 +73,13 @@ export declare class ScaleModel extends ViewportModel {
      * @param forceNoAnimation Whether to skip animation.
      * @param zoomSensitivity The sensitivity of the zoom.
      */
-    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation?: boolean, zoomSensitivity?: number): void;
+    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation: boolean | undefined, zoomSensitivity: number): void;
     /**
      * Zooms the X axis of the chart relativly to the end of the data range.
      * @param zoomIn - If true, the chart will be zoomed in. If false, the chart will be zoomed out.
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
-    zoomXToEnd(zoomIn: boolean, zoomSensitivity?: number): void;
+    zoomXToEnd(zoomIn: boolean, zoomSensitivity: number): void;
     haltAnimation(): void;
     private zoomXTo;
     /**
@@ -88,7 +90,8 @@ export declare class ScaleModel extends ViewportModel {
      * @param fireChanged
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
-    setXScale(xStart: Unit, xEnd: Unit): void;
+    setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
+    setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
      * Works without animation.

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

@@ -8,7 +8,7 @@ import { startViewportModelAnimation } from '../animation/viewport-model-animati
 import { cloneUnsafe } from '../utils/object.utils';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
 import { zoomConstraint } from './scaling/constrait.functions';
-import { lockedYEndViewportCalculator, ratioFromZoomXY } from './scaling/lock-ratio.model';
+import { changeXToKeepRatio, changeYToKeepRatio, ratioFromZoomXY } from './scaling/lock-ratio.model';
 import { moveXStart, moveYStart } from './scaling/move-chart.functions';
 import { ViewportModel, compareStates } from './scaling/viewport.model';
 import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
@@ -51,6 +51,19 @@ export class ScaleModel extends ViewportModel {
         this.offsets = this.config.components.offsets;
         this.addXConstraint((initialState, state) => zoomConstraint(initialState, state, this.config.components.chart, this.getBounds));
     }
+    doActivate() {
+        super.doActivate();
+        this.scaleInversedSubject = new Subject();
+        this.beforeStartAnimationSubject = new Subject();
+        this.addRxSubscription(this.scaleInversedSubject.subscribe(() => {
+            this.fireChanged();
+        }));
+    }
+    doDeactivate() {
+        super.doDeactivate();
+        this.scaleInversedSubject.complete();
+        this.beforeStartAnimationSubject.complete();
+    }
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
      * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
@@ -81,7 +94,7 @@ export class ScaleModel extends ViewportModel {
      * @param forceNoAnimation Whether to skip animation.
      * @param zoomSensitivity The sensitivity of the zoom.
      */
-    zoomXToPercent(viewportPercent, zoomIn, forceNoAnimation = false, zoomSensitivity = this.config.scale.zoomSensitivity) {
+    zoomXToPercent(viewportPercent, zoomIn, forceNoAnimation = false, zoomSensitivity) {
         const disabledAnimations = this.config.scale.disableAnimations || forceNoAnimation;
         if (disabledAnimations) {
             this.haltAnimation();
@@ -96,7 +109,7 @@ export class ScaleModel extends ViewportModel {
      * @param zoomIn - If true, the chart will be zoomed in. If false, the chart will be zoomed out.
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
-    zoomXToEnd(zoomIn, zoomSensitivity = this.config.scale.zoomSensitivity) {
+    zoomXToEnd(zoomIn, zoomSensitivity) {
         if (this.config.scale.disableAnimations) {
             this.haltAnimation();
         }
@@ -116,7 +129,7 @@ export class ScaleModel extends ViewportModel {
         const initialStateCopy = Object.assign({}, state);
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
         if (this.state.lockPriceToBarRatio) {
-            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
@@ -136,18 +149,42 @@ export class ScaleModel extends ViewportModel {
      * @param fireChanged
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
-    setXScale(xStart, xEnd) {
+    setXScale(xStart, xEnd, forceNoAnimation = true) {
         const initialState = this.export();
-        super.setXScale(xStart, xEnd, false);
-        const state = this.export();
+        const zoomX = this.calculateZoomX(xStart, xEnd);
+        const state = Object.assign(Object.assign({}, initialState), { zoomX, xStart, xEnd });
         const constrainedState = this.scalePostProcessor(initialState, state);
         if (this.state.lockPriceToBarRatio) {
-            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
         }
-        this.apply(constrainedState);
+        if (forceNoAnimation || this.config.scale.disableAnimations) {
+            this.haltAnimation();
+            this.apply(constrainedState);
+        }
+        else {
+            startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
+        }
+    }
+    setYScale(yStart, yEnd, fire = false) {
+        const initialState = this.export();
+        super.setYScale(yStart, yEnd, fire);
+        const state = this.export();
+        const constrainedState = this.scalePostProcessor(initialState, state);
+        if (this.state.lockPriceToBarRatio) {
+            changeXToKeepRatio(constrainedState, this.zoomXYRatio);
+            this.setXScale(constrainedState.xStart, constrainedState.xEnd);
+            // TODO: rewrite logic for applying constraints to consider both axes, now constraints on Y may not work correctly
+            return;
+        }
+        else {
+            if (this.state.auto) {
+                this.autoScaleModel.doAutoYScale(constrainedState);
+            }
+            this.apply(constrainedState);
+        }
     }
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).

package/dist/chart/model/scaling/constrait.functions.d.ts

@@ -32,7 +32,7 @@ export declare const candleEdgesConstrait: (state: ViewportModelState, visualCan
  * @returns
  * @doc-tags viewport,zoom,scaling
  */
-export declare const zoomConstraint: (initialState: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
+export declare const zoomConstraint: (_: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
     xStart: number;
     xEnd: number;
     yStart: number;

package/dist/chart/model/scaling/constrait.functions.js

@@ -40,7 +40,7 @@ export const candleEdgesConstrait = (state, visualCandlesCoordinates, candleLimi
  * @returns
  * @doc-tags viewport,zoom,scaling
  */
-export const zoomConstraint = (initialState, state, chartConfig, boundsProvider) => {
+export const zoomConstraint = (_, state, chartConfig, boundsProvider) => {
     const newState = Object.assign({}, state);
     const bounds = boundsProvider();
     // 1 - is an average candle width: newXEnd - newXStart = avg candles amount in the viewport
@@ -56,7 +56,6 @@ export const zoomConstraint = (initialState, state, chartConfig, boundsProvider)
             return newState;
         }
         if (minViewportReached) {
-            newState.xEnd = initialState.xEnd;
             newState.xStart = newState.xEnd - chartConfig.minCandles;
             newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
             return newState;

package/dist/chart/model/scaling/lock-ratio.model.d.ts

@@ -9,8 +9,14 @@ export declare const ratioFromZoomXY: (zoomX: Zoom, zoomY: Zoom) => ZoomXToZoomY
 export declare const zoomXToZoomY: (zoomX: Zoom, ratio: ZoomXToZoomYRatio) => Zoom;
 export declare const zoomYToZoomX: (zoomY: Zoom, ratio: ZoomXToZoomYRatio) => Zoom;
 /**
- * Locks the zoomY with zoomX and moves yEnd according to ratio changes.
+ * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
  * @param state
  * @param zoomXYRatio
  */
-export declare const lockedYEndViewportCalculator: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+export declare const changeYToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+/**
+ *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
+ * @param state
+ * @param zoomXYRatio
+ */
+export declare const changeXToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;

package/dist/chart/model/scaling/lock-ratio.model.js

@@ -7,16 +7,31 @@ export const ratioFromZoomXY = (zoomX, zoomY) => zoomX / zoomY;
 export const zoomXToZoomY = (zoomX, ratio) => zoomX / ratio;
 export const zoomYToZoomX = (zoomY, ratio) => zoomY * ratio;
 /**
- * Locks the zoomY with zoomX and moves yEnd according to ratio changes.
+ * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
  * @param state
  * @param zoomXYRatio
  */
-export const lockedYEndViewportCalculator = (state, zoomXYRatio) => {
+export const changeYToKeepRatio = (state, zoomXYRatio) => {
     const prevZoomY = state.zoomY;
     state.zoomY = zoomXToZoomY(state.zoomX, zoomXYRatio);
     const zoomYMult = state.zoomY / prevZoomY;
     const lastYHeight = state.yEnd - state.yStart;
     const newYHeight = lastYHeight * zoomYMult;
     const delta = newYHeight - lastYHeight;
-    state.yEnd = state.yEnd + delta;
+    state.yEnd = state.yEnd + delta / 2;
+    state.yStart = state.yStart - delta / 2;
+};
+/**
+ *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
+ * @param state
+ * @param zoomXYRatio
+ */
+export const changeXToKeepRatio = (state, zoomXYRatio) => {
+    const prevZoomX = state.zoomX;
+    state.zoomX = zoomYToZoomX(state.zoomY, zoomXYRatio);
+    const zoomXMult = state.zoomX / prevZoomX;
+    const lastXWidth = state.xEnd - state.xStart;
+    const newXWidth = lastXWidth * zoomXMult;
+    const delta = newXWidth - lastXWidth;
+    state.xStart = state.xStart - delta;
 };

package/dist/chart/model/scaling/viewport.model.d.ts

@@ -92,6 +92,8 @@ export declare abstract class ViewportModel extends ChartBaseElement implements
         start: number;
         end: number;
     }>;
+    protected doActivate(): void;
+    protected doDeactivate(): void;
     /**
      * Converts a unit value to pixels based on the current zoom level and xStart value.
      * @param {Unit} unit - The unit value to be converted to pixels.

package/dist/chart/model/scaling/viewport.model.js

@@ -52,6 +52,13 @@ export class ViewportModel extends ChartBaseElement {
         })), distinctUntilChanged((p, c) => p.start === c.start && p.end === c.end), share());
     }
     //endregion
+    doActivate() {
+        super.doActivate();
+    }
+    doDeactivate() {
+        super.doDeactivate();
+        this.changed.complete();
+    }
     //region conversion methods
     /**
      * Converts a unit value to pixels based on the current zoom level and xStart value.
@@ -75,12 +82,13 @@ export class ViewportModel extends ChartBaseElement {
      * @returns {Pixel} - The pixel value of the given unit value in the Y-axis.
      */
     toY(unit) {
+        const bounds = this.getBounds();
         if (this.inverseY) {
-            return this.getBounds().y + unitToPixels(unit - this.yStart, this.zoomY);
+            return bounds.y + unitToPixels(unit - this.yStart, this.zoomY);
         }
         else {
             // inverse by default because canvas calculation [0,0] point starts from top-left corner
-            return this.getBounds().y + this.getBounds().height - unitToPixels(unit - this.yStart, this.zoomY);
+            return bounds.y + bounds.height - unitToPixels(unit - this.yStart, this.zoomY);
         }
     }
     /**
@@ -106,13 +114,14 @@ export class ViewportModel extends ChartBaseElement {
      * @returns {void}
      */
     fromY(px) {
-        const normalizedPx = px - this.getBounds().y;
+        const bounds = this.getBounds();
+        const normalizedPx = px - bounds.y;
         if (this.inverseY) {
             return pixelsToUnits(normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
         }
         else {
             // inverse by default because canvas calculation [0,0] point starts from top-left corner
-            return pixelsToUnits(this.getBounds().height - normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
+            return pixelsToUnits(bounds.height - normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
         }
     }
     //endregion

package/dist/chart/model/time-zone.model.d.ts

@@ -3,7 +3,6 @@
  * 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 { getTimezoneOffset as getTimezoneOffsetDateFnsTz } from 'date-fns-tz';
 import { Observable } from 'rxjs';
 import { DateFormatter, FullChartConfig } from '../chart.config';
 import { DateTimeFormatter, DateTimeFormatterFactory } from './date-time.formatter';
@@ -13,8 +12,6 @@ export interface TimeZone {
     readonly name: string;
     readonly utcOffset: string;
 }
-export declare const memoizedTZOffset: typeof getTimezoneOffsetDateFnsTz;
-export declare const getTimezoneOffset: (timezone: string, time: Timestamp) => number;
 export declare class TimeZoneModel {
     private config;
     private timeZoneChangedSubject;
@@ -50,16 +47,5 @@ export declare class TimeZoneModel {
     getFormatterFactory(): DateTimeFormatterFactory;
     private formatterCache;
     getDateTimeFormatter(format: string): DateTimeFormatter;
-    /**
-     * Calculates the offset of a given timezone from the local timezone.
-     * @private
-     * @param {string} timezone - The timezone to calculate the offset for.
-     */
-    private getOffset;
-    /**
-     * Gets the timezone offset value in milliseconds
-     * @param {string} timezone name
-     * @returns {function(time:Number):Date}
-     */
     tzOffset(timezone: string): (time: number) => Date;
 }