@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,182 @@
 /*
- * 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{EVENT_DRAW as h}from"../events/events";import{MIN_SUPPORTED_CANVAS_SIZE as t}from"../model/canvas.model";import{arrayIntersect as w,reorderArray as o}from"../utils/array.utils";import{animationFrameThrottled as E}from"../utils/perfomance/request-animation-frame-throttle.utils";import{uuid as d}from"../utils/uuid.utils";export const HIT_TEST_PREFIX="HIT_TEST_";const I=["MAIN_BACKGROUND","MAIN_CLEAR","HIT_TEST_CLEAR","YAXIS_CLEAR","SERIES_CLEAR","OVER_SERIES_CLEAR","HIT_TEST_DRAWINGS","GRID","VOLUMES","UNDERLAY_VOLUMES_AREA","X_AXIS","Y_AXIS","HIGH_LOW","DRAWINGS","DATA_SERIES","N_MAP_CHART","PL_CHART","WATERMARK","EMPTY_CHART","OFFLINE_CHART","LABELS","EVENTS","HIT_TEST_EVENTS","ZERO_LINE","PL_ZERO_LINE_BACKGROUND","CROSS_TOOL"];export class DrawingManager{constructor(i,r){this.chartResizeHandler=r,this.drawingOrder=[],this.drawersMap={},this.canvasIdsList=[],this.animFrameId=`draw_${d()}`,this.drawHitTestCanvas=()=>{this.drawingOrder.forEach(e=>{e.indexOf(HIT_TEST_PREFIX)!==-1&&this.drawersMap[e].draw()})},i.on(h,e=>{r.wasResized()&&(this.canvasIdsList&&(e&&e.length!==0?this.canvasIdsList=this.canvasIdsList.concat(e):this.canvasIdsList=void 0),E(this.animFrameId,()=>{this.forceDraw(this.canvasIdsList),this.canvasIdsList=[],this.drawHitTestCanvas()}))})}redrawCanvasesImmediate(){this.chartResizeHandler.fireUpdates(),this.forceDraw()}drawLastBar(){this.drawingOrder.forEach(i=>{if(i.indexOf(HIT_TEST_PREFIX)===-1){const r=this.drawersMap[i];r.drawLastBar&&r.drawLastBar()}})}forceDraw(i){this.isDrawable()&&this.drawingOrder.forEach(r=>{if(r.indexOf(HIT_TEST_PREFIX)===-1){const e=this.drawersMap[r];if(!i||i.length===0){e.draw();return}w(i,e.getCanvasIds()).length&&e.draw()}})}isDrawable(){var i,r,e,s;return((r=(i=this.chartResizeHandler.previousBCR)===null||i===void 0?void 0:i.height)!==null&&r!==void 0?r:0)>t.width&&((s=(e=this.chartResizeHandler.previousBCR)===null||e===void 0?void 0:e.width)!==null&&s!==void 0?s:0)>t.height}drawHitTestOnly(){this.drawHitTestCanvas()}addDrawer(i,r=d()){this.drawingOrder.indexOf(r)===-1&&this.drawingOrder.push(r),this.drawersMap[r]=i}addDrawerAfter(i,r,e){this.addDrawer(i,r);const s=this.drawingOrder.indexOf(r);this.drawingOrder.splice(s,1);const a=this.drawingOrder.indexOf(e);this.drawingOrder.splice(a+1,0,r),this.reorderDrawers(this.drawingOrder)}addDrawerBefore(i,r,e){this.addDrawer(i,r);const s=this.drawingOrder.indexOf(e);if(s!==-1){const a=this.drawingOrder.indexOf(r);return this.drawingOrder.splice(a,1),this.drawingOrder.splice(s,0,r),this.reorderDrawers(this.drawingOrder),!0}return!1}getDrawerByName(i){return this.drawersMap[i]}getNameByDrawer(i){for(const r in this.drawersMap)if(this.drawersMap[r]===i)return r}removeDrawerByName(i){const r=this.drawersMap[i];this.removeDrawer(r)}removeDrawer(i){Object.keys(this.drawersMap).forEach(r=>{if(this.drawersMap[r]===i){delete this.drawersMap[r];const e=this.drawingOrder.indexOf(r);e!==-1&&this.drawingOrder.splice(e,1)}})}reorderDrawers(i){this.drawingOrder=o(this.drawingOrder,i)}}export class DynamicDrawerType{static paneResizer(i){return`PANE_RESIZER_${i}`}}
+import { EVENT_DRAW } from '../events/events';
+import { MIN_SUPPORTED_CANVAS_SIZE } from '../model/canvas.model';
+import { arrayIntersect, reorderArray } from '../utils/array.utils';
+import { animationFrameThrottled } from '../utils/performance/request-animation-frame-throttle.utils';
+import { uuid } from '../utils/uuid.utils';
+export const HIT_TEST_PREFIX = 'HIT_TEST_';
+const drawerTypes = [
+    'MAIN_BACKGROUND',
+    'MAIN_CLEAR',
+    'HIT_TEST_CLEAR',
+    'YAXIS_CLEAR',
+    'SERIES_CLEAR',
+    'OVER_SERIES_CLEAR',
+    'HIT_TEST_DRAWINGS',
+    'GRID',
+    'UNDERLAY_VOLUMES_AREA',
+    'X_AXIS',
+    'Y_AXIS',
+    'HIGH_LOW',
+    'DYNAMIC_OBJECTS',
+    'N_MAP_CHART',
+    'PL_CHART',
+    'WATERMARK',
+    'EMPTY_CHART',
+    'OFFLINE_CHART',
+    'LABELS',
+    'EVENTS',
+    'HIT_TEST_EVENTS',
+    'ZERO_LINE',
+    'PL_ZERO_LINE_BACKGROUND',
+    'CROSS_TOOL',
+];
+/**
+ * Manages the drawing process.
+ * Can re-order drawers to make one be on top of the other.
+ */
+export class DrawingManager {
+    constructor(eventBus, chartResizeHandler) {
+        this.chartResizeHandler = chartResizeHandler;
+        this.drawingOrder = [];
+        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) {
+                    this.drawersMap[drawer].draw();
+                }
+            });
+        };
+        eventBus.on(EVENT_DRAW, (canvasIds) => {
+            if (chartResizeHandler.wasResized()) {
+                // if we fire bus.fireDraw() without arguments(undefined) we need to keep canvasIdsList empty
+                if (this.canvasIdsList) {
+                    if (canvasIds && canvasIds.length !== 0) {
+                        this.canvasIdsList = this.canvasIdsList.concat(canvasIds);
+                    }
+                    else {
+                        // make this undefined until the end of frame - this will redraw everything
+                        this.canvasIdsList = undefined;
+                    }
+                }
+                animationFrameThrottled(this.animFrameId, () => {
+                    this.forceDraw(this.canvasIdsList);
+                    this.canvasIdsList = [];
+                    this.drawHitTestCanvas();
+                });
+            }
+        });
+    }
+    /**
+     * Updates canvases' sizes and executes redraw without animation frame.
+     * This is required for multi-chart canvas update synchronization.
+     * If all canvases update in separate animation frames - we see visual lag. Instead we should do all updates and then redraw.
+     * @doc-tags tricky,canvas,resize
+     */
+    redrawCanvasesImmediate() {
+        this.chartResizeHandler.fireUpdates();
+        this.forceDraw();
+    }
+    drawLastBar() {
+        this.drawingOrder.forEach(drawerName => {
+            if (drawerName.indexOf(HIT_TEST_PREFIX) === -1) {
+                const drawer = this.drawersMap[drawerName];
+                drawer.drawLastBar && drawer.drawLastBar();
+            }
+        });
+    }
+    forceDraw(canvasIds) {
+        if (!this.isDrawable()) {
+            return;
+        }
+        this.drawingOrder.forEach(drawerName => {
+            if (drawerName.indexOf(HIT_TEST_PREFIX) === -1) {
+                const drawer = this.drawersMap[drawerName];
+                // draw if not canvas specified
+                if (!canvasIds || canvasIds.length === 0) {
+                    drawer.draw();
+                    return;
+                }
+                // draw if at least 1 canvas is touched (intersection)
+                if (arrayIntersect(canvasIds, drawer.getCanvasIds()).length) {
+                    drawer.draw();
+                }
+            }
+        });
+    }
+    /**
+     * Indicates whether it is possible to draw chart or not.
+     * @returns {boolean} true if chart is drawable
+     */
+    isDrawable() {
+        var _a, _b, _c, _d;
+        return (((_b = (_a = this.chartResizeHandler.previousBCR) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0) > MIN_SUPPORTED_CANVAS_SIZE.width &&
+            ((_d = (_c = this.chartResizeHandler.previousBCR) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0) > MIN_SUPPORTED_CANVAS_SIZE.height);
+    }
+    drawHitTestOnly() {
+        this.drawHitTestCanvas();
+    }
+    addDrawer(drawer, name = uuid()) {
+        this.drawingOrder.indexOf(name) === -1 && this.drawingOrder.push(name);
+        this.drawersMap[name] = drawer;
+    }
+    addDrawerAfter(drawer, newDrawerName, drawerToPutAfterName) {
+        this.addDrawer(drawer, newDrawerName);
+        const newDrawerIdx = this.drawingOrder.indexOf(newDrawerName);
+        this.drawingOrder.splice(newDrawerIdx, 1);
+        const idx = this.drawingOrder.indexOf(drawerToPutAfterName);
+        this.drawingOrder.splice(idx + 1, 0, newDrawerName);
+        this.reorderDrawers(this.drawingOrder);
+    }
+    addDrawerBefore(drawer, newDrawerName, drawerToPutBeforeName) {
+        this.addDrawer(drawer, newDrawerName);
+        const idx = this.drawingOrder.indexOf(drawerToPutBeforeName);
+        if (idx !== -1) {
+            const newDrawerIdx = this.drawingOrder.indexOf(newDrawerName);
+            this.drawingOrder.splice(newDrawerIdx, 1);
+            this.drawingOrder.splice(idx, 0, newDrawerName);
+            this.reorderDrawers(this.drawingOrder);
+            return true;
+        }
+        return false;
+    }
+    getDrawerByName(name) {
+        return this.drawersMap[name];
+    }
+    getNameByDrawer(drawer) {
+        for (const drawerName in this.drawersMap) {
+            if (this.drawersMap[drawerName] === drawer) {
+                return drawerName;
+            }
+        }
+    }
+    removeDrawerByName(name) {
+        const drawer = this.drawersMap[name];
+        this.removeDrawer(drawer);
+    }
+    removeDrawer(drawer) {
+        Object.keys(this.drawersMap).forEach(name => {
+            if (this.drawersMap[name] === drawer) {
+                delete this.drawersMap[name];
+                const drawerIdx = this.drawingOrder.indexOf(name);
+                drawerIdx !== -1 && this.drawingOrder.splice(drawerIdx, 1);
+            }
+        });
+    }
+    reorderDrawers(newOrder) {
+        this.drawingOrder = reorderArray(this.drawingOrder, newOrder);
+    }
+}
+// use this to create dynamic names
+export class DynamicDrawerType {
+    static paneResizer(id) {
+        return `PANE_RESIZER_${id}`;
+    }
+}

package/dist/chart/drawers/ht-data-series.drawer.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/.
  */

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

@@ -1,6 +1,42 @@
 /*
- * 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{flatMap as s}from"../utils/array.utils";import{clipToBounds as n}from"./data-series.drawer";export class HTDataSeriesDrawer{constructor(o,a,t){this.seriesDrawers=o,this.canvasModel=a,this.paneManager=t}draw(){const o=this.canvasModel.ctx;s(Object.values(this.paneManager.paneComponents),a=>a.yExtentComponents).forEach(a=>{o.save(),n(o,a.getBounds()),a.dataSeries.forEach(t=>this.drawSeries(o,t)),o.restore()})}drawSeries(o,a){if(a.config.visible){const t=a.config.type,e=this.seriesDrawers[t];if(e){const r={singleColor:this.canvasModel.idToColor(a.id),forceBold:7};e.draw(o,a.getSeriesInViewport(a.scaleModel.xStart-1,a.scaleModel.xEnd+1),a,r)}}}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { clipToBounds } from './data-series.drawer';
+/***
+ * HitTest Chart drawer. It's used to draw hit test for chart types on the hit-test canvas.
+ */
+export class HTDataSeriesDrawer {
+    constructor(seriesDrawers, canvasModel, paneManager) {
+        this.seriesDrawers = seriesDrawers;
+        this.canvasModel = canvasModel;
+        this.paneManager = paneManager;
+    }
+    draw() {
+        const ctx = this.canvasModel.ctx;
+        this.paneManager.yExtents.forEach(comp => {
+            ctx.save();
+            clipToBounds(ctx, comp.getBounds());
+            comp.dataSeries.forEach(series => this.drawSeries(ctx, series));
+            ctx.restore();
+        });
+    }
+    drawSeries(ctx, series) {
+        if (series.config.visible) {
+            const paintTool = series.config.type;
+            const drawer = this.seriesDrawers[paintTool];
+            if (drawer) {
+                const drawConfig = {
+                    singleColor: this.canvasModel.idToColor(series.id),
+                    forceBold: 7,
+                };
+                // +- 1 to correctly draw points which are partly inside bounds
+                drawer.draw(ctx, series.getSeriesInViewport(series.scale.xStart - 1, series.scale.xEnd + 1), series, drawConfig);
+            }
+        }
+    }
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/events/event-bus.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/.
  */

package/dist/chart/events/event-bus.js

@@ -1,6 +1,78 @@
 /*
- * 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{Subject as h}from"rxjs";import{arrayRemove as r}from"../utils/array.utils";import{EVENT_DRAW as u}from"./events";export default class d{constructor(){this.UNKNOWN_ARR=[],this.handlers={},this.muted=!1,this.unsub=(t,s)=>{const i=this.handlers[t];i!==void 0&&r.call(i,s)},this.add=(t,s,i)=>(s in this.handlers?t.call(this.handlers[s],i):this.handlers[s]=[i],this.unsub.bind(this,s,i)),this.on=(t,s)=>this.add(this.UNKNOWN_ARR.push,t,s),this.observe=t=>{const s=new h,i=s.next.bind(s),n=s.unsubscribe.bind(s);return this.on(t,i),s.unsubscribe=()=>{this.unsub(t,i),n()},s.asObservable()},this.onPrior=(t,s)=>this.add(this.UNKNOWN_ARR.unshift,t,s),this.off=this.unsub,this.fire=(t,...s)=>{var i;if(!this.muted){const n=(i=this.handlers[t])!==null&&i!==void 0?i:[];let e;for(e=0,n.length;e<n.length;e++)n[e].apply(null,s)}},this.fireAsync=(t,s)=>{if(!this.muted)return window.setTimeout(this.fire.bind(this,t,s),0)},this.setMuted=t=>{this.muted=t},this.clear=()=>{this.handlers={}}}fireDraw(t){this.fire(u,t)}}
+import { Subject } from 'rxjs';
+import { arrayRemove } from '../utils/array.utils';
+import { EVENT_DRAW } from './events';
+/**
+ * Event bus for chart.
+ * @doc-tags core-components
+ */
+export default class EventBus {
+    constructor() {
+        this.UNKNOWN_ARR = [];
+        /** Registered event handlers. */
+        this.handlers = {};
+        /** State which can enable / disable events processing. */
+        this.muted = false;
+        this.unsub = (type, fn) => {
+            const handler = this.handlers[type];
+            handler !== undefined && arrayRemove.call(handler, fn);
+        };
+        this.add = (method, type, fn) => {
+            if (type in this.handlers) {
+                method.call(this.handlers[type], fn);
+            }
+            else {
+                this.handlers[type] = [fn];
+            }
+            return this.unsub.bind(this, type, fn);
+        };
+        this.on = (type, fn) => this.add(this.UNKNOWN_ARR.push, type, fn);
+        this.observe = (type) => {
+            const result = new Subject();
+            const subjectFn = result.next.bind(result);
+            const originalUnsubscribe = result.unsubscribe.bind(result);
+            this.on(type, subjectFn);
+            result.unsubscribe = () => {
+                this.unsub(type, subjectFn);
+                originalUnsubscribe();
+            };
+            return result.asObservable();
+        };
+        this.onPrior = (type, fn) => this.add(this.UNKNOWN_ARR.unshift, type, fn);
+        this.off = this.unsub;
+        this.fire = (type, ...args) => {
+            var _a;
+            if (!this.muted) {
+                const arr = (_a = this.handlers[type]) !== null && _a !== void 0 ? _a : [];
+                let i;
+                for (i = 0, arr.length; i < arr.length; i++) {
+                    // call each handler with arguments
+                    const fn = arr[i];
+                    fn.apply(null, args);
+                }
+            }
+        };
+        this.fireAsync = (type, event) => {
+            if (!this.muted) {
+                return window.setTimeout(this.fire.bind(this, type, event), 0);
+            }
+        };
+        this.setMuted = (val) => {
+            this.muted = val;
+        };
+        this.clear = () => {
+            this.handlers = {};
+        };
+    }
+    /**
+     * Triggers the draw event for the specified canvas IDs.
+     * @param {Array<string>} canvasIds - An optional array of canvas IDs to trigger the draw event for.
+     */
+    fireDraw(canvasIds) {
+        this.fire(EVENT_DRAW, canvasIds);
+    }
+}

package/dist/chart/events/events.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/.
  */

package/dist/chart/events/events.js

@@ -1,6 +1,8 @@
 /*
- * 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/.
  */
-export const EVENT_RESIZED="resized_local",EVENT_DRAW="draw",EVENT_DRAW_LAST_CANDLE="draw_last_candle";
+export const EVENT_RESIZED = 'resized_local';
+export const EVENT_DRAW = 'draw';
+export const EVENT_DRAW_LAST_CANDLE = 'draw_last_candle';

package/dist/chart/inputhandlers/candle-tap.handler.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/.
  */

package/dist/chart/inputhandlers/candle-tap.handler.js

@@ -1,6 +1,51 @@
 /*
- * 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{ChartBaseElement as i}from"../model/chart-base-element";import{map as l,distinctUntilChanged as r}from"rxjs/operators";export class CandleTapHandler extends i{constructor(t,c,e,n){super(),e.observeTouchStart().pipe(l(o=>n.components.chart.highlightActiveCandle?o:void 0),r()).subscribe(o=>{o&&this.setCandleAsActive(o,t,c)})}setCandleAsActive(t,c,e){if(t.touches.length===1){const n=t.touches.item(0);if(n!==null){const o=this.getTouchXPosition(n,c),s=e.candleFromX(o);s&&e.mainCandleSeries.setActiveCandle(s)}}}getTouchXPosition(t,c){const e=c.getBoundingClientRect(),n=document.body.scrollLeft||document.documentElement.scrollLeft;return t.pageX-e.left-n}}
+import { ChartBaseElement } from '../model/chart-base-element';
+import { map, distinctUntilChanged } from 'rxjs/operators';
+export class CandleTapHandler extends ChartBaseElement {
+    constructor(mainCanvasParent, chartModel, canvasInputListeners, config) {
+        super();
+        canvasInputListeners
+            .observeTouchStart()
+            .pipe(map(e => (config.components.chart.highlightActiveCandle ? e : undefined)), distinctUntilChanged())
+            .subscribe(e => {
+            if (e) {
+                this.setCandleAsActive(e, mainCanvasParent, chartModel);
+            }
+        });
+    }
+    /**
+     * Sets the candle as active when a touch event occurs on the chart.
+     * @param {TouchEvent} e - The touch event that occurred on the chart.
+     * @param {Element} mainCanvasParent - The parent element of the main canvas.
+     * @param {ChartModel} chartModel - The chart model object.
+     */
+    setCandleAsActive(e, mainCanvasParent, chartModel) {
+        if (e.touches.length === 1) {
+            const touch = e.touches.item(0);
+            if (touch !== null) {
+                const xTouchPosition = this.getTouchXPosition(touch, mainCanvasParent);
+                const candle = chartModel.candleFromX(xTouchPosition);
+                if (candle) {
+                    chartModel.mainCandleSeries.setActiveCandle(candle);
+                }
+            }
+        }
+    }
+    // TO DO: check if this body calculations can potentially works wrong in widget
+    /**
+     * Calculates the X position of a touch event relative to the main canvas parent element.
+     * @param {Touch} touch - The touch event object.
+     * @param {Element} mainCanvasParent - The parent element of the main canvas.
+     * @returns {number} - The X position of the touch event relative to the main canvas parent element.
+     * @todo Check if this body calculations can potentially work incorrectly in the widget.
+     */
+    getTouchXPosition(touch, mainCanvasParent) {
+        const rect = mainCanvasParent.getBoundingClientRect();
+        const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
+        return touch.pageX - rect.left - scrollLeft;
+    }
+}

package/dist/chart/inputhandlers/chart-resize.handler.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/.
  */

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

@@ -1,6 +1,103 @@
 /*
- * 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{Subject as n}from"rxjs";import{EVENT_DRAW as h,EVENT_RESIZED as o}from"../events/events";import{uuid as a}from"../utils/uuid.utils";import{animationFrameThrottledPrior as m}from"../utils/perfomance/request-animation-frame-throttle.utils";export class ChartResizeHandler{constructor(e,i,s,t,r){this.frameElement=e,this.resizerElement=i,this.bus=s,this.canvasModels=t,this.config=r,this.previousBCR=void 0,this.animFrameId=`resize_${a()}`,this.canvasResized=new n,this.elementResizeDetector=new ResizeObserver(()=>this.handleResize())}subscribeResize(){this.elementResizeDetector.observe(this.resizerElement)}handleResize(){m(this.animFrameId,()=>this.fireUpdates())}fireUpdates(){const e=this.resizerElement.getBoundingClientRect(),i={x:e.x,y:e.y,width:e.width,height:e.height};this.config||(this.frameElement.style.height=this.resizerElement.clientHeight+"px"),(this.previousBCR===void 0||this.isBCRDimensionsDiffer(this.previousBCR,i))&&(this.previousBCR=i,this.canvasModels.forEach(s=>this.previousBCR&&s.updateDPR(this.previousBCR)),this.canvasResized.next(i),this.bus.fire(o,i),this.bus.fire(h))}isBCRDimensionsDiffer(e,i){return e.height!==i.height||e.width!==i.width}unsubscribeAnimationUpdate(){if(this.resizerElement)try{this.elementResizeDetector.unobserve(this.resizerElement)}catch(e){console.warn("ChartResizeHandler.ts, unsubscribeAnimationUpdate failed")}}wasResized(){return this.previousBCR!==void 0}}
+import { Subject } from 'rxjs';
+import { EVENT_DRAW, EVENT_RESIZED } from '../events/events';
+import { uuid } from '../utils/uuid.utils';
+import { animationFrameThrottledPrior } from '../utils/performance/request-animation-frame-throttle.utils';
+/**
+ * Tracks chart element size and emits events whenever it changes.
+ */
+export class ChartResizeHandler {
+    constructor(frameElement, resizerElement, bus, canvasModels, config) {
+        this.frameElement = frameElement;
+        this.resizerElement = resizerElement;
+        this.bus = bus;
+        this.canvasModels = canvasModels;
+        this.config = config;
+        this.previousBCR = undefined;
+        this.animFrameId = `resize_${uuid()}`;
+        this.canvasResized = new Subject();
+        this.elementResizeDetector = new ResizeObserver(() => this.handleResize());
+    }
+    /**
+     * Subscribe to resize events
+     * Use it to update chart animations.
+     * TODO activate / deactivate cycle
+     */
+    subscribeResize() {
+        this.elementResizeDetector.observe(this.resizerElement);
+    }
+    /**
+     * Handles the resize event by throttling the animation frame and firing updates.
+     * @private
+     * @function
+     * @returns {void}
+     */
+    handleResize() {
+        animationFrameThrottledPrior(this.animFrameId, () => this.fireUpdates());
+    }
+    /**
+     * Updates the canvas models and fires events if the bounding client rectangle of the resizer element has changed.
+     * @function
+     * @name fireUpdates
+     * @memberof ClassName
+     * @returns {void}
+     */
+    fireUpdates() {
+        const resizerElementBCR = this.resizerElement.getBoundingClientRect();
+        const newBCR = {
+            x: resizerElementBCR.x,
+            y: resizerElementBCR.y,
+            width: resizerElementBCR.width,
+            height: resizerElementBCR.height,
+        };
+        if (!this.config) {
+            this.frameElement.style.height = this.resizerElement.clientHeight + 'px';
+        }
+        if (this.previousBCR === undefined || this.isBCRDimensionsDiffer(this.previousBCR, newBCR)) {
+            this.previousBCR = newBCR;
+            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);
+        }
+    }
+    /**
+     * Checks if the dimensions of two PickedDOMRect objects are different.
+     * @param {PickedDOMRect} previousBCR - The previous bounding client rectangle.
+     * @param {PickedDOMRect} newBCR - The new bounding client rectangle.
+     * @returns {boolean} - Returns true if the dimensions are different, false otherwise.
+     */
+    isBCRDimensionsDiffer(previousBCR, newBCR) {
+        return previousBCR.height !== newBCR.height || previousBCR.width !== newBCR.width;
+    }
+    /**
+     * Unsubscribes from the element resize detector to stop updating the chart animation.
+     * @function
+     * @name unsubscribeAnimationUpdate
+     * @memberof ChartResizeHandler
+     * @instance
+     * @returns {void}
+     */
+    unsubscribeAnimationUpdate() {
+        if (this.resizerElement) {
+            try {
+                this.elementResizeDetector.unobserve(this.resizerElement);
+            }
+            catch (e) {
+                console.warn('ChartResizeHandler.ts, unsubscribeAnimationUpdate failed');
+            }
+        }
+    }
+    // TODO a lot of unnecessary DRAW events fired before canvas has actual size
+    /**
+     * Checks if the canvas has been resized by comparing the previous bounding client rect with the current one.
+     * @returns {boolean} - Returns true if the canvas has been resized, false otherwise.
+     */
+    wasResized() {
+        return this.previousBCR !== undefined;
+    }
+}

