Update interface.js

interface.js

@@ -120,6 +120,33 @@ 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;
+
+  // 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 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
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
@@ -139,11 +166,6 @@ const currentScriptTag = document.currentScript;
 
   viewerContainerElem.style.display = 'block';
 
-  // Utility: hide tooltip
-  function hideTooltip() {
-    tooltipDiv.style.display = 'none';
-  }
-
   // ─── 7. Dynamically load viewer.js ─────────────────────────────────────────
   let viewerModule;
   try {
@@ -158,23 +180,16 @@ const currentScriptTag = document.currentScript;
   const canvasId = 'canvas-' + instanceId;
   const canvasEl = document.getElementById(canvasId);
   if (canvasEl) {
-    // When pointer down, listen for the first move (mouse or touch) to hide the tooltip
-    function onPointerDown() {
-      const onMove = () => {
-        hideTooltip();
-        canvasEl.removeEventListener('mousemove', onMove);
-        canvasEl.removeEventListener('touchmove', onMove);
-      };
-      canvasEl.addEventListener('mousemove', onMove, { once: true });
-      canvasEl.addEventListener('touchmove', onMove, { once: true });
-    }
-    canvasEl.addEventListener('mousedown', onPointerDown, { once: true });
-    canvasEl.addEventListener('touchstart', onPointerDown, { once: true });
-
     // Hide on any wheel event (zoom)
     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 ───────────────────────────────
@@ -347,6 +362,7 @@ const currentScriptTag = document.currentScript;
   // ─── 9. Hook up event listeners ───────────────────────────────────────────
 
   fullscreenToggle.addEventListener('click', () => {
+    hideTooltip();
     if (!isFullscreen) {
       enterFullscreen();
     } else {
@@ -392,11 +408,13 @@ const currentScriptTag = document.currentScript;
   });
 
   helpToggle.addEventListener('click', (e) => {
+    hideTooltip();
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
 
   resetCameraBtn.addEventListener('click', () => {
+    hideTooltip();
     if (viewerModule.resetViewerCamera) {
       viewerModule.resetViewerCamera();
     }
@@ -408,6 +426,7 @@ const currentScriptTag = document.currentScript;
     pointsToggleBtn.style.opacity = '0.5';
   }
   pointsToggleBtn.addEventListener('click', () => {
+    hideTooltip();
     pointsVisible = !pointsVisible;
     pointsToggleBtn.style.opacity = pointsVisible ? '1' : '0.5';
     document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));