Update interface.js

interface.js

@@ -151,33 +151,36 @@ const currentScriptTag = document.currentScript;
 
   // --- DYNAMIC MENU SIZING ---
   function setMenuContentMaxSize() {
-    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";
+    // 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";
+        }
+      }
+    }, 150); // Delay to allow iOS to finish layout
   }
   setMenuContentMaxSize();
   window.addEventListener('resize', setMenuContentMaxSize);
@@ -186,7 +189,6 @@ const currentScriptTag = document.currentScript;
 
   // --- HELP PANEL DEFAULT VISIBILITY ---
   menuContent.style.display = 'block';
-
   viewerContainerElem.style.display = 'block';
 
   let dragHide = null;
@@ -319,8 +321,14 @@ 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)
@@ -394,6 +402,28 @@ 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) {
@@ -402,53 +432,21 @@ 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 = '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
-        );
+    tooltipPanel.style.display = 'block';
+    
+    // Start drag-to-hide detection
+    dragHide = function(e) {
+      if (e.pointerType === 'touch') {
+        hideTooltipPanel();
       }
-    }
-    setMenuContentMaxSize();
+    };
+    viewerContainerElem.addEventListener('pointermove', dragHide);
   });
 
-  setTimeout(() => {
-    saveCurrentState();
-    document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: !!config.showTooltipsDefault } }));
-    setMenuContentMaxSize();
-  }, 200);
-
 })();