package/dist/chart/inputhandlers/cross-event-producer.component.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/.
  */

package/dist/chart/inputhandlers/cross-event-producer.component.js

@@ -1,6 +1,72 @@
 /*
- * 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{BehaviorSubject as a,combineLatest as b,filter as v}from"rxjs";import{ChartBaseElement as p}from"../model/chart-base-element";export class CrossEventProducerComponent extends p{constructor(e,s){super(),this.canvasInputListener=e,this.canvasBoundsContainer=s,this.panesSubscriptions={},this.crossSubject=new a(null)}doActivate(){super.doActivate()}fireCrossClose(){this.crossSubject.next(null)}unsubscribeMouseOver(e){var s;(s=this.panesSubscriptions[e])===null||s===void 0||s.unsubscribe()}subscribeMouseOver(e,s,o){const i=s.map(r=>this.canvasBoundsContainer.getBoundsHitTest(r,o)),t=(r,n)=>i.some(u=>u(r,n));return this.subscribeMouseOverHT(e,t)}subscribeMouseOverHT(e,s){const o=this.canvasInputListener.observeMouseMoveDocument(),i=this.canvasInputListener.observeMouseEnter(s);let t=!1;const r=b([o,i]).pipe(v(([,n])=>!t||t&&n)).subscribe(([n,u])=>{if(u){const c=[n.x,n.y,e];this.crossSubject.next(c),t=!1}else this.crossSubject.next(null),t=!0});return this.panesSubscriptions[e]=r,()=>r.unsubscribe()}}
+import { BehaviorSubject, combineLatest, filter } from 'rxjs';
+import { ChartBaseElement } from '../model/chart-base-element';
+export class CrossEventProducerComponent extends ChartBaseElement {
+    constructor(canvasInputListener, canvasBoundsContainer) {
+        super();
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.panesSubscriptions = {};
+        this.crossSubject = new BehaviorSubject(null);
+    }
+    doActivate() {
+        super.doActivate();
+    }
+    /**
+     * Emits a null value to the `cross` subject, effectively closing the current cross.
+     */
+    fireCrossClose() {
+        this.crossSubject.next(null);
+    }
+    /**
+     * Unsubscribes from the mouse over event for a specific pane.
+     * @param {string} uuid - The unique identifier of the pane.
+     * @returns {void}
+     */
+    unsubscribeMouseOver(uuid) {
+        var _a;
+        (_a = this.panesSubscriptions[uuid]) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    /**
+     * Subscribes to mouse over event on canvas elements.
+     * @param {string} uuid - Unique identifier for the subscription.
+     * @param {string[]} canvasElementNames - Array of canvas element names to subscribe to.
+     * @param {HitBoundsTestOptionsPartial} [options] - Optional hit bounds test options.
+     * @returns {Subscription} - Returns a subscription object.
+     */
+    subscribeMouseOver(uuid, canvasElementNames, options) {
+        const hts = canvasElementNames.map(canvasElementName => this.canvasBoundsContainer.getBoundsHitTest(canvasElementName, options));
+        const hitTest = (x, y) => hts.some(ht => ht(x, y));
+        return this.subscribeMouseOverHT(uuid, hitTest);
+    }
+    /**
+     * Subscribes to mouse over event on a hit test area identified by uuid.
+     * @param {string} uuid - The unique identifier of the hit test area.
+     * @param {HitBoundsTest} hitTest - The hit test area.
+     * @returns {Subscription} - The subscription object.
+     */
+    subscribeMouseOverHT(uuid, hitTest) {
+        const move$ = this.canvasInputListener.observeMouseMoveDocument();
+        const mouseEnter$ = this.canvasInputListener.observeMouseEnter(hitTest);
+        let closeHoverFired = false;
+        const subscription = combineLatest([move$, mouseEnter$])
+            .pipe(filter(([, enter]) => !closeHoverFired || (closeHoverFired && enter)))
+            .subscribe(([point, enter]) => {
+            if (enter) {
+                const cross = [point.x, point.y, uuid];
+                this.crossSubject.next(cross);
+                closeHoverFired = false;
+            }
+            else {
+                this.crossSubject.next(null);
+                closeHoverFired = true;
+            }
+        });
+        this.panesSubscriptions[uuid] = subscription;
+        return () => subscription.unsubscribe();
+    }
+}

package/dist/chart/inputhandlers/hover-producer.component.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/.
  */
@@ -45,7 +45,7 @@ export interface HoverProducerParts {
  */
 export declare class HoverProducerComponent extends ChartBaseElement {
     private crossEventProducer;
-    private scaleModel;
+    private scale;
     private config;
     private chartModel;
     private canvasInputListener;
@@ -58,7 +58,7 @@ export declare class HoverProducerComponent extends ChartBaseElement {
     private longTouchActivated;
     private hoverProducerParts;
     xFormatter: DateTimeFormatter;
-    constructor(crossEventProducer: CrossEventProducerComponent, scaleModel: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number | Date) => string);
+    constructor(crossEventProducer: CrossEventProducerComponent, scale: ScaleModel, config: FullChartConfig, chartModel: ChartModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, paneManager: PaneManager, timeZoneModel: TimeZoneModel, formatterFactory: (format: string) => (timestamp: number | Date) => string);
     /**
      * This method is responsible for activating the chart hover functionality. It subscribes to several observables to
      * update the hover when the chart is updated or when the user interacts with it. It also handles special behavior