diff --git a/src/web/detectors/RotationGestureDetector.ts b/src/web/detectors/RotationGestureDetector.ts index af2c05f277..155d801dae 100644 --- a/src/web/detectors/RotationGestureDetector.ts +++ b/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); diff --git a/src/web/detectors/ScaleGestureDetector.ts b/src/web/detectors/ScaleGestureDetector.ts index a85adb0174..4c35deae40 100644 --- a/src/web/detectors/ScaleGestureDetector.ts +++ b/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; diff --git a/src/web/tools/PointerEventManager.ts b/src/web/tools/PointerEventManager.ts index facc8be1e5..2680896f47 100644 --- a/src/web/tools/PointerEventManager.ts +++ b/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 { } 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: diff --git a/src/web/utils.ts b/src/web/utils.ts index 2ce5354c45..08b07c1377 100644 --- a/src/web/utils.ts +++ b/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 {