From 91a91da1ef3de075008914ec52fbd5ea8e41f805 Mon Sep 17 00:00:00 2001 From: Ovgodd Date: Wed, 2 Sep 2026 09:43:24 +0200 Subject: [PATCH] =?UTF-8?q?fixup!=20=E2=99=BB=EF=B8=8F(frontend)=20refacto?= =?UTF-8?q?r=20screen=20share=20zoom=20pan=20with=20useMove=20and=20impera?= =?UTF-8?q?tive=20DOM=20updates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rooms/livekit/utils/screenShareZoom.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/utils/screenShareZoom.ts b/src/frontend/src/features/rooms/livekit/utils/screenShareZoom.ts index dc86fd52..53478b17 100644 --- a/src/frontend/src/features/rooms/livekit/utils/screenShareZoom.ts +++ b/src/frontend/src/features/rooms/livekit/utils/screenShareZoom.ts @@ -3,7 +3,11 @@ export const MAX_ZOOM = 4 export const ZOOM_STEP = 0.1 export const WHEEL_ZOOM_SPEED = 0.002 export const PAN_STEP = 5 -export const PAN_CLAMP_HALF = 50 + +// Half of a 100 % axis. Geometry, not a tunable: it is both the centre the +// cursor offset is measured from and the half extent the pan is clamped +// against, so the two stay consistent by construction. +export const HALF_EXTENT_PERCENT = 50 export interface PanOffset { x: number @@ -42,8 +46,8 @@ export const clampPan = ( zoom: number, ratio: PictureRatio ): PanOffset => { - const maxPanX = Math.max(0, (ratio.x - 1 / zoom) * PAN_CLAMP_HALF) - const maxPanY = Math.max(0, (ratio.y - 1 / zoom) * PAN_CLAMP_HALF) + const maxPanX = Math.max(0, (ratio.x - 1 / zoom) * HALF_EXTENT_PERCENT) + const maxPanY = Math.max(0, (ratio.y - 1 / zoom) * HALF_EXTENT_PERCENT) return { x: Math.max(-maxPanX, Math.min(maxPanX, pan.x)), y: Math.max(-maxPanY, Math.min(maxPanY, pan.y)), @@ -130,9 +134,9 @@ export const getCursorPercentsFromWheelEvent = ( const rect = target.getBoundingClientRect() return { cursorXPercent: - ((e.clientX - rect.left) / rect.width) * 100 - PAN_CLAMP_HALF, + ((e.clientX - rect.left) / rect.width) * 100 - HALF_EXTENT_PERCENT, cursorYPercent: - ((e.clientY - rect.top) / rect.height) * 100 - PAN_CLAMP_HALF, + ((e.clientY - rect.top) / rect.height) * 100 - HALF_EXTENT_PERCENT, } }