Update viewer.js

viewer.js

@@ -1,7 +1,7 @@
 // viewer.js
 // ==============================
 
-let pc;            // will hold the PlayCanvas module once imported
+let pc;            // PlayCanvas module
 export let app = null;
 let cameraEntity   = null;
 let modelEntity    = null;
@@ -13,16 +13,17 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
+// Platform flags
+const isIOS = typeof navigator !== "undefined" && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+const isMobile = isIOS || (typeof navigator !== "undefined" && /Android/i.test(navigator.userAgent));
+
 /**
  * initializeViewer(config, instanceId)
  */
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
-  const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
-
-  // 1. Read config
+  // 1. Config
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
   minZoom     = parseFloat(config.minZoom  || "1");
@@ -53,37 +54,39 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  // 2. Grab DOM
+  // 2. DOM
   const canvasId          = 'canvas-' + instanceId;
   const progressDialog    = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   const viewerContainer   = document.getElementById('viewer-container-' + instanceId);
 
-  // 3. Create <canvas>
+  // 3. Canvas
   let oldCanvas = document.getElementById(canvasId);
   if (oldCanvas) oldCanvas.remove();
   const canvas = document.createElement('canvas');
   canvas.id = canvasId;
   canvas.className = 'ply-canvas';
   canvas.style.zIndex = "1";
+  canvas.style.display = 'block';
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.setAttribute('tabindex', '-1');
+  // Prevents iOS/Chrome pinch-zoom
+  canvas.style.touchAction = 'none';
   viewerContainer.insertBefore(canvas, progressDialog);
 
-  // --- PATCH: Prevent pinch/double-tap zoom for iOS (in addition to interface.js) ---
-  if (isIOS) {
-    canvas.style.touchAction = "none";
-    canvas.addEventListener('gesturestart', e => e.preventDefault());
-    canvas.addEventListener('gesturechange', e => e.preventDefault());
-    canvas.addEventListener('gestureend', e => e.preventDefault());
-    // Extra: prevent rubber-band scroll on iOS Safari inside canvas
-    canvas.addEventListener('touchmove', function(e) {
-      if (e.touches.length > 1) e.preventDefault();
-    }, { passive: false });
+  // 3b. iOS fix: force correct initial size on load
+  function setCanvasSizeToParent() {
+    canvas.width = viewerContainer.clientWidth * window.devicePixelRatio;
+    canvas.height = viewerContainer.clientHeight * window.devicePixelRatio;
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
   }
-  // --------------------------------------------------------------------------
+  setCanvasSizeToParent();
 
-  // 4. Wheel listener
+  // 4. Wheel and touch event prevention (for zoom gesture hijack)
+  // Wheel = desktop, touchmove = iOS
   canvas.addEventListener('wheel', e => {
-    // Only prevent default if wheel is over canvas (don't scroll webpage)
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
       const orbitCam = cameraEntity.script.orbitCamera;
       const sens = (cameraEntity.script.orbitCameraInputMouse?.distanceSensitivity) || 0.4;
@@ -97,16 +100,23 @@ export async function initializeViewer(config, instanceId) {
     }
   }, { passive: false });
 
+  // Prevent iOS Safari double-finger pinch/zoom on canvas
+  canvas.addEventListener('touchmove', function(e) {
+    if (e.touches.length > 1) e.preventDefault();
+  }, { passive: false });
+
+  // 5. Show progress
   progressDialog.style.display = 'block';
 
-  // 5. Import PlayCanvas
+  // 6. Import PlayCanvas
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
   }
 
   try {
-    // 6. Setup device & app
+    // 7. Setup device & app
+    setCanvasSizeToParent(); // ensure correct size before context creation
     const device = await pc.createGraphicsDevice(canvas, {
       deviceTypes: ["webgl2"],
       glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
@@ -139,26 +149,24 @@ export async function initializeViewer(config, instanceId) {
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // Attach ResizeObserver to keep canvas in sync with container size
-    resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        if (app) {
-          app.resizeCanvas(width, height);
-        }
-      }
-    });
+    // 7b. Attach ResizeObserver to keep canvas in sync with container size
+    function resizeCanvasToParent() {
+      if (!viewerContainer) return;
+      setCanvasSizeToParent();
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    }
+    resizeObserver = new window.ResizeObserver(resizeCanvasToParent);
     resizeObserver.observe(viewerContainer);
 
-    window.addEventListener('resize', () => {
-      if (app) app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-    });
+    // Also on window resize (iOS orientation change)
+    window.addEventListener('resize', resizeCanvasToParent);
 
     app.on('destroy', () => {
-      window.removeEventListener('resize', resizeCanvas);
+      window.removeEventListener('resize', resizeCanvasToParent);
+      resizeObserver && resizeObserver.disconnect();
     });
 
-    // 7. Assets
+    // 8. Assets
     const assets = {
       model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }),
       orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
