@devexperts/dxcharts-lite 2.1.0 → 2.2.0

package/README.md

@@ -23,7 +23,7 @@
     <img src="https://img.shields.io/static/v1?label=PRs&message=Welcome&color=blue" alt="PRs: Welcome" />
   </a>&nbsp;
   <a href="https://devexperts.com/dxcharts-demo/?lang=en">
-    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.1.0&color=blue" alt="Version" />
+    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.2.0&color=blue" alt="Version" />
   </a>
 </p>
 

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

@@ -3,7 +3,8 @@
  * 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, combineLatest, filter } from 'rxjs';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
 export class CrossEventProducerComponent extends ChartBaseElement {
     constructor(canvasInputListener, canvasBoundsContainer) {

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

@@ -84,7 +84,7 @@ export class HoverProducerComponent extends ChartBaseElement {
         // 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.addRxSubscription(this.canvasInputListener.observeLongTouchStart(hitTest).subscribe(event => {
             this.paneManager.chartPanComponent.deactivatePanHandlers();
             this.longTouchActivatedSubject.next(true);
             const x = event.touches[0].clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;

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

@@ -47,8 +47,9 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private touchMoveSubject;
     private touchEndSubject;
     private touchCancelSubject;
+    private longTouchStartSubject;
+    private longTouchEndSubject;
     private contextMenuSubject;
-    private longTouchSubject;
     private pinchSubject;
     private scrollGestureSubject;
     mouseLeavesCanvasSubject: Subject<boolean>;
@@ -300,11 +301,17 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      */
     observeContextMenu(hitBoundsTest?: HitBoundsTest): Observable<MouseEvent>;
     /**
-     * Returns an Observable that emits a TouchEvent when a long touch is detected on the current element.
+     * Returns an Observable that emits a TouchEvent when a long touch start 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>;
+    observeLongTouchStart(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch end 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.
+     */
+    observeLongTouchEnd(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

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

@@ -8,8 +8,8 @@ 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';
+import { deviceDetector } from '../utils/device/device-detector.utils';
 /**
  * Gathers user input on canvas element:
  * Chart update order should be following:
@@ -49,8 +49,9 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.touchMoveSubject = new Subject();
         this.touchEndSubject = new Subject();
         this.touchCancelSubject = new Subject();
+        this.longTouchStartSubject = new Subject();
+        this.longTouchEndSubject = new Subject();
         this.contextMenuSubject = new Subject();
-        this.longTouchSubject = new Subject();
         this.pinchSubject = new Subject();
         this.scrollGestureSubject = new Subject();
         this.mouseLeavesCanvasSubject = new Subject();
@@ -184,50 +185,58 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         const device = deviceDetector();
         if (device === 'apple' || device === 'mobile') {
             // workaround to handle double taps for iOS
-            const doubleTapListenerProducer = () => {
-                let timeoutId = null;
-                return () => {
-                    if (timeoutId) {
-                        this.dbTapSubject.next(this.currentPoint);
-                        clearTimeout(timeoutId);
-                        timeoutId = null;
+            let dbTapTimeout = null;
+            const doubleTapListenerProducer = (e) => {
+                e.preventDefault();
+                if (dbTapTimeout) {
+                    this.dbTapSubject.next(this.currentPoint);
+                    clearTimeout(dbTapTimeout);
+                    dbTapTimeout = null;
+                }
+                else {
+                    dbTapTimeout = window.setTimeout(() => {
+                        dbTapTimeout = null;
+                    }, 250);
+                }
+            };
+            this.addSubscription(subscribeListener(this.element, doubleTapListenerProducer, 'touchend'));
+            // workaround to handle long touch start/end for iOS
+            const longTouchListeners = (e, delay = 700, pixelsForMoveReset = 3) => {
+                e.preventDefault();
+                const initialCoords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+                let coords = { x: 0, y: 0 };
+                let longTouchStart = false;
+                let timerLongTouchStart = null;
+                // start timeout for long touch
+                timerLongTouchStart = setTimeout(() => {
+                    longTouchStart = true;
+                    this.longTouchStartSubject.next(e);
+                }, delay);
+                const touchMoveHandler = (e) => {
+                    e.preventDefault();
+                    coords = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+                    // clear long touch timeout if move area is bigger than pixelsForMove
+                    if (Math.sqrt(Math.pow(coords.x - initialCoords.x, 2) + Math.pow(coords.y - initialCoords.y, 2)) >
+                        pixelsForMoveReset ||
+                        e.touches.length > 1) {
+                        timerLongTouchStart && clearTimeout(timerLongTouchStart);
                     }
-                    else {
-                        timeoutId = window.setTimeout(() => {
-                            timeoutId = null;
-                        }, 250);
+                };
+                const touchEndHandler = (e) => {
+                    e.preventDefault();
+                    timerLongTouchStart && clearTimeout(timerLongTouchStart);
+                    if (longTouchStart) {
+                        longTouchStart = false;
+                        this.longTouchEndSubject.next(e);
                     }
+                    this.element.removeEventListener('touchend', touchEndHandler);
+                    this.element.removeEventListener('touchmove', touchMoveHandler);
                 };
+                this.element.addEventListener('touchmove', touchMoveHandler);
+                this.element.addEventListener('touchend', touchEndHandler);
             };
-            const doubleTapListener = doubleTapListenerProducer();
-            this.addSubscription(subscribeListener(this.element, doubleTapListener, 'touchend'));
+            this.addSubscription(subscribeListener(this.element, (e) => longTouchListeners(e), 'touchstart'));
         }
-        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, leftMouseButtonListener(() => 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));
@@ -615,12 +624,24 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         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.
+     * Returns an Observable that emits a TouchEvent when a long touch start 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()));
+    observeLongTouchStart(hitBoundsTest = () => true) {
+        return this.longTouchStartSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
+    /**
+     * Returns an Observable that emits a TouchEvent when a long touch end 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.
+     */
+    observeLongTouchEnd(hitBoundsTest = () => true) {
+        return this.longTouchEndSubject
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
     /**
      * Returns the current point of the object.