@devexperts/dxcharts-lite 1.0.1

package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts

@@ -0,0 +1,311 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 EventBus from '../events/event-bus';
+import { Observable, Subject } from 'rxjs';
+import { ChartBaseElement } from '../model/chart-base-element';
+import { HitBoundsTest } from '../canvas/canvas-bounds-container';
+import { Bounds } from '../model/bounds.model';
+type CustomMouseEvent = MouseEvent | TouchEvent;
+/**
+ * Gathers user input on canvas element:
+ * Chart update order should be following:
+ * 1. update currentPoints
+ * 2. fire drag, so chart scale is updated if dragged
+ * 3. fire cross - it should have updated chart coordinates
+ * - mouse drag X / Y
+ * - zooming (wheel event)
+ * - touch start and move
+ */
+export declare class CanvasInputListenerComponent extends ChartBaseElement {
+    private eventBus;
+    private element;
+    static DRAG_START_EVENTS: readonly ["mousedown", "touchstart"];
+    static DRAG_EVENTS: readonly ["mousemove", "touchmove"];
+    static DRAG_END_EVENTS: string[];
+    private xDragStartSubject;
+    private xDragSubject;
+    private xDragTickSubject;
+    private xDragEndSubject;
+    private yDragStartSubject;
+    private yDragSubject;
+    private yDragTickSubject;
+    private yDragEndSubject;
+    private mouseMoveSubject;
+    private mouseMoveDocumentSubject;
+    private clickSubject;
+    private clickDocumentSubject;
+    private dbClickSubject;
+    private mouseDownSubject;
+    private mouseUpSubject;
+    private mouseUpDocumentSubject;
+    private wheelSubject;
+    private touchStartSubject;
+    private touchMoveSubject;
+    private touchEndSubject;
+    private touchCancelSubject;
+    private contextMenuSubject;
+    private longTouchSubject;
+    private pinchSubject;
+    private scrollGestureSubject;
+    mouseLeavesCanvasSubject: Subject<boolean>;
+    dragStartPoint: Point;
+    prevDragPoint: Point;
+    currentPoint: Point;
+    currentPointDocument: Point;
+    dragging: boolean;
+    dragStartEvent?: CustomMouseEvent;
+    canvasBounds: Bounds;
+    constructor(eventBus: EventBus, element: HTMLElement);
+    private documentDragListeners;
+    private dragProcessListener;
+    private dragStartListener;
+    /**
+     * This methods allows change scale, only if dragging using primary mouse button or touch.
+     * @param e
+     */
+    private isDraggable;
+    /**
+     * This methods allows you to start dragging programmatically
+     * @param e
+     */
+    startDragging(e: CustomMouseEvent): void;
+    /**
+     * This methods allows you to move mouse pointer programmatically
+     * @param e
+     */
+    movePointer(e: CustomMouseEvent): void;
+    /**
+     * This methods allows you to stop dragging programmatically
+     */
+    stopDragging(): void;
+    private dragListener;
+    private updateElementOffsetListener;
+    private dragEndListener;
+    private clickHandler;
+    /**
+     * Prevents text selection inside chart-core canvas. TODO Do we need it?
+     */
+    private fixTextSelection;
+    doActivate(): void;
+    /**
+     * Returns the current mouse point.
+     *
+     * @returns {Point} The current mouse point.
+     */
+    getCurrentMousePoint(): Point;
+    /**
+     * Private method that tracks the mouse position by adding event listeners for drag events on the document.
+     * The event listeners are added on the capture phase to ensure that every other listener gets an actual state for current points.
+     * The method also adds a subscription to remove the event listeners when they are no longer needed.
+     */
+    private trackMousePosition;
+    private updateCurrentPoints;
+    /**
+     * Updates the current point of the document based on the provided event.
+     * @param {CustomMouseEvent} e - The event that triggered the update.
+     * @returns {void}
+     */
+    private updateCurrentDocumentPoint;
+    /**
+     * Updates the current mouse point based on the provided CustomMouseEvent.
+     * @param {CustomMouseEvent} e - The CustomMouseEvent object containing the mouse/touch coordinates.
+     * @returns {void}
+     * @private
+     */
+    private updateCurrentMousePoint;
+    /**
+     * Creates a new object with the same properties as the provided Point object.
+     * @param {Point} point - The Point object to be copied.
+     * @returns {Object} - A new object with the same properties as the provided Point object.
+     * @private
+     * @static
+     */
+    private static copyPoint;
+    /**
+     * This method allows to observe mouse move events only in specific areas.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes x and y coordinates as arguments and returns a boolean value indicating whether the event should be observed or not.
+     * @returns {Observable<Point>} - An observable that emits a Point object whenever a mouse move event occurs within the specified area.
+     */
+    observeMouseMove(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits the mouse move events only if the user is not dragging.
+     * @returns {Observable<Point>} An Observable that emits the mouse move events.
+     */
+    observeMouseMoveNoDrag(): Observable<Point>;
+    /**
+     * Observes any element hover in all document not only <canvas>
+     * @param hitBoundsTest
+     * @return point position in chart
+     */
+    observeMouseMoveDocument(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Observes any element hover in all document not only <canvas>
+     * @param hitBoundsTest
+     * @return absolute point position in document
+     */
+    observeMouseMoveDocumentAnyElement(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits an Event object whenever a click event occurs on the document.
+     * The Observable is created from a Subject that emits the click event.
+     * @returns {Observable<Event>} An Observable that emits an Event object whenever a click event occurs on the document.
+     */
+    observeClickOnDocument(): Observable<Event>;
+    /**
+     * Returns observable which contains point position relative to chart canvas. (not document point!)
+     * @param hitBoundsTest {HitBoundsTest}
+     */
+    observeXDragStart(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits the xDragSubject value if the hitBoundsTest function returns true for the currentPoint.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes the currentPoint's x and y coordinates as arguments and returns a boolean value.
+     * @returns {Observable<number>} - An Observable that emits the xDragSubject value if the hitBoundsTest function returns true for the currentPoint.
+     */
+    observeXDrag(hitBoundsTest?: HitBoundsTest): Observable<number>;
+    /**
+     * Returns an Observable that emits when the xDragEndSubject emits and the hitBoundsTest function returns true for the currentPoint.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that takes the currentPoint's x and y coordinates as arguments and returns a boolean indicating whether the point is within the desired bounds.
+     * @returns {Observable<void>} - An Observable that emits when the xDragEndSubject emits and the hitBoundsTest function returns true for the currentPoint.
+     */
+    observeXDragEnd(hitBoundsTest?: HitBoundsTest): Observable<void>;
+    /**
+     * Returns an Observable that emits a number every time a drag tick event occurs on the X axis.
+     * The number emitted represents the current position of the drag on the X axis.
+     * The Observable is created from a Subject that emits the drag tick events.
+     * @returns {Observable<number>} An Observable that emits a number every time a drag tick event occurs on the X axis.
+     */
+    observeXDragTick(): Observable<number>;
+    /**
+     * Returns observable which contains point position relative to chart canvas. (not document point!)
+     * @param hitBoundsTest {HitBoundsTest}
+     */
+    observeYDragStart(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an observable that emits the y-drag subject and filters it based on the hitBoundsTest function.
+     * @param {HitBoundsTest} hitBoundsTest - A function that returns a boolean indicating whether the current point is within the bounds.
+     * @returns {Observable<number>} - An observable that emits the y-drag subject.
+     */
+    observeYDrag(hitBoundsTest?: HitBoundsTest): Observable<number>;
+    /**
+     * Returns an Observable that emits when the yDragEndSubject emits and the hitBoundsTest function returns true for the currentPoint.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes in the x and y coordinates of the currentPoint and returns a boolean indicating whether the point is within the bounds.
+     * @returns {Observable<void>} - An Observable that emits when the yDragEndSubject emits and the hitBoundsTest function returns true for the currentPoint.
+     */
+    observeYDragEnd(hitBoundsTest?: HitBoundsTest): Observable<void>;
+    /**
+     * Returns an Observable that emits a number every time the yDragTickSubject emits a value.
+     * The emitted value is the value emitted by the yDragTickSubject.
+     * @returns {Observable<number>} An Observable that emits a number every time the yDragTickSubject emits a value.
+     */
+    observeYDragTick(): Observable<number>;
+    /**
+     * Returns an Observable that emits a boolean value when the mouse enters the canvas.
+     * @param {HitBoundsTest} hitBoundsTest - A function that tests whether the mouse pointer is within the bounds of the canvas.
+     * @param {boolean} skipWhenDragging - A flag that determines whether to skip the mouse enter event when the user is dragging.
+     * @returns {Observable<boolean>} - An Observable that emits a boolean value when the mouse enters or leaves the canvas.
+     */
+    observeMouseEnter(hitBoundsTest?: HitBoundsTest, skipWhenDragging?: boolean): Observable<boolean>;
+    /**
+     * Returns an observable that emits a value when the mouse leaves the canvas.
+     * @returns {Observable} An observable that emits a value when the mouse leaves the canvas.
+     */
+    observeMouseLeavesCanvas(): Observable<boolean>;
+    /**
+     * Returns an Observable that emits a Point object when the element is clicked within the bounds specified by the hitBoundsTest function.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes the x and y coordinates of the click event and returns a boolean indicating whether the click is within the desired bounds.
+     * @returns {Observable<Point>} - An Observable that emits a Point object when the element is clicked within the specified bounds.
+     */
+    observeClick(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits a Point object when a double click event occurs within the bounds of the current point.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the double click event occurred within the bounds of the current point.
+     * @returns {Observable<Point>} An Observable that emits a Point object when a double click event occurs within the bounds of the current point.
+     */
+    observeDbClick(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits WheelEvent objects when the wheelSubject emits a new value.
+     * The emitted events are filtered by the hitBoundsTest function, which is passed as an optional parameter.
+     * If the hitBoundsTest function is not provided, it defaults to a function that always returns true.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that takes the currentPoint's x and y coordinates as arguments and returns a boolean value.
+     * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent objects.
+     */
+    observeWheel(hitBoundsTest?: HitBoundsTest): Observable<WheelEvent>;
+    /**
+     * Returns an Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes the current point's x and y coordinates as arguments and returns a boolean indicating whether the point is within the desired bounds.
+     * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
+     */
+    observePinch(hitBoundsTest?: HitBoundsTest): Observable<WheelEvent>;
+    /**
+     * Returns an Observable that emits a WheelEvent whenever a scroll gesture is detected.
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<WheelEvent>} An Observable that emits a WheelEvent whenever a scroll gesture is detected.
+     */
+    observeScrollGesture(): Observable<WheelEvent>;
+    /**
+     * Returns an Observable that emits TouchEvent when a touchstart event occurs within the bounds of the current point.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the touch event occurred within the bounds of the current point.
+     * @returns {Observable<TouchEvent>} - An Observable that emits TouchEvent when a touchstart event occurs within the bounds of the current point.
+     */
+    observeTouchStart(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits TouchEvent objects when the user moves their finger on the screen.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes the x and y coordinates of the current touch point and returns a boolean indicating whether the touch is within the desired bounds.
+     * @returns {Observable<TouchEvent>} - An Observable that emits TouchEvent objects when the user moves their finger on the screen within the specified bounds.
+     */
+    observeTouchMove(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a TouchEvent when the touch end event occurs on the document.
+     * The Observable is created from a Subject that is subscribed to the touchEndSubject.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent when the touch end event occurs on the document.
+     */
+    observeTouchEndDocument(): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a TouchEvent when the touchcancel event is triggered on the document.
+     * @return {Observable<TouchEvent>} An Observable that emits a TouchEvent when the touchcancel event is triggered on the document.
+     */
+    observeTouchCancelDocument(): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits the Point object when the mouse button is pressed down within the bounds of the current point.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests whether the mouse click is within the bounds of the current point.
+     * @returns {Observable<Point>} - An Observable that emits the Point object when the mouse button is pressed down within the bounds of the current point.
+     */
+    observeMouseDown(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits the Point where the mouse button is released,
+     * filtered by the hitBoundsTest function that determines if the currentPoint is within the bounds.
+     * @param {HitBoundsTest} hitBoundsTest - A function that takes the x and y coordinates of the currentPoint and returns a boolean indicating if it is within the bounds.
+     * @returns {Observable<Point>} - An Observable that emits the Point where the mouse button is released, filtered by the hitBoundsTest function.
+     */
+    observeMouseUp(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits the Point where the mouse button is released on the document.
+     * @param {HitBoundsTest} hitBoundsTest - A function that returns a boolean indicating whether the mouseup event occurred within the bounds of the element.
+     * @returns {Observable<Point>} - An Observable that emits the Point where the mouse button is released on the document.
+     */
+    observeMouseUpDocument(hitBoundsTest?: HitBoundsTest): Observable<Point>;
+    /**
+     * Returns an Observable that emits a MouseEvent when a context menu event is triggered and the mouse pointer is within the bounds of the element.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the mouse pointer is within the bounds of the element.
+     * @returns {Observable<MouseEvent>} - An Observable that emits a MouseEvent when a context menu event is triggered and the mouse pointer is within the bounds of the element.
+     */
+    observeContextMenu(hitBoundsTest?: HitBoundsTest): Observable<MouseEvent>;
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch is detected on the current element.
+     * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that returns a boolean indicating whether the touch event occurred within the bounds of the current element.
+     * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
+     */
+    observeLongTouch(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns the current point of the object.
+     * @returns {Point} The current point of the object.
+     */
+    getCurrentPoint(): Point;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export {};

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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{subscribeListener as n}from"../utils/dom.utils";import{merge as x,Subject as i}from"rxjs";import{ChartBaseElement as j}from"../model/chart-base-element";import{distinctUntilChanged as E,filter as s,map as v,tap as D}from"rxjs/operators";import{EVENT_RESIZED as f}from"../events/events";import{deviceDetector as y}from"../utils/device/device-detector.utils";import{touchpadDetector as L}from"../utils/device/touchpad.utils";var p;(function(a){a[a.left=0]="left",a[a.middle=1]="middle",a[a.right=2]="right"})(p||(p={}));class o extends j{constructor(t,r){super(),this.eventBus=t,this.element=r,this.xDragStartSubject=new i,this.xDragSubject=new i,this.xDragTickSubject=new i,this.xDragEndSubject=new i,this.yDragStartSubject=new i,this.yDragSubject=new i,this.yDragTickSubject=new i,this.yDragEndSubject=new i,this.mouseMoveSubject=new i,this.mouseMoveDocumentSubject=new i,this.clickSubject=new i,this.clickDocumentSubject=new i,this.dbClickSubject=new i,this.mouseDownSubject=new i,this.mouseUpSubject=new i,this.mouseUpDocumentSubject=new i,this.wheelSubject=new i,this.touchStartSubject=new i,this.touchMoveSubject=new i,this.touchEndSubject=new i,this.touchCancelSubject=new i,this.contextMenuSubject=new i,this.longTouchSubject=new i,this.pinchSubject=new i,this.scrollGestureSubject=new i,this.mouseLeavesCanvasSubject=new i,this.dragStartPoint={x:0,y:0},this.prevDragPoint={x:0,y:0},this.currentPoint={x:0,y:0},this.currentPointDocument={x:0,y:0},this.dragging=!1,this.canvasBounds={x:0,y:0,pageX:0,pageY:0,width:0,height:0},this.documentDragListeners=[],this.dragProcessListener=()=>{this.xDragSubject.next(this.currentPoint.x-this.dragStartPoint.x),this.yDragSubject.next(this.currentPoint.y-this.dragStartPoint.y),this.xDragTickSubject.next(this.currentPoint.x-this.prevDragPoint.x),this.yDragTickSubject.next(this.currentPoint.y-this.prevDragPoint.y),this.prevDragPoint.x=this.currentPoint.x,this.prevDragPoint.y=this.currentPoint.y},this.dragStartListener=u=>{this.isDraggable(u)&&(this.updateCurrentPoints(u),this.dragging=!0,this.dragStartEvent=u,this.documentDragListeners.forEach(c=>c()),this.dragStartPoint=o.copyPoint(this.currentPoint),this.xDragStartSubject.next(this.dragStartPoint),this.yDragStartSubject.next(this.dragStartPoint),this.prevDragPoint=Object.assign({},this.dragStartPoint),o.DRAG_EVENTS.forEach(c=>{document.addEventListener(c,this.dragProcessListener,!0);const e=document.removeEventListener.bind(document,c,this.dragProcessListener,!0);this.documentDragListeners.push(e),this.addSubscription(e)}),this.dragProcessListener())},this.dragListener=()=>this.mouseMoveDocumentSubject.next(this.currentPoint),this.updateElementOffsetListener=()=>this.mouseMoveSubject.next(this.currentPoint),this.dragEndListener=()=>{this.dragging=!1,this.documentDragListeners.forEach(u=>u()),this.xDragEndSubject.next(),this.yDragEndSubject.next()},this.clickHandler=()=>this.clickSubject.next(this.currentPoint),this.updateCurrentPoints=u=>{this.updateCurrentDocumentPoint(u),this.updateCurrentMousePoint(u)}}isDraggable(t){return t instanceof MouseEvent?t.button===p.left:t instanceof TouchEvent}startDragging(t){this.updateCurrentPoints(t),this.dragStartListener(t)}movePointer(t){this.updateCurrentPoints(t),this.dragListener(),this.updateElementOffsetListener(),this.dragging&&this.dragProcessListener()}stopDragging(){this.dragEndListener()}fixTextSelection(){const t=r=>(r.preventDefault(),!1);this.element.addEventListener("selectstart",t,!1),this.addSubscription(this.element.removeEventListener.bind(this.element,"selectstart",t,!1))}doActivate(){this.fixTextSelection(),this.documentDragListeners=[],o.DRAG_START_EVENTS.forEach(e=>{this.element.addEventListener(e,this.dragStartListener),this.addSubscription(()=>this.element.removeEventListener(e,this.dragStartListener))}),this.trackMousePosition(),o.DRAG_EVENTS.forEach(e=>{document.addEventListener(e,this.dragListener),this.addSubscription(document.removeEventListener.bind(document,e,this.dragListener)),this.element.addEventListener(e,this.updateElementOffsetListener),this.addSubscription(this.element.removeEventListener.bind(this.element,e,this.updateElementOffsetListener))}),o.DRAG_END_EVENTS.forEach(e=>{document.addEventListener(e,this.dragEndListener),this.addSubscription(document.removeEventListener.bind(document,e,this.dragEndListener))}),this.addSubscription(n(this.element,this.clickHandler,"click"));const t=e=>{this.clickDocumentSubject.next(e)};this.addSubscription(n(document,t,"click"));const r=y();if(r==="apple"||r==="mobile"){const b=(()=>{let h=null;return()=>{h?(this.dbClickSubject.next(this.currentPoint),clearTimeout(h),h=null):h=window.setTimeout(()=>{h=null},250)}})();this.addSubscription(n(this.element,b,"touchend"))}const u=(e,b=500,h=2)=>{e.preventDefault();let d=null;const g={x:e.touches[0].clientX,y:e.touches[0].clientY};let l={x:0,y:0};const P=S=>{l={x:S.touches[0].clientX,y:S.touches[0].clientY},(Math.sqrt(Math.pow(l.x-g.x,2)+Math.pow(l.y-g.y,2))>h||S.touches.length>1)&&m()},m=()=>{d&&(clearTimeout(d),d=null),this.element.removeEventListener("touchend",m),this.element.removeEventListener("touchmove",P)};d=setTimeout(()=>this.longTouchSubject.next(e),b),this.element.addEventListener("touchmove",P,{passive:!0}),this.element.addEventListener("touchend",m)};this.addSubscription(n(this.element,e=>u(e),"touchstart")),this.addSubscription(n(this.element,()=>this.dbClickSubject.next(this.currentPoint),"dblclick")),this.addSubscription(n(this.element,e=>this.touchStartSubject.next(e),"touchstart")),this.addSubscription(n(this.element,e=>this.touchMoveSubject.next(e),"touchmove",!0)),this.addSubscription(n(this.element,e=>this.touchEndSubject.next(e),"touchend")),this.addSubscription(n(this.element,e=>this.touchCancelSubject.next(e),"touchcancel")),this.addSubscription(n(this.element,e=>{e.ctrlKey?this.pinchSubject.next(e):L(e)?this.scrollGestureSubject.next(e):this.wheelSubject.next(e),e.preventDefault()},"wheel")),this.addSubscription(n(this.element,e=>this.contextMenuSubject.next(e),"contextmenu")),this.addSubscription(n(this.element,()=>this.mouseDownSubject.next(this.currentPoint),"mousedown")),this.addSubscription(n(this.element,()=>this.mouseUpSubject.next(this.currentPoint),"mouseup")),this.addSubscription(n(document,()=>this.mouseUpDocumentSubject.next(this.currentPoint),"mouseup")),this.addRxSubscription(this.eventBus.observe(f).subscribe(()=>{const e=this.element.getBoundingClientRect();this.canvasBounds.x=e.left,this.canvasBounds.y=e.top,this.canvasBounds.width=e.width,this.canvasBounds.height=e.height}));const c=()=>{this.mouseLeavesCanvasSubject.next(!0)};this.element.addEventListener("mouseleave",c,!1),this.addSubscription(this.element.removeEventListener.bind(this.element,"mouseleave",c,!1))}getCurrentMousePoint(){return this.currentPoint}trackMousePosition(){o.DRAG_EVENTS.forEach(t=>{document.addEventListener(t,this.updateCurrentPoints,!0),this.addSubscription(()=>document.removeEventListener(t,this.updateCurrentPoints,!0))})}updateCurrentDocumentPoint(t){"pageX"in t?this.currentPointDocument.x=t.pageX:t.touches!==void 0&&(this.currentPointDocument.x=t.touches[0].pageX),"pageY"in t?this.currentPointDocument.y=t.pageY:t.touches!==void 0&&(this.currentPointDocument.y=t.touches[0].pageY)}updateCurrentMousePoint(t){const r=this.element.getBoundingClientRect();"clientX"in t?this.currentPoint.x=t.clientX-r.left:t.touches!==void 0&&(this.currentPoint.x=t.touches[0].clientX-r.left),"clientY"in t?this.currentPoint.y=t.clientY-r.top:t.touches!==void 0&&(this.currentPoint.y=t.touches[0].clientY-r.top)}static copyPoint(t){return{x:t.x,y:t.y}}observeMouseMove(t=()=>!0){return this.mouseMoveSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeMouseMoveNoDrag(){return this.mouseMoveSubject.asObservable().pipe(s(()=>!this.dragging))}observeMouseMoveDocument(t=()=>!0){return this.mouseMoveDocumentSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeMouseMoveDocumentAnyElement(t=()=>!0){return this.mouseMoveDocumentSubject.asObservable().pipe(s(()=>t(this.currentPointDocument.x,this.currentPointDocument.y)),v(()=>this.currentPointDocument))}observeClickOnDocument(){return this.clickDocumentSubject.asObservable()}observeXDragStart(t=()=>!0){return this.xDragStartSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeXDrag(t=()=>!0){return this.xDragSubject.pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeXDragEnd(t=()=>!0){return this.xDragEndSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeXDragTick(){return this.xDragTickSubject.asObservable()}observeYDragStart(t=()=>!0){return this.yDragStartSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeYDrag(t=()=>!0){return this.yDragSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeYDragEnd(t=()=>!0){return this.yDragEndSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeYDragTick(){return this.yDragTickSubject.asObservable()}observeMouseEnter(t=()=>!0,r=!1){const u=this.mouseMoveSubject.asObservable().pipe(s(()=>!(r&&this.dragging)),v(()=>t(this.currentPoint.x,this.currentPoint.y))),c=this.observeMouseLeavesCanvas().pipe(v(()=>!1));return x(u,c).pipe(E())}observeMouseLeavesCanvas(){return this.mouseLeavesCanvasSubject.asObservable()}observeClick(t=()=>!0){return this.clickSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeDbClick(t=()=>!0){return this.dbClickSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeWheel(t=()=>!0){return this.wheelSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observePinch(t=()=>!0){return this.pinchSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeScrollGesture(){return this.scrollGestureSubject.asObservable()}observeTouchStart(t=()=>!0){return this.touchStartSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeTouchMove(t=()=>!0){return this.touchMoveSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeTouchEndDocument(){return this.touchEndSubject.asObservable()}observeTouchCancelDocument(){return this.touchCancelSubject.asObservable()}observeMouseDown(t=()=>!0){return this.mouseDownSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeMouseUp(t=()=>!0){return this.mouseUpSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeMouseUpDocument(t=()=>!0){return this.mouseUpDocumentSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)))}observeContextMenu(t=()=>!0){return this.contextMenuSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)),D(r=>r.preventDefault()))}observeLongTouch(t=()=>!0){return this.longTouchSubject.asObservable().pipe(s(()=>t(this.currentPoint.x,this.currentPoint.y)),D(r=>r.preventDefault()))}getCurrentPoint(){return this.currentPoint}}o.DRAG_START_EVENTS=["mousedown","touchstart"],o.DRAG_EVENTS=["mousemove","touchmove"],o.DRAG_END_EVENTS=["mouseup","touchend","touchcancel"];export{o as CanvasInputListenerComponent};

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

@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { CanvasBoundsContainer, HitBoundsTest } from '../canvas/canvas-bounds-container';
+import { CursorHandler } from '../canvas/cursor.handler';
+import { FullChartConfig } from '../chart.config';
+import { ChartBaseElement } from './chart-base-element';
+import { ChartModel } from '../components/chart/chart.model';
+import { ChartPanComponent } from '../components/pan/chart-pan.component';
+import { CanvasModel } from './canvas.model';
+import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
+import { Bounds } from './bounds.model';
+export declare const BASELINE_RESIZER_UUID = "BASELINE_RESIZER";
+/**
+ * Baseline separator for baseline chart
+ * Used to resize baseline area on chart.
+ */
+export declare class BaselineModel extends ChartBaseElement {
+    private chartModel;
+    private canvasModel;
+    private canvasInputListener;
+    private config;
+    private canvasBoundContainer;
+    private cursorHandler;
+    readonly resizerBounds: Bounds;
+    baselineYPercents: number;
+    ht: HitBoundsTest;
+    constructor(chartModel: ChartModel, chartPanComponent: ChartPanComponent, canvasModel: CanvasModel, canvasInputListener: CanvasInputListenerComponent, config: FullChartConfig, canvasBoundContainer: CanvasBoundsContainer, cursorHandler: CursorHandler);
+    protected doActivate(): void;
+    private dragTickCb;
+    /**
+     * Recalculates the bounds of the baseline resizer based on the current chart and y-axis bounds.
+     * @private
+     * @function
+     * @name recalculateBounds
+     * @memberof ClassName
+     * @returns {void}
+     */
+    private recalculateBounds;
+    /**
+     * Moves the baseline of the chart to the specified y coordinate.
+     * @param {number} y - The y coordinate to move the baseline to.
+     * @returns {void}
+     */
+    moveBaseLine(y: number): void;
+    /**
+     * This method is called when the component is being deactivated.
+     * It calls the doDeactivate method of the parent class.
+     * @protected
+     */
+    protected doDeactivate(): void;
+}

package/dist/chart/model/baseline.model.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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{CanvasBoundsContainer as l,CanvasElement as t,isInVerticalBounds as g}from"../canvas/canvas-bounds-container";import{ChartBaseElement as C}from"./chart-base-element";import{DragNDropYComponent as v}from"../components/dran-n-drop_helper/drag-n-drop-y.component";export const BASELINE_RESIZER_UUID="BASELINE_RESIZER";export class BaselineModel extends C{constructor(s,e,n,i,r,a,h){super(),this.chartModel=s,this.canvasModel=n,this.canvasInputListener=i,this.config=r,this.canvasBoundContainer=a,this.cursorHandler=h,this.resizerBounds={x:0,y:0,pageX:0,pageY:0,height:0,width:0},this.baselineYPercents=50,this.ht=l.hitTestOf(this.resizerBounds,{extensionY:this.config.components.paneResizer.dragZone}),this.dragTickCb=d=>{const{delta:u}=d,B=this.canvasBoundContainer.getBounds(t.CHART),o=this.canvasInputListener.getCurrentPoint().y;u!==0&&g(o,B)&&(this.moveBaseLine(o),this.canvasModel.fireDraw())};const c=new v(this.ht,{onDragTick:this.dragTickCb},i,e);this.addChildEntity(c)}doActivate(){super.doActivate(),this.addRxSubscription(this.canvasBoundContainer.observeBoundsChanged(t.CHART).subscribe(()=>this.recalculateBounds())),this.chartModel.chartTypeChanged.subscribe(s=>{s==="baseline"?this.cursorHandler.setCursorForBounds("BASELINE_RESIZER",this.resizerBounds,this.config.components.baseline.cursor,this.config.components.baseline.dragZone):this.cursorHandler.removeCursorForCanvasEl("BASELINE_RESIZER")})}recalculateBounds(){const s=this.canvasBoundContainer.getBounds(t.CHART),e=this.canvasBoundContainer.getBounds(t.Y_AXIS);this.resizerBounds.x=s.x,this.resizerBounds.width=s.width+e.width,this.resizerBounds.height=this.config.components.baseline.height;const n=s.y+s.height*(this.baselineYPercents/100);this.resizerBounds.y=n,this.canvasBoundContainer.bounds[BASELINE_RESIZER_UUID]=this.resizerBounds}moveBaseLine(s){const e=this.canvasBoundContainer.getBounds(t.CHART);this.baselineYPercents=(s-e.y)*100/e.height,this.resizerBounds.y=s}doDeactivate(){super.doDeactivate()}}

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

@@ -0,0 +1,16 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 interface BoundsProvider {
+    (): Bounds;
+}
+export interface Bounds {
+    x: number;
+    y: number;
+    pageX: number;
+    pageY: number;
+    width: number;
+    height: number;
+}

package/dist/chart/model/bounds.model.js

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

package/dist/chart/model/candle-hover.d.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 VisualCandle from './visual-candle';
+import { BaseHover, HoverProducerPart } from '../inputhandlers/hover-producer.component';
+import { ChartModel } from '../components/chart/chart.model';
+export interface CandleHover {
+    readonly visualCandle: VisualCandle;
+    readonly high: number;
+    readonly low: number;
+    readonly open: number;
+    readonly close: number;
+    readonly volume: number;
+    readonly highY: number;
+    readonly lowY: number;
+    readonly openY: number;
+    readonly closeY: number;
+    readonly closestOHLCY: number;
+    readonly highFormatted: string;
+    readonly lowFormatted: string;
+    readonly openFormatted: string;
+    readonly closeFormatted: string;
+}
+export declare class CandleHoverProducerPart implements HoverProducerPart<CandleHover | undefined> {
+    private chartModel;
+    constructor(chartModel: ChartModel);
+    /**
+     * Returns a CandleHover object or undefined based on the provided BaseHover object.
+     * @param {BaseHover} hover - The BaseHover object containing the x and y coordinates.
+     * @returns {CandleHover | undefined} - The CandleHover object or undefined if mainSeriesCandle is falsy.
+     */
+    getData(hover: BaseHover): CandleHover | undefined;
+}

package/dist/chart/model/candle-hover.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
+ */
+class l{constructor(t,e,r,s){this.visualCandle=t,this.price=e,this.priceFormatter=r,this.toY=s}get high(){return this.visualCandle.high}get low(){return this.visualCandle.low}get open(){return this.visualCandle.open}get close(){return this.visualCandle.close}get volume(){return this.visualCandle.candle.volume}get openY(){return this.toY(this.open)}get closeY(){return this.toY(this.close)}get highY(){return this.toY(this.high)}get lowY(){return this.toY(this.low)}get openFormatted(){return this.priceFormatter(this.open)}get closeFormatted(){return this.priceFormatter(this.close)}get highFormatted(){return this.priceFormatter(this.high)}get lowFormatted(){return this.priceFormatter(this.low)}get closestOHLCY(){return this.toY([this.close,this.open,this.high,this.low].sort((t,e)=>Math.abs(t-this.price)-Math.abs(e-this.price))[0])}}export class CandleHoverProducerPart{constructor(t){this.chartModel=t}getData(t){const{x:e,y:r}=t,h=this.chartModel.candleFromX(e).idx||0,i=this.chartModel.getVisualCandle(h),a=this.chartModel.priceFromY(r);return i&&new l(i,a,this.chartModel.pane.regularFormatter,this.chartModel.toY)}}

package/dist/chart/model/candle-series-high-low.provider.d.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { HighLowProvider } from './scaling/auto-scale.model';
+import VisualCandle from './visual-candle';
+import { HighLowWithIndex } from './scale.model';
+import { CandleSeriesModel } from './candle-series.model';
+/**
+ * Candles high low provider.
+ * @param candleSeriesModel
+ * @doc-tags viewport,scaling
+ */
+export declare const createCandleSeriesHighLowProvider: (candleSeriesModel: CandleSeriesModel) => HighLowProvider;
+/**
+ * Calculates the high and low values for given candles array.
+ * @param visualCandles
+ */
+export declare const calculateCandlesHighLow: (visualCandles: VisualCandle[]) => HighLowWithIndex;

package/dist/chart/model/candle-series-high-low.provider.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 createCandleSeriesHighLowProvider=i=>({isHighLowActive:()=>!0,calculateHighLow:t=>{const o=t?t.xStart:i.scaleModel.xStart,n=t?t.xEnd:i.scaleModel.xEnd,{dataIdxStart:a,dataIdxEnd:r}=i.calculateDataViewportIndexes(o,n),x=i.visualPoints.slice(a,r+1),h=calculateCandlesHighLow(x),c=()=>{var s,l;return(l=(s=i.visualPoints[a])===null||s===void 0?void 0:s.close)!==null&&l!==void 0?l:1};return Object.assign(Object.assign({},h),{low:i.view.toAxisUnits(h.low,c),high:i.view.toAxisUnits(h.high,c)})}}),calculateCandlesHighLow=i=>{const t={high:Number.MIN_SAFE_INTEGER,low:Number.MAX_SAFE_INTEGER,highIdx:0,lowIdx:0};for(let o=0;o<i.length;o++){const n=i[o];n.high>t.high&&(t.high=n.high,t.highIdx=o),n.low<t.low&&(t.low=n.low,t.lowIdx=o)}return t};