@@ -168,10 +176,10 @@ export async function initializeViewer(config, instanceId) {
       }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
     };
 
-    // --- PATCH: PlayCanvas bug on iOS: forcibly wait for all assets before first render ---
-    let allLoaded = false;
+    // Remove null assets
+    const toLoad = Object.values(assets).filter(Boolean);
+    const loader = new pc.AssetListLoader(toLoad, app.assets);
 
-    const loader = new pc.AssetListLoader(Object.values(assets).filter(Boolean), app.assets);
     let lastProg = 0;
     assets.model.on('load', () => progressDialog.style.display = 'none');
     assets.model.on('error', err => {
@@ -190,7 +198,6 @@ export async function initializeViewer(config, instanceId) {
     }, 100);
 
     loader.load(async () => {
-      allLoaded = true;
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
 
@@ -223,11 +230,10 @@ export async function initializeViewer(config, instanceId) {
       dirLight.setLocalEulerAngles(0, 0, 0);
       app.root.addChild(dirLight);
 
-      // Gallery GLB (floor)
+      // Gallery GLB (floor) only added if it loads, never touched by UI
       let galleryEntity = null;
       if (assets.galerie && assets.galerie.resource && assets.galerie.resource.instantiateRenderEntity) {
         galleryEntity = assets.galerie.resource.instantiateRenderEntity();
-        galleryEntity.enabled = true; // Ensure enabled at start
         app.root.addChild(galleryEntity);
       }
 
@@ -263,6 +269,7 @@ export async function initializeViewer(config, instanceId) {
           distanceSensitivity: isMobile ? 0.5 : 0.4
         }
       });
+      // Prevent PlayCanvas from handling default mousewheel (which can bubble)
       if (cameraEntity.script.orbitCameraInputMouse) {
         cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {};
       }
@@ -274,33 +281,19 @@ export async function initializeViewer(config, instanceId) {
       });
       app.root.addChild(cameraEntity);
 
-      // --- iOS Black Screen Bug Fix: force at least one frame after all assets are loaded ---
-      // Wait for WebGL context to be ready before first render
-      app.once('frameupdate', () => {
-        if (!canvas.width || !canvas.height) {
-          app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-        }
-      });
-
       // Reset & constrain updates
       app.once('update', () => resetViewerCamera());
       app.on('update', dt => {
         if (cameraEntity) {
           const pos = cameraEntity.getPosition();
-          if (pos.y < minY) {
-            cameraEntity.setPosition(pos.x, minY, pos.z);
-          }
+          if (pos.y < minY) cameraEntity.setPosition(pos.x, minY, pos.z);
         }
       });
 
-      // Final resize
-      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+      // Final resize after all entities
+      resizeCanvasToParent();
 
-      // --- Gallery GLB (floor) visibility bug on iPhone ---
-      // Defensive: never toggle galerie (floor) visibility on tooltip toggle!
-      // If you ever use tooltips code that disables/enables galleryEntity, remove it.
-
-      // Tooltips
+      // Tooltips (only ever affect tooltip spheres, not floor/GLB)
       try {
         const tooltipsModule = await import('./tooltips.js');
         tooltipsModule.initializeTooltips({
@@ -311,14 +304,16 @@ export async function initializeViewer(config, instanceId) {
           defaultVisible: !!config.showTooltipsDefault,
           moveDuration: config.tooltipMoveDuration || 0.6
         });
-      } catch (e) {
-        // Tooltips are optional; do nothing if failed
-      }
+      } catch (e) {}
 
       progressDialog.style.display = 'none';
       viewerInitialized = true;
     });
 
+    // iOS-specific: sometimes context loss (suspend on background)
+    // PlayCanvas auto-recovers, but we need to restore canvas size
+    canvas.addEventListener('webglcontextrestored', setCanvasSizeToParent, false);
+
   } catch (error) {
     progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error && error.message ? error.message : error}</p>`;
   }
@@ -365,9 +360,7 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
-  } catch (e) {
-    // Silent fail: resetting camera should never crash app
-  }
+  } catch (e) {}
 }
 
 export function cleanupViewer() {
@@ -381,7 +374,6 @@ export function cleanupViewer() {
   modelEntity  = null;
   viewerInitialized = false;
 
-  // Disconnect the ResizeObserver to avoid leaks
   if (resizeObserver) {
     resizeObserver.disconnect();
     resizeObserver = null;