[Web] Fix focal and anchor points coordinates

packages/react-native-gesture-handler/src/web/detectors/RotationGestureDetector.ts

@@ -23,6 +23,9 @@ export default class RotationGestureDetector
   private _anchorX = 0;
   private _anchorY = 0;
 
+  private _relativeAnchorX = 0;
+  private _relativeAnchorY = 0;
+
   private isInProgress = false;
 
   private keyPointers: number[] = [NaN, NaN];
@@ -41,6 +44,9 @@ export default class RotationGestureDetector
 
     const firstPointerCoords = tracker.getLastAbsoluteCoords(firstPointerID);
     const secondPointerCoords = tracker.getLastAbsoluteCoords(secondPointerID);
+    const firstPointerRelative = tracker.getLastRelativeCoords(firstPointerID);
+    const secondPointerRelative =
+      tracker.getLastRelativeCoords(secondPointerID);
 
     if (!firstPointerCoords || !secondPointerCoords) {
       return;
@@ -52,6 +58,13 @@ export default class RotationGestureDetector
     this._anchorX = (firstPointerCoords.x + secondPointerCoords.x) / 2;
     this._anchorY = (firstPointerCoords.y + secondPointerCoords.y) / 2;
 
+    if (firstPointerRelative && secondPointerRelative) {
+      this._relativeAnchorX =
+        (firstPointerRelative.x + secondPointerRelative.x) / 2;
+      this._relativeAnchorY =
+        (firstPointerRelative.y + secondPointerRelative.y) / 2;
+    }
+
     // Angle diff should be positive when rotating in clockwise direction
     const angle: number = -Math.atan2(vectorY, vectorX);
 
@@ -160,6 +173,14 @@ export default class RotationGestureDetector
     return this._anchorY;
   }
 
+  public get relativeAnchorX() {
+    return this._relativeAnchorX;
+  }
+
+  public get relativeAnchorY() {
+    return this._relativeAnchorY;
+  }
+
   public get rotation() {
     return this._rotation;
   }

packages/react-native-gesture-handler/src/web/detectors/ScaleGestureDetector.ts

@@ -17,6 +17,9 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
   private _focusX!: number;
   private _focusY!: number;
 
+  private _relativeFocusX!: number;
+  private _relativeFocusY!: number;
+
   private _currentSpan!: number;
   private prevSpan!: number;
   private initialSpan!: number;
@@ -77,10 +80,14 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     const div: number = pointerUp ? numOfPointers - 1 : numOfPointers;
 
     const coordsSum = tracker.getAbsoluteCoordsSum();
+    const relativeCoordsSum = tracker.getRelativeCoordsSum();
 
     const focusX = coordsSum.x / div;
     const focusY = coordsSum.y / div;
 
+    const relativeFocusX = relativeCoordsSum.x / div;
+    const relativeFocusY = relativeCoordsSum.y / div;
+
     // Determine average deviation from focal point
 
     let devSumX = 0;
@@ -107,6 +114,8 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     const wasInProgress: boolean = this.inProgress;
     this._focusX = focusX;
     this._focusY = focusY;
+    this._relativeFocusX = relativeFocusX;
+    this._relativeFocusY = relativeFocusY;
 
     if (this.inProgress && (span < this.minSpan || configChanged)) {
       this.onScaleEnd(this);
@@ -165,6 +174,14 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     return this._focusY;
   }
 
+  public get relativeFocusX() {
+    return this._relativeFocusX;
+  }
+
+  public get relativeFocusY() {
+    return this._relativeFocusY;
+  }
+
   public get timeDelta() {
     return this.currentTime - this.prevTime;
   }

packages/react-native-gesture-handler/src/web/handlers/PinchGestureHandler.ts

@@ -71,8 +71,8 @@ export default class PinchGestureHandler extends GestureHandler {
 
   protected override transformNativeEvent() {
     return {
-      focalX: this.scaleGestureDetector.focusX,
-      focalY: this.scaleGestureDetector.focusY,
+      focalX: this.scaleGestureDetector.relativeFocusX,
+      focalY: this.scaleGestureDetector.relativeFocusY,
       velocity: this.velocity,
       scale: this.scale,
     };

packages/react-native-gesture-handler/src/web/handlers/RotationGestureHandler.ts

@@ -75,15 +75,15 @@ export default class RotationGestureHandler extends GestureHandler {
   }
 
   public getAnchorX(): number {
-    const anchorX = this.rotationGestureDetector.anchorX;
+    const anchorX = this.rotationGestureDetector.relativeAnchorX;
 
-    return anchorX ? anchorX : this.cachedAnchorX;
+    return anchorX !== undefined ? anchorX : this.cachedAnchorX;
   }
 
   public getAnchorY(): number {
-    const anchorY = this.rotationGestureDetector.anchorY;
+    const anchorY = this.rotationGestureDetector.relativeAnchorY;
 
-    return anchorY ? anchorY : this.cachedAnchorY;
+    return anchorY !== undefined ? anchorY : this.cachedAnchorY;
   }
 
   protected override onPointerDown(event: AdaptedEvent): void {
@@ -104,11 +104,14 @@ export default class RotationGestureHandler extends GestureHandler {
       return;
     }
 
-    if (this.getAnchorX()) {
-      this.cachedAnchorX = this.getAnchorX();
+    const anchorX = this.getAnchorX();
+    const anchorY = this.getAnchorY();
+
+    if (anchorX !== undefined) {
+      this.cachedAnchorX = anchorX;
     }
-    if (this.getAnchorY()) {
-      this.cachedAnchorY = this.getAnchorY();
+    if (anchorY !== undefined) {
+      this.cachedAnchorY = anchorY;
     }
 
     this.tracker.track(event);
@@ -123,11 +126,14 @@ export default class RotationGestureHandler extends GestureHandler {
       return;
     }
 
-    if (this.getAnchorX()) {
-      this.cachedAnchorX = this.getAnchorX();
+    const anchorX = this.getAnchorX();
+    const anchorY = this.getAnchorY();
+
+    if (anchorX !== undefined) {
+      this.cachedAnchorX = anchorX;
     }
-    if (this.getAnchorY()) {
-      this.cachedAnchorY = this.getAnchorY();
+    if (anchorY !== undefined) {
+      this.cachedAnchorY = anchorY;
     }
 
     this.tracker.track(event);