@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0

package/src/web/tools/PointerEventManager.ts

@@ -1,188 +1,221 @@
-import { AdaptedEvent, EventTypes, PointerType } from '../interfaces';
 import EventManager from './EventManager';
-import { isPointerInBounds } from '../utils';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import { AdaptedEvent, EventTypes, Point } from '../interfaces';
+import {
+  PointerTypeMapping,
+  calculateViewScale,
+  tryExtractStylusData,
+  isPointerInBounds,
+} from '../utils';
+import { PointerType } from '../../PointerType';
+
+const POINTER_CAPTURE_EXCLUDE_LIST = new Set<string>(['SELECT', 'INPUT']);
 
 export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
+  private readonly mouseButtonsMapper = new Map<number, MouseButton>();
+  private lastPosition: Point;
 
-  public setListeners(): void {
-    this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
-        return;
-      }
-      if (
-        !isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })
-      ) {
-        return;
-      }
+  constructor(view: HTMLElement) {
+    super(view);
+
+    this.mouseButtonsMapper.set(0, MouseButton.LEFT);
+    this.mouseButtonsMapper.set(1, MouseButton.MIDDLE);
+    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,
+    };
+  }
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
-      const target = event.target as HTMLElement;
+  private pointerDownCallback = (event: PointerEvent) => {
+    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);
+    }
+
+    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) => {
+    // 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) => {
+    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,
+    });
 
-      if (++this.activePointersCounter > 1) {
-        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
-        this.onPointerAdd(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.onPointerDown(adaptedEvent);
+        this.onPointerMove(adaptedEvent);
       }
-    });
-
-    this.view.addEventListener('pointerup', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
-        return;
+    } else {
+      if (pointerIndex >= 0) {
+        adaptedEvent.eventType = EventTypes.LEAVE;
+        this.onPointerLeave(adaptedEvent);
+        this.markAsOutOfBounds(adaptedEvent.pointerId);
+      } else {
+        this.onPointerOutOfBounds(adaptedEvent);
       }
+    }
 
-      // 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;
-      }
+    this.lastPosition.x = event.x;
+    this.lastPosition.y = event.y;
+  };
 
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
-      const target = event.target as HTMLElement;
+  private pointerCancelCallback = (event: PointerEvent) => {
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.CANCEL);
 
-      target.releasePointerCapture(adaptedEvent.pointerId);
-      this.markAsOutOfBounds(adaptedEvent.pointerId);
-      this.trackedPointers.delete(adaptedEvent.pointerId);
+    this.onPointerCancel(adaptedEvent);
+    this.markAsOutOfBounds(adaptedEvent.pointerId);
+    this.activePointersCounter = 0;
+    this.trackedPointers.clear();
+  };
 
-      if (--this.activePointersCounter > 0) {
-        adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
-        this.onPointerRemove(adaptedEvent);
-      } else {
-        this.onPointerUp(adaptedEvent);
-      }
-    });
+  private pointerEnterCallback = (event: PointerEvent) => {
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
 
-    this.view.addEventListener('pointermove', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
-        return;
-      }
+    this.onPointerMoveOver(adaptedEvent);
+  };
 
-      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)) {
-        target.setPointerCapture(event.pointerId);
-      }
+  private pointerLeaveCallback = (event: PointerEvent) => {
+    const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
-      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);
-        }
-      }
-    });
-
-    this.view.addEventListener('pointercancel', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.TOUCH) {
-        return;
-      }
+    this.onPointerMoveOut(adaptedEvent);
+  };
 
-      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.
+      // Here we simulate the `pointercancel` event 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 === PointerType.TOUCH) {
-        return;
-      }
-
-      const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
-
-      this.onPointerMoveOver(adaptedEvent);
-    });
-
-    this.view.addEventListener('pointerleave', (event: PointerEvent): void => {
-      if (event.pointerType === PointerType.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
     );
   }
 
   protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
+    const rect = this.view.getBoundingClientRect();
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
     return {
       x: event.clientX,
       y: event.clientY,
-      offsetX: event.offsetX,
-      offsetY: event.offsetY,
+      offsetX: (event.clientX - rect.left) / scaleX,
+      offsetY: (event.clientY - rect.top) / scaleY,
       pointerId: event.pointerId,
       eventType: eventType,
-      pointerType: event.pointerType as PointerType,
-      buttons: event.buttons,
+      pointerType:
+        PointerTypeMapping.get(event.pointerType) ?? PointerType.OTHER,
+      button: this.mouseButtonsMapper.get(event.button),
       time: event.timeStamp,
+      stylusData: tryExtractStylusData(event),
     };
   }
 

package/src/web/tools/PointerTracker.ts

