@devexperts/dxcharts-lite 2.7.16 → 2.7.18

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

@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * 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 { flat } from '../../utils/array.utils';
+const DEFAULT_FILL_COLOR = '#FF00FF';
+export class TrendPointsDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, hitTestDrawerConfig) {
+        const allPointsFlat = flat(allPoints);
+        const config = model.getPaintConfig(0);
+        const radius = hitTestDrawerConfig.hoverWidth ? hitTestDrawerConfig.hoverWidth / 2 : config.lineWidth;
+        allPointsFlat.forEach((point, idx) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            // 2 colors: Negative and Positive
+            const previousClose = previousValue(allPointsFlat, idx);
+            const isNegativeTrend = previousClose && point.close < previousClose;
+            if (((_a = config.multiplyColors) === null || _a === void 0 ? void 0 : _a.length) === 2) {
+                ctx.fillStyle =
+                    (_b = hitTestDrawerConfig.color) !== null && _b !== void 0 ? _b : ((isNegativeTrend ? config.multiplyColors[1] : config.multiplyColors[0]) ||
+                        config.color ||
+                        DEFAULT_FILL_COLOR);
+                const x = model.view.toX(point.centerUnit);
+                const y = model.view.toY(point.close);
+                ctx.arc(x, y, radius, 0, Math.PI * 2);
+                ctx.fill();
+                return;
+            }
+            // 4 colors: Negative and Down, Negative and Up, Positive and Down, Positive and Up
+            if (((_c = config.multiplyColors) === null || _c === void 0 ? void 0 : _c.length) === 4) {
+                if (isNegativeTrend && point.close < 0) {
+                    ctx.fillStyle =
+                        (_d = hitTestDrawerConfig.color) !== null && _d !== void 0 ? _d : (config.multiplyColors[0] || config.color || DEFAULT_FILL_COLOR);
+                }
+                if (!isNegativeTrend && point.close < 0) {
+                    ctx.fillStyle =
+                        (_e = hitTestDrawerConfig.color) !== null && _e !== void 0 ? _e : (config.multiplyColors[1] || config.color || DEFAULT_FILL_COLOR);
+                }
+                if (isNegativeTrend && point.close > 0) {
+                    ctx.fillStyle =
+                        (_f = hitTestDrawerConfig.color) !== null && _f !== void 0 ? _f : (config.multiplyColors[2] || config.color || DEFAULT_FILL_COLOR);
+                }
+                if (!isNegativeTrend && point.close > 0) {
+                    ctx.fillStyle =
+                        (_g = hitTestDrawerConfig.color) !== null && _g !== void 0 ? _g : (config.multiplyColors[3] || config.color || DEFAULT_FILL_COLOR);
+                }
+                ctx.beginPath();
+                const x = model.view.toX(point.centerUnit);
+                const y = model.view.toY(point.close);
+                ctx.arc(x, y, radius, 0, Math.PI * 2);
+                ctx.fill();
+                return;
+            }
+            // 1 color
+            ctx.fillStyle = (_h = hitTestDrawerConfig.color) !== null && _h !== void 0 ? _h : (config.color || DEFAULT_FILL_COLOR);
+            ctx.beginPath();
+            const x = model.view.toX(point.centerUnit);
+            const y = model.view.toY(point.close);
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            ctx.fill();
+        });
+    }
+}
+export const previousValue = (arr, idx) => {
+    do {
+        idx--;
+    } while (idx >= 0 && !isFinite(arr[idx] && arr[idx].close));
+    return arr[idx] ? arr[idx].close : undefined;
+};

package/dist/chart/drawers/drawing-manager.js

