react-native-gesture-handler 2.16.0-rc.0 → 2.16.0

package/src/web/tools/NodeManager.ts

@@ -1,5 +1,6 @@
 import { ValueOf } from '../../typeUtils';
-import { Gestures } from '../../RNGestureHandlerModule.web';
+import { Gestures } from '../Gestures';
+import type IGestureHandler from '../handlers/IGestureHandler';
 
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export default abstract class NodeManager {
@@ -8,9 +9,9 @@ export default abstract class NodeManager {
     InstanceType<ValueOf<typeof Gestures>>
   > = {};
 
-  public static getHandler(tag: number) {
+  public static getHandler(tag: number): IGestureHandler {
     if (tag in this.gestures) {
-      return this.gestures[tag];
+      return this.gestures[tag] as IGestureHandler;
     }
 
     throw new Error(`No handler for tag ${tag}`);

package/src/web/tools/PointerEventManager.ts

@@ -1,5 +1,6 @@
-import { AdaptedEvent, EventTypes, MouseButton } from '../interfaces';
 import EventManager from './EventManager';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import { AdaptedEvent, EventTypes, Point } from '../interfaces';
 import { PointerTypeMapping, isPointerInBounds } from '../utils';
 import { PointerType } from '../../PointerType';
 
@@ -12,6 +13,7 @@ const PointerTypes = {
 export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
   private readonly mouseButtonsMapper = new Map<number, MouseButton>();
+  private lastPosition: Point;
 
   constructor(view: HTMLElement) {
     super(view);
@@ -21,200 +23,213 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     this.mouseButtonsMapper.set(2, MouseButton.RIGHT);
     this.mouseButtonsMapper.set(3, MouseButton.BUTTON_4);
     this.mouseButtonsMapper.set(4, MouseButton.BUTTON_5);
+
+    this.lastPosition = {
+      x: -Infinity,
+      y: -Infinity,
+    };
   }
 
-  public setListeners(): void {
-    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-      if (
-        !isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })
-      ) {
-        return;
-      }
+  private pointerDownCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
+    if (!isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })) {
+      return;
+    }
+
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
+    const target = event.target as HTMLElement;
+
+    if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
+      target.setPointerCapture(adaptedEvent.pointerId);
+    }
+
+    this.markAsInBounds(adaptedEvent.pointerId);
+    this.trackedPointers.add(adaptedEvent.pointerId);
+
+    if (++this.activePointersCounter > 1) {
+      adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+      this.onPointerAdd(adaptedEvent);
+    } else {
+      this.onPointerDown(adaptedEvent);
+    }
+  };
+
+  private pointerUpCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
+
+    // When we call reset on gesture handlers, it also resets their event managers
+    // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
+    // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
+    // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
+    if (this.activePointersCounter === 0) {
+      return;
+    }
+
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
+    const target = event.target as HTMLElement;
+
+    if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
+      target.releasePointerCapture(adaptedEvent.pointerId);
+    }
+
+    this.markAsOutOfBounds(adaptedEvent.pointerId);
+    this.trackedPointers.delete(adaptedEvent.pointerId);
+
+    if (--this.activePointersCounter > 0) {
+      adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+      this.onPointerRemove(adaptedEvent);
+    } else {
+      this.onPointerUp(adaptedEvent);
+    }
+  };
+
+  private pointerMoveCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
+
+    // Stylus triggers `pointermove` event when it detects changes in pressure. Since it is very sensitive to those changes,
+    // it constantly sends events, even though there was no change in position. To fix that we check whether
+    // pointer has actually moved and if not, we do not send event.
+    if (
+      event.pointerType === PointerTypes.Stylus &&
+      event.x === this.lastPosition.x &&
+      event.y === this.lastPosition.y
+    ) {
+      return;
+    }
+
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.MOVE);
+    const target = event.target as HTMLElement;
+
+    // You may be wondering why are we setting pointer capture here, when we
+    // already set it in `pointerdown` handler. Well, that's a great question,
+    // for which I don't have an answer. Specification (https://www.w3.org/TR/pointerevents2/#dom-element-setpointercapture)
+    // says that the requirement for `setPointerCapture` to work is that pointer
+    // must be in 'active buttons state`, otherwise it will fail silently, which
+    // is lovely. Obviously, when `pointerdown` is fired, one of the buttons
+    // (when using mouse) is pressed, but that doesn't mean that `setPointerCapture`
+    // will succeed, for some reason. Since it fails silently, we don't actually know
+    // if it worked or not (there's `gotpointercapture` event, but the complexity of
+    // incorporating it here seems stupid), so we just call it again here, every time
+    // pointer moves until it succeeds.
+    // God, I do love web development.
+    if (
+      !target.hasPointerCapture(event.pointerId) &&
+      !POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)
+    ) {
+      target.setPointerCapture(event.pointerId);
+    }
+
+    const inBounds: boolean = isPointerInBounds(this.view, {
+      x: adaptedEvent.x,
+      y: adaptedEvent.y,
+    });
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
-      const target = event.target as HTMLElement;
+    const pointerIndex: number = this.pointersInBounds.indexOf(
+      adaptedEvent.pointerId
+    );
 
