Update interface.js

interface.js

@@ -120,31 +120,24 @@ const currentScriptTag = document.currentScript;
   const tooltipImage     = document.getElementById('point-tooltip-image');
   const tooltipCloseBtn  = document.getElementById('point-tooltip-close');
 
-  // Flag and handlers for pointer drag hiding
-  let dragStarted = false;
-  let onFirstMove;
+  // Variables for drag detection
+  let startX = 0;
+  let startY = 0;
+  let onPointerDownDrag = null;
+  let onPointerMoveDrag = null;
 
   // Utility: hide tooltip and clean up drag listeners
   function hideTooltip() {
     tooltipDiv.style.display = 'none';
-    dragStarted = false;
-    // Remove any attached move listener
-    if (viewerContainerElem && onFirstMove) {
-      viewerContainerElem.removeEventListener('pointermove', onFirstMove);
-      onFirstMove = null;
+    // Remove any leftover listeners
+    if (onPointerDownDrag) {
+      viewerContainerElem.removeEventListener('pointerdown', onPointerDownDrag);
+      onPointerDownDrag = null;
+    }
+    if (onPointerMoveDrag) {
+      viewerContainerElem.removeEventListener('pointermove', onPointerMoveDrag);
+      onPointerMoveDrag = null;
     }
-    // Remove pointerdown listener
-    viewerContainerElem.removeEventListener('pointerdown', onPointerDownOnce);
-  }
-
-  // One-time pointerdown handler that waits for the next pointermove
-  function onPointerDownOnce() {
-    dragStarted = true;
-    // Attach one-time pointermove to hide
-    onFirstMove = function() {
-      hideTooltip();
-    };
-    viewerContainerElem.addEventListener('pointermove', onFirstMove, { once: true });
   }
 
   // Device detection for help text
@@ -184,12 +177,6 @@ const currentScriptTag = document.currentScript;
     canvasEl.addEventListener('wheel', () => {
       hideTooltip();
     }, { passive: true });
-
-    // Hide on first drag: attach pointerdown to start detection
-    canvasEl.addEventListener('pointerdown', () => {
-      hideTooltip(); // In case pointerdown alone should also hide (covers taps)
-      viewerContainerElem.addEventListener('pointerdown', onPointerDownOnce, { once: true });
-    }, { once: true });
   }
 
   // ─── 8. Fullscreen / state-preservation logic ───────────────────────────────
@@ -448,6 +435,32 @@ const currentScriptTag = document.currentScript;
       tooltipImage.style.display = 'none';
     }
     tooltipDiv.style.display = 'flex';
+
+    // Clean up any previous drag listeners
+    if (onPointerDownDrag) {
+      viewerContainerElem.removeEventListener('pointerdown', onPointerDownDrag);
+      onPointerDownDrag = null;
+    }
+    if (onPointerMoveDrag) {
+      viewerContainerElem.removeEventListener('pointermove', onPointerMoveDrag);
+      onPointerMoveDrag = null;
+    }
+
+    // Attach new pointerdown listener for drag detection
+    onPointerDownDrag = function(e) {
+      startX = e.clientX;
+      startY = e.clientY;
+      // On first move that exceeds threshold, hide tooltip
+      onPointerMoveDrag = function(ev) {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        if (Math.hypot(dx, dy) > 3) {
+          hideTooltip();
+        }
+      };
+      viewerContainerElem.addEventListener('pointermove', onPointerMoveDrag, { once: true });
+    };
+    viewerContainerElem.addEventListener('pointerdown', onPointerDownDrag, { once: true });
   });
 
   // Escape key also exits fullscreen
@@ -473,5 +486,4 @@ const currentScriptTag = document.currentScript;
     saveCurrentState();
     document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
   }, 200);
-
 })();