@@ -45,7 +45,6 @@ export class DrawingManager {
         this.drawersMap = {};
         this.canvasIdsList = [];
         this.animFrameId = `draw_${uuid()}`;
-        // eventBus.on(EVENT_DRAW_LAST_CANDLE, () => animationFrameThrottled(this.animFrameId + 'last', () => this.drawLastBar()));
         this.drawHitTestCanvas = () => {
             this.drawingOrder.forEach(drawer => {
                 if (drawer.indexOf(HIT_TEST_PREFIX) !== -1) {

package/dist/chart/inputhandlers/chart-resize.handler.d.ts

@@ -21,6 +21,7 @@ export declare class ChartResizeHandler {
     previousBCR: PickedDOMRect | undefined;
     private animFrameId;
     canvasResized: Subject<PickedDOMRect>;
+    private recentlyResized;
     constructor(frameElement: HTMLElement, resizerElement: HTMLElement, bus: EventBus, canvasModels: CanvasModel[], config?: FullChartConfig | undefined);
     /**
      * Subscribe to resize events
@@ -43,6 +44,10 @@ export declare class ChartResizeHandler {
      * @returns {void}
      */
     fireUpdates(): void;
+    /**
+     * Resets the resize flag after it has been processed
+     */
+    clearResizedFlag(): void;
     /**
      * Checks if the dimensions of two PickedDOMRect objects are different.
      * @param {PickedDOMRect} previousBCR - The previous bounding client rectangle.

package/dist/chart/inputhandlers/chart-resize.handler.js

@@ -20,6 +20,7 @@ export class ChartResizeHandler {
         this.previousBCR = undefined;
         this.animFrameId = `resize_${uuid()}`;
         this.canvasResized = new Subject();
+        this.recentlyResized = false; // Flag to track if resize happened recently
         this.elementResizeDetector = new ResizeObserver(() => this.handleResize());
     }
     /**
@@ -59,12 +60,19 @@ export class ChartResizeHandler {
         }
         if (this.previousBCR === undefined || this.isBCRDimensionsDiffer(this.previousBCR, newBCR)) {
             this.previousBCR = newBCR;
+            this.recentlyResized = true; // Set flag when actual resize happens
             this.canvasModels.forEach(model => this.previousBCR && model.updateDPR(this.previousBCR));
             this.canvasResized.next(newBCR);
             this.bus.fire(EVENT_RESIZED, newBCR);
             this.bus.fire(EVENT_DRAW);
         }
     }
+    /**
+     * Resets the resize flag after it has been processed
+     */
+    clearResizedFlag() {
+        this.recentlyResized = false;
+    }
     /**
      * Checks if the dimensions of two PickedDOMRect objects are different.
      * @param {PickedDOMRect} previousBCR - The previous bounding client rectangle.
@@ -98,6 +106,6 @@ export class ChartResizeHandler {
      * @returns {boolean} - Returns true if the canvas has been resized, false otherwise.
      */
     wasResized() {
-        return this.previousBCR !== undefined;
+        return this.recentlyResized;
     }
 }

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

@@ -60,8 +60,35 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     dragging: boolean;
     dragStartEvent?: CustomMouseEvent;
     canvasBounds: Bounds;
+    private cachedElementRect;
+    private rectCacheValid;
     constructor(eventBus: EventBus, element: HTMLElement);
     private documentDragListeners;
+    /**
+     * Gets cached element bounding rect or calculates new one if cache is invalid.
+     * Caching prevents expensive getBoundingClientRect() calls during frequent operations.
+     */
+    private getElementRect;
+    /**
+     * Creates fallback DOMRect for error cases or when element is unavailable
+     */
+    private createFallbackRect;
+    /**
+     * Invalidates the cached bounding client rect, forcing recalculation on next access
+     */
+    private invalidateRectCache;
+    /**
+     * Forces immediate initialization of the rect cache and canvas bounds
+     */
+    initializeRectCache(): void;
+    /**
+     * Safely cleans up document drag listeners to prevent memory leaks
+     */
+    private cleanupDocumentDragListeners;
+    /**
+     * Override doDeactivate to ensure proper cleanup of cached data
+     */
+    protected doDeactivate(): void;
     private dragProcessListener;
     private dragStartListener;
     /**
@@ -113,6 +140,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private updateCurrentDocumentPoint;
     /**
      * Updates the current mouse point based on the provided CustomMouseEvent.
+     * Uses cached element rect to avoid frequent reflow in Safari.
      * @param {CustomMouseEvent} e - The CustomMouseEvent object containing the mouse/touch coordinates.
      * @returns {void}
      * @private

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

@@ -71,6 +71,9 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
             width: 0,
             height: 0,
         };
+        // Cached bounding client rect to avoid frequent reflow in Safari
+        this.cachedElementRect = null;
+        this.rectCacheValid = false;
         this.documentDragListeners = [];
         this.dragProcessListener = () => {
             this.xDragSubject.next(this.currentPoint.x - this.dragStartPoint.x);
@@ -85,7 +88,8 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
                 this.updateCurrentPoints(e);
                 this.dragging = true;
                 this.dragStartEvent = e;
-                this.documentDragListeners.forEach(unsub => unsub());
+                // Clean up any existing drag listeners before adding new ones
+                this.cleanupDocumentDragListeners();
                 this.dragStartPoint = CanvasInputListenerComponent.copyPoint(this.currentPoint);
                 this.xDragStartSubject.next(this.dragStartPoint);
                 this.yDragStartSubject.next(this.dragStartPoint);
@@ -104,7 +108,7 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
         this.updateElementOffsetListener = () => this.mouseMoveSubject.next(this.currentPoint);
         this.dragEndListener = () => {
             this.dragging = false;
-            this.documentDragListeners.forEach(unsub => unsub());
+            this.cleanupDocumentDragListeners();
             this.xDragEndSubject.next();
             this.yDragEndSubject.next();
         };
@@ -113,6 +117,97 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
             this.updateCurrentMousePoint(e);
         };
     }
+    /**
+     * Gets cached element bounding rect or calculates new one if cache is invalid.
+     * Caching prevents expensive getBoundingClientRect() calls during frequent operations.
+     */
+    getElementRect() {
+        if (this.rectCacheValid && this.cachedElementRect) {
+            return this.cachedElementRect;
+        }
+        try {
+            if (!this.element || !this.element.isConnected) {
+                return this.createFallbackRect();
+            }
+            const rect = this.element.getBoundingClientRect();
+            this.cachedElementRect = rect;
+            this.rectCacheValid = true;
+            return rect;
+        }
+        catch (error) {
+            return this.createFallbackRect();
+        }
+    }
+    /**
+     * Creates fallback DOMRect for error cases or when element is unavailable
+     */
+    createFallbackRect() {
+        // DOMRect might not be available in older browsers
+        if (typeof DOMRect !== 'undefined') {
+            return new DOMRect(0, 0, 0, 0);
+        }
+        // Fallback for older browsers - create object with same interface
+        const rect = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            toJSON: () => ({}),
+        };
+        return rect;
+    }
+    /**
+     * Invalidates the cached bounding client rect, forcing recalculation on next access
+     */
+    invalidateRectCache() {
+        this.rectCacheValid = false;
+    }
+    /**
+     * Forces immediate initialization of the rect cache and canvas bounds
+     */
+    initializeRectCache() {
+        this.invalidateRectCache();
+        const bcr = this.getElementRect();
+        this.canvasBounds.x = bcr.left;
+        this.canvasBounds.y = bcr.top;
+        this.canvasBounds.width = bcr.width;
+        this.canvasBounds.height = bcr.height;
+    }
+    /**
+     * Safely cleans up document drag listeners to prevent memory leaks
+     */
+    cleanupDocumentDragListeners() {
+        if (!this.documentDragListeners || !Array.isArray(this.documentDragListeners)) {
+            this.documentDragListeners = [];
+            return;
+        }
+        this.documentDragListeners.forEach(unsub => {
+            try {
+                unsub();
+            }
+            catch (error) {
+                // Ignore errors during cleanup to prevent crashes
+                console.warn('Error cleaning up drag listener:', error);
+            }
+        });
+        this.documentDragListeners = [];
+    }
+    /**
+     * Override doDeactivate to ensure proper cleanup of cached data
+     */
+    doDeactivate() {
+        // Clean up rect cache to prevent stale data
+        this.invalidateRectCache();
+        this.cachedElementRect = null;
+        // Clean up drag listeners safely
+        this.cleanupDocumentDragListeners();
+        // Call parent cleanup
+        super.doDeactivate();
+    }
     /**
      * This methods allows change scale, only if dragging using primary mouse button or touch.
      * @param e
@@ -261,6 +356,7 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
         this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchCancelSubject.next(e), 'touchcancel'));
         this.addSubscription(subscribeListener(this.element, (e) => {
+            this.updateCurrentPoints(e);
             this.wheelSubject.next(e);
             e.preventDefault(); // to disable the scroll over the document, if for example chart is used as widget
         }, 'wheel'));
@@ -269,7 +365,9 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
         this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.mouseUpSubject.next(this.currentPoint)), 'mouseup'));
         this.addSubscription(subscribeListener(document, leftMouseButtonListener(() => this.mouseUpDocumentSubject.next(this.currentPoint)), 'mouseup'));
         this.addRxSubscription(this.eventBus.observe(EVENT_RESIZED).subscribe(() => {
-            const bcr = this.element.getBoundingClientRect();
+            // Force invalidate cache on resize to ensure fresh getBoundingClientRect data
+            this.invalidateRectCache();
+            const bcr = this.getElementRect();
             this.canvasBounds.x = bcr.left;
             this.canvasBounds.y = bcr.top;
             this.canvasBounds.width = bcr.width;
@@ -322,15 +420,14 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
     }
     /**
      * Updates the current mouse point based on the provided CustomMouseEvent.
+     * Uses cached element rect to avoid frequent reflow in Safari.
      * @param {CustomMouseEvent} e - The CustomMouseEvent object containing the mouse/touch coordinates.
      * @returns {void}
      * @private
      */
     updateCurrentMousePoint(e) {
-        // this is a bad solution because BCR causes reflow
-        // it's ok while document is not changed, styles and layout
-        // but it's faster to cache BCR and recalculate when it's needed
-        const rect = this.element.getBoundingClientRect();
+        // Use cached rect to prevent frequent reflow/repaint in Safari
+        const rect = this.getElementRect();
         if ('clientX' in e) {
             this.currentPoint.x = e.clientX - rect.left;
         }

package/dist/chart/model/data-series.config.d.ts

@@ -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 { BarTypes, YAxisLabelAppearanceType, YAxisLabelMode } from '../chart.config';
-export type DataSeriesType = 'POINTS' | 'LINEAR' | 'HISTOGRAM' | 'TREND_HISTOGRAM' | 'DIFFERENCE' | 'TEXT' | 'ABOVE_CANDLE_TEXT' | 'BELOW_CANDLE_TEXT' | 'ABOVE_CANDLE_TRIANGLE' | 'TRIANGLE' | 'COLOR_CANDLE' | 'RECTANGULAR' | 'EMA_CLOUD_LINE' | 'LINEAR_TREND' | keyof BarTypes | string;
+export type DataSeriesType = 'POINTS' | 'TREND_POINTS' | 'LINEAR' | 'HISTOGRAM' | 'TREND_HISTOGRAM' | 'DIFFERENCE' | 'TEXT' | 'ABOVE_CANDLE_TEXT' | 'BELOW_CANDLE_TEXT' | 'ABOVE_CANDLE_TRIANGLE' | 'TRIANGLE' | 'COLOR_CANDLE' | 'RECTANGULAR' | 'EMA_CLOUD_LINE' | 'LINEAR_TREND' | 'SQUEEZE_POINTS' | keyof BarTypes | string;
 export interface DataSeriesConfig {
     paintConfig: Array<DataSeriesPaintConfig>;
     visible: boolean;

package/dist/chart/model/hit-test-canvas.model.d.ts

@@ -3,13 +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 { Observable, BehaviorSubject } from 'rxjs';
+import { Observable, Subject, Subscription, BehaviorSubject } from 'rxjs';
 import { CanvasBoundsContainer } from '../canvas/canvas-bounds-container';
 import { CursorType, FullChartConfig } from '../chart.config';
 import { CanvasModel } from './canvas.model';
 import { DrawingManager } from '../drawers/drawing-manager';
 import EventBus from '../events/event-bus';
 import { CanvasInputListenerComponent, Point } from '../inputlisteners/canvas-input-listener.component';
+export declare const bigPrimeNumber = 317;
 export type HitTestEvents = 'mousedown' | 'hover' | 'touchstart' | 'dblclick' | 'contextmenu' | 'zoom' | 'mouseup';
 type HitTestType = 'DRAWINGS' | 'DATA_SERIES' | 'EVENTS' | 'NEWS' | 'EXECUTED_ORDERS';
 export declare const HIT_TEST_ID_RANGE: Record<HitTestType, [number, number]>;
@@ -20,14 +21,14 @@ export declare const HIT_TEST_ID_RANGE: Record<HitTestType, [number, number]>;
  * @doc-tags chart-core,hit-test
  */
 export declare class HitTestCanvasModel extends CanvasModel {
-    private canvasInputListener;
-    private canvasBoundsContainer;
-    private hitTestSubscribers;
-    private eventsSubscriptions;
-    private hoverSubject;
-    private touchStartSubject;
-    private dblClickSubject;
-    private rightClickSubject;
+    protected canvasInputListener: CanvasInputListenerComponent;
+    protected canvasBoundsContainer: CanvasBoundsContainer;
+    protected hitTestSubscribers: HitTestSubscriber[];
+    protected eventsSubscriptions: Subscription[];
+    protected hoverSubject: Subject<HitTestEvent>;
+    protected touchStartSubject: Subject<HitTestEvent>;
+    protected dblClickSubject: Subject<HitTestEvent>;
+    protected rightClickSubject: Subject<HitTestEvent>;
     hitTestDrawersPredicateSubject: BehaviorSubject<boolean>;
     constructor(eventBus: EventBus, canvas: HTMLCanvasElement, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, chartConfig: FullChartConfig, canvasModels: CanvasModel[], resizer?: HTMLElement);
     /**
@@ -80,8 +81,8 @@ export declare class HitTestCanvasModel extends CanvasModel {
      * Observes rightclicked on element event, provides rightclicked element model.
      */
     observeRightClickOnElement(): Observable<HitTestEvent>;
-    private curImgData;
-    private prevAnimationFrameId;
+    protected curImgData: Uint8ClampedArray;
+    protected prevAnimationFrameId: number;
     /**
      * Retrieves the pixel data at the specified coordinates.
      *
@@ -90,7 +91,7 @@ export declare class HitTestCanvasModel extends CanvasModel {
      * @param {number} y - The y-coordinate of the pixel.
      * @returns {Uint8ClampedArray} - The pixel data at the specified coordinates.
      */
-    private getPixel;
+    protected getPixel(x: number, y: number): Uint8ClampedArray;
     /**
      * Resolves ht model based on the provided point
      * @param point - The point for which to resolve model
@@ -108,7 +109,7 @@ export declare class HitTestCanvasModel extends CanvasModel {
      * @param {HitTestEvents} event - The type of event that occurred.
      * @returns {void}
      */
-    private eventHandler;
+    protected eventHandler(point: Point, event: HitTestEvents): void;
 }
 export interface HitTestSubscriber<T extends unknown = unknown> {
     getIdRange(): [number, number];
@@ -126,4 +127,5 @@ export interface HitTestEvent<T = unknown> {
     readonly point: Point;
     readonly model: T;
 }
+export declare const sortSubscribers: (subs: HitTestSubscriber[], id: number) => [HitTestSubscriber | undefined, HitTestSubscriber[]];
 export {};

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

@@ -8,7 +8,7 @@ import { map, throttleTime } from 'rxjs/operators';
 import { CanvasElement } from '../canvas/canvas-bounds-container';
 import { CanvasModel, initCanvasWithConfig } from './canvas.model';
 import { animationFrameId } from '../utils/performance/request-animation-frame-throttle.utils';
-const bigPrimeNumber = 317;
+export const bigPrimeNumber = 317;
 export const HIT_TEST_ID_RANGE = {
     DRAWINGS: [1, 4999],
     NEWS: [5000, 5999],
@@ -248,7 +248,7 @@ export class HitTestCanvasModel extends CanvasModel {
         }
     }
 }
-const sortSubscribers = (subs, id) => {
+export const sortSubscribers = (subs, id) => {
     let mainSubscriber = undefined;
     const restSubs = [];
     subs.forEach(sub => {

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

@@ -9,6 +9,7 @@ import { CanvasAnimation } from '../animation/canvas-animation';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
 import { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
 import { BoundsProvider } from './bounds.model';
+import VisualCandle from './visual-candle';
 export interface HighLowWithIndex {
     high: Price;
     low: Price;
@@ -50,6 +51,8 @@ export declare class ScaleModel extends ViewportModel {
     history: ScaleHistoryItem[];
     offsets: ChartConfigComponentsOffsets;
     private xConstraints;
+    private autoScaleZoomSubscription;
+    private autoScalePanSubscription;
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
     protected doActivate(): void;
     protected doDeactivate(): void;
@@ -98,6 +101,7 @@ export declare class ScaleModel extends ViewportModel {
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
     setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
+    setXScaleWithoutYScale(visualCandleSource: VisualCandle[]): void;
     setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
     private setLockedYScale;
     /**
@@ -164,6 +168,7 @@ export declare class ScaleModel extends ViewportModel {
      * @param value - If true, the price-to-bar ratio will be locked. If false, it will not be locked.
      */
     setLockPriceToBarRatio(value?: boolean): void;
+    private initAutoScaleThrottling;
 }
 /**
  * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.

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

@@ -4,13 +4,20 @@
  * 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 { startViewportModelAnimation } from '../animation/viewport-model-animation';
+import { throttleTime } from 'rxjs/operators';
+import { animationFrameScheduler } from 'rxjs';
 import { cloneUnsafe } from '../utils/object.utils';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
 import { changeXToKeepRatio, changeYToKeepRatio } from './scaling/lock-ratio.model';
 import { moveXStart, moveYStart } from './scaling/move-chart.functions';
 import { ViewportModel, calculateZoom, compareStates, } from './scaling/viewport.model';
 import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
+import { VIEWPORT_ANIMATION_ID } from '../animation/canvas-animation';
+import { startViewportModelAnimation, startViewportModelAnimationSafari } from '../animation/viewport-model-animation';
+import { ONE_FRAME_MS } from '../utils/numeric-constants.utils';
+import { isSafari } from '../utils/device/touchpad.utils';
+const autoScaleZoomSubject = new Subject();
+const autoScalePanSubject = new Subject();
 export const getDefaultHighLowWithIndex = () => ({
     high: Number.NEGATIVE_INFINITY,
     low: Number.POSITIVE_INFINITY,
@@ -40,6 +47,8 @@ export class ScaleModel extends ViewportModel {
         // TODO rework, make a new history based on units
         this.history = [];
         this.xConstraints = [];
+        this.autoScaleZoomSubscription = null;
+        this.autoScalePanSubscription = null;
         this.scalePostProcessor = (initialState, state) => {
             // for now <s>reduceRight<s/> reduce bcs ChartModel#getZoomConstrait should be invoked first
             // if we will need more complex order handling -> add some managing
@@ -48,6 +57,7 @@ export class ScaleModel extends ViewportModel {
         this.state = cloneUnsafe(config.scale);
         this.autoScaleModel = new AutoScaleViewportSubModel(this);
         this.offsets = this.config.components.offsets;
+        this.initAutoScaleThrottling();
     }
     doActivate() {
         super.doActivate();
@@ -59,6 +69,15 @@ export class ScaleModel extends ViewportModel {
         }));
     }
     doDeactivate() {
+        // Clean up auto-scale throttling subscriptions to prevent memory leaks
+        if (this.autoScaleZoomSubscription) {
+            this.autoScaleZoomSubscription.unsubscribe();
+            this.autoScaleZoomSubscription = null;
+        }
+        if (this.autoScalePanSubscription) {
+            this.autoScalePanSubscription.unsubscribe();
+            this.autoScalePanSubscription = null;
+        }
         super.doDeactivate();
         this.scaleInversedSubject.complete();
         this.beforeStartAnimationSubject.complete();
@@ -119,8 +138,13 @@ export class ScaleModel extends ViewportModel {
     }
     haltAnimation() {
         var _a;
+        // Stop current animation if it exists
         if ((_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.animationInProgress) {
             this.currentAnimation.finishAnimation();
+            // Clear the current animation reference
+            this.currentAnimation = undefined;
+            // CRITICAL: Force stop all viewport animations in the animation system to prevent accumulation
+            this.canvasAnimation.forceStopAnimation(VIEWPORT_ANIMATION_ID);
             this.doAutoScale();
         }
     }
@@ -196,15 +220,33 @@ export class ScaleModel extends ViewportModel {
         }
         else {
             (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.tick();
-            startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
+            // Big profit in performance for safari
+            isSafari
+                ? startViewportModelAnimationSafari(this.canvasAnimation, this, constrainedState, this.state.auto ? this.autoScaleModel : undefined)
+                : startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
+        }
+    }
+    setXScaleWithoutYScale(visualCandleSource) {
+        var _a;
+        const initialStateCopy = this.export();
+        const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - this.state.defaultViewportItems, 0));
+        const endCandle = vCandles[vCandles.length - 1];
+        const xEnd = endCandle.startUnit + endCandle.width + this.offsets.right;
+        const xStart = xEnd - (this.getBounds().width * this.zoomX);
+        const state = Object.assign(Object.assign({}, initialStateCopy), { xStart, xEnd });
+        const constrainedState = this.scalePostProcessor(initialStateCopy, state);
+        if (this.state.auto) {
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
+        (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.tick();
+        startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
     }
     setYScale(yStart, yEnd, fire = false) {
         const initialState = this.export();
         if (initialState.yStart === yStart && initialState.yEnd === yEnd && initialState.zoomY > 0) {
             return;
         }
-        if (this.state.lockPriceToBarRatio) {
+        if (this.state.lockPriceToBarRatio && this.initialViewportValidSubject.getValue()) {
             this.setLockedYScale(yStart, yEnd, fire, initialState);
             return;
         }
@@ -238,15 +280,19 @@ export class ScaleModel extends ViewportModel {
     moveXStart(xStart) {
         const state = this.export();
         const initialStateCopy = Object.assign({}, state);
-        // always stop the animations
         this.haltAnimation();
         moveXStart(state, xStart);
         // there we need only candles constraint
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
-        if (this.state.auto) {
-            this.autoScaleModel.doAutoYScale(constrainedState);
+        if (isSafari) {
+            startViewportModelAnimationSafari(this.canvasAnimation, this, constrainedState, this.state.auto ? this.autoScaleModel : undefined);
+        }
+        else {
+            if (this.state.auto) {
+                this.autoScaleModel.doAutoYScale(constrainedState);
+            }
+            this.apply(constrainedState);
         }
-        this.apply(constrainedState);
     }
     /**
      * Moves both yStart and yEnd without changing the viewport height (zoom).
@@ -358,6 +404,26 @@ export class ScaleModel extends ViewportModel {
         }
         this.state.lockPriceToBarRatio = value;
     }
+    initAutoScaleThrottling() {
+        // Throttle zoom auto-scale to ONE_FRAME_MS
+        this.autoScaleZoomSubscription = autoScaleZoomSubject
+            .pipe(throttleTime(ONE_FRAME_MS, animationFrameScheduler, { trailing: true, leading: false }))
+            .subscribe(() => {
+            const state = this.export();
+            const initialStateCopy = Object.assign({}, state);
+            const constrainedState = this.scalePostProcessor(initialStateCopy, state);
+            this.autoScaleModel.doAutoYScale(constrainedState);
+        });
+        // Throttle pan auto-scale to 250ms
+        this.autoScalePanSubscription = autoScalePanSubject
+            .pipe(throttleTime(ONE_FRAME_MS, animationFrameScheduler, { trailing: true, leading: false }))
+            .subscribe(() => {
+            const state = this.export();
+            const initialStateCopy = Object.assign({}, state);
+            const constrainedState = this.scalePostProcessor(initialStateCopy, state);
+            this.autoScaleModel.doAutoYScale(constrainedState);
+        });
+    }
 }
 /**
  * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.

package/dist/chart/utils/device/touchpad.utils.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 { PriceAxisType } from '../../components/labels_generator/numeric-axis-labels.generator';
+export declare const isSafari: boolean;
 export declare const isFirefox: boolean;
 /**
  * this function determines whether the event was triggered with the mouse or the touchpad

package/dist/chart/utils/device/touchpad.utils.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/.
  */
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 //@ts-ignore
 const isChrome = !!window.chrome;
 //@ts-ignore

package/dist/chart/utils/math.utils.js

@@ -113,7 +113,7 @@ export function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
 }
 export function easeExpOut(value) {
-    return 1 - (Math.pow(2, -5 * value) - 0.0009765625) * 1.0009775171065494;
+    return 1 - (Math.pow(2, -10 * value) - 0.0009765625) * 1.0009775171065494;
 }
 /**
  * Returns the first finite number in a list of numbers. If no finite number is found,