react-native-gesture-handler 2.16.1 → 2.17.0

package/src/handlers/gestures/GestureDetector/useAnimatedGesture.ts

@@ -0,0 +1,206 @@
+import { HandlerCallbacks, CALLBACK_TYPE } from '../gesture';
+import { Reanimated } from '../reanimatedWrapper';
+import {
+  GestureTouchEvent,
+  GestureUpdateEvent,
+  GestureStateChangeEvent,
+} from '../../gestureHandlerCommon';
+import {
+  GestureStateManager,
+  GestureStateManagerType,
+} from '../gestureStateManager';
+import { State } from '../../../State';
+import { TouchEventType } from '../../../TouchEventType';
+import { tagMessage } from '../../../utils';
+import { AttachedGestureState } from './types';
+
+function getHandler(
+  type: CALLBACK_TYPE,
+  gesture: HandlerCallbacks<Record<string, unknown>>
+) {
+  'worklet';
+  switch (type) {
+    case CALLBACK_TYPE.BEGAN:
+      return gesture.onBegin;
+    case CALLBACK_TYPE.START:
+      return gesture.onStart;
+    case CALLBACK_TYPE.UPDATE:
+      return gesture.onUpdate;
+    case CALLBACK_TYPE.CHANGE:
+      return gesture.onChange;
+    case CALLBACK_TYPE.END:
+      return gesture.onEnd;
+    case CALLBACK_TYPE.FINALIZE:
+      return gesture.onFinalize;
+    case CALLBACK_TYPE.TOUCHES_DOWN:
+      return gesture.onTouchesDown;
+    case CALLBACK_TYPE.TOUCHES_MOVE:
+      return gesture.onTouchesMove;
+    case CALLBACK_TYPE.TOUCHES_UP:
+      return gesture.onTouchesUp;
+    case CALLBACK_TYPE.TOUCHES_CANCELLED:
+      return gesture.onTouchesCancelled;
+  }
+}
+
+function touchEventTypeToCallbackType(
+  eventType: TouchEventType
+): CALLBACK_TYPE {
+  'worklet';
+  switch (eventType) {
+    case TouchEventType.TOUCHES_DOWN:
+      return CALLBACK_TYPE.TOUCHES_DOWN;
+    case TouchEventType.TOUCHES_MOVE:
+      return CALLBACK_TYPE.TOUCHES_MOVE;
+    case TouchEventType.TOUCHES_UP:
+      return CALLBACK_TYPE.TOUCHES_UP;
+    case TouchEventType.TOUCHES_CANCELLED:
+      return CALLBACK_TYPE.TOUCHES_CANCELLED;
+  }
+  return CALLBACK_TYPE.UNDEFINED;
+}
+
+function runWorklet(
+  type: CALLBACK_TYPE,
+  gesture: HandlerCallbacks<Record<string, unknown>>,
+  event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
+  ...args: unknown[]
+) {
+  'worklet';
+  const handler = getHandler(type, gesture);
+  if (gesture.isWorklet[type]) {
+    // @ts-ignore Logic below makes sure the correct event is send to the
+    // correct handler.
+    handler?.(event, ...args);
+  } else if (handler) {
+    console.warn(tagMessage('Animated gesture callback must be a worklet'));
+  }
+}
+
+function isStateChangeEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureStateChangeEvent {
+  'worklet';
+  // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
+  return event.oldState != null;
+}
+
+function isTouchEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureTouchEvent {
+  'worklet';
+  return event.eventType != null;
+}
+
+export function useAnimatedGesture(
+  preparedGesture: AttachedGestureState,
+  needsRebuild: boolean
+) {
+  if (!Reanimated) {
+    return;
+  }
+
+  // Hooks are called conditionally, but the condition is whether the
+  // react-native-reanimated is installed, which shouldn't change while running
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const sharedHandlersCallbacks = Reanimated.useSharedValue<
+    HandlerCallbacks<Record<string, unknown>>[] | null
+  >(null);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const lastUpdateEvent = Reanimated.useSharedValue<
+    (GestureUpdateEvent | undefined)[]
+  >([]);
+
+  // not every gesture needs a state controller, init them lazily
+  const stateControllers: GestureStateManagerType[] = [];
+
+  const callback = (
+    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent
+  ) => {
+    'worklet';
+
+    const currentCallback = sharedHandlersCallbacks.value;
+    if (!currentCallback) {
+      return;
+    }
+
+    for (let i = 0; i < currentCallback.length; i++) {
+      const gesture = currentCallback[i];
+
+      if (event.handlerTag !== gesture.handlerTag) {
+        continue;
+      }
+
+      if (isStateChangeEvent(event)) {
+        if (
+          event.oldState === State.UNDETERMINED &&
+          event.state === State.BEGAN
+        ) {
+          runWorklet(CALLBACK_TYPE.BEGAN, gesture, event);
+        } else if (
+          (event.oldState === State.BEGAN ||
+            event.oldState === State.UNDETERMINED) &&
+          event.state === State.ACTIVE
+        ) {
+          runWorklet(CALLBACK_TYPE.START, gesture, event);
+          lastUpdateEvent.value[gesture.handlerTag] = undefined;
+        } else if (
+          event.oldState !== event.state &&
+          event.state === State.END
+        ) {
+          if (event.oldState === State.ACTIVE) {
+            runWorklet(CALLBACK_TYPE.END, gesture, event, true);
+          }
+          runWorklet(CALLBACK_TYPE.FINALIZE, gesture, event, true);
+        } else if (
+          (event.state === State.FAILED || event.state === State.CANCELLED) &&
+          event.state !== event.oldState
+        ) {
+          if (event.oldState === State.ACTIVE) {
+            runWorklet(CALLBACK_TYPE.END, gesture, event, false);
+          }
+          runWorklet(CALLBACK_TYPE.FINALIZE, gesture, event, false);
+        }
+      } else if (isTouchEvent(event)) {
+        if (!stateControllers[i]) {
+          stateControllers[i] = GestureStateManager.create(event.handlerTag);
+        }
+
+        if (event.eventType !== TouchEventType.UNDETERMINED) {
+          runWorklet(
+            touchEventTypeToCallbackType(event.eventType),
+            gesture,
+            event,
+            stateControllers[i]
+          );
+        }
+      } else {
+        runWorklet(CALLBACK_TYPE.UPDATE, gesture, event);
+
+        if (gesture.onChange && gesture.changeEventCalculator) {
+          runWorklet(
+            CALLBACK_TYPE.CHANGE,
+            gesture,
+            gesture.changeEventCalculator?.(
+              event,
+              lastUpdateEvent.value[gesture.handlerTag]
+            )
+          );
+
+          lastUpdateEvent.value[gesture.handlerTag] = event;
+        }
+      }
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const event = Reanimated.useEvent(
+    callback,
+    ['onGestureHandlerStateChange', 'onGestureHandlerEvent'],
+    needsRebuild
+  );
+
+  preparedGesture.animatedEventHandler = event;
+  preparedGesture.animatedHandlers = sharedHandlersCallbacks;
+}

package/src/handlers/gestures/GestureDetector/useDetectorUpdater.ts

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import { findNodeHandle } from 'react-native';
+import { GestureType } from '../gesture';
+import { ComposedGesture } from '../gestureComposition';
+
+import {
+  AttachedGestureState,
+  GestureDetectorState,
+  WebEventHandler,
+} from './types';
+import { attachHandlers } from './attachHandlers';
+import { updateHandlers } from './updateHandlers';
+import { needsToReattach } from './needsToReattach';
+import { dropHandlers } from './dropHandlers';
+import { useForceRender, validateDetectorChildren } from './utils';
+
+// Returns a function that's responsible for updating the attached gestures
+// If the view has changed, it will reattach the handlers to the new view
+// If the view remains the same, it will update the handlers with the new config
+export function useDetectorUpdater(
+  state: GestureDetectorState,
+  preparedGesture: AttachedGestureState,
+  gesturesToAttach: GestureType[],
+  gestureConfig: ComposedGesture | GestureType,
+  webEventHandlersRef: React.RefObject<WebEventHandler>
+) {
+  const forceRender = useForceRender();
+  const updateAttachedGestures = useCallback(
+    // skipConfigUpdate is used to prevent unnecessary updates when only checking if the view has changed
+    (skipConfigUpdate?: boolean) => {
+      // if the underlying view has changed we need to reattach handlers to the new view
+      const viewTag = findNodeHandle(state.viewRef) as number;
+      const didUnderlyingViewChange = viewTag !== state.previousViewTag;
+
+      if (
+        didUnderlyingViewChange ||
+        needsToReattach(preparedGesture, gesturesToAttach)
+      ) {
+        validateDetectorChildren(state.viewRef);
+        dropHandlers(preparedGesture);
+        attachHandlers({
+          preparedGesture,
+          gestureConfig,
+          gesturesToAttach,
+          webEventHandlersRef,
+          viewTag,
+        });
+
+        if (didUnderlyingViewChange) {
+          state.previousViewTag = viewTag;
+          state.forceRebuildReanimatedEvent = true;
+          forceRender();
+        }
+      } else if (!skipConfigUpdate) {
+        updateHandlers(preparedGesture, gestureConfig, gesturesToAttach);
+      }
+    },
+    [
+      forceRender,
+      gestureConfig,
+      gesturesToAttach,
+      preparedGesture,
+      state,
+      webEventHandlersRef,
+    ]
+  );
+
+  return updateAttachedGestures;
+}

package/src/handlers/gestures/GestureDetector/useViewRefHandler.ts

@@ -0,0 +1,54 @@
+import { isFabric, tagMessage } from '../../../utils';
+import { getShadowNodeFromRef } from '../../../getShadowNodeFromRef';
+
+import { GestureDetectorState } from './types';
+import React, { useCallback } from 'react';
+import { findNodeHandle } from 'react-native';
+
+declare const global: {
+  isFormsStackingContext: (node: unknown) => boolean | null; // JSI function
+};
+
+// Ref handler for the Wrap component attached under the GestureDetector.
+// It's responsible for setting the viewRef on the state and triggering the reattaching of handlers
+// if the view has changed.
+export function useViewRefHandler(
+  state: GestureDetectorState,
+  updateAttachedGestures: (skipConfigUpdate?: boolean) => void
+) {
+  const refHandler = useCallback(
+    (ref: React.Component | null) => {
+      if (ref === null) {
+        return;
+      }
+
+      state.viewRef = ref;
+
+      // if it's the first render, also set the previousViewTag to prevent reattaching gestures when not needed
+      if (state.previousViewTag === -1) {
+        state.previousViewTag = findNodeHandle(state.viewRef) as number;
+      }
+
+      // Pass true as `skipConfigUpdate`. Here we only want to trigger the eventual reattaching of handlers
+      // in case the view has changed. If the view doesn't change, the update will be handled by detector.
+      if (!state.firstRender) {
+        updateAttachedGestures(true);
+      }
+
+      if (__DEV__ && isFabric() && global.isFormsStackingContext) {
+        const node = getShadowNodeFromRef(ref);
+        if (global.isFormsStackingContext(node) === false) {
+          console.error(
+            tagMessage(
+              'GestureDetector has received a child that may get view-flattened. ' +
+                '\nTo prevent it from misbehaving you need to wrap the child with a `<View collapsable={false}>`.'
+            )
+          );
+        }
+      }
+    },
+    [state, updateAttachedGestures]
+  );
+
+  return refHandler;
+}

package/src/handlers/gestures/GestureDetector/utils.ts

@@ -0,0 +1,185 @@
+import { Platform } from 'react-native';
+
+import { tagMessage } from '../../../utils';
+import { GestureRef, BaseGesture, GestureType } from '../gesture';
+
+import { flingGestureHandlerProps } from '../../FlingGestureHandler';
+import { forceTouchGestureHandlerProps } from '../../ForceTouchGestureHandler';
+import { longPressGestureHandlerProps } from '../../LongPressGestureHandler';
+import {
+  panGestureHandlerProps,
+  panGestureHandlerCustomNativeProps,
+} from '../../PanGestureHandler';
+import { tapGestureHandlerProps } from '../../TapGestureHandler';
+import { hoverGestureHandlerProps } from '../hoverGesture';
+import { nativeViewGestureHandlerProps } from '../../NativeViewGestureHandler';
+import {
+  HandlerStateChangeEvent,
+  baseGestureHandlerWithDetectorProps,
+} from '../../gestureHandlerCommon';
+import { isNewWebImplementationEnabled } from '../../../EnableNewWebImplementation';
+import { getReactNativeVersion } from '../../../getReactNativeVersion';
+import { RNRenderer } from '../../../RNRenderer';
+import { useCallback, useRef, useState } from 'react';
+import { Reanimated } from '../reanimatedWrapper';
+import { onGestureHandlerEvent } from '../eventReceiver';
+import { WebEventHandler } from './types';
+
+export const ALLOWED_PROPS = [
+  ...baseGestureHandlerWithDetectorProps,
+  ...tapGestureHandlerProps,
+  ...panGestureHandlerProps,
+  ...panGestureHandlerCustomNativeProps,
+  ...longPressGestureHandlerProps,
+  ...forceTouchGestureHandlerProps,
+  ...flingGestureHandlerProps,
+  ...hoverGestureHandlerProps,
+  ...nativeViewGestureHandlerProps,
+];
+
+function convertToHandlerTag(ref: GestureRef): number {
+  if (typeof ref === 'number') {
+    return ref;
+  } else if (ref instanceof BaseGesture) {
+    return ref.handlerTag;
+  } else {
+    // @ts-ignore in this case it should be a ref either to gesture object or
+    // a gesture handler component, in both cases handlerTag property exists
+    return ref.current?.handlerTag ?? -1;
+  }
+}
+
+function extractValidHandlerTags(interactionGroup: GestureRef[] | undefined) {
+  return (
+    interactionGroup?.map(convertToHandlerTag)?.filter((tag) => tag > 0) ?? []
+  );
+}
+
+export function extractGestureRelations(gesture: GestureType) {
+  const requireToFail = extractValidHandlerTags(gesture.config.requireToFail);
+  const simultaneousWith = extractValidHandlerTags(
+    gesture.config.simultaneousWith
+  );
+  const blocksHandlers = extractValidHandlerTags(gesture.config.blocksHandlers);
+
+  return {
+    waitFor: requireToFail,
+    simultaneousHandlers: simultaneousWith,
+    blocksHandlers: blocksHandlers,
+  };
+}
+
+export function checkGestureCallbacksForWorklets(gesture: GestureType) {
+  if (!__DEV__) {
+    return;
+  }
+  // if a gesture is explicitly marked to run on the JS thread there is no need to check
+  // if callbacks are worklets as the user is aware they will be ran on the JS thread
+  if (gesture.config.runOnJS) {
+    return;
+  }
+
+  const areSomeNotWorklets = gesture.handlers.isWorklet.includes(false);
+  const areSomeWorklets = gesture.handlers.isWorklet.includes(true);
+
+  // if some of the callbacks are worklets and some are not, and the gesture is not
+  // explicitly marked with `.runOnJS(true)` show an error
+  if (areSomeNotWorklets && areSomeWorklets) {
+    console.error(
+      tagMessage(
+        `Some of the callbacks in the gesture are worklets and some are not. Either make sure that all calbacks are marked as 'worklet' if you wish to run them on the UI thread or use '.runOnJS(true)' modifier on the gesture explicitly to run all callbacks on the JS thread.`
+      )
+    );
+  }
+
+  if (Reanimated === undefined) {
+    // if Reanimated is not available, we can't run worklets, so we shouldn't show the warning
+    return;
+  }
+
+  const areAllNotWorklets = !areSomeWorklets && areSomeNotWorklets;
+  // if none of the callbacks are worklets and the gesture is not explicitly marked with
+  // `.runOnJS(true)` show a warning
+  if (areAllNotWorklets) {
+    console.warn(
+      tagMessage(
+        `None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.`
+      )
+    );
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function validateDetectorChildren(ref: any) {
+  // finds the first native view under the Wrap component and traverses the fiber tree upwards
+  // to check whether there is more than one native view as a pseudo-direct child of GestureDetector
+  // i.e. this is not ok:
+  //            Wrap
+  //             |
+  //            / \
+  //           /   \
+  //          /     \
+  //         /       \
+  //   NativeView  NativeView
+  //
+  // but this is fine:
+  //            Wrap
+  //             |
+  //         NativeView
+  //             |
+  //            / \
+  //           /   \
+  //          /     \
+  //         /       \
+  //   NativeView  NativeView
+  if (__DEV__ && Platform.OS !== 'web') {
+    const REACT_NATIVE_VERSION = getReactNativeVersion();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const wrapType =
+      REACT_NATIVE_VERSION.minor > 63 || REACT_NATIVE_VERSION.major > 0
+        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ref._reactInternals.elementType
+        : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ref._reactInternalFiber.elementType;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    let instance =
+      RNRenderer.findHostInstance_DEPRECATED(
+        ref
+      )._internalFiberInstanceHandleDEV;
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    while (instance && instance.elementType !== wrapType) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      if (instance.sibling) {
+        throw new Error(
+          'GestureDetector has more than one native view as its children. This can happen if you are using a custom component that renders multiple views, like React.Fragment. You should wrap content of GestureDetector with a <View> or <Animated.View>.'
+        );
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      instance = instance.return;
+    }
+  }
+}
+
+export function useForceRender() {
+  const [renderState, setRenderState] = useState(false);
+  const forceRender = useCallback(() => {
+    setRenderState(!renderState);
+  }, [renderState, setRenderState]);
+
+  return forceRender;
+}
+
+export function useWebEventHandlers() {
+  return useRef<WebEventHandler>({
+    onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
+      onGestureHandlerEvent(e.nativeEvent);
+    },
+    onGestureHandlerStateChange: isNewWebImplementationEnabled()
+      ? (e: HandlerStateChangeEvent<unknown>) => {
+          onGestureHandlerEvent(e.nativeEvent);
+        }
+      : undefined,
+  });
+}

package/src/handlers/gestures/gestureComposition.ts

@@ -29,6 +29,8 @@ export class ComposedGesture extends Gesture {
     if (gesture instanceof BaseGesture) {
       const newConfig = { ...gesture.config };
 
+      // no need to extend `blocksHandlers` here, because it's not changed in composition
+      // the same effect is achieved by reversing the order of 2 gestures in `Exclusive`
       newConfig.simultaneousWith = extendRelation(
         newConfig.simultaneousWith,
         simultaneousGestures

package/src/handlers/gestures/gestureStateManager.ts

@@ -24,7 +24,9 @@ function create(handlerTag: number): GestureStateManagerType {
     begin: () => {
       'worklet';
       if (REANIMATED_AVAILABLE) {
-        setGestureState(handlerTag, State.BEGAN);
+        // When Reanimated is available, setGestureState should be defined
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setGestureState!(handlerTag, State.BEGAN);
       } else {
         console.warn(warningMessage);
       }
@@ -33,7 +35,9 @@ function create(handlerTag: number): GestureStateManagerType {
     activate: () => {
       'worklet';
       if (REANIMATED_AVAILABLE) {
-        setGestureState(handlerTag, State.ACTIVE);
+        // When Reanimated is available, setGestureState should be defined
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setGestureState!(handlerTag, State.ACTIVE);
       } else {
         console.warn(warningMessage);
       }
@@ -42,7 +46,9 @@ function create(handlerTag: number): GestureStateManagerType {
     fail: () => {
       'worklet';
       if (REANIMATED_AVAILABLE) {
-        setGestureState(handlerTag, State.FAILED);
+        // When Reanimated is available, setGestureState should be defined
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setGestureState!(handlerTag, State.FAILED);
       } else {
         console.warn(warningMessage);
       }
@@ -51,7 +57,9 @@ function create(handlerTag: number): GestureStateManagerType {
     end: () => {
       'worklet';
       if (REANIMATED_AVAILABLE) {
-        setGestureState(handlerTag, State.END);
+        // When Reanimated is available, setGestureState should be defined
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setGestureState!(handlerTag, State.END);
       } else {
         console.warn(warningMessage);
       }

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -9,23 +9,25 @@ export interface SharedValue<T> {
   value: T;
 }
 
-let Reanimated: {
-  default: {
-    // Slightly modified definition copied from 'react-native-reanimated'
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    createAnimatedComponent<P extends object>(
-      component: ComponentClass<P>,
-      options?: unknown
-    ): ComponentClass<P>;
-  };
-  useEvent: (
-    callback: (event: GestureUpdateEvent | GestureStateChangeEvent) => void,
-    events: string[],
-    rebuild: boolean
-  ) => unknown;
-  useSharedValue: <T>(value: T) => SharedValue<T>;
-  setGestureState: (handlerTag: number, newState: number) => void;
-};
+let Reanimated:
+  | {
+      default: {
+        // Slightly modified definition copied from 'react-native-reanimated'
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        createAnimatedComponent<P extends object>(
+          component: ComponentClass<P>,
+          options?: unknown
+        ): ComponentClass<P>;
+      };
+      useEvent: (
+        callback: (event: GestureUpdateEvent | GestureStateChangeEvent) => void,
+        events: string[],
+        rebuild: boolean
+      ) => unknown;
+      useSharedValue: <T>(value: T) => SharedValue<T>;
+      setGestureState: (handlerTag: number, newState: number) => void;
+    }
+  | undefined;
 
 try {
   Reanimated = require('react-native-reanimated');

package/src/utils.ts

@@ -59,3 +59,42 @@ export function isRemoteDebuggingEnabled(): boolean {
     !localGlobal.RN$Bridgeless
   );
 }
+
+/**
+ * Recursively compares two objects for deep equality.
+ *
+ * **Note:** This function does not support cyclic references.
+ *
+ * @param obj1 - The first object to compare.
+ * @param obj2 - The second object to compare.
+ * @returns `true` if the objects are deeply equal, `false` otherwise.
+ */
+export function deepEqual(obj1: any, obj2: any) {
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  if (
+    typeof obj1 !== 'object' ||
+    typeof obj2 !== 'object' ||
+    obj1 === null ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/web/detectors/RotationGestureDetector.ts

@@ -39,16 +39,14 @@ export default class RotationGestureDetector
 
     const [firstPointerID, secondPointerID] = this.keyPointers;
 
-    const firstPointerX: number = tracker.getLastX(firstPointerID);
-    const firstPointerY: number = tracker.getLastY(firstPointerID);
-    const secondPointerX: number = tracker.getLastX(secondPointerID);
-    const secondPointerY: number = tracker.getLastY(secondPointerID);
+    const firstPointerCoords = tracker.getLastAbsoluteCoords(firstPointerID);
+    const secondPointerCoords = tracker.getLastAbsoluteCoords(secondPointerID);
 
-    const vectorX: number = secondPointerX - firstPointerX;
-    const vectorY: number = secondPointerY - firstPointerY;
+    const vectorX: number = secondPointerCoords.x - firstPointerCoords.x;
+    const vectorY: number = secondPointerCoords.y - firstPointerCoords.y;
 
-    this.anchorX = (firstPointerX + secondPointerX) / 2;
-    this.anchorY = (firstPointerY + secondPointerY) / 2;
+    this.anchorX = (firstPointerCoords.x + secondPointerCoords.x) / 2;
+    this.anchorY = (firstPointerCoords.y + secondPointerCoords.y) / 2;
 
     //Angle diff should be positive when rotating in clockwise direction
     const angle: number = -Math.atan2(vectorY, vectorX);