@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,233 @@
 /*
- * 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 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

@@ -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/.
  */
@@ -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

@@ -1,6 +1,85 @@
 /*
- * 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 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);
+    }
+}

package/dist/chart/inputlisteners/canvas-input-listener.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/.
  */