From d979ce99498baa14ac31876e581b762df4e795ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 13 Jun 2024 13:32:25 +0200 Subject: [PATCH 1/4] Calculate scale for view --- src/web/tools/PointerEventManager.ts | 12 +++++++--- src/web/tools/TouchEventManager.ts | 8 ++++--- src/web/utils.ts | 33 ++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 6 deletions(-) diff --git a/src/web/tools/PointerEventManager.ts b/src/web/tools/PointerEventManager.ts index d8892fcfc4..b2f72130b9 100644 --- a/src/web/tools/PointerEventManager.ts +++ b/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(['SELECT', 'INPUT']); @@ -234,11 +238,13 @@ export default class PointerEventManager extends EventManager { } 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: diff --git a/src/web/tools/TouchEventManager.ts b/src/web/tools/TouchEventManager.ts index 6af20c1f94..60b1718351 100644 --- a/src/web/tools/TouchEventManager.ts +++ b/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 { @@ -156,11 +156,13 @@ export default class TouchEventManager extends EventManager { 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, diff --git a/src/web/utils.ts b/src/web/utils.ts index 15fb6cf834..a4f3d1ff37 100644 --- a/src/web/utils.ts +++ b/src/web/utils.ts @@ -18,3 +18,36 @@ export const degToRad = (degrees: number) => (degrees * Math.PI) / 180; export const coneToDeviation = (degrees: number) => Math.cos(degToRad(degrees / 2)); + +export function getScaleFromView(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; +} From 182ce1a9d7e68acd07892768a0a12c7294430b2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 13 Jun 2024 13:43:20 +0200 Subject: [PATCH 2/4] Fix name --- src/web/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web/utils.ts b/src/web/utils.ts index a4f3d1ff37..955e81b373 100644 --- a/src/web/utils.ts +++ b/src/web/utils.ts @@ -19,7 +19,7 @@ export const degToRad = (degrees: number) => (degrees * Math.PI) / 180; export const coneToDeviation = (degrees: number) => Math.cos(degToRad(degrees / 2)); -export function getScaleFromView(view: HTMLElement) { +export function calculateViewScale(view: HTMLElement) { const styles = getComputedStyle(view); const resultScales = { From 0474578f94034f04e14f7fc9c88b2223de989674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 13 Jun 2024 15:42:57 +0200 Subject: [PATCH 3/4] Assign values instead of multiplying --- src/web/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/utils.ts b/src/web/utils.ts index 955e81b373..bde1f778b2 100644 --- a/src/web/utils.ts +++ b/src/web/utils.ts @@ -30,11 +30,11 @@ export function calculateViewScale(view: HTMLElement) { const scales = styles.scale.split(' '); if (scales[0] !== 'none') { - resultScales.scaleX *= parseFloat(scales[0]); + resultScales.scaleX = parseFloat(scales[0]); } if (scales[1]) { - resultScales.scaleY *= parseFloat(scales[1]); + resultScales.scaleY = parseFloat(scales[1]); } const transform = styles.transform; From f5cc0ac814394c421f7b8c0efe4a875ee60b8d50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 13 Jun 2024 15:54:56 +0200 Subject: [PATCH 4/4] Use RegEx --- src/web/utils.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/web/utils.ts b/src/web/utils.ts index bde1f778b2..4b023eadf0 100644 --- a/src/web/utils.ts +++ b/src/web/utils.ts @@ -37,8 +37,9 @@ export function calculateViewScale(view: HTMLElement) { resultScales.scaleY = parseFloat(scales[1]); } - const transform = styles.transform; - const matrixElements = transform.match(/matrix\((.+)\)/)?.[1]; + const matrixElements = new RegExp(/matrix\((.+)\)/).exec( + styles.transform + )?.[1]; if (!matrixElements) { return resultScales;