@devexperts/dxcharts-lite 1.0.2 → 2.0.0

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

@@ -3,4 +3,632 @@
  * 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};
+import { subscribeListener } from '../utils/dom.utils';
+import { merge, Subject } from 'rxjs';
+import { ChartBaseElement } from '../model/chart-base-element';
+import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
+import { EVENT_RESIZED } from '../events/events';
+import { deviceDetector } from '../utils/device/device-detector.utils';
+import { touchpadDetector } from '../utils/device/touchpad.utils';
+var MouseButton;
+(function (MouseButton) {
+    MouseButton[MouseButton["left"] = 0] = "left";
+    MouseButton[MouseButton["middle"] = 1] = "middle";
+    MouseButton[MouseButton["right"] = 2] = "right";
+})(MouseButton || (MouseButton = {}));
+/**
+ * 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
+ */
+class CanvasInputListenerComponent extends ChartBaseElement {
+    constructor(eventBus, element) {
+        super();
+        this.eventBus = eventBus;
+        this.element = element;
+        this.xDragStartSubject = new Subject();
+        /* Returns X drag delta in pixels relative to start event above: 1, 2, 3, 5, 10, 7, 3, -1, -9, -43, -149, ...*/
+        this.xDragSubject = new Subject();
+        /* Returns X drag delta in pixels for every tick: 1, 1, 2, 3, 2, 1, 1, 5, 10, 30, 2, 1, ...*/
+        this.xDragTickSubject = new Subject();
+        this.xDragEndSubject = new Subject();
+        this.yDragStartSubject = new Subject();
+        this.yDragSubject = new Subject();
+        this.yDragTickSubject = new Subject();
+        this.yDragEndSubject = new Subject();
+        this.mouseMoveSubject = new Subject();
+        this.mouseMoveDocumentSubject = new Subject();
+        this.clickSubject = new Subject();
+        this.clickDocumentSubject = new Subject();
+        this.dbClickSubject = new Subject();
+        this.mouseDownSubject = new Subject();
+        this.mouseUpSubject = new Subject();
+        this.mouseUpDocumentSubject = new Subject();
+        this.wheelSubject = new Subject();
+        this.touchStartSubject = new Subject();
+        this.touchMoveSubject = new Subject();
+        this.touchEndSubject = new Subject();
+        this.touchCancelSubject = new Subject();
+        this.contextMenuSubject = new Subject();
+        this.longTouchSubject = new Subject();
+        this.pinchSubject = new Subject();
+        this.scrollGestureSubject = new Subject();
+        this.mouseLeavesCanvasSubject = new Subject();
+        // point at which start dragging
+        this.dragStartPoint = { x: 0, y: 0 };
+        this.prevDragPoint = { x: 0, y: 0 };
+        // current mouse point in canvas
+        this.currentPoint = { x: 0, y: 0 };
+        // current mouse point in document
+        this.currentPointDocument = { x: 0, y: 0 };
+        // if currently dragging
+        this.dragging = false;
+        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 = (e) => {
+            if (this.isDraggable(e)) {
+                this.updateCurrentPoints(e);
+                this.dragging = true;
+                this.dragStartEvent = e;
+                this.documentDragListeners.forEach(unsub => unsub());
+                this.dragStartPoint = CanvasInputListenerComponent.copyPoint(this.currentPoint);
+                this.xDragStartSubject.next(this.dragStartPoint);
+                this.yDragStartSubject.next(this.dragStartPoint);
+                this.prevDragPoint = Object.assign({}, this.dragStartPoint);
+                CanvasInputListenerComponent.DRAG_EVENTS.forEach(dragEvent => {
+                    // scale update rely on this listener, it should be executed BEFORE cross event, but AFTER updateCurrentPoints!!!
+                    document.addEventListener(dragEvent, this.dragProcessListener, true);
+                    const unsubscriber = document.removeEventListener.bind(document, dragEvent, this.dragProcessListener, true);
+                    this.documentDragListeners.push(unsubscriber);
+                    this.addSubscription(unsubscriber);
+                });
+                this.dragProcessListener();
+            }
+        };
+        this.dragListener = () => this.mouseMoveDocumentSubject.next(this.currentPoint);
+        this.updateElementOffsetListener = () => this.mouseMoveSubject.next(this.currentPoint);
+        this.dragEndListener = () => {
+            this.dragging = false;
+            this.documentDragListeners.forEach(unsub => unsub());
+            this.xDragEndSubject.next();
+            this.yDragEndSubject.next();
+        };
+        this.clickHandler = () => this.clickSubject.next(this.currentPoint);
+        this.updateCurrentPoints = (e) => {
+            this.updateCurrentDocumentPoint(e);
+            this.updateCurrentMousePoint(e);
+        };
+    }
+    /**
+     * This methods allows change scale, only if dragging using primary mouse button or touch.
+     * @param e
+     */
+    isDraggable(e) {
+        if (e instanceof MouseEvent) {
+            return e.button === MouseButton.left;
+        }
+        return e instanceof TouchEvent;
+    }
+    /**
+     * This methods allows you to start dragging programmatically
+     * @param e
+     */
+    startDragging(e) {
+        this.updateCurrentPoints(e);
+        this.dragStartListener(e);
+    }
+    /**
+     * This methods allows you to move mouse pointer programmatically
+     * @param e
+     */
+    movePointer(e) {
+        this.updateCurrentPoints(e);
+        this.dragListener();
+        this.updateElementOffsetListener();
+        this.dragging && this.dragProcessListener();
+    }
+    /**
+     * This methods allows you to stop dragging programmatically
+     */
+    stopDragging() {
+        this.dragEndListener();
+    }
+    /**
+     * Prevents text selection inside chart-core canvas. TODO Do we need it?
+     */
+    fixTextSelection() {
+        const selectListener = (e) => {
+            e.preventDefault();
+            return false;
+        };
+        this.element.addEventListener('selectstart', selectListener, false);
+        this.addSubscription(this.element.removeEventListener.bind(this.element, 'selectstart', selectListener, false));
+    }
+    doActivate() {
+        this.fixTextSelection();
+        // catch drag start on canvas element but may continue dragging outside of it
+        this.documentDragListeners = [];
+        CanvasInputListenerComponent.DRAG_START_EVENTS.forEach(dragStartEvent => {
+            this.element.addEventListener(dragStartEvent, this.dragStartListener);
+            this.addSubscription(() => this.element.removeEventListener(dragStartEvent, this.dragStartListener));
+        });
+        // always keep track of current mouse point
+        this.trackMousePosition();
+        CanvasInputListenerComponent.DRAG_EVENTS.forEach(dragEvent => {
+            document.addEventListener(dragEvent, this.dragListener);
+            this.addSubscription(document.removeEventListener.bind(document, dragEvent, this.dragListener));
+            this.element.addEventListener(dragEvent, this.updateElementOffsetListener);
+            this.addSubscription(this.element.removeEventListener.bind(this.element, dragEvent, this.updateElementOffsetListener));
+        });
+        CanvasInputListenerComponent.DRAG_END_EVENTS.forEach(dragEndEvent => {
+            document.addEventListener(dragEndEvent, this.dragEndListener);
+            this.addSubscription(document.removeEventListener.bind(document, dragEndEvent, this.dragEndListener));
+        });
+        this.addSubscription(subscribeListener(this.element, this.clickHandler, 'click'));
+        const clickDocumentListener = (e) => {
+            this.clickDocumentSubject.next(e);
+        };
+        this.addSubscription(subscribeListener(document, clickDocumentListener, 'click'));
+        const device = deviceDetector();
+        if (device === 'apple' || device === 'mobile') {
+            // workaround to handle double taps for iOS
+            const doubleTapListenerProducer = () => {
+                let timeoutId = null;
+                return () => {
+                    if (timeoutId) {
+                        this.dbClickSubject.next(this.currentPoint);
+                        clearTimeout(timeoutId);
+                        timeoutId = null;
+                    }
+                    else {
+                        timeoutId = window.setTimeout(() => {
+                            timeoutId = null;
+                        }, 250);
+                    }
+                };
+            };
+            const doubleTapListener = doubleTapListenerProducer();
+            this.addSubscription(subscribeListener(this.element, doubleTapListener, 'touchend'));
+        }
+        const longTouchListener = (e, delay = 500, pixelsForMoveReset = 2) => {
+            e.preventDefault();
+            let timer = null;
+            const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            let coords = { x: 0, y: 0 };
+            const touchMoveHandler = (e) => {
+                coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+                if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
+                    pixelsForMoveReset ||
+                    e.touches.length > 1) {
+                    touchEnd();
+                }
+            };
+            const touchEnd = () => {
+                if (timer) {
+                    clearTimeout(timer);
+                    timer = null;
+                }
+                this.element.removeEventListener('touchend', touchEnd);
+                this.element.removeEventListener('touchmove', touchMoveHandler);
+            };
+            timer = setTimeout(() => this.longTouchSubject.next(e), delay);
+            this.element.addEventListener('touchmove', touchMoveHandler, { passive: true });
+            this.element.addEventListener('touchend', touchEnd);
+        };
+        this.addSubscription(subscribeListener(this.element, (e) => longTouchListener(e), 'touchstart'));
+        this.addSubscription(subscribeListener(this.element, () => this.dbClickSubject.next(this.currentPoint), 'dblclick'));
+        this.addSubscription(subscribeListener(this.element, (e) => this.touchStartSubject.next(e), 'touchstart'));
+        this.addSubscription(subscribeListener(this.element, (e) => this.touchMoveSubject.next(e), 'touchmove', true));
+        this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
+        this.addSubscription(subscribeListener(this.element, (e) => this.touchCancelSubject.next(e), 'touchcancel'));
+        this.addSubscription(subscribeListener(this.element, (e) => {
+            // pinch gesture, we needs the same behaviour as mouse wheel
+            if (e.ctrlKey) {
+                this.pinchSubject.next(e);
+            }
+            else {
+                // mouse wheel or scroll gesture
+                const isTouchpad = touchpadDetector(e);
+                if (isTouchpad) {
+                    this.scrollGestureSubject.next(e);
+                }
+                else {
+                    this.wheelSubject.next(e);
+                }
+            }
+            e.preventDefault(); // to disable the scroll over the document, if for example chart is used as widget
+        }, 'wheel'));
+        this.addSubscription(subscribeListener(this.element, (e) => this.contextMenuSubject.next(e), 'contextmenu'));
+        this.addSubscription(subscribeListener(this.element, () => this.mouseDownSubject.next(this.currentPoint), 'mousedown'));
+        this.addSubscription(subscribeListener(this.element, () => this.mouseUpSubject.next(this.currentPoint), 'mouseup'));
+        this.addSubscription(subscribeListener(document, () => this.mouseUpDocumentSubject.next(this.currentPoint), 'mouseup'));
+        this.addRxSubscription(this.eventBus.observe(EVENT_RESIZED).subscribe(() => {
+            const bcr = this.element.getBoundingClientRect();
+            this.canvasBounds.x = bcr.left;
+            this.canvasBounds.y = bcr.top;
+            this.canvasBounds.width = bcr.width;
+            this.canvasBounds.height = bcr.height;
+        }));
+        const mouseLeaveListener = () => {
+            this.mouseLeavesCanvasSubject.next(true);
+        };
+        this.element.addEventListener('mouseleave', mouseLeaveListener, false);
+        this.addSubscription(this.element.removeEventListener.bind(this.element, 'mouseleave', mouseLeaveListener, false));
+    }
+    /**
+     * Returns the current mouse point.
+     *
+     * @returns {Point} The current mouse point.
+     */
+    getCurrentMousePoint() {
+        return this.currentPoint;
+    }
+    /**
+     * 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.
+     */
+    trackMousePosition() {
+        CanvasInputListenerComponent.DRAG_EVENTS.forEach(dragEvent => {
+            // handle event on capture phase, so every other listeners get an actual state for current points
+            document.addEventListener(dragEvent, this.updateCurrentPoints, true);
+            this.addSubscription(() => document.removeEventListener(dragEvent, this.updateCurrentPoints, true));
+        });
+    }
+    /**
+     * Updates the current point of the document based on the provided event.
+     * @param {CustomMouseEvent} e - The event that triggered the update.
+     * @returns {void}
+     */
+    updateCurrentDocumentPoint(e) {
+        if ('pageX' in e) {
+            this.currentPointDocument.x = e.pageX;
+        }
+        else if (e.touches !== undefined) {
+            this.currentPointDocument.x = e.touches[0].pageX;
+        }
+        if ('pageY' in e) {
+            this.currentPointDocument.y = e.pageY;
+        }
+        else if (e.touches !== undefined) {
+            this.currentPointDocument.y = e.touches[0].pageY;
+        }
+    }
+    /**
+     * Updates the current mouse point based on the provided CustomMouseEvent.
+     * @param {CustomMouseEvent} e - The CustomMouseEvent object containing the mouse/touch coordinates.
+     * @returns {void}
+     * @private
+     */
+    updateCurrentMousePoint(e) {
+        // this is a bad solution because BCR causes reflow
+        // it's ok while document is not changed, styles and layout
+        // but it's faster to cache BCR and recalculate when it's needed
+        const rect = this.element.getBoundingClientRect();
+        if ('clientX' in e) {
+            this.currentPoint.x = e.clientX - rect.left;
+        }
+        else if (e.touches !== undefined) {
+            this.currentPoint.x = e.touches[0].clientX - rect.left;
+        }
+        if ('clientY' in e) {
+            this.currentPoint.y = e.clientY - rect.top;
+        }
+        else if (e.touches !== undefined) {
+            this.currentPoint.y = e.touches[0].clientY - rect.top;
+        }
+    }
+    /**
+     * 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
+     */
+    static copyPoint(point) {
+        return {
+            x: point.x,
+            y: point.y,
+        };
+    }
+    /* **************************************************************** */
+    /* HIT TEST argument allows to observe events only in specific areas */
+    /* **************************************************************** */
+    /**
+     * 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 = () => true) {
+        return this.mouseMoveSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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() {
+        return this.mouseMoveSubject.asObservable().pipe(filter(() => !this.dragging));
+    }
+    /**
+     * Observes any element hover in all document not only <canvas>
+     * @param hitBoundsTest
+     * @return point position in chart
+     */
+    observeMouseMoveDocument(hitBoundsTest = () => true) {
+        return this.mouseMoveDocumentSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * Observes any element hover in all document not only <canvas>
+     * @param hitBoundsTest
+     * @return absolute point position in document
+     */
+    observeMouseMoveDocumentAnyElement(hitBoundsTest = () => true) {
+        return this.mouseMoveDocumentSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPointDocument.x, this.currentPointDocument.y)), map(() => this.currentPointDocument));
+    }
+    /**
+     * 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() {
+        return this.clickDocumentSubject.asObservable();
+    }
+    /**
+     * Returns observable which contains point position relative to chart canvas. (not document point!)
+     * @param hitBoundsTest {HitBoundsTest}
+     */
+    observeXDragStart(hitBoundsTest = () => true) {
+        return this.xDragStartSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.xDragSubject.pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.xDragEndSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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() {
+        return this.xDragTickSubject.asObservable();
+    }
+    /**
+     * Returns observable which contains point position relative to chart canvas. (not document point!)
+     * @param hitBoundsTest {HitBoundsTest}
+     */
+    observeYDragStart(hitBoundsTest = () => true) {
+        return this.yDragStartSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.yDragSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.yDragEndSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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() {
+        return this.yDragTickSubject.asObservable();
+    }
+    /**
+     * 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 = () => true, skipWhenDragging = false) {
+        const mouseEnter$ = this.mouseMoveSubject.asObservable().pipe(filter(() => !(skipWhenDragging && this.dragging)), map(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+        const shouldCloseMouseEnter$ = this.observeMouseLeavesCanvas().pipe(map(() => false));
+        return merge(mouseEnter$, shouldCloseMouseEnter$).pipe(distinctUntilChanged());
+    }
+    /**
+     * 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() {
+        return this.mouseLeavesCanvasSubject.asObservable();
+    }
+    /**
+     * 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 = () => true) {
+        return this.clickSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.dbClickSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.wheelSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.pinchSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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() {
+        return this.scrollGestureSubject.asObservable();
+    }
+    /**
+     * 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 = () => true) {
+        return this.touchStartSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.touchMoveSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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() {
+        return this.touchEndSubject.asObservable();
+    }
+    /**
+     * 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() {
+        return this.touchCancelSubject.asObservable();
+    }
+    /**
+     * 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 = () => true) {
+        return this.mouseDownSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.mouseUpSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.mouseUpDocumentSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * 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 = () => true) {
+        return this.contextMenuSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)), tap(p => p.preventDefault()));
+    }
+    /**
+     * 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 = () => true) {
+        return this.longTouchSubject.asObservable().pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)), tap(p => p.preventDefault()));
+    }
+    /**
+     * Returns the current point of the object.
+     * @returns {Point} The current point of the object.
+     */
+    getCurrentPoint() {
+        return this.currentPoint;
+    }
+}
+CanvasInputListenerComponent.DRAG_START_EVENTS = ['mousedown', 'touchstart'];
+CanvasInputListenerComponent.DRAG_EVENTS = ['mousemove', 'touchmove'];
+CanvasInputListenerComponent.DRAG_END_EVENTS = ['mouseup', 'touchend', 'touchcancel'];
+export { CanvasInputListenerComponent };