Update js_scripts/index.js

js_scripts/index.js

@@ -60,6 +60,7 @@ const currentScriptTag = document.currentScript;
   let modelEntity = null;
   let viewerInitialized = false;
   let wheelHandlers = [];
+  let resizeHandler = null;
   
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
@@ -211,6 +212,8 @@ const currentScriptTag = document.currentScript;
   // and hide the "close" button since there's no preview to return to.
   if (gifUrl) {
     previewImage.src = gifUrl;
+    viewerContainer.style.display = 'none';
+    gifPreview.style.display = 'block';
   } else {
     gifPreview.style.display = 'none';
     viewerContainer.style.display = 'block';
@@ -236,6 +239,12 @@ const currentScriptTag = document.currentScript;
     }
     wheelHandlers = [];
     
+    // Remove resize handler if it exists
+    if (resizeHandler) {
+      window.removeEventListener('resize', resizeHandler);
+      resizeHandler = null;
+    }
+    
     // Destroy PlayCanvas app if it exists
     if (app) {
       app.destroy();
@@ -246,6 +255,19 @@ const currentScriptTag = document.currentScript;
     cameraEntity = null;
     modelEntity = null;
     viewerInitialized = false;
+    
+    // Reset the canvas
+    if (canvas) {
+      const ctx = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      if (ctx) {
+        ctx.getExtension('WEBGL_lose_context')?.loseContext();
+      }
+    }
+    
+    // Mark the viewer as not initialized
+    viewerInitialized = false;
+    
+    console.log("Viewer cleanup complete");
   }
   
   closeBtn.addEventListener('click', function() {
@@ -455,8 +477,12 @@ const currentScriptTag = document.currentScript;
   // --- Initialize the 3D PLY Viewer using PlayCanvas ---
   async function initializeViewer() {
     // Skip initialization if already initialized
-    if (viewerInitialized) return;
+    if (viewerInitialized) {
+      console.log("Viewer already initialized, skipping");
+      return;
+    }
     
+    console.log("Initializing PLY viewer...");
     progressDialog.style.display = 'block';
     
     // Initialize PlayCanvas
@@ -509,8 +535,14 @@ const currentScriptTag = document.currentScript;
           app.resizeCanvas(canvas.clientWidth, canvas.clientHeight);
         }
       };
-      window.addEventListener('resize', resize);
-      app.on('destroy', () => window.removeEventListener('resize', resize));
+      
+      // Store resize handler for cleanup
+      resizeHandler = resize;
+      window.addEventListener('resize', resizeHandler);
+      app.on('destroy', () => {
+        window.removeEventListener('resize', resizeHandler);
+        resizeHandler = null;
+      });
       
       // Load required assets
       const assets = {
@@ -548,6 +580,11 @@ const currentScriptTag = document.currentScript;
       
       const progressChecker = setInterval(checkProgress, 100);
       
+      // Store the interval for cleanup
+      app.once('destroy', () => {
+        clearInterval(progressChecker);
+      });
+      
       // Load assets and set up scene
       assetListLoader.load(() => {
         app.start();
@@ -648,11 +685,14 @@ const currentScriptTag = document.currentScript;
         
         // Mark viewer as initialized
         viewerInitialized = true;
+        
+        console.log("PLY viewer initialization complete");
       });
       
     } catch (error) {
       console.error("Error initializing PlayCanvas viewer:", error);
       progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
+      viewerInitialized = false;
     }
   }
 })();