-      if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
-        target.setPointerCapture(adaptedEvent.pointerId);
+    if (inBounds) {
+      if (pointerIndex < 0) {
+        adaptedEvent.eventType = EventTypes.ENTER;
+        this.onPointerEnter(adaptedEvent);
+        this.markAsInBounds(adaptedEvent.pointerId);
+      } else {
+        this.onPointerMove(adaptedEvent);
       }
-
-      this.markAsInBounds(adaptedEvent.pointerId);
-      this.trackedPointers.add(adaptedEvent.pointerId);
-
-      if (++this.activePointersCounter > 1) {
-        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
-        this.onPointerAdd(adaptedEvent);
+    } else {
+      if (pointerIndex >= 0) {
+        adaptedEvent.eventType = EventTypes.LEAVE;
+        this.onPointerLeave(adaptedEvent);
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
       } else {
-        this.onPointerDown(adaptedEvent);
+        this.onPointerOutOfBounds(adaptedEvent);
       }
-    });
+    }
 
-    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
+    this.lastPosition.x = event.x;
+    this.lastPosition.y = event.y;
+  };
 
-      // When we call reset on gesture handlers, it also resets their event managers
-      // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
-      // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
-      // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
-      if (this.activePointersCounter === 0) {
-        return;
-      }
+  private pointerCancelCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
-      const target = event.target as HTMLElement;
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.CANCEL);
 
-      if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
-        target.releasePointerCapture(adaptedEvent.pointerId);
-      }
+    this.onPointerCancel(adaptedEvent);
+    this.markAsOutOfBounds(adaptedEvent.pointerId);
+    this.activePointersCounter = 0;
+    this.trackedPointers.clear();
+  };
 
-      this.markAsOutOfBounds(adaptedEvent.pointerId);
-      this.trackedPointers.delete(adaptedEvent.pointerId);
+  private pointerEnterCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
 
-      if (--this.activePointersCounter > 0) {
-        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
-        this.onPointerRemove(adaptedEvent);
-      } else {
-        this.onPointerUp(adaptedEvent);
-      }
-    });
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
 
-    const lastPosition: { x: number | null; y: number | null } = {
-      x: null,
-      y: null,
-    };
+    this.onPointerMoveOver(adaptedEvent);
+  };
 
-    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
+  private pointerLeaveCallback = (event: PointerEvent) => {
+    if (event.pointerType === PointerTypes.Touch) {
+      return;
+    }
 
-      // Stylus triggers `pointermove` event when it detects changes in pressure. Since it is very sensitive to those changes,
-      // it constantly sends events, even though there was no change in position. To fix that we check whether
-      // pointer has actually moved and if not, we do not send event.
-      if (
-        event.pointerType === PointerTypes.Stylus &&
-        event.x === lastPosition.x &&
-        event.y === lastPosition.y
-      ) {
-        return;
-      }
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.MOVE);
-      const target = event.target as HTMLElement;
-
-      // You may be wondering why are we setting pointer capture here, when we
-      // already set it in `pointerdown` handler. Well, that's a great question,
-      // for which I don't have an answer. Specification (https://www.w3.org/TR/pointerevents2/#dom-element-setpointercapture)
-      // says that the requirement for `setPointerCapture` to work is that pointer
-      // must be in 'active buttons state`, otherwise it will fail silently, which
-      // is lovely. Obviously, when `pointerdown` is fired, one of the buttons
-      // (when using mouse) is pressed, but that doesn't mean that `setPointerCapture`
-      // will succeed, for some reason. Since it fails silently, we don't actually know
-      // if it worked or not (there's `gotpointercapture` event, but the complexity of
-      // incorporating it here seems stupid), so we just call it again here, every time
-      // pointer moves until it succeeds.
-      // God, I do love web development.
-      if (
-        !target.hasPointerCapture(event.pointerId) &&
-        !POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)
-      ) {
-        target.setPointerCapture(event.pointerId);
-      }
+    this.onPointerMoveOut(adaptedEvent);
+  };
 
