@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,259 @@
  * 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 as C,Subject as d}from"rxjs";import{map as m,throttleTime as E}from"rxjs/operators";import{CanvasElement as x}from"../canvas/canvas-bounds-container";import{CanvasModel as H,initCanvasWithConfig as L}from"./canvas.model";import{animationFrameId as g}from"../utils/perfomance/request-animation-frame-throttle.utils";const k=317;export const HIT_TEST_ID_RANGE={DRAWINGS:[1,199],NEWS:[200,299],DATA_SERIES:[300,2999],EVENTS:[3e3,4e3]};export class HitTestCanvasModel extends H{constructor(e,s,i,n,u,o,a,b){super(e,s,u,a,b,{willReadFrequently:!0,desynchronized:!0}),this.canvasInputListener=i,this.canvasBoundsContainer=n,this.hitTestSubscribers=[],this.eventsSubscriptions=[],this.hoverSubject=new d,this.touchStartSubject=new d,this.dblClickSubject=new d,this.rightClickSubject=new d,this.curImgData=new Uint8ClampedArray(4),this.prevAnimationFrameId=-1,L(this,o),s.style.visibility="hidden",this.enableUserControls()}enableUserControls(){if(this.eventsSubscriptions.length===0){const e=this.canvasBoundsContainer.getBoundsHitTest(x.ALL_PANES),s=this.canvasInputListener.observeMouseMove().pipe(E(100,void 0,{trailing:!0})).subscribe(r=>this.eventHandler(r,"hover")),i=this.canvasInputListener.observeTouchStart().pipe(m(()=>this.canvasInputListener.currentPoint)).subscribe(r=>this.eventHandler(r,"touchstart")),n=C(this.canvasInputListener.observeMouseDown(e),this.canvasInputListener.observeTouchStart().pipe(m(()=>this.canvasInputListener.currentPoint))).subscribe(r=>this.eventHandler(r,"mousedown")),u=C(this.canvasInputListener.observeMouseUp(e),this.canvasInputListener.observeTouchEndDocument().pipe(m(()=>this.canvasInputListener.currentPoint))).subscribe(r=>this.eventHandler(r,"mouseup")),o=this.canvasInputListener.observeDbClick(e).subscribe(r=>this.eventHandler(r,"dblclick")),a=this.canvasInputListener.observeContextMenu(e).pipe(m(()=>Object.assign({},this.canvasInputListener.currentPoint))).subscribe(r=>{this.eventHandler(r,"contextmenu")}),b=this.canvasInputListener.observeWheel(e).subscribe(r=>setTimeout(()=>this.eventHandler(r,"zoom"),0));this.eventsSubscriptions.push(s,n,o,a,b,i,u)}}disableUserControls(){this.eventsSubscriptions.forEach(e=>e.unsubscribe()),this.eventsSubscriptions=[]}addSubscriber(e){this.hitTestSubscribers.push(e)}removeSubscriber(e){this.hitTestSubscribers=this.hitTestSubscribers.filter(s=>s===e)}idToColor(e){const s=(e*k).toString(16);return"#000000".substr(0,7-s.length)+s}colorToId(e){return e/k}observeHoverOnElement(){return this.hoverSubject.asObservable()}observeTouchStartOnElement(){return this.touchStartSubject.asObservable()}observeDblClickOnElement(){return this.dblClickSubject.asObservable()}observeRightClickOnElement(){return this.rightClickSubject.asObservable()}getPixel(e,s){const i=window.devicePixelRatio;return this.prevAnimationFrameId!==g&&(this.curImgData=this.ctx.getImageData(e*i,s*i,1,1).data,this.prevAnimationFrameId=g),this.curImgData}resolveModel(e){const s=this.getPixel(e.x,e.y),i=this.colorToId(s[0]*65536+s[1]*256+s[2]),n=Number(i),[u]=p(this.hitTestSubscribers,n);return u==null?void 0:u.lookup(i)}resolveCursor(e){var s;if(!this.hitTestSubscribers.some(b=>b.resolveCursor!==void 0))return;const i=this.getPixel(e.x,e.y),n=this.colorToId(i[0]*65536+i[1]*256+i[2]),u=Number(n),[o]=p(this.hitTestSubscribers,u),a=o==null?void 0:o.lookup(n);return(s=o==null?void 0:o.resolveCursor)===null||s===void 0?void 0:s.call(o,e,a)}eventHandler(e,s){var i,n,u,o,a,b,r;const S=this.getPixel(e.x,e.y),I=this.colorToId(S[0]*65536+S[1]*256+S[2]),f=Number(I),[t,h]=p(this.hitTestSubscribers,f),c=t==null?void 0:t.lookup(I),v={point:e,model:c};switch(s){case"mousedown":c&&((i=t==null?void 0:t.onMouseDown)===null||i===void 0||i.call(t,c,e)),h.forEach(l=>l.onMouseDown&&l.onMouseDown(null,e));break;case"mouseup":c&&((n=t==null?void 0:t.onMouseUp)===null||n===void 0||n.call(t,c,e)),h.forEach(l=>l.onMouseUp&&l.onMouseUp(null,e));break;case"hover":c&&((u=t==null?void 0:t.onHover)===null||u===void 0||u.call(t,c,e)),h.forEach(l=>l.onHover&&l.onHover(null,e)),this.hoverSubject.next(v);break;case"touchstart":c&&((o=t==null?void 0:t.onTouchStart)===null||o===void 0||o.call(t,c,e)),h.forEach(l=>l.onTouchStart&&l.onTouchStart(null,e)),this.touchStartSubject.next(v);break;case"dblclick":c&&((a=t==null?void 0:t.onDblClick)===null||a===void 0||a.call(t,c,e)),this.dblClickSubject.next(v);break;case"contextmenu":c&&((b=t==null?void 0:t.onRightClick)===null||b===void 0||b.call(t,c,e)),this.rightClickSubject.next(v);break;case"zoom":c&&((r=t==null?void 0:t.onZoom)===null||r===void 0||r.call(t,c,e)),h.forEach(l=>l.onZoom&&l.onZoom(null,e));break;default:break}}}const p=(T,e)=>{let s;const i=[];return T.forEach(n=>{const[u,o]=n.getIdRange();e>=u&&e<=o?s=n:i.push(n)}),[s,i]};
