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

3 files changed, 21 insertions, 6 deletions

diff --git a/public/app.css b/public/app.css
index 5640b1c..ef32380 100644
--- a/public/app.css
+++ b/public/app.css
@@ -61,6 +61,13 @@ html, body {
 }
 .dropzone:hover .preview,
 .dropzone:active .preview { opacity: .85; }
+.dropzone .preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 6px;
+}
 
 @keyframes lock {
   0%   { transform: scale(.2); opacity: 0; }
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) => {
diff --git a/public/index.html b/public/index.html
index 080719c..e4f77d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="dark">
   <title>pathways</title>
-  <link rel="stylesheet" href="/app.css?v=23">
+  <link rel="stylesheet" href="/app.css?v=24">
 </head>
 <body>
   <main id="stage">
@@ -16,6 +16,6 @@
     <p>four paths, one per direction. walk them.</p>
     <button id="start">start</button>
   </div>
-  <script src="/app.js?v=23"></script>
+  <script src="/app.js?v=24"></script>
 </body>
 </html>