[Web] Fix anchor and focal points.

src/web/detectors/RotationGestureDetector.ts

@@ -39,14 +39,25 @@ export default class RotationGestureDetector
 
     const [firstPointerID, secondPointerID] = this.keyPointers;
 
-    const firstPointerCoords = tracker.getLastAbsoluteCoords(firstPointerID);
-    const secondPointerCoords = tracker.getLastAbsoluteCoords(secondPointerID);
-
-    const vectorX: number = secondPointerCoords.x - firstPointerCoords.x;
-    const vectorY: number = secondPointerCoords.y - firstPointerCoords.y;
-
-    this.anchorX = (firstPointerCoords.x + secondPointerCoords.x) / 2;
-    this.anchorY = (firstPointerCoords.y + secondPointerCoords.y) / 2;
+    const firstPointerRelativeCoords =
+      tracker.getLastRelativeCoords(firstPointerID);
+    const secondPointerRelativeCoords =
+      tracker.getLastRelativeCoords(secondPointerID);
+
+    this.anchorX =
+      (firstPointerRelativeCoords.x + secondPointerRelativeCoords.x) / 2;
+    this.anchorY =
+      (firstPointerRelativeCoords.y + secondPointerRelativeCoords.y) / 2;
+
+    const firstPointerAbsoluteCoords =
+      tracker.getLastAbsoluteCoords(firstPointerID);
+    const secondPointerAbsoluteCoords =
+      tracker.getLastAbsoluteCoords(secondPointerID);
+
+    const vectorX: number =
+      secondPointerAbsoluteCoords.x - firstPointerAbsoluteCoords.x;
+    const vectorY: number =
+      secondPointerAbsoluteCoords.y - firstPointerAbsoluteCoords.y;
 
     // Angle diff should be positive when rotating in clockwise direction
     const angle: number = -Math.atan2(vectorY, vectorX);

src/web/detectors/ScaleGestureDetector.ts

@@ -73,16 +73,14 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
       : undefined;
 
     // Determine focal point
-
     const div: number = pointerUp ? numOfPointers - 1 : numOfPointers;
 
-    const coordsSum = tracker.getAbsoluteCoordsSum();
+    const coordsSum = tracker.getRelativeCoordsSum();
 
     const focusX = coordsSum.x / div;
     const focusY = coordsSum.y / div;
 
     // Determine average deviation from focal point
-
     let devSumX = 0;
     let devSumY = 0;
 
@@ -91,8 +89,8 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
         return;
       }
 
-      devSumX += Math.abs(value.abosoluteCoords.x - focusX);
-      devSumY += Math.abs(value.abosoluteCoords.y - focusY);
+      devSumX += Math.abs(value.relativeCoords.x - focusX);
+      devSumY += Math.abs(value.relativeCoords.y - focusY);
     });
 
     const devX: number = devSumX / div;

src/web/tools/PointerEventManager.ts

@@ -3,7 +3,6 @@ import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { AdaptedEvent, EventTypes, Point } from '../interfaces';
 import {
   PointerTypeMapping,
-  calculateViewScale,
   tryExtractStylusData,
   isPointerInBounds,
 } from '../utils';
@@ -201,14 +200,11 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   }
 
   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.clientX - rect.left) / scaleX,
-      offsetY: (event.clientY - rect.top) / scaleY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY,
       pointerId: event.pointerId,
       eventType: eventType,
       pointerType:

src/web/utils.ts

@@ -19,42 +19,6 @@ export const degToRad = (degrees: number) => (degrees * Math.PI) / 180;
 export const coneToDeviation = (degrees: number) =>
   Math.cos(degToRad(degrees / 2));
 
-export function calculateViewScale(view: HTMLElement) {
-  const styles = getComputedStyle(view);
-
-  const resultScales = {
-    scaleX: 1,
-    scaleY: 1,
-  };
-
-  // Get scales from scale property
-  if (styles.scale !== undefined && styles.scale !== 'none') {
-    const scales = styles.scale.split(' ');
-
-    if (scales[0]) {
-      resultScales.scaleX = parseFloat(scales[0]);
-    }
-
-    resultScales.scaleY = scales[1]
-      ? parseFloat(scales[1])
-      : parseFloat(scales[0]);
-  }
-
-  // Get scales from transform property
-  const matrixElements = new RegExp(/matrix\((.+)\)/).exec(
-    styles.transform
-  )?.[1];
-
-  if (matrixElements) {
-    const matrixElementsArray = matrixElements.split(', ');
-
-    resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
-    resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
-  }
-
-  return resultScales;
-}
-
 export function tryExtractStylusData(
   event: PointerEvent
 ): StylusData | undefined {