Update interface.js

interface.js

@@ -120,29 +120,6 @@ const currentScriptTag = document.currentScript;
   const tooltipImage     = document.getElementById('point-tooltip-image');
   const tooltipCloseBtn  = document.getElementById('point-tooltip-close');
 
-  // Track tooltip state and listeners
-  let tooltipIsVisible = false;
-  let hideTriggered = false;
-
-  // Pointer/wheel listeners (defined once)
-  let onPointerDown, onPointerMove, onPointerUp, onWheel;
-
-  // Utility: hide tooltip
-  function hideTooltip() {
-    if (!tooltipIsVisible) return;
-    console.log("DEBUG: tooltip hidden");
-    tooltipDiv.style.display = 'none';
-    tooltipIsVisible = false;
-    hideTriggered = true;
-    // Remove listeners
-    if (viewerContainerElem) {
-      viewerContainerElem.removeEventListener('pointerdown', onPointerDown);
-      viewerContainerElem.removeEventListener('pointermove', onPointerMove);
-      viewerContainerElem.removeEventListener('pointerup', onPointerUp);
-      viewerContainerElem.removeEventListener('wheel', onWheel);
-    }
-  }
-
   // Device detection for help text
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
@@ -162,6 +139,11 @@ 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 {
@@ -172,27 +154,28 @@ const currentScriptTag = document.currentScript;
     return;
   }
 
-  // After viewer is ready, set up debug listeners on viewerContainerElem
-  onPointerDown = (e) => {
-    console.log(`DEBUG: pointerdown at (${e.clientX}, ${e.clientY})`);
-  };
-  onPointerMove = (e) => {
-    console.log(`DEBUG: pointermove at (${e.clientX}, ${e.clientY})`);
-    if (tooltipIsVisible && !hideTriggered) {
-      console.log("DEBUG: pointermove after tooltip → hide");
-      hideTooltip();
+  // After viewer is ready, grab the canvas and set up hide-on-interaction
+  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 });
     }
-  };
-  onPointerUp = (e) => {
-    console.log(`DEBUG: pointerup at (${e.clientX}, ${e.clientY})`);
-  };
-  onWheel = (e) => {
-    console.log(`DEBUG: wheel delta (${e.deltaY})`);
-    if (tooltipIsVisible && !hideTriggered) {
-      console.log("DEBUG: wheel → hide");
+    canvasEl.addEventListener('mousedown', onPointerDown, { once: true });
+    canvasEl.addEventListener('touchstart', onPointerDown, { once: true });
+
+    // Hide on any wheel event (zoom)
+    canvasEl.addEventListener('wheel', () => {
       hideTooltip();
-    }
-  };
+    }, { passive: true });
+  }
 
   // ─── 8. Fullscreen / state-preservation logic ───────────────────────────────
   let isFullscreen = false;
@@ -364,8 +347,6 @@ const currentScriptTag = document.currentScript;
   // ─── 9. Hook up event listeners ───────────────────────────────────────────
 
   fullscreenToggle.addEventListener('click', () => {
-    console.log("DEBUG: fullscreen toggle clicked");
-    hideTooltip();
     if (!isFullscreen) {
       enterFullscreen();
     } else {
@@ -411,15 +392,11 @@ const currentScriptTag = document.currentScript;
   });
 
   helpToggle.addEventListener('click', (e) => {
-    console.log("DEBUG: help toggle clicked");
-    hideTooltip();
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
 
   resetCameraBtn.addEventListener('click', () => {
-    console.log("DEBUG: reset-camera clicked");
-    hideTooltip();
     if (viewerModule.resetViewerCamera) {
       viewerModule.resetViewerCamera();
     }
@@ -431,8 +408,6 @@ const currentScriptTag = document.currentScript;
     pointsToggleBtn.style.opacity = '0.5';
   }
   pointsToggleBtn.addEventListener('click', () => {
-    console.log("DEBUG: points-toggle clicked");
-    hideTooltip();
     pointsVisible = !pointsVisible;
     pointsToggleBtn.style.opacity = pointsVisible ? '1' : '0.5';
     document.dispatchEvent(new CustomEvent('toggle-points', { detail: { visible: pointsVisible } }));
@@ -440,14 +415,12 @@ const currentScriptTag = document.currentScript;
 
   // Close tooltip on button click
   tooltipCloseBtn.addEventListener('click', () => {
-    console.log("DEBUG: tooltip close button clicked");
     hideTooltip();
   });
 
   // Listen for point-selection events and show tooltip
   document.addEventListener('point-selected', (evt) => {
     const { text, imageUrl } = evt.detail;
-    console.log(`DEBUG: showTooltip with text="${text}"`);
     tooltipTextDiv.textContent = text || "";
     if (imageUrl) {
       tooltipImage.src = imageUrl;
@@ -456,13 +429,6 @@ const currentScriptTag = document.currentScript;
       tooltipImage.style.display = 'none';
     }
     tooltipDiv.style.display = 'flex';
-    tooltipIsVisible = true;
-    hideTriggered = false;
-    // Attach pointer/wheel listeners for first interaction
-    viewerContainerElem.addEventListener('pointerdown', onPointerDown);
-    viewerContainerElem.addEventListener('pointermove', onPointerMove);
-    viewerContainerElem.addEventListener('pointerup', onPointerUp);
-    viewerContainerElem.addEventListener('wheel', onWheel, { passive: true });
   });
 
   // Escape key also exits fullscreen