-      const inBounds: boolean = isPointerInBounds(this.view, {
-        x: adaptedEvent.x,
-        y: adaptedEvent.y,
-      });
-
-      const pointerIndex: number = this.pointersInBounds.indexOf(
-        adaptedEvent.pointerId
-      );
-
-      if (inBounds) {
-        if (pointerIndex < 0) {
-          adaptedEvent.eventType = EventTypes.ENTER;
-          this.onPointerEnter(adaptedEvent);
-          this.markAsInBounds(adaptedEvent.pointerId);
-        } else {
-          this.onPointerMove(adaptedEvent);
-        }
-      } else {
-        if (pointerIndex >= 0) {
-          adaptedEvent.eventType = EventTypes.LEAVE;
-          this.onPointerLeave(adaptedEvent);
-          this.markAsOutOfBounds(adaptedEvent.pointerId);
-        } else {
-          this.onPointerOutOfBounds(adaptedEvent);
-        }
-      }
-
-      lastPosition.x = event.x;
-      lastPosition.y = event.y;
-    });
-
-    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(
-        event,
-        EventTypes.CANCEL
-      );
+  private lostPointerCaptureCallback = (event: PointerEvent) => {
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.CANCEL);
 
+    if (this.trackedPointers.has(adaptedEvent.pointerId)) {
+      // in some cases the `pointerup` event is not fired, but `lostpointercapture` is
+      // we simulate the `pointercancel` event here to make sure the gesture handler stops tracking it
       this.onPointerCancel(adaptedEvent);
-      this.markAsOutOfBounds(adaptedEvent.pointerId);
+
       this.activePointersCounter = 0;
       this.trackedPointers.clear();
-    });
+    }
+  };
+
+  public registerListeners(): void {
+    this.view.addEventListener('pointerdown', this.pointerDownCallback);
+    this.view.addEventListener('pointerup', this.pointerUpCallback);
+    this.view.addEventListener('pointermove', this.pointerMoveCallback);
+    this.view.addEventListener('pointercancel', this.pointerCancelCallback);
 
     // onPointerEnter and onPointerLeave are triggered by a custom logic responsible for
     // handling shouldCancelWhenOutside flag, and are unreliable unless the pointer is down.
     // We therefore use pointerenter and pointerleave events to handle the hover gesture,
     // mapping them to onPointerMoveOver and onPointerMoveOut respectively.
-
-    this.view.addEventListener('pointerenter', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
-
-      this.onPointerMoveOver(adaptedEvent);
-    });
-
-    this.view.addEventListener('pointerleave', (event: PointerEvent): void => {
-      if (event.pointerType === PointerTypes.Touch) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
-
-      this.onPointerMoveOut(adaptedEvent);
-    });
-
+    this.view.addEventListener('pointerenter', this.pointerEnterCallback);
+    this.view.addEventListener('pointerleave', this.pointerLeaveCallback);
     this.view.addEventListener(
       'lostpointercapture',
-      (event: PointerEvent): void => {
-        const adaptedEvent: AdaptedEvent = this.mapEvent(
-          event,
-          EventTypes.CANCEL
-        );
-
-        if (this.trackedPointers.has(adaptedEvent.pointerId)) {
-          // in some cases the `pointerup` event is not fired, but `lostpointercapture` is
-          // we simulate the `pointercancel` event here to make sure the gesture handler stops tracking it
-          this.onPointerCancel(adaptedEvent);
-
-          this.activePointersCounter = 0;
-          this.trackedPointers.clear();
-        }
-      }
+      this.lostPointerCaptureCallback
+    );
+  }
+
+  public unregisterListeners(): void {
+    this.view.removeEventListener('pointerdown', this.pointerDownCallback);
+    this.view.removeEventListener('pointerup', this.pointerUpCallback);
+    this.view.removeEventListener('pointermove', this.pointerMoveCallback);
+    this.view.removeEventListener('pointercancel', this.pointerCancelCallback);
+    this.view.removeEventListener('pointerenter', this.pointerEnterCallback);
+    this.view.removeEventListener('pointerleave', this.pointerLeaveCallback);
+    this.view.removeEventListener(
+      'lostpointercapture',
+      this.lostPointerCaptureCallback
     );
   }
 

package/src/web/tools/TouchEventManager.ts

