Update js_scripts/index.js

js_scripts/index.js

@@ -58,6 +58,8 @@ const currentScriptTag = document.currentScript;
   let cameraEntity = null;
   let app = null;
   let modelEntity = null;
+  let viewerInitialized = false;
+  let wheelHandlers = [];
   
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
@@ -225,7 +227,29 @@ const currentScriptTag = document.currentScript;
     });
   }
   
+  // Function to clean up the viewer
+  function cleanupViewer() {
+    // Remove wheel event listeners
+    for (const handler of wheelHandlers) {
+      const [element, func] = handler;
+      element.removeEventListener('wheel', func, { passive: false });
+    }
+    wheelHandlers = [];
+    
+    // Destroy PlayCanvas app if it exists
+    if (app) {
+      app.destroy();
+      app = null;
+    }
+    
+    // Reset entities
+    cameraEntity = null;
+    modelEntity = null;
+    viewerInitialized = false;
+  }
+  
   closeBtn.addEventListener('click', function() {
+    // Handle fullscreen exit
     if (document.fullscreenElement === widgetContainer) {
       if (document.exitFullscreen) {
         document.exitFullscreen();
@@ -234,8 +258,12 @@ const currentScriptTag = document.currentScript;
     if (widgetContainer.classList.contains('fake-fullscreen')) {
       widgetContainer.classList.remove('fake-fullscreen');
       fullscreenToggle.textContent = '⇱';
-      resetCamera();
     }
+    
+    // Clean up the viewer
+    cleanupViewer();
+    
+    // Hide viewer and show GIF
     viewerContainer.style.display = 'none';
     gifPreview.style.display = 'block';
   });
@@ -380,38 +408,55 @@ const currentScriptTag = document.currentScript;
   });
   
   // --- Prevent app from hijacking all wheel events ---
-  const handleWheel = function(event) {
-    // Check if mouse is over the viewer
-    if (!isMouseOverViewer) {
-      // Allow normal page scrolling
-      return true;
+  function setupWheelHandlers() {
+    // First remove any existing handlers
+    for (const handler of wheelHandlers) {
+      const [element, func] = handler;
+      element.removeEventListener('wheel', func, { passive: false });
     }
+    wheelHandlers = [];
     
-    // Otherwise apply zooming, but prevent default only for viewer area
-    event.stopPropagation();
-    
-    if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
-      const camera = cameraEntity.camera;
-      const orbitCamera = cameraEntity.script.orbitCamera;
-      const sensitivity = cameraEntity.script.orbitCameraInputMouse ? 
-                          cameraEntity.script.orbitCameraInputMouse.distanceSensitivity || 0.4 : 0.4;
-      
-      if (camera.projection === pc.PROJECTION_PERSPECTIVE) {
-        orbitCamera.distance -= event.deltaY * 0.01 * sensitivity * (orbitCamera.distance * 0.1);
-      } else {
-        orbitCamera.orthoHeight -= event.deltaY * 0.01 * sensitivity * (orbitCamera.orthoHeight * 0.1);
+    // Create new wheel handler
+    const handleWheel = function(event) {
+      // Check if mouse is over the viewer
+      if (!isMouseOverViewer) {
+        // Allow normal page scrolling
+        return true;
       }
       
-      event.preventDefault();
-    }
-  };
-  
-  // --- Listen for wheel events at the viewer level, not document level ---
-  viewerContainer.addEventListener('wheel', handleWheel, { passive: false });
-  canvas.addEventListener('wheel', handleWheel, { passive: false });
+      // Otherwise apply zooming, but prevent default only for viewer area
+      event.stopPropagation();
+      
+      if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
+        const camera = cameraEntity.camera;
+        const orbitCamera = cameraEntity.script.orbitCamera;
+        const sensitivity = cameraEntity.script.orbitCameraInputMouse ? 
+                            cameraEntity.script.orbitCameraInputMouse.distanceSensitivity || 0.4 : 0.4;
+        
+        if (camera.projection === pc.PROJECTION_PERSPECTIVE) {
+          orbitCamera.distance -= event.deltaY * 0.01 * sensitivity * (orbitCamera.distance * 0.1);
+        } else {
+          orbitCamera.orthoHeight -= event.deltaY * 0.01 * sensitivity * (orbitCamera.orthoHeight * 0.1);
+        }
+        
+        event.preventDefault();
+      }
+    };
+    
+    // Add wheel handlers and store references for cleanup
+    viewerContainer.addEventListener('wheel', handleWheel, { passive: false });
+    canvas.addEventListener('wheel', handleWheel, { passive: false });
+    
+    // Store handlers for later cleanup
+    wheelHandlers.push([viewerContainer, handleWheel]);
+    wheelHandlers.push([canvas, handleWheel]);
+  }
   
   // --- Initialize the 3D PLY Viewer using PlayCanvas ---
   async function initializeViewer() {
+    // Skip initialization if already initialized
+    if (viewerInitialized) return;
+    
     progressDialog.style.display = 'block';
     
     // Initialize PlayCanvas
@@ -575,7 +620,7 @@ const currentScriptTag = document.currentScript;
         
         // Initialize the orbit controller
         setTimeout(() => {
-          if (cameraEntity.script.orbitCamera) {
+          if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
             // Calculate distance from camera to model
             const modelPos = modelEntity.getPosition();
             const camPos = cameraEntity.getPosition();
@@ -595,8 +640,14 @@ const currentScriptTag = document.currentScript;
         // Initial resize to match container
         resize();
         
+        // Set up wheel handlers
+        setupWheelHandlers();
+        
         // Hide progress dialog when everything is set up
         progressDialog.style.display = 'none';
+        
+        // Mark viewer as initialized
+        viewerInitialized = true;
       });
       
     } catch (error) {