Update viewer.js

viewer.js

@@ -1,7 +1,7 @@
 // viewer.js
 // ==============================
 
-let pc;            // PlayCanvas module
+let pc;            // will hold the PlayCanvas module once imported
 export let app = null;
 let cameraEntity   = null;
 let modelEntity    = null;
@@ -13,17 +13,18 @@ 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;
+  alert("[viewer.js] initializeViewer called");
+
+  if (viewerInitialized) {
+    alert("[viewer.js] Already initialized, skipping.");
+    return;
+  }
+
+  const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  // 1. Config
+  // 1. Read config
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
   minZoom     = parseFloat(config.minZoom  || "1");
@@ -54,39 +55,41 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  // 2. DOM
+  // 2. Grab 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. Canvas
+  alert("[viewer.js] DOM elements grabbed");
+
+  // 3. Create <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);
+  alert("[viewer.js] Canvas inserted");
 
-  // 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 and touch event prevention (for zoom gesture hijack)
-  // Wheel = desktop, touchmove = iOS
+  // Prevent iOS Safari from zooming the whole page via gestures on canvas
+  canvas.addEventListener('touchstart', function(e) {
+    if (e.touches.length > 1) e.preventDefault();
+  }, { passive: false });
+  canvas.addEventListener('gesturestart', function(e) {
+    e.preventDefault();
+  });
+  canvas.addEventListener('gesturechange', function(e) {
+    e.preventDefault();
+  });
+  canvas.addEventListener('gestureend', function(e) {
+    e.preventDefault();
+  });
+
+  // 4. Wheel listener
   canvas.addEventListener('wheel', e => {
+    alert("[viewer.js] Wheel event on canvas");
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
       const orbitCam = cameraEntity.script.orbitCamera;
       const sens = (cameraEntity.script.orbitCameraInputMouse?.distanceSensitivity) || 0.4;
@@ -100,23 +103,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';
+  alert("[viewer.js] Canvas ready, loading PlayCanvas...");
 
-  // 6. Import PlayCanvas
+  // 5. Import PlayCanvas
   if (!pc) {
-    pc = await import("https://esm.run/playcanvas");
-    window.pc = pc;
+    try {
+      pc = await import("https://esm.run/playcanvas");
+      window.pc = pc;
+      alert("[viewer.js] PlayCanvas loaded");
+    } catch (err) {
+      alert("[viewer.js] ERROR loading PlayCanvas: " + err);
+      return;
+    }
   }
 
   try {
-    // 7. Setup device & app
-    setCanvasSizeToParent(); // ensure correct size before context creation
+    // 6. Setup device & app
     const device = await pc.createGraphicsDevice(canvas, {
       deviceTypes: ["webgl2"],
       glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
@@ -149,41 +152,48 @@ export async function initializeViewer(config, instanceId) {
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // 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);
+    // 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);
+        }
+      }
+    });
     resizeObserver.observe(viewerContainer);
 
-    // Also on window resize (iOS orientation change)
-    window.addEventListener('resize', resizeCanvasToParent);
+    window.addEventListener('resize', () => {
+      if (app) app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    });
 
     app.on('destroy', () => {
-      window.removeEventListener('resize', resizeCanvasToParent);
-      resizeObserver && resizeObserver.disconnect();
+      window.removeEventListener('resize', resizeCanvas);
     });
 
-    // 8. Assets
+    alert("[viewer.js] PlayCanvas app initialized");
+
+    // 7. 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" }),
-      galerie: glbUrl ? new pc.Asset('galerie', 'container', { url: glbUrl }) : null,
+      galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
       hdr: new pc.Asset('hdr', 'texture', {
         url: "https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png"
       }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
     };
 
-    // Remove null assets
-    const toLoad = Object.values(assets).filter(Boolean);
-    const loader = new pc.AssetListLoader(toLoad, app.assets);
+    alert("[viewer.js] Assets declared");
 
+    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
-    assets.model.on('load', () => progressDialog.style.display = 'none');
+    assets.model.on('load', () => {
+      progressDialog.style.display = 'none';
+      alert("[viewer.js] Main model loaded");
+    });
     assets.model.on('error', err => {
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
+      alert("[viewer.js] ERROR loading main model: " + err);
     });
 
     const progCheck = setInterval(() => {
@@ -198,8 +208,10 @@ export async function initializeViewer(config, instanceId) {
     }, 100);
 
     loader.load(async () => {
+      alert("[viewer.js] Asset loader complete. Starting app...");
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
+      alert("[viewer.js] Scene envAtlas set");
 
       // Model entity
       modelEntity = new pc.Entity('model');
@@ -208,6 +220,7 @@ export async function initializeViewer(config, instanceId) {
       modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
       modelEntity.setLocalScale(modelScale, modelScale, modelScale);
       app.root.addChild(modelEntity);
+      alert("[viewer.js] Main model entity added");
 
       // Light
       const dirLight = new pc.Entity('Cascaded Light');
@@ -229,12 +242,13 @@ export async function initializeViewer(config, instanceId) {
       });
       dirLight.setLocalEulerAngles(0, 0, 0);
       app.root.addChild(dirLight);
+      alert("[viewer.js] Directional light entity added");
 
-      // Gallery GLB (floor) only added if it loads, never touched by UI
-      let galleryEntity = null;
+      // Gallery GLB
       if (assets.galerie && assets.galerie.resource && assets.galerie.resource.instantiateRenderEntity) {
-        galleryEntity = assets.galerie.resource.instantiateRenderEntity();
+        const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
         app.root.addChild(galleryEntity);
+        alert("[viewer.js] Gallery GLB entity added");
       }
 
       // Camera setup
@@ -259,7 +273,6 @@ export async function initializeViewer(config, instanceId) {
           yawAngleMax: maxAzimuth,
           yawAngleMin: minAzimuth,
           minPivotY: minPivotY,
-          minY: minY,
           frameOnStart: false
         }
       });
@@ -269,9 +282,10 @@ 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() {};
+        cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {
+          alert("[viewer.js] onMouseWheel (custom suppressed)");
+        };
       }
       cameraEntity.script.create('orbitCameraInputTouch', {
         attributes: {
@@ -280,23 +294,30 @@ export async function initializeViewer(config, instanceId) {
         }
       });
       app.root.addChild(cameraEntity);
+      alert("[viewer.js] Camera entity added and set up");
 
       // Reset & constrain updates
-      app.once('update', () => resetViewerCamera());
+      app.once('update', () => {
+        alert("[viewer.js] First app update (reset camera)");
+        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 after all entities
-      resizeCanvasToParent();
+      // Final resize
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+      alert("[viewer.js] Canvas resized to viewer container");
 
-      // Tooltips (only ever affect tooltip spheres, not floor/GLB)
+      // Tooltips
       try {
         const tooltipsModule = await import('./tooltips.js');
-        tooltipsModule.initializeTooltips({
+        await tooltipsModule.initializeTooltips({
           app,
           cameraEntity,
           modelEntity,
@@ -304,22 +325,24 @@ export async function initializeViewer(config, instanceId) {
           defaultVisible: !!config.showTooltipsDefault,
           moveDuration: config.tooltipMoveDuration || 0.6
         });
-      } catch (e) {}
+        alert("[viewer.js] Tooltips initialized");
+      } catch (e) {
+        alert("[viewer.js] Tooltips.js import/init failed: " + e);
+      }
 
       progressDialog.style.display = 'none';
+      alert("[viewer.js] App fully loaded!");
       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>`;
+    alert("[viewer.js] ERROR in PlayCanvas app setup: " + (error && error.message ? error.message : error));
   }
 }
 
 export function resetViewerCamera() {
+  alert("[viewer.js] resetViewerCamera called");
   try {
     if (!cameraEntity || !modelEntity || !app) return;
     const orbitCam = cameraEntity.script.orbitCamera;
@@ -360,10 +383,14 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
-  } catch (e) {}
+    alert("[viewer.js] resetViewerCamera completed");
+  } catch (e) {
+    alert("[viewer.js] ERROR in resetViewerCamera: " + e);
+  }
 }
 
 export function cleanupViewer() {
+  alert("[viewer.js] cleanupViewer called");
   if (app) {
     try {
       app.destroy();
@@ -378,4 +405,5 @@ export function cleanupViewer() {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
+  alert("[viewer.js] cleanupViewer completed");
 }