@@ -4,134 +4,146 @@ import { isPointerInBounds } from '../utils';
 import { PointerType } from '../../PointerType';
 
 export default class TouchEventManager extends EventManager<HTMLElement> {
-  public setListeners(): void {
-    this.view.addEventListener('touchstart', (event: TouchEvent) => {
-      for (let i = 0; i < event.changedTouches.length; ++i) {
-        const adaptedEvent: AdaptedEvent = this.mapEvent(
-          event,
-          EventTypes.DOWN,
-          i,
-          TouchEventType.DOWN
-        );
-
-        // Here we skip stylus, because in case of anything different than touch we want to handle it by using PointerEvents
-        // If we leave stylus to send touch events, handlers will receive every action twice
-        if (
-          !isPointerInBounds(this.view, {
-            x: adaptedEvent.x,
-            y: adaptedEvent.y,
-          }) ||
-          //@ts-ignore touchType field does exist
-          event.changedTouches[i].touchType === 'stylus'
-        ) {
-          continue;
-        }
-
-        this.markAsInBounds(adaptedEvent.pointerId);
-
-        if (++this.activePointersCounter > 1) {
-          adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
-          this.onPointerAdd(adaptedEvent);
-        } else {
-          this.onPointerDown(adaptedEvent);
-        }
-      }
-    });
-
-    this.view.addEventListener('touchmove', (event: TouchEvent) => {
-      for (let i = 0; i < event.changedTouches.length; ++i) {
-        const adaptedEvent: AdaptedEvent = this.mapEvent(
-          event,
-          EventTypes.MOVE,
-          i,
-          TouchEventType.MOVE
-        );
-        //@ts-ignore touchType field does exist
-        if (event.changedTouches[i].touchType === 'stylus') {
-          continue;
-        }
-
-        const inBounds: boolean = isPointerInBounds(this.view, {
+  private touchStartCallback = (event: TouchEvent): void => {
+    for (let i = 0; i < event.changedTouches.length; ++i) {
+      const adaptedEvent: AdaptedEvent = this.mapEvent(
+        event,
+        EventTypes.DOWN,
+        i,
+        TouchEventType.DOWN
+      );
+
+      // Here we skip stylus, because in case of anything different than touch we want to handle it by using PointerEvents
+      // If we leave stylus to send touch events, handlers will receive every action twice
+      if (
+        !isPointerInBounds(this.view, {
           x: adaptedEvent.x,
           y: adaptedEvent.y,
-        });
-
-        const pointerIndex: number = this.pointersInBounds.indexOf(
-          adaptedEvent.pointerId
-        );
-
-        if (inBounds) {
-          if (pointerIndex < 0) {
-            adaptedEvent.eventType = EventTypes.ENTER;
-            this.onPointerEnter(adaptedEvent);
-            this.markAsInBounds(adaptedEvent.pointerId);
-          } else {
-            this.onPointerMove(adaptedEvent);
-          }
-        } else {
-          if (pointerIndex >= 0) {
-            adaptedEvent.eventType = EventTypes.LEAVE;
-            this.onPointerLeave(adaptedEvent);
-            this.markAsOutOfBounds(adaptedEvent.pointerId);
-          } else {
-            this.onPointerOutOfBounds(adaptedEvent);
-          }
-        }
+        }) ||
+        //@ts-ignore touchType field does exist
+        event.changedTouches[i].touchType === 'stylus'
+      ) {
+        continue;
       }
-    });
-
-    this.view.addEventListener('touchend', (event: TouchEvent) => {
-      for (let i = 0; i < event.changedTouches.length; ++i) {
-        // When we call reset on gesture handlers, it also resets their event managers
-        // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
-        // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
-        // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
-        if (this.activePointersCounter === 0) {
-          break;
-        }
 
-        //@ts-ignore touchType field does exist
-        if (event.changedTouches[i].touchType === 'stylus') {
-          continue;
-        }
+      this.markAsInBounds(adaptedEvent.pointerId);
 
-        const adaptedEvent: AdaptedEvent = this.mapEvent(
-          event,
-          EventTypes.UP,
-          i,
-          TouchEventType.UP
-        );
+      if (++this.activePointersCounter > 1) {
+        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+        this.onPointerAdd(adaptedEvent);
+      } else {
+        this.onPointerDown(adaptedEvent);
+      }
+    }
+  };
+
+  private touchMoveCallback = (event: TouchEvent): void => {
+    for (let i = 0; i < event.changedTouches.length; ++i) {
+      const adaptedEvent: AdaptedEvent = this.mapEvent(
+        event,
+        EventTypes.MOVE,
+        i,
+        TouchEventType.MOVE
+      );
+      //@ts-ignore touchType field does exist
+      if (event.changedTouches[i].touchType === 'stylus') {
+        continue;
+      }
 
-        this.markAsOutOfBounds(adaptedEvent.pointerId);
+      const inBounds: boolean = isPointerInBounds(this.view, {
+        x: adaptedEvent.x,
+        y: adaptedEvent.y,
+      });
 
-        if (--this.activePointersCounter > 0) {
-          adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
-          this.onPointerRemove(adaptedEvent);
+      const pointerIndex: number = this.pointersInBounds.indexOf(
+        adaptedEvent.pointerId
+      );
+
+      if (inBounds) {
+        if (pointerIndex < 0) {
+          adaptedEvent.eventType = EventTypes.ENTER;
+          this.onPointerEnter(adaptedEvent);
+          this.markAsInBounds(adaptedEvent.pointerId);
         } else {
-          this.onPointerUp(adaptedEvent);
+          this.onPointerMove(adaptedEvent);
         }
+      } else {
+        if (pointerIndex >= 0) {
+          adaptedEvent.eventType = EventTypes.LEAVE;
+          this.onPointerLeave(adaptedEvent);
+          this.markAsOutOfBounds(adaptedEvent.pointerId);
+        } else {
+          this.onPointerOutOfBounds(adaptedEvent);
+        }
+      }
+    }
+  };
+
+  private touchEndCallback = (event: TouchEvent): void => {
+    for (let i = 0; i < event.changedTouches.length; ++i) {
+      // When we call reset on gesture handlers, it also resets their event managers
+      // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
+      // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
+      // Removing them will end in activePointersCounter going below 0, therefore handlers won't behave properly
+      if (this.activePointersCounter === 0) {
+        break;
+      }
+
+      //@ts-ignore touchType field does exist
+      if (event.changedTouches[i].touchType === 'stylus') {
+        continue;
       }
-    });
 
-    this.view.addEventListener('touchcancel', (event: TouchEvent) => {
-      for (let i = 0; i < event.changedTouches.length; ++i) {
-        const adaptedEvent: AdaptedEvent = this.mapEvent(
-          event,
-          EventTypes.CANCEL,
-          i,
-          TouchEventType.CANCELLED
-        );
+      const adaptedEvent: AdaptedEvent = this.mapEvent(
+        event,
+        EventTypes.UP,
+        i,
+        TouchEventType.UP
+      );
 
-        //@ts-ignore touchType field does exist
-        if (event.changedTouches[i].touchType === 'stylus') {
-          continue;
-        }
+      this.markAsOutOfBounds(adaptedEvent.pointerId);
 
-        this.onPointerCancel(adaptedEvent);
-        this.markAsOutOfBounds(adaptedEvent.pointerId);
-        this.activePointersCounter = 0;
+      if (--this.activePointersCounter > 0) {
+        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+        this.onPointerRemove(adaptedEvent);
+      } else {
+        this.onPointerUp(adaptedEvent);
+      }
+    }
+  };
+
+  private touchCancelCallback = (event: TouchEvent): void => {
+    for (let i = 0; i < event.changedTouches.length; ++i) {
+      const adaptedEvent: AdaptedEvent = this.mapEvent(
+        event,
+        EventTypes.CANCEL,
+        i,
+        TouchEventType.CANCELLED
+      );
+
+      //@ts-ignore touchType field does exist
+      if (event.changedTouches[i].touchType === 'stylus') {
+        continue;
       }
-    });
+
+      this.onPointerCancel(adaptedEvent);
+      this.markAsOutOfBounds(adaptedEvent.pointerId);
+      this.activePointersCounter = 0;
+    }
+  };
+
+  public registerListeners(): void {
+    this.view.addEventListener('touchstart', this.touchStartCallback);
+    this.view.addEventListener('touchmove', this.touchMoveCallback);
+    this.view.addEventListener('touchend', this.touchEndCallback);
+    this.view.addEventListener('touchcancel', this.touchCancelCallback);
+  }
+
+  public unregisterListeners(): void {
+    this.view.removeEventListener('touchstart', this.touchStartCallback);
+    this.view.removeEventListener('touchmove', this.touchMoveCallback);
+    this.view.removeEventListener('touchend', this.touchEndCallback);
+    this.view.removeEventListener('touchcancel', this.touchCancelCallback);
   }
 
   protected mapEvent(