@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,261 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{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:[0,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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
@@ -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

@@ -1,6 +1,34 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
@@ -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;
@@ -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.