+import { merge, Subject } from 'rxjs';
+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 HIT_TEST_ID_RANGE = {
+    DRAWINGS: [1, 199],
+    NEWS: [200, 299],
+    DATA_SERIES: [300, 2999],
+    EVENTS: [3000, 4000],
+    EXECUTED_ORDERS: [4001, 5000],
+};
+/** HitTestCanvasModel
+ * Canvas layer for testing mouse events over the models such as Charts, Drawings, Volumes and etc.
+ * !!! always add new drawers to hit-test drawingManager BEFORE the DrawerType.HIT_TEST_DRAWINGS to save the hierarchy
+ *
+ * @doc-tags chart-core,hit-test
+ */
+export class HitTestCanvasModel extends CanvasModel {
+    constructor(eventBus, canvas, canvasInputListener, canvasBoundsContainer, drawingManager, chartConfig, canvasModels, resizer) {
+        super(eventBus, canvas, drawingManager, canvasModels, resizer, {
+            willReadFrequently: true,
+            desynchronized: true,
+        });
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.hitTestSubscribers = [];
+        this.eventsSubscriptions = [];
+        this.hoverSubject = new Subject();
+        this.touchStartSubject = new Subject();
+        this.dblClickSubject = new Subject();
+        this.rightClickSubject = new Subject();
+        this.curImgData = new Uint8ClampedArray(4);
+        this.prevAnimationFrameId = -1;
+        initCanvasWithConfig(this, chartConfig);
+        canvas.style.visibility = 'hidden';
+        this.enableUserControls();
+    }
+    /**
+     * Enables HitTestCanvasModel events listeners.
+     */
+    enableUserControls() {
+        if (this.eventsSubscriptions.length === 0) {
+            const bounds = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
+            const hoverSub = this.canvasInputListener
+                .observeMouseMove()
+                .pipe(throttleTime(100, undefined, { trailing: true }))
+                .subscribe(point => this.eventHandler(point, 'hover'));
+            const touchStartSub = this.canvasInputListener
+                .observeTouchStart()
+                .pipe(map(() => this.canvasInputListener.currentPoint))
+                .subscribe(point => this.eventHandler(point, 'touchstart'));
+            const clickSub = merge(this.canvasInputListener.observeMouseDown(bounds), 
+            // should probably be deleted, touch event is a separate event and sometimes it doesn't work while being a part of click event
+            this.canvasInputListener.observeTouchStart().pipe(map(() => this.canvasInputListener.currentPoint))).subscribe(point => this.eventHandler(point, 'mousedown'));
+            const mouseUpSub = merge(this.canvasInputListener.observeMouseUp(bounds), 
+            // should probably be deleted, touch event is a separate event and sometimes it doesn't work while being a part of click event
+            this.canvasInputListener
+                .observeTouchEndDocument()
+                .pipe(map(() => this.canvasInputListener.currentPoint))).subscribe(point => this.eventHandler(point, 'mouseup'));
+            const dblClickSub = this.canvasInputListener
+                .observeDbClick(bounds)
+                .subscribe(point => this.eventHandler(point, 'dblclick'));
+            const rightClickSub = this.canvasInputListener
+                .observeContextMenu(bounds)
+                .pipe(map(() => (Object.assign({}, this.canvasInputListener.currentPoint))))
+                .subscribe(point => {
+                this.eventHandler(point, 'contextmenu');
+            });
+            const zoomSub = this.canvasInputListener
+                .observeWheel(bounds)
+                .subscribe(point => setTimeout(() => this.eventHandler(point, 'zoom'), 0));
+            this.eventsSubscriptions.push(hoverSub, clickSub, dblClickSub, rightClickSub, zoomSub, touchStartSub, mouseUpSub);
+        }
+    }
+    /**
+     * Disables HitTestCanvasModel events listeners.
+     */
+    disableUserControls() {
+        this.eventsSubscriptions.forEach(sub => sub.unsubscribe());
+        this.eventsSubscriptions = [];
+    }
+    /**
+     * Adds a new subscriber to the list of hit test subscribers.
+     * @param {HitTestSubscriber<unknown>} subscriber - The subscriber to be added.
+     * @returns {void}
+     */
+    addSubscriber(subscriber) {
+        this.hitTestSubscribers.push(subscriber);
+    }
+    /**
+     * Removes a subscriber from the list of hit test subscribers.
+     *
+     * @param {HitTestSubscriber<unknown>} subscriber - The subscriber to be removed.
+     * @returns {void}
+     */
+    removeSubscriber(subscriber) {
+        this.hitTestSubscribers = this.hitTestSubscribers.filter(sub => sub === subscriber);
+    }
+    /**
+     * Converts a number to a hexadecimal color code.
+     * @param {number} id - The number to be converted.
+     * @returns {string} - The hexadecimal color code.
+     */
+    idToColor(id) {
+        const hex = (id * bigPrimeNumber).toString(16);
+        return '#000000'.substr(0, 7 - hex.length) + hex;
+    }
+    /**
+     * This function takes a number representing a color and returns the corresponding ID by dividing it by a big prime number.
+     *
+     * @param {number} color - The number representing the color.
+     * @returns {number} - The ID corresponding to the color.
+     */
+    colorToId(color) {
+        return color / bigPrimeNumber;
+    }
+    /**
+     * Observes hovered on element event, provides hovered element model when move in.
+     */
+    observeHoverOnElement() {
+        return this.hoverSubject.asObservable();
+    }
+    /**
+     * Observes touch start on element event, provides element model.
+     */
+    observeTouchStartOnElement() {
+        return this.touchStartSubject.asObservable();
+    }
+    /**
+     * Observes dblclicked on element event, provides dblclicked element model.
+     */
+    observeDblClickOnElement() {
+        return this.dblClickSubject.asObservable();
+    }
+    /**
+     * Observes rightclicked on element event, provides rightclicked element model.
+     */
+    observeRightClickOnElement() {
+        return this.rightClickSubject.asObservable();
+    }
+    /**
+     * Retrieves the pixel data at the specified coordinates.
+     *
+     * @private
+     * @param {number} x - The x-coordinate of the pixel.
+     * @param {number} y - The y-coordinate of the pixel.
+     * @returns {Uint8ClampedArray} - The pixel data at the specified coordinates.
+     */
+    getPixel(x, y) {
+        const dpr = window.devicePixelRatio;
+        // it's heavy operation, so use cached value if possible
+        if (this.prevAnimationFrameId !== animationFrameId) {
+            this.curImgData = this.ctx.getImageData(x * dpr, y * dpr, 1, 1).data;
+            this.prevAnimationFrameId = animationFrameId;
+        }
+        return this.curImgData;
+    }
+    /**
+     * Resolves ht model based on the provided point
+     * @param point - The point for which to resolve model
+     */
+    resolveModel(point) {
+        const data = this.getPixel(point.x, point.y);
+        const id = this.colorToId(data[0] * 65536 + data[1] * 256 + data[2]);
+        const idNumber = Number(id);
+        const [subscriberToHit] = sortSubscribers(this.hitTestSubscribers, idNumber);
+        const model = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.lookup(id);
+        return model;
+    }
+    /**
+     * Resolves cursor type based on the provided point
+     * @param point - The point for which to resolve cursor type
+     * @returns - The resolved cursor type, if any
+     */
+    resolveCursor(point) {
+        var _a;
+        // do not spend time on resolving cursor if there are no subscribers that need it
+        if (!this.hitTestSubscribers.some(s => s.resolveCursor !== undefined)) {
+            return undefined;
+        }
+        const data = this.getPixel(point.x, point.y);
+        const id = this.colorToId(data[0] * 65536 + data[1] * 256 + data[2]);
+        const idNumber = Number(id);
+        const [subscriberToHit] = sortSubscribers(this.hitTestSubscribers, idNumber);
+        const model = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.lookup(id);
+        return (_a = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.resolveCursor) === null || _a === void 0 ? void 0 : _a.call(subscriberToHit, point, model);
+    }
+    /**
+     * Private method that handles hit test events.
+     * @param {Point} point - The point where the event occurred.
+     * @param {HitTestEvents} event - The type of event that occurred.
+     * @returns {void}
+     */
+    eventHandler(point, event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const data = this.getPixel(point.x, point.y);
+        const id = this.colorToId(data[0] * 65536 + data[1] * 256 + data[2]);
+        const idNumber = Number(id);
+        const [subscriberToHit, restSubs] = sortSubscribers(this.hitTestSubscribers, idNumber);
+        const model = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.lookup(id);
+        const hitTestEvent = {
+            point,
+            model,
+        };
+        switch (event) {
+            case 'mousedown':
+                model && ((_a = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(subscriberToHit, model, point));
+                restSubs.forEach(sub => sub.onMouseDown && sub.onMouseDown(null, point));
+                break;
+            case 'mouseup':
+                model && ((_b = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onMouseUp) === null || _b === void 0 ? void 0 : _b.call(subscriberToHit, model, point));
+                restSubs.forEach(sub => sub.onMouseUp && sub.onMouseUp(null, point));
+                break;
+            case 'hover':
+                model && ((_c = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onHover) === null || _c === void 0 ? void 0 : _c.call(subscriberToHit, model, point));
+                restSubs.forEach(sub => sub.onHover && sub.onHover(null, point));
+                this.hoverSubject.next(hitTestEvent);
+                break;
+            case 'touchstart':
+                model && ((_d = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onTouchStart) === null || _d === void 0 ? void 0 : _d.call(subscriberToHit, model, point));
+                restSubs.forEach(sub => sub.onTouchStart && sub.onTouchStart(null, point));
+                this.touchStartSubject.next(hitTestEvent);
+                break;
+            case 'dblclick':
+                model && ((_e = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onDblClick) === null || _e === void 0 ? void 0 : _e.call(subscriberToHit, model, point));
+                this.dblClickSubject.next(hitTestEvent);
+                break;
+            case 'contextmenu':
+                model && ((_f = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onRightClick) === null || _f === void 0 ? void 0 : _f.call(subscriberToHit, model, point));
+                this.rightClickSubject.next(hitTestEvent);
+                break;
+            case 'zoom':
+                model && ((_g = subscriberToHit === null || subscriberToHit === void 0 ? void 0 : subscriberToHit.onZoom) === null || _g === void 0 ? void 0 : _g.call(subscriberToHit, model, point));
+                restSubs.forEach(sub => sub.onZoom && sub.onZoom(null, point));
+                break;
+            default:
+                break;
+        }
+    }
+}
+const sortSubscribers = (subs, id) => {
+    let mainSubscriber = undefined;
+    const restSubs = [];
+    subs.forEach(sub => {
+        const [start, end] = sub.getIdRange();
+        if (id >= start && id <= end) {
+            mainSubscriber = sub;
+        }
+        else {
+            restSubs.push(sub);
+        }
+    });
+    return [mainSubscriber, restSubs];
+};

package/dist/chart/model/main-candle-series.model.d.ts

@@ -18,7 +18,7 @@ import VisualCandle from './visual-candle';
  */
 export declare class MainCandleSeriesModel extends CandleSeriesModel {
     private readonly baseModel;
-    constructor(baseModel: ChartBaseModel<'candle'>, extentComponent: YExtentComponent, id: number, eventBus: EventBus, scaleModel: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors: CandleSeriesColors);
+    constructor(baseModel: ChartBaseModel<'candle'>, extentComponent: YExtentComponent, id: number, eventBus: EventBus, scale: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors: CandleSeriesColors);
     set visualPoints(candles: VisualCandle[] | VisualCandle[][]);
     get visualPoints(): VisualCandle[];
     set dataPoints(candles: Candle[] | Candle[][]);

package/dist/chart/model/main-candle-series.model.js

@@ -3,4 +3,32 @@
  * 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{CandleSeriesModel as r}from"./candle-series.model";export class MainCandleSeriesModel extends r{constructor(e,s,a,t,i,n,o,l,d){super(s,a,t,i,n,o,l,d),this.baseModel=e}set visualPoints(e){super.visualPoints=e,this.baseModel.mainVisualPoints=super.visualPoints}get visualPoints(){return super.visualPoints}set dataPoints(e){super.dataPoints=e,this.baseModel.mainDataPoints=super.dataPoints}get dataPoints(){return super.dataPoints}recalculateMeanCandleWidth(e){super.recalculateMeanCandleWidth(e),this.baseModel.meanDataWidth=this.meanCandleWidth}}
+import { CandleSeriesModel } from './candle-series.model';
+/**
+ * This model represents main chart data series and is highly tied to chartBaseModel, @see ChartBaseModel
+ */
+export class MainCandleSeriesModel extends CandleSeriesModel {
+    constructor(baseModel, extentComponent, id, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors) {
+        super(extentComponent, id, eventBus, scale, instrument, candlesTransformersByChartType, candleWidthByChartType, colors);
+        this.baseModel = baseModel;
+    }
+    set visualPoints(candles) {
+        super.visualPoints = candles;
+        // super.visualPoints will transform 2D array if necessary to 1D array
+        this.baseModel.mainVisualPoints = super.visualPoints;
+    }
+    get visualPoints() {
+        return super.visualPoints;
+    }
+    set dataPoints(candles) {
+        super.dataPoints = candles;
+        this.baseModel.mainDataPoints = super.dataPoints;
+    }
+    get dataPoints() {
+        return super.dataPoints;
+    }
+    recalculateMeanCandleWidth(visualCandles) {
+        super.recalculateMeanCandleWidth(visualCandles);
+        this.baseModel.meanDataWidth = this.meanCandleWidth;
+    }
+}

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

@@ -40,6 +40,7 @@ export declare class ScaleModel extends ViewportModel {
     getBounds: BoundsProvider;
     private canvasAnimation;
     scaleInversedSubject: Subject<boolean>;
+    beforeStartAnimationSubject: Subject<void>;
     history: ScaleHistoryItem[];
     autoScaleModel: AutoScaleViewportSubModel;
     zoomXYRatio: ZoomXToZoomYRatio;
@@ -49,7 +50,7 @@ export declare class ScaleModel extends ViewportModel {
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
-     * The "constrait" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
+     * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
      * @param constraint
      */
     addXConstraint(constraint: Constraints): void;
@@ -77,7 +78,7 @@ export declare class ScaleModel extends ViewportModel {
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
     zoomXToEnd(zoomIn: boolean, zoomSensitivity?: number): void;
-    private haltAnimation;
+    haltAnimation(): void;
     private zoomXTo;
     /**
      * Moves the viewport to exactly xStart..xEnd place.

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

@@ -3,4 +3,319 @@
  * 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{Subject as c}from"rxjs";import{startViewportModelAnimation as l}from"../animation/viewport-model-animation";import{cloneUnsafe as u}from"../utils/object.utils";import{AutoScaleViewportSubModel as d}from"./scaling/auto-scale.model";import{zoomConstraint as m}from"./scaling/constrait.functions";import{lockedYEndViewportCalculator as a,ratioFromZoomXY as p}from"./scaling/lock-ratio.model";import{moveXStart as f,moveYStart as S}from"./scaling/move-chart.functions";import{ViewportModel as g,compareStates as x}from"./scaling/viewport.model";import{zoomXToEndViewportCalculator as A,zoomXToPercentViewportCalculator as y}from"./scaling/x-zooming.functions";export const getDefaultHighLowWithIndex=()=>({high:Number.NEGATIVE_INFINITY,low:Number.POSITIVE_INFINITY,highIdx:0,lowIdx:0});export class ScaleModel extends g{constructor(t,s,e){super(),this.config=t,this.getBounds=s,this.canvasAnimation=e,this.scaleInversedSubject=new c,this.history=[],this.zoomXYRatio=0,this.xConstraints=[],this.scalePostProcessor=(o,i)=>this.xConstraints.reduce((n,h)=>h(o,n),i),this.state=u(t.scale),this.autoScaleModel=new d(this),this.offsets=this.config.components.offsets,this.addXConstraint((o,i)=>m(o,i,this.config.components.chart,this.getBounds))}addXConstraint(t){this.xConstraints=[...this.xConstraints,t]}updateOffsets(t){this.offsets=Object.assign(Object.assign({},this.offsets),t),this.doAutoScale(!0)}getOffsets(){return this.offsets}zoomXToPercent(t,s,e=!1,o=this.config.scale.zoomSensitivity){this.config.components.yAxis.type==="percent"&&this.haltAnimation();const i=this.export();y(this,i,t,o,s),this.zoomXTo(i,e)}zoomXToEnd(t,s=this.config.scale.zoomSensitivity){this.config.components.yAxis.type==="percent"&&this.haltAnimation();const e=this.export();A(this,e,s,t),this.zoomXTo(e)}haltAnimation(){var t;!((t=this.currentAnimation)===null||t===void 0)&&t.animationInProgress&&(this.currentAnimation.finishAnimation(),this.doAutoScale())}zoomXTo(t,s){const e=Object.assign({},t),o=this.scalePostProcessor(e,t);this.state.lockPriceToBarRatio&&a(o,this.zoomXYRatio),this.state.auto&&this.autoScaleModel.setAutoAndRecalculateState(o,!0),s?this.apply(o):l(this.canvasAnimation,this,o)}setXScale(t,s){const e=this.export();super.setXScale(t,s,!1);const o=this.export(),i=this.scalePostProcessor(e,o);this.state.lockPriceToBarRatio&&a(i,this.zoomXYRatio),this.state.auto&&this.autoScaleModel.setAutoAndRecalculateState(i,!0),this.apply(i)}moveXStart(t){const s=this.export(),e=Object.assign({},s);this.haltAnimation(),f(s,t);const o=this.scalePostProcessor(e,s);this.state.auto&&this.autoScaleModel.setAutoAndRecalculateState(o,!0),this.apply(o)}moveYStart(t){if(this.haltAnimation(),!this.state.auto){const s=this.export();S(s,t),this.apply(s)}}doAutoScale(t=!1){if(!this.isViewportAnimationInProgress()&&this.state.auto||t){const s=this.export();this.autoScaleModel.setAutoAndRecalculateState(s,!0),x(s,this.export())||this.apply(s)}}isViewportAnimationInProgress(){const t=this.currentAnimation;return t==null?void 0:t.animationInProgress}pushToHistory(t){this.history.push(t)}popFromHistory(){return this.history.pop()}clearHistory(){this.history=[]}isDefaultXBounds(){return this.xStart===0&&this.xEnd===0}isDefaultYBounds(){return this.yStart===0&&this.yEnd===0}isScaleReady(){return!this.isDefaultXBounds()&&!this.isDefaultYBounds()}autoScale(t=!0){this.config.components.yAxis.type==="percent"?this.state.auto=!0:this.state.auto=t,t&&(this.clearHistory(),this.doAutoScale())}setLockPriceToBarRatio(t=!1){const{type:s}=this.config.components.yAxis;if(s==="percent"||s==="logarithmic"){this.state.lockPriceToBarRatio=!1;return}t&&this.recalculateZoomXYRatio(),this.state.lockPriceToBarRatio=t}recalculateZoomXYRatio(){this.zoomXYRatio=p(this.zoomX,this.zoomY)}}export class SyncedByXScaleModel extends ScaleModel{constructor(t,s,e,o){super(s,e,o),this.delegate=t,this.config=s,this.getBounds=e}doActivate(){this.addRxSubscription(this.delegate.xChanged.subscribe(()=>this.doAutoScale(this.state.auto)))}get xStart(){return this.delegate.xStart}set xStart(t){this.delegate.xStart=t}get xEnd(){return this.delegate.xEnd}set xEnd(t){this.delegate.xEnd=t}get zoomX(){return this.delegate.zoomX}set zoomX(t){this.delegate.zoomX=t}observeXChanged(){return this.delegate.xChanged}fireChanged(){this.delegate.changed.next(),this.changed.next()}}
+import { Subject } from 'rxjs';
+import { startViewportModelAnimation } from '../animation/viewport-model-animation';
+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 { moveXStart, moveYStart } from './scaling/move-chart.functions';
+import { ViewportModel, compareStates } from './scaling/viewport.model';
+import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
+export const getDefaultHighLowWithIndex = () => ({
+    high: Number.NEGATIVE_INFINITY,
+    low: Number.POSITIVE_INFINITY,
+    highIdx: 0,
+    lowIdx: 0,
+});
+/**
+ * The ScaleModel class represents the state of a chart's scale, including the current viewport, zoom level, and auto-scaling settings.
+ * It extends the ViewportModel class, which provides the underlying implementation for handling viewports and zoom levels.
+ * Controls current visible CHART viewport.
+ * Has additional logic:
+ * - auto-scale
+ * - locked scale
+ * - zooming functions
+ * - history
+ */
+export class ScaleModel extends ViewportModel {
+    constructor(config, getBounds, canvasAnimation) {
+        super();
+        this.config = config;
+        this.getBounds = getBounds;
+        this.canvasAnimation = canvasAnimation;
+        this.scaleInversedSubject = new Subject();
+        // y-axis component needs this subject in order to halt prev animation if axis type is percent
+        this.beforeStartAnimationSubject = new Subject();
+        // TODO rework, make a new history based on units
+        this.history = [];
+        this.zoomXYRatio = 0;
+        this.xConstraints = [];
+        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
+            return this.xConstraints.reduce((acc, cur) => cur(initialState, acc), state);
+        };
+        this.state = cloneUnsafe(config.scale);
+        this.autoScaleModel = new AutoScaleViewportSubModel(this);
+        this.offsets = this.config.components.offsets;
+        this.addXConstraint((initialState, state) => zoomConstraint(initialState, state, this.config.components.chart, this.getBounds));
+    }
+    /**
+     * 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.
+     * @param constraint
+     */
+    addXConstraint(constraint) {
+        this.xConstraints = [...this.xConstraints, constraint];
+    }
+    /**
+     * The method updates the offsets for the scale model based on the provided "offsets" object.
+     * Note that the method modifies the offsets and triggers an autoscale
+     * @param offsets
+     */
+    updateOffsets(offsets) {
+        this.offsets = Object.assign(Object.assign({}, this.offsets), offsets);
+        this.doAutoScale(true);
+    }
+    /**
+     * @returns current offsets
+     */
+    getOffsets() {
+        return this.offsets;
+    }
+    /**
+     * Zooms the X axis of the chart to a specified percentage of the viewport.
+     * @param viewportPercent The percentage of the viewport width to zoom to.
+     * @param zoomIn Whether to zoom in or out.
+     * @param forceNoAnimation Whether to skip animation.
+     * @param zoomSensitivity The sensitivity of the zoom.
+     */
+    zoomXToPercent(viewportPercent, zoomIn, forceNoAnimation = false, zoomSensitivity = this.config.scale.zoomSensitivity) {
+        this.beforeStartAnimationSubject.next();
+        const state = this.export();
+        zoomXToPercentViewportCalculator(this, state, viewportPercent, zoomSensitivity, zoomIn);
+        this.zoomXTo(state, forceNoAnimation);
+    }
+    /**
+     * 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, zoomSensitivity = this.config.scale.zoomSensitivity) {
+        this.beforeStartAnimationSubject.next();
+        const state = this.export();
+        zoomXToEndViewportCalculator(this, state, zoomSensitivity, zoomIn);
+        this.zoomXTo(state);
+    }
+    haltAnimation() {
+        var _a;
+        if ((_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.animationInProgress) {
+            this.currentAnimation.finishAnimation();
+            this.doAutoScale();
+        }
+    }
+    zoomXTo(state, forceNoAnimation) {
+        const initialStateCopy = Object.assign({}, state);
+        const constrainedState = this.scalePostProcessor(initialStateCopy, state);
+        if (this.state.lockPriceToBarRatio) {
+            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
+        }
+        if (this.state.auto) {
+            this.autoScaleModel.doAutoYScale(constrainedState);
+        }
+        if (forceNoAnimation) {
+            this.apply(constrainedState);
+        }
+        else {
+            startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
+        }
+    }
+    /**
+     * Moves the viewport to exactly xStart..xEnd place.
+     * (you need to fire DRAW event after this)
+     * @param xStart - viewport start in units
+     * @param xEnd - viewport end in units
+     * @param fireChanged
+     * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
+     */
+    setXScale(xStart, xEnd) {
+        const initialState = this.export();
+        super.setXScale(xStart, xEnd, false);
+        const state = this.export();
+        const constrainedState = this.scalePostProcessor(initialState, state);
+        if (this.state.lockPriceToBarRatio) {
+            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
+        }
+        if (this.state.auto) {
+            this.autoScaleModel.doAutoYScale(constrainedState);
+        }
+        this.apply(constrainedState);
+    }
+    /**
+     * Moves both xStart and xEnd without changing the viewport width (zoom).
+     * WILL CHANGE the Y axis if scale.auto=true.
+     * @param xStart - starting point in units
+     */
+    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);
+        }
+        this.apply(constrainedState);
+    }
+    /**
+     * Moves both yStart and yEnd without changing the viewport height (zoom).
+     * Will not move viewport if scale.auto=true
+     * @param yStart - starting point in units
+     */
+    moveYStart(yStart) {
+        this.haltAnimation();
+        if (this.state.auto) {
+            return;
+        }
+        else {
+            const state = this.export();
+            moveYStart(state, yStart);
+            this.apply(state);
+        }
+    }
+    /**
+     * Automatically scales the chart to fit the data range.
+     * @param forceApply - If true, the chart will be forcefully auto-scaled even if animation is in progress.
+     */
+    doAutoScale(forceApply = false) {
+        // dont auto-scale if animation, otherwise - forced or config
+        if ((!this.isViewportAnimationInProgress() && this.state.auto) || forceApply) {
+            const state = this.export();
+            this.autoScaleModel.doAutoYScale(state);
+            if (!compareStates(state, this.export())) {
+                this.apply(state);
+            }
+        }
+    }
+    /**
+     * Checks if viewport animation is currently in progress.
+     * @returns returns true if viewport animation is in progress, false otherwise.
+     */
+    isViewportAnimationInProgress() {
+        const animation = this.currentAnimation;
+        return animation === null || animation === void 0 ? void 0 : animation.animationInProgress;
+    }
+    /**
+     * Adds an item to the scale history.
+     * @param item - The item to add to the history.
+     */
+    pushToHistory(item) {
+        this.history.push(item);
+    }
+    /**
+     * Removes the most recent item from the scale history and returns it.
+     * @returns - The most recent item from the history, or undefined if the history is empty.
+     */
+    popFromHistory() {
+        return this.history.pop();
+    }
+    /**
+     * Clears the scale history.
+     */
+    clearHistory() {
+        this.history = [];
+    }
+    /**
+     * Checks if the X axis bounds are the default values.
+     * @returns if false - it means there are candles and it's possible to do scaling and add drawings
+     */
+    isDefaultXBounds() {
+        return this.xStart === 0 && this.xEnd === 0;
+    }
+    /**
+     * Checks if the Y axis bounds are the default values.
+     * @returns if false - it means there are candles and it's possible to do scaling and add drawings
+     */
+    isDefaultYBounds() {
+        return this.yStart === 0 && this.yEnd === 0;
+    }
+    /**
+     * Checks if the scale is ready to be used.
+     * @returns - Returns true if the scale is ready, false otherwise.
+     */
+    isScaleReady() {
+        return !this.isDefaultXBounds() && !this.isDefaultYBounds();
+    }
+    /**
+     * Enables or disables auto-scaling of the chart.
+     * @param auto - If true, the chart will be automatically scaled. If false, auto-scaling will be disabled.
+     */
+    autoScale(auto = true) {
+        // TODO rework, make this a separate feature toggle, describe in docs; this should be a business-logic level
+        if (this.config.components.yAxis.type === 'percent') {
+            this.state.auto = true;
+        }
+        else {
+            this.state.auto = auto;
+        }
+        if (auto) {
+            this.clearHistory();
+            this.doAutoScale();
+        }
+    }
+    /**
+     * Sets whether the price-to-bar ratio should be locked or not.
+     * @param value - If true, the price-to-bar ratio will be locked. If false, it will not be locked.
+     */
+    setLockPriceToBarRatio(value = false) {
+        const { type } = this.config.components.yAxis;
+        // TODO rework, why such logic? same as above, if we have business-logic like this one => make it separate code
+        if (type === 'percent' || type === 'logarithmic') {
+            this.state.lockPriceToBarRatio = false;
+            return;
+        }
+        if (value) {
+            this.recalculateZoomXYRatio();
+        }
+        this.state.lockPriceToBarRatio = value;
+    }
+    /**
+     * Recalculates the zoom X/Y ratio based on the current zoom levels.
+     */
+    recalculateZoomXYRatio() {
+        this.zoomXYRatio = ratioFromZoomXY(this.zoomX, this.zoomY);
+    }
+}
+/**
+ * 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.
+ * This is useful for scenarios where multiple charts need to display the same X-axis data, but with different Y-axis scales.
+ */
+export class SyncedByXScaleModel extends ScaleModel {
+    constructor(delegate, config, getBounds, canvasAnimation) {
+        super(config, getBounds, canvasAnimation);
+        this.delegate = delegate;
+        this.config = config;
+        this.getBounds = getBounds;
+    }
+    doActivate() {
+        this.addRxSubscription(this.delegate.xChanged.subscribe(() => this.doAutoScale(this.state.auto)));
+    }
+    get xStart() {
+        return this.delegate.xStart;
+    }
+    set xStart(value) {
+        this.delegate.xStart = value;
+    }
+    get xEnd() {
+        return this.delegate.xEnd;
+    }
+    set xEnd(value) {
+        this.delegate.xEnd = value;
+    }
+    get zoomX() {
+        return this.delegate.zoomX;
+    }
+    set zoomX(value) {
+        this.delegate.zoomX = value;
+    }
+    observeXChanged() {
+        return this.delegate.xChanged;
+    }
+    fireChanged() {
+        this.delegate.changed.next();
+        this.changed.next();
+    }
+}