Update interface.js

interface.js

@@ -151,36 +151,33 @@ const currentScriptTag = document.currentScript;
 
   // --- DYNAMIC MENU SIZING ---
   function setMenuContentMaxSize() {
-    // iOS fix: force reflow and update after orientation/fullscreen changes
-    setTimeout(() => {
-      if (!isMobile) {
-        menuContent.style.maxWidth  = "";
-        menuContent.style.maxHeight = "";
-        menuContent.style.width     = "";
-        menuContent.style.height    = "";
-        menuContent.style.overflowY = "";
-        menuContent.style.overflowX = "";
-        return;
-      }
-      let parent = viewerContainerElem;
-      if (parent) {
-        const vw = parent.offsetWidth;
-        const vh = parent.offsetHeight;
-        if (vw && vh) {
-          menuContent.style.maxWidth = Math.round(vw * 0.8) + "px";
-          menuContent.style.maxHeight = Math.round(vh * 0.8) + "px";
-          menuContent.style.width = "";  // Let it shrink if smaller
-          menuContent.style.height = "";
-          menuContent.style.overflowY = "auto";
-          menuContent.style.overflowX = "auto";
-        } else {
-          menuContent.style.maxWidth = "80vw";
-          menuContent.style.maxHeight = "80vh";
-          menuContent.style.overflowY = "auto";
-          menuContent.style.overflowX = "auto";
-        }
+    if (!isMobile) {
+      menuContent.style.maxWidth  = "";
+      menuContent.style.maxHeight = "";
+      menuContent.style.width     = "";
+      menuContent.style.height    = "";
+      menuContent.style.overflowY = "";
+      menuContent.style.overflowX = "";
+      return;
+    }
+    let parent = viewerContainerElem;
+    if (parent) {
+      const vw = parent.offsetWidth;
+      const vh = parent.offsetHeight;
+      if (vw && vh) {
+        menuContent.style.maxWidth = Math.round(vw * 0.8) + "px";
+        menuContent.style.maxHeight = Math.round(vh * 0.8) + "px";
+        menuContent.style.width = "";  // Let it shrink if smaller
+        menuContent.style.height = "";
+        menuContent.style.overflowY = "auto";
+        menuContent.style.overflowX = "auto";
+      } else {
+        menuContent.style.maxWidth = "80vw";
+        menuContent.style.maxHeight = "80vh";
+        menuContent.style.overflowY = "auto";
+        menuContent.style.overflowX = "auto";
       }
-    }, 150); // Delay to allow iOS to finish layout
+    }
   }
   setMenuContentMaxSize();
   window.addEventListener('resize', setMenuContentMaxSize);
@@ -189,6 +186,7 @@ const currentScriptTag = document.currentScript;
 
   // --- HELP PANEL DEFAULT VISIBILITY ---
   menuContent.style.display = 'block';
+
   viewerContainerElem.style.display = 'block';
 
   let dragHide = null;
@@ -321,14 +319,8 @@ const currentScriptTag = document.currentScript;
   function enterFullscreen() {
     if (!savedState) saveCurrentState();
     if (isIOS) {
-      // iOS: Only fake fullscreen is possible, and must trigger resize manually
       applyFullscreenStyles();
       widgetContainer.classList.add('fake-fullscreen');
-      setTimeout(() => {
-        if (viewerModule.app) {
-          viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
-        }
-      }, 200); // Give iOS time to update layout
     } else if (widgetContainer.requestFullscreen) {
       widgetContainer.requestFullscreen()
         .then(applyFullscreenStyles)
@@ -402,28 +394,6 @@ const currentScriptTag = document.currentScript;
 
   tooltipCloseBtn.addEventListener('click', hideTooltipPanel);
 
-  // --- iOS Pointer Events Fix ---
-  // iOS sometimes needs explicit touch-action CSS for pointer events
-  if (isIOS && canvasEl) {
-    canvasEl.style.touchAction = 'none';
-    canvasEl.addEventListener('gesturestart', e => e.preventDefault());
-    canvasEl.addEventListener('gesturechange', e => e.preventDefault());
-    canvasEl.addEventListener('gestureend', e => e.preventDefault());
-  }
-
-  // --- iOS: force reflow on orientation change ---
-  if (isIOS) {
-    window.addEventListener('orientationchange', () => {
-      setTimeout(() => {
-        if (viewerModule.app) {
-          viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
-        }
-        setMenuContentMaxSize();
-      }, 300);
-    });
-  }
-
-  // --- Custom Event Listeners (example for tooltips) ---
   document.addEventListener('tooltip-selected', (evt) => {
     // Always show panel, cancel hide first
     if (dragHide) {
@@ -432,21 +402,53 @@ const currentScriptTag = document.currentScript;
     }
     const { title, description, imgUrl } = evt.detail;
     tooltipTextDiv.innerHTML = `<strong>${title}</strong><br>${description}`;
+    // Force a repaint: clear src before setting, for repeated images
+    tooltipImage.style.display = 'none';
+    tooltipImage.src = '';
     if (imgUrl) {
+      tooltipImage.onload = () => {
+        tooltipImage.style.display = 'block';
+      };
       tooltipImage.src = imgUrl;
-      tooltipImage.style.display = 'block';
     } else {
       tooltipImage.style.display = 'none';
     }
-    tooltipPanel.style.display = 'block';
-    
-    // Start drag-to-hide detection
-    dragHide = function(e) {
-      if (e.pointerType === 'touch') {
-        hideTooltipPanel();
+    tooltipPanel.style.display = 'flex';
+    // --- DELAYED pointermove handler ---
+    setTimeout(() => {
+      dragHide = (e) => {
+        if ((e.pointerType === 'mouse' && e.buttons !== 0) || e.pointerType === 'touch') {
+          hideTooltipPanel();
+        }
+      };
+      viewerContainerElem.addEventListener('pointermove', dragHide);
+    }, 100);
+  });
+
+  if (canvasEl) {
+    canvasEl.addEventListener('wheel', hideTooltipPanel, { passive: true });
+  }
+  document.addEventListener('keydown', (e) => {
+    if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) exitFullscreen();
+  });
+  window.addEventListener('resize', () => {
+    if (viewerModule.app) {
+      if (isFullscreen) {
+        viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
+      } else {
+        viewerModule.app.resizeCanvas(
+          viewerContainerElem.clientWidth,
+          viewerContainerElem.clientHeight
+        );
       }
-    };
-    viewerContainerElem.addEventListener('pointermove', dragHide);
+    }
+    setMenuContentMaxSize();
   });
 
+  setTimeout(() => {
+    saveCurrentState();
+    document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: !!config.showTooltipsDefault } }));
+    setMenuContentMaxSize();
+  }, 200);
+
 })();