@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,101 @@
  * 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.js

@@ -3,4 +3,70 @@
  * 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

@@ -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

package/dist/chart/inputhandlers/hover-producer.component.js

@@ -3,4 +3,231 @@
  * 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 l,merge as u}from"rxjs";import{CHART_UUID as v,CanvasElement as m}from"../canvas/canvas-bounds-container";import{CandleHoverProducerPart as b}from"../model/candle-hover";import{ChartBaseElement as p}from"../model/chart-base-element";import{CompareSeriesHoverProducerPart as C}from"../model/compare-series-hover";import{recalculateXFormatter as P}from"../model/date-time.formatter";import{isMobile as g}from"../utils/device/browser.utils";export class HoverProducerComponent extends p{get hover(){return this.hoverSubject.getValue()}constructor(t,e,r,s,o,i,c,n,a){super(),this.crossEventProducer=t,this.scaleModel=e,this.config=r,this.chartModel=s,this.canvasInputListener=o,this.canvasBoundsContainer=i,this.paneManager=c,this.timeZoneModel=n,this.formatterFactory=a,this.hoverSubject=new l(null),this.longTouchActivated=!1,this.xFormatter=()=>"";const h=new b(this.chartModel),d=new C(this.chartModel);this.hoverProducerParts={candleHover:h,compareSeriesHover:d}}doActivate(){super.doActivate(),this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(()=>{const e=this.chartModel.getLastVisualCandle();e&&this.createAndFireHoverFromCandle(e)})),this.addRxSubscription(this.chartModel.candlesUpdatedSubject.subscribe(()=>{const e=this.chartModel.getLastVisualCandle();this.hover!==null&&e!==void 0&&e.candle.timestamp===this.hover.timestamp&&this.updateHover(e)})),this.addRxSubscription(this.crossEventProducer.crossSubject.subscribe(e=>{e===null?this.hoverSubject.next(null):this.createAndFireHover(e)})),this.addRxSubscription(this.scaleModel.xChanged.subscribe(()=>this.fireLastCross())),this.addRxSubscription(this.canvasInputListener.observeTouchStart().subscribe(e=>{const r=e.touches[0].clientX,s=e.touches[0].clientY-this.canvasBoundsContainer.canvasOnPageLocation.y;this.chartModel.candleFromX(r,!0)&&this.createAndFireHover([r,s,""])}));const t=this.canvasBoundsContainer.getBoundsHitTest(m.ALL_PANES);this.addRxSubscription(this.canvasInputListener.observeLongTouch(t).subscribe(e=>{this.paneManager.chartPanComponent.deactivatePanHandlers(),this.longTouchActivated=!0;const r=e.touches[0].clientX,s=e.touches[0].clientY-this.canvasBoundsContainer.canvasOnPageLocation.y;this.createAndFireHover([r,s,""])})),this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(()=>{this.paneManager.chartPanComponent.activateChartPanHandlers(),this.longTouchActivated&&(this.longTouchActivated=!1,this.crossEventProducer.fireCrossClose())})),this.addRxSubscription(u(this.chartModel.candlesSetSubject,this.timeZoneModel.observeTimeZoneChanged()).subscribe(()=>this.recalculateCrossToolXFormatter()))}recalculateCrossToolXFormatter(){const t=this.config.components.crossTool.xAxisLabelFormat;this.xFormatter=P(t,this.chartModel.getPeriod(),this.formatterFactory)}createHoverFromCandle(t){const e=t.xCenter(this.chartModel.scaleModel),r=this.chartModel.scaleModel.toY(t.close);return this.createHover(e,r,v)}createHover(t,e,r){if(this.chartModel.getCandles().length===0)return;const o=this.chartModel.candleFromX(t,!0).timestamp,i={x:t,y:e,timestamp:o,timeFormatted:this.xFormatter(o),paneId:r},c=Object.entries(this.hoverProducerParts).reduce((n,a)=>Object.assign(Object.assign({},n),{[a[0]]:a[1].getData(i)}),{});return Object.assign(Object.assign({},i),c)}createAndFireHoverFromCandle(t){const e=this.createHoverFromCandle(t);this.fireHover(e)}updateHover(t){const e=this.createHoverFromCandle(t);if(this.hover&&e){const r=Object.assign(Object.assign({},e),{x:this.hover.x,y:this.hover.y});this.fireHover(r)}}createAndFireHover([t,e,r]){const s=this.createHover(t,e,r);this.fireHover(s)}fireHover(t){var e;if(t){if(g()&&this.config.components.crossTool.type!=="none"){const r=(e=t.candleHover)===null||e===void 0?void 0:e.visualCandle.candle;r&&this.chartModel.mainCandleSeries.setActiveCandle(r)}this.hoverSubject.next(t)}else this.crossEventProducer.fireCrossClose()}fireLastCross(){const t=this.crossEventProducer.crossSubject.getValue();t&&this.createAndFireHover(t)}registerHoverProducerPart(t,e){this.hoverProducerParts=Object.assign(Object.assign({},this.hoverProducerParts),{[t]:e})}unregisterHoverProducerPart(t){delete this.hoverProducerParts[t]}}
