Unify scaled coordinates between web and native side.

src/web/tools/PointerEventManager.ts

@@ -1,7 +1,11 @@
 import EventManager from './EventManager';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { AdaptedEvent, EventTypes, Point } from '../interfaces';
-import { PointerTypeMapping, isPointerInBounds } from '../utils';
+import {
+  PointerTypeMapping,
+  calculateViewScale,
+  isPointerInBounds,
+} from '../utils';
 import { PointerType } from '../../PointerType';
 
 const POINTER_CAPTURE_EXCLUDE_LIST = new Set<string>(['SELECT', 'INPUT']);
@@ -234,11 +238,13 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   }
 
   protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
     return {
       x: event.clientX,
       y: event.clientY,
-      offsetX: event.offsetX,
-      offsetY: event.offsetY,
+      offsetX: event.offsetX / scaleX,
+      offsetY: event.offsetY / scaleY,
       pointerId: event.pointerId,
       eventType: eventType,
       pointerType:

src/web/tools/TouchEventManager.ts

@@ -1,6 +1,6 @@
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 import EventManager from './EventManager';
-import { isPointerInBounds } from '../utils';
+import { calculateViewScale, isPointerInBounds } from '../utils';
 import { PointerType } from '../../PointerType';
 
 export default class TouchEventManager extends EventManager<HTMLElement> {
@@ -156,11 +156,13 @@ export default class TouchEventManager extends EventManager<HTMLElement> {
     const clientX = event.changedTouches[index].clientX;
     const clientY = event.changedTouches[index].clientY;
 
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
     return {
       x: clientX,
       y: clientY,
-      offsetX: clientX - rect.left,
-      offsetY: clientY - rect.top,
+      offsetX: (clientX - rect.left) / scaleX,
+      offsetY: (clientY - rect.top) / scaleY,
       pointerId: event.changedTouches[index].identifier,
       eventType: eventType,
       pointerType: PointerType.TOUCH,

src/web/utils.ts

@@ -18,3 +18,36 @@
 
 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,
+  };
+
+  const scales = styles.scale.split(' ');
+
+  if (scales[0] !== 'none') {
+    resultScales.scaleX *= parseFloat(scales[0]);
+  }
+
+  if (scales[1]) {
+    resultScales.scaleY *= parseFloat(scales[1]);
+  }
+
+  const transform = styles.transform;
+  const matrixElements = transform.match(/matrix\((.+)\)/)?.[1];
+
+  if (!matrixElements) {
+    return resultScales;
+  }
+
+  const matrixElementsArray = matrixElements.split(', ');
+
+  resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
+  resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
+
+  return resultScales;
+}