@@ -1,12 +1,10 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Point } from '../interfaces';
 import VelocityTracker from './VelocityTracker';
 
 export interface TrackerElement {
-  lastX: number;
-  lastY: number;
-
-  timeStamp: number;
-
+  abosoluteCoords: Point;
+  relativeCoords: Point;
+  timestamp: number;
   velocityX: number;
   velocityY: number;
 }
@@ -15,7 +13,7 @@ const MAX_POINTERS = 20;
 
 export default class PointerTracker {
   private velocityTracker = new VelocityTracker();
-  private trackedPointers: Map<number, TrackerElement> = new Map<
+  private readonly _trackedPointers: Map<number, TrackerElement> = new Map<
     number,
     TrackerElement
   >();
@@ -24,7 +22,8 @@ export default class PointerTracker {
 
   private lastMovedPointerId: number;
 
-  private cachedAverages: { x: number; y: number } = { x: 0, y: 0 };
+  private cachedAbsoluteAverages: Point = { x: 0, y: 0 };
+  private cachedRelativeAverages: Point = { x: 0, y: 0 };
 
   public constructor() {
     this.lastMovedPointerId = NaN;
@@ -42,9 +41,9 @@ export default class PointerTracker {
     this.lastMovedPointerId = event.pointerId;
 
     const newElement: TrackerElement = {
-      lastX: event.x,
-      lastY: event.y,
-      timeStamp: event.time,
+      abosoluteCoords: { x: event.x, y: event.y },
+      relativeCoords: { x: event.offsetX, y: event.offsetY },
+      timestamp: event.time,
       velocityX: 0,
       velocityY: 0,
     };
@@ -52,10 +51,8 @@ export default class PointerTracker {
     this.trackedPointers.set(event.pointerId, newElement);
     this.mapTouchEventId(event.pointerId);
 
-    this.cachedAverages = {
-      x: this.getLastAvgX(),
-      y: this.getLastAvgY(),
-    };
+    this.cachedAbsoluteAverages = this.getAbsoluteCoordsAverage();
+    this.cachedRelativeAverages = this.getRelativeCoordsAverage();
   }
 
   public removeFromTracker(pointerId: number): void {
@@ -64,37 +61,30 @@ export default class PointerTracker {
   }
 
   public track(event: AdaptedEvent): void {
-    const element: TrackerElement = this.trackedPointers.get(
-      event.pointerId
-    ) as TrackerElement;
+    const pointerData = this.trackedPointers.get(event.pointerId);
 
-    if (!element) {
+    if (!pointerData) {
       return;
     }
 
     this.lastMovedPointerId = event.pointerId;
 
     this.velocityTracker.add(event);
-    const [velocityX, velocityY] = this.velocityTracker.getVelocity();
-
-    element.velocityX = velocityX;
-    element.velocityY = velocityY;
+    const [velocityX, velocityY] = this.velocityTracker.velocity;
 
-    element.lastX = event.x;
-    element.lastY = event.y;
+    pointerData.velocityX = velocityX;
+    pointerData.velocityY = velocityY;
 
-    this.trackedPointers.set(event.pointerId, element);
+    pointerData.abosoluteCoords = { x: event.x, y: event.y };
+    pointerData.relativeCoords = { x: event.offsetX, y: event.offsetY };
 
-    const avgX: number = this.getLastAvgX();
-    const avgY: number = this.getLastAvgY();
+    this.trackedPointers.set(event.pointerId, pointerData);
 
-    this.cachedAverages = {
-      x: avgX,
-      y: avgY,
-    };
+    this.cachedAbsoluteAverages = this.getAbsoluteCoordsAverage();
+    this.cachedRelativeAverages = this.getRelativeCoordsAverage();
   }
 
-  //Mapping TouchEvents ID
+  // Mapping TouchEvents ID
   private mapTouchEventId(id: number): void {
     for (const [mappedId, touchId] of this.touchEventsIds) {
       if (isNaN(touchId)) {
@@ -121,104 +111,84 @@ export default class PointerTracker {
     return NaN;
   }
 
-  public getVelocityX(pointerId: number): number {
-    return this.trackedPointers.get(pointerId)?.velocityX as number;
-  }
-  public getVelocityY(pointerId: number): number {
-    return this.trackedPointers.get(pointerId)?.velocityY as number;
-  }
+  public getVelocity(pointerId: number) {
+    const pointerData = this.trackedPointers.get(pointerId);
 
-  /**
-   * Returns X coordinate of last moved pointer
-   */
-  public getLastX(): number;
-
-  /**
-   *
-   * @param pointerId
-   * Returns X coordinate of given pointer
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  public getLastX(pointerId: number): number;
+    return pointerData
+      ? {
+          x: pointerData.velocityX,
+          y: pointerData.velocityY,
+        }
+      : null;
+  }
 
-  public getLastX(pointerId?: number): number {
-    if (pointerId !== undefined) {
-      return this.trackedPointers.get(pointerId)?.lastX as number;
-    } else {
-      return this.trackedPointers.get(this.lastMovedPointerId)?.lastX as number;
-    }
+  public getLastAbsoluteCoords(pointerId?: number) {
+    return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
+      ?.abosoluteCoords;
   }
 
-  /**
-   * Returns Y coordinate of last moved pointer
-   */
-  public getLastY(): number;
-
-  /**
-   *
-   * @param pointerId
-   * Returns Y coordinate of given pointer
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  public getLastY(pointerId: number): number;
-
-  public getLastY(pointerId?: number): number {
-    if (pointerId !== undefined) {
-      return this.trackedPointers.get(pointerId)?.lastY as number;
-    } else {
-      return this.trackedPointers.get(this.lastMovedPointerId)?.lastY as number;
-    }
+  public getLastRelativeCoords(pointerId?: number) {
+    return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
+      ?.relativeCoords;
   }
 
   // Some handlers use these methods to send average values in native event.
   // This may happen when pointers have already been removed from tracker (i.e. pointerup event).
   // In situation when NaN would be sent as a response, we return cached value.
   // That prevents handlers from crashing
-  public getLastAvgX(): number {
-    const avgX: number = this.getSumX() / this.trackedPointers.size;
-    return isNaN(avgX) ? this.cachedAverages.x : avgX;
+
+  public getAbsoluteCoordsAverage() {
+    const coordsSum = this.getAbsoluteCoordsSum();
+
+    const avgX = coordsSum.x / this.trackedPointers.size;
+    const avgY = coordsSum.y / this.trackedPointers.size;
+
+    const averages = {
+      x: isNaN(avgX) ? this.cachedAbsoluteAverages.x : avgX,
+      y: isNaN(avgY) ? this.cachedAbsoluteAverages.y : avgY,
+    };
+
+    return averages;
   }
-  public getLastAvgY(): number {
-    const avgY: number = this.getSumY() / this.trackedPointers.size;
-    return isNaN(avgY) ? this.cachedAverages.y : avgY;
+
+  public getRelativeCoordsAverage() {
+    const coordsSum = this.getRelativeCoordsSum();
+
+    const avgX = coordsSum.x / this.trackedPointers.size;
+    const avgY = coordsSum.y / this.trackedPointers.size;
+
+    const averages = {
+      x: isNaN(avgX) ? this.cachedRelativeAverages.x : avgX,
+      y: isNaN(avgY) ? this.cachedRelativeAverages.y : avgY,
+    };
+
+    return averages;
   }
-  public getSumX(ignoredPointer?: number): number {
-    let sumX = 0;
+
+  public getAbsoluteCoordsSum(ignoredPointer?: number) {
+    const sum = { x: 0, y: 0 };
 
     this.trackedPointers.forEach((value, key) => {
       if (key !== ignoredPointer) {
-        sumX += value.lastX;
+        sum.x += value.abosoluteCoords.x;
+        sum.y += value.abosoluteCoords.y;
       }
     });
 
-    return sumX;
+    return sum;
   }
-  public getSumY(ignoredPointer?: number): number {
-    let sumY = 0;
+
+  public getRelativeCoordsSum(ignoredPointer?: number) {
+    const sum = { x: 0, y: 0 };
 
     this.trackedPointers.forEach((value, key) => {
       if (key !== ignoredPointer) {
-        sumY += value.lastY;
+        sum.x += value.relativeCoords.x;
+        sum.y += value.relativeCoords.y;
       }
     });
 
-    return sumY;
-  }
-  public getTrackedPointersCount(): number {
-    return this.trackedPointers.size;
-  }
-  public getTrackedPointersID(): number[] {
-    const keys: number[] = [];
-
-    this.trackedPointers.forEach((_value, key) => {
-      keys.push(key);
-    });
-
-    return keys;
-  }
-
-  public getData(): Map<number, TrackerElement> {
-    return this.trackedPointers;
+    return sum;
   }
 
   public resetTracker(): void {
@@ -237,4 +207,22 @@ export default class PointerTracker {
   ): boolean {
     return stPointers.some((pointerId) => ndPointers.includes(pointerId));
   }
+
+  public get trackedPointersCount(): number {
+    return this.trackedPointers.size;
+  }
+
+  public get trackedPointersIDs() {
+    const keys: number[] = [];
+
+    this.trackedPointers.forEach((_value, key) => {
+      keys.push(key);
+    });
+
+    return keys;
+  }
+
+  public get trackedPointers() {
+    return this._trackedPointers;
+  }
 }