fix preview image sizing and scroll flicker (reuse dropzone, dedupe follow refresh)

1 files changed, 12 insertions, 4 deletions

diff --git a/public/app.js b/public/app.js
index f9db638..b0a0db4 100644
--- a/public/app.js
+++ b/public/app.js
@@ -395,7 +395,6 @@ function clearAllZones() {
 }
 
 function renderTileZones(id) {
-  clearTileZones(id)
   if (!cur || id !== cur.id) return
   if (!tiles.has(id) || !exitsCache.has(id)) return
   const cx = (window.innerWidth / 2 - panX) / scale
@@ -410,9 +409,16 @@ function renderTileZones(id) {
     const d = Math.hypot(p.rect.x + p.rect.w / 2 - cx, p.rect.y + p.rect.h / 2 - cy)
     if (d < bestD) { bestD = d; bestDir = dir; best = p }
   }
+  const existing = zones.get(id) && zones.get(id)[0]
+  if (best && existing &&
+      existing.dataset.dir === bestDir &&
+      existing.dataset.key === best.info.id + "|" + best.rect.x + "," + best.rect.y) return
+  clearTileZones(id)
   if (!best) return
   const z = document.createElement("div")
   z.className = "dropzone"
+  z.dataset.dir = bestDir
+  z.dataset.key = best.info.id + "|" + best.rect.x + "," + best.rect.y
   z.style.left = best.rect.x + "px"
   z.style.top = best.rect.y + "px"
   z.style.width = best.rect.w + "px"
@@ -432,8 +438,9 @@ function renderTileZones(id) {
 }
 
 function refreshPreviews() {
-  clearAllZones()
-  if (cur) renderTileZones(cur.id)
+  if (!cur) { clearAllZones(); return }
+  for (const [id, zs] of zones) if (id !== cur.id) clearTileZones(id)
+  renderTileZones(cur.id)
 }
 
 let lastFollow = 0
@@ -465,8 +472,9 @@ function maybeFollow() {
   const now = performance.now()
   if (now - lastFollow < 200) return
   lastFollow = now
+  const before = cur && cur.id
   followCurrent()
-  refreshPreviews()
+  if (cur && cur.id === before) refreshPreviews()
 }
 
 stage.addEventListener("pointerover", (e) => {