+import { BehaviorSubject, merge } from 'rxjs';
+import { CHART_UUID, CanvasElement } from '../canvas/canvas-bounds-container';
+import { CandleHoverProducerPart } from '../model/candle-hover';
+import { ChartBaseElement } from '../model/chart-base-element';
+import { CompareSeriesHoverProducerPart } from '../model/compare-series-hover';
+import { recalculateXFormatter } from '../model/date-time.formatter';
+import { isMobile } from '../utils/device/browser.utils';
+/**
+ * Produces the Hover event.
+ * Hover is used for displaying values in legend and NOT related to displaying cross tool.
+ */
+export class HoverProducerComponent extends ChartBaseElement {
+    get hover() {
+        return this.hoverSubject.getValue();
+    }
+    constructor(crossEventProducer, scale, config, chartModel, canvasInputListener, canvasBoundsContainer, paneManager, timeZoneModel, formatterFactory) {
+        super();
+        this.crossEventProducer = crossEventProducer;
+        this.scale = scale;
+        this.config = config;
+        this.chartModel = chartModel;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.paneManager = paneManager;
+        this.timeZoneModel = timeZoneModel;
+        this.formatterFactory = formatterFactory;
+        this.hoverSubject = new BehaviorSubject(null);
+        this.longTouchActivated = false;
+        this.xFormatter = () => '';
+        const candleHoverProducerPart = new CandleHoverProducerPart(this.chartModel);
+        const compareSeriesHoverProducerPart = new CompareSeriesHoverProducerPart(this.chartModel);
+        this.hoverProducerParts = {
+            candleHover: candleHoverProducerPart,
+            compareSeriesHover: compareSeriesHoverProducerPart,
+        };
+    }
+    /**
+     * 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
+     * for mobile devices, such as disabling panning and showing the cross tool on long touch.
+     *
+     * @protected
+     * @memberof ChartHover
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(() => {
+            // required for initial legend initialization, do not show cross tool
+            const lastCandle = this.chartModel.getLastVisualCandle();
+            lastCandle && this.createAndFireHoverFromCandle(lastCandle);
+        }));
+        this.addRxSubscription(this.chartModel.candlesUpdatedSubject.subscribe(() => {
+            // update hover if it was the last candle
+            const lastCandle = this.chartModel.getLastVisualCandle();
+            if (this.hover !== null && lastCandle !== undefined) {
+                if (lastCandle.candle.timestamp === this.hover.timestamp) {
+                    this.updateHover(lastCandle);
+                }
+            }
+        }));
+        this.addRxSubscription(this.crossEventProducer.crossSubject.subscribe((cross) => {
+            if (cross === null) {
+                this.hoverSubject.next(null);
+            }
+            else {
+                this.createAndFireHover(cross);
+            }
+        }));
+        this.addRxSubscription(this.scale.xChanged.subscribe(() => this.fireLastCross()));
+        this.addRxSubscription(this.canvasInputListener.observeTouchStart().subscribe(event => {
+            const x = event.touches[0].clientX;
+            const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
+            const candle = this.chartModel.candleFromX(x, true);
+            if (candle) {
+                this.createAndFireHover([x, y, '']);
+            }
+        }));
+        // special handling for mobile
+        // on long touch - disable panning and show cross tool
+        const hitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
+        this.addRxSubscription(this.canvasInputListener.observeLongTouch(hitTest).subscribe(event => {
+            this.paneManager.chartPanComponent.deactivatePanHandlers();
+            this.longTouchActivated = true;
+            const x = event.touches[0].clientX;
+            const y = event.touches[0].clientY - this.canvasBoundsContainer.canvasOnPageLocation.y;
+            this.createAndFireHover([x, y, '']);
+        }));
+        this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(() => {
+            this.paneManager.chartPanComponent.activateChartPanHandlers();
+            if (this.longTouchActivated) {
+                this.longTouchActivated = false;
+                this.crossEventProducer.fireCrossClose();
+            }
+        }));
+        this.addRxSubscription(merge(this.chartModel.candlesSetSubject, this.timeZoneModel.observeTimeZoneChanged()).subscribe(() => this.recalculateCrossToolXFormatter()));
+    }
+    /**
+     * Recalculates the cross tool X formatter.
+     * @function
+     * @private
+     * @returns {void}
+     */
+    recalculateCrossToolXFormatter() {
+        const xAxisLabelFormat = this.config.components.crossTool.xAxisLabelFormat;
+        this.xFormatter = recalculateXFormatter(xAxisLabelFormat, this.chartModel.getPeriod(), this.formatterFactory);
+    }
+    /**
+     * Creates a hover object from a VisualCandle object.
+     * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
+     * @returns {Hover | undefined} - The created hover object or undefined if the input is invalid.
+     */
+    createHoverFromCandle(candle) {
+        const x = candle.xCenter(this.scale);
+        const y = this.scale.toY(candle.close);
+        return this.createHover(x, y, CHART_UUID);
+    }
+    /**
+     * Creates a hover object based on the provided x and y coordinates.
+     * @param {number} x - The x coordinate of the hover.
+     * @param {number} y - The y coordinate of the hover.
+     * @returns {Hover | undefined} - The hover object or undefined if there are no candles in the chart model.
+     * @todo Check if uuid is still useful here.
+     */
+    createHover(x, y, uuid) {
+        if (this.chartModel.getCandles().length === 0) {
+            return;
+        }
+        const candle = this.chartModel.candleFromX(x, true);
+        const timestamp = candle.timestamp;
+        const hover = {
+            x,
+            y,
+            timestamp,
+            timeFormatted: this.xFormatter(timestamp),
+            paneId: uuid,
+        };
+        // eslint-disable-next-line no-restricted-syntax
+        const combinedHoverParts = Object.entries(this.hoverProducerParts).reduce((res, part) => (Object.assign(Object.assign({}, res), { [part[0]]: part[1].getData(hover) })), 
+        // eslint-disable-next-line no-restricted-syntax
+        {});
+        return Object.assign(Object.assign({}, hover), combinedHoverParts);
+    }
+    /**
+     * Creates a hover from a VisualCandle object and fires it.
+     * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
+     */
+    createAndFireHoverFromCandle(candle) {
+        const hover = this.createHoverFromCandle(candle);
+        this.fireHover(hover);
+    }
+    /**
+     * Update current hover using a VisualCandle and fires it.
+     * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
+     */
+    updateHover(candle) {
+        const updatedHover = this.createHoverFromCandle(candle);
+        if (this.hover && updatedHover) {
+            const hover = Object.assign(Object.assign({}, updatedHover), { x: this.hover.x, y: this.hover.y });
+            this.fireHover(hover);
+        }
+    }
+    /**
+     * Creates a hover element at the specified coordinates and fires it with the option to show the cross tool
+     * @param {CrossEvent} [x,y] - The coordinates where the hover element will be created
+     * @param {boolean} [showCrossTool=true] - Whether to show the cross tool or not
+     * @returns {void}
+     */
+    createAndFireHover([x, y, uuid]) {
+        const hover = this.createHover(x, y, uuid);
+        this.fireHover(hover);
+    }
+    /**
+     * Private method that handles the hover event. If a hover event is provided, it sets the last hover to the provided hover.
+     * If the device is mobile and the cross tool type is not 'none', it sets the active candle to the hovered candle only when a long tap is detected.
+     * The showCrossToolOverride is set to true only when a long tap is detected on mobile devices, otherwise it is set to the value of showCrossTool parameter.
+     * Finally, it fires the EVENT_HOVER event with the provided hover and showCrossToolOverride.
+     * If no hover event is provided, it fires the EVENT_CLOSE_HOVER event.
+     *
+     * @param {Hover} [hover] - The hover event to handle.
+     * @param {boolean} [showCrossTool=true] - A boolean value indicating whether to show the cross tool or not.
+     * @returns {void}
+     */
+    fireHover(hover) {
+        var _a;
+        if (hover) {
+            // special handling for mobile
+            // set active candle + show cross tool only when long tap
+            if (isMobile() && this.config.components.crossTool.type !== 'none') {
+                const candle = (_a = hover.candleHover) === null || _a === void 0 ? void 0 : _a.visualCandle.candle;
+                candle && this.chartModel.mainCandleSeries.setActiveCandle(candle);
+            }
+            // const showCrossToolOverride = isMobile() ? this.longTouchActivated : showCrossTool;
+            this.hoverSubject.next(hover);
+        }
+        else {
+            this.crossEventProducer.fireCrossClose();
+        }
+    }
+    /**
+     * Fires the last hover update if there is a last cross.
+     */
+    fireLastCross() {
+        // fire last hover update
+        const lastCross = this.crossEventProducer.crossSubject.getValue();
+        if (lastCross) {
+            this.createAndFireHover(lastCross);
+        }
+    }
+    /**
+     * Registers a hover producer part with the given id.
+     *
+     * @param {string} id - The id of the hover producer part.
+     * @param {HoverProducerPart} hoverProducerPart - The hover producer part to register.
+     * @returns {void}
+     */
+    registerHoverProducerPart(id, hoverProducerPart) {
+        this.hoverProducerParts = Object.assign(Object.assign({}, this.hoverProducerParts), { [id]: hoverProducerPart });
+    }
+    /**
+     * Removes a hover producer part from the hoverProducerParts object.
+     * @param {string} id - The id of the hover producer part to be removed.
+     * @returns {void}
+     */
+    unregisterHoverProducerPart(id) {
+        delete this.hoverProducerParts[id];
+    }
+}

package/dist/chart/inputhandlers/main-canvas-touch.handler.d.ts

@@ -10,11 +10,11 @@ import { ScaleModel } from '../model/scale.model';
  * Handles chart touch events.
  */
 export declare class MainCanvasTouchHandler extends ChartBaseElement {
-    private scaleModel;
+    private scale;
     private canvasInputListeners;
     private mainCanvasParent;
     private touchedCandleIndexes;
-    constructor(scaleModel: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
+    constructor(scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
     /**
      * Activates canvas input listeners for touch start and touch move events.
      * @protected

package/dist/chart/inputhandlers/main-canvas-touch.handler.js

@@ -3,4 +3,83 @@
  * 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 c}from"../model/chart-base-element";export class MainCanvasTouchHandler extends c{constructor(t,e,s){super(),this.scaleModel=t,this.canvasInputListeners=e,this.mainCanvasParent=s,this.touchedCandleIndexes=[0,0]}doActivate(){this.addRxSubscription(this.canvasInputListeners.observeTouchStart().subscribe(t=>this.handleTouchStartEvent(t))),this.addRxSubscription(this.canvasInputListeners.observeTouchMove().subscribe(t=>this.handleTouchMoveEvent(t)))}handleTouchStartEvent(t){t.touches.length===2&&(this.touchedCandleIndexes=this.getXPositions(t).map(e=>this.scaleModel.fromX(e)))}handleTouchMoveEvent(t){t.touches.length===2&&this.pinchHandler(this.touchedCandleIndexes,this.getXPositions(t))}getXPositions(t){const e=this.mainCanvasParent.getBoundingClientRect(),s=[0,0],a=document.body.scrollLeft||document.documentElement.scrollLeft;for(let n=0,h=t.touches.length;n<h;n++){const o=t.touches[n];s[n]=o.pageX-e.left-a}return s}pinchHandler(t,e){const s=(e[0]*t[1]-e[1]*t[0])/(e[0]-e[1]),a=s+(t[0]-t[1])/(e[0]-e[1])*this.scaleModel.getBounds().width;this.scaleModel.setXScale(s,a)}}
+import { ChartBaseElement } from '../model/chart-base-element';
+/**
+ * Handles chart touch events.
+ */
+export class MainCanvasTouchHandler extends ChartBaseElement {
+    constructor(scale, canvasInputListeners, mainCanvasParent) {
+        super();
+        this.scale = scale;
+        this.canvasInputListeners = canvasInputListeners;
+        this.mainCanvasParent = mainCanvasParent;
+        // 2 candles indexes touched by 2 fingers when pinching
+        this.touchedCandleIndexes = [0, 0];
+    }
+    /**
+     * Activates canvas input listeners for touch start and touch move events.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        this.addRxSubscription(this.canvasInputListeners.observeTouchStart().subscribe(e => this.handleTouchStartEvent(e)));
+        this.addRxSubscription(this.canvasInputListeners.observeTouchMove().subscribe(e => this.handleTouchMoveEvent(e)));
+    }
+    /**
+     * Handles the touch start event.
+     * @param {TouchEvent} e - The touch event.
+     * @returns {void}
+     */
+    handleTouchStartEvent(e) {
+        if (e.touches.length === 2) {
+            // @ts-ignore
+            // TODO rework this
+            this.touchedCandleIndexes = this.getXPositions(e).map(x => this.scale.fromX(x));
+        }
+    }
+    /**
+     * Handles touch move event
+     * @param {TouchEvent} e - The touch event object
+     * @returns {void}
+     
+    private handleTouchMoveEvent(e: TouchEvent): void {
+        if (e.touches.length === 2) {
+            this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
+        }
+    }*/
+    handleTouchMoveEvent(e) {
+        if (e.touches.length === 2) {
+            this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
+        }
+    }
+    /**
+     * Gets candle positions touched by user in pixels.
+     * @param e - touch event with "touches" array
+     * @return Array<number> - X coordinates of touches on the canvas
+     */
+    getXPositions(e) {
+        const rect = this.mainCanvasParent.getBoundingClientRect();
+        const result = [0, 0];
+        // TO DO: check if this body calculations can potentially works wrong in widget
+        const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
+        for (let i = 0, l = e.touches.length; i < l; i++) {
+            const touch = e.touches[i];
+            result[i] = touch.pageX - rect.left - scrollLeft;
+        }
+        return result;
+    }
+    /**
+     * Handles the pinch gesture on the chart.
+     * @param {Array<number>} candleIndexes - An array of two numbers representing the indexes of the first and last visible candles on the chart.
+     * @param {number[]} touchPositions - An array of two numbers representing the touch positions on the screen.
+     * @returns {void}
+     */
+    pinchHandler(candleIndexes, touchPositions) {
+        const first = (touchPositions[0] * candleIndexes[1] - touchPositions[1] * candleIndexes[0]) /
+            (touchPositions[0] - touchPositions[1]);
+        const last = first +
+            ((candleIndexes[0] - candleIndexes[1]) / (touchPositions[0] - touchPositions[1])) *
+                this.scale.getBounds().width;
+        this.scale.setXScale(first, last);
+    }
+}