From 982bdb77e2cbaa98ee5bc004fa130372a0613b13 Mon Sep 17 00:00:00 2001
From: erik <erik@mosswart.snakedesert.se>
Date: Thu, 26 Feb 2026 09:29:40 +0000
Subject: [PATCH] Add requestAnimationFrame batching for pan/zoom updates

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 static/script.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/static/script.js b/static/script.js
index a7a1dc80..b52ba07f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1323,6 +1323,16 @@ function updateView() {
   }
 }
 
+let pendingFrame = null;
+function scheduleViewUpdate() {
+    if (!pendingFrame) {
+        pendingFrame = requestAnimationFrame(() => {
+            updateView();
+            pendingFrame = null;
+        });
+    }
+}
+
 function fitToWindow() {
   const r = wrap.getBoundingClientRect();
   scale = Math.min(r.width / imgW, r.height / imgH);
@@ -1919,7 +1929,7 @@ wrap.addEventListener('wheel', e => {
   offX -= mx * (ns - scale);
   offY -= my * (ns - scale);
   scale = ns;
-  updateView();
+  scheduleViewUpdate();
 }, { passive: false });
 
 wrap.addEventListener('mousedown', e => {
@@ -1930,7 +1940,7 @@ window.addEventListener('mousemove', e => {
   if (!dragging) return;
   offX += e.clientX - sx; offY += e.clientY - sy;
   sx = e.clientX; sy = e.clientY;
-  updateView();
+  scheduleViewUpdate();
 });
 window.addEventListener('mouseup', () => {
   dragging = false; wrap.classList.remove('dragging');
@@ -1946,7 +1956,7 @@ wrap.addEventListener('touchmove', e => {
   const t = e.touches[0];
   offX += t.clientX - sx; offY += t.clientY - sy;
   sx = t.clientX; sy = t.clientY;
-  updateView();
+  scheduleViewUpdate();
 });
 wrap.addEventListener('touchend', () => {
   dragging = false;