commit 4bbe010bf19b13560b77d4309157ee488d8352a2 parent 632d0fc7a2f766f8ccc2d767b7527990f277128d Author: Hunter Date: Mon, 20 Oct 2025 00:15:25 -0400 zoom at cursor position Diffstat:
| M | script.js | | | 22 | +++++++++------------- |
1 file changed, 9 insertions(+), 13 deletions(-)
diff --git a/script.js b/script.js @@ -297,25 +297,21 @@ function setupImageHandlers(imageData) { // Detect pinch zoom (ctrlKey is set for pinch gestures on macOS trackpad) if (e.ctrlKey) { - // Zoom under cursor + // Zoom at cursor position const rect = container.getBoundingClientRect(); - const mouseX = e.clientX - rect.left; - const mouseY = e.clientY - rect.top; - - // Calculate mouse position relative to container center - const centerX = rect.width / 2; - const centerY = rect.height / 2; - const offsetX = mouseX - centerX; - const offsetY = mouseY - centerY; + const cursorX = e.clientX - rect.left - rect.width / 2; + const cursorY = e.clientY - rect.top - rect.height / 2; const oldUserScale = imageData.userScale; + const oldTotalScale = imageData.baseScale * oldUserScale; const zoomDelta = -e.deltaY * 0.01; const newUserScale = Math.max(1, Math.min(5, oldUserScale * (1 + zoomDelta))); + const newTotalScale = imageData.baseScale * newUserScale; - // Adjust pan to keep point under cursor stationary - const scaleFactor = newUserScale / oldUserScale - 1; - imageData.panX -= offsetX * scaleFactor; - imageData.panY -= offsetY * scaleFactor; + // Adjust pan to keep the point under cursor fixed during zoom + const scaleRatio = newTotalScale / oldTotalScale; + imageData.panX = cursorX * (1 - scaleRatio) + imageData.panX * scaleRatio; + imageData.panY = cursorY * (1 - scaleRatio) + imageData.panY * scaleRatio; imageData.userScale = newUserScale; // Clamp after zooming to prevent whitespace