20260607 - login, add scene, add hotspot

frontend/js/viewer360.js

@@ -1,10 +1,13 @@
 let activeViewer = null;
+let currentHotspots = [];
 
 /**
  * Initializes and shows the Pannellum 360° panorama viewer with security overlays.
  * @param {string} imageUrl - Authorized URL to fetch the secure image stream
+ * @param {Array} hotspots - List of hotspots from the database
  */
-function initPanoramaViewer(imageUrl) {
+function initPanoramaViewer(imageUrl, hotspots = []) {
+    currentHotspots = hotspots;
     const container = document.getElementById('viewer-container');
     container.style.display = 'block';
 
@@ -14,6 +17,21 @@ function initPanoramaViewer(imageUrl) {
         } catch (e) {}
     }
 
+    // Chuyển đổi dữ liệu hotspots từ DB sang định dạng Pannellum
+    const pannellumHotspots = hotspots.map(h => ({
+        pitch: h.pitch,
+        yaw: h.yaw,
+        type: "info",
+        text: h.text || "Điểm điều hướng",
+        id: h._id,
+        clickHandlerFunc: () => {
+            if (h.targetSceneId) {
+                // Gọi hàm openScene từ main_map.js
+                openScene(h.targetSceneId);
+            }
+        }
+    }));
+
     // Initialize Pannellum Equirectangular viewer
     activeViewer = pannellum.viewer('panorama-viewer', {
         "type": "equirectangular",
@@ -22,7 +40,9 @@ function initPanoramaViewer(imageUrl) {
         "showControls": true,
         "compass": false,
         "mouseZoom": true,
-        "keyboardZoom": true
+        "keyboardZoom": true,
+        "crossOrigin": "anonymous",
+        "hotSpots": pannellumHotspots
     });
 
     // Security constraints inside the viewer
@@ -34,6 +54,12 @@ function initPanoramaViewer(imageUrl) {
  */
 function closeViewer() {
     document.getElementById('viewer-container').style.display = 'none';
+    
+    // Xóa trạng thái Scene đang hoạt động khi đóng viewer
+    localStorage.removeItem('activeSceneId');
+    localStorage.removeItem('activeScenePrivacy');
+    localStorage.removeItem('activeSceneToken');
+
     if (activeViewer) {
         try {
             activeViewer.destroy();
@@ -46,16 +72,44 @@ function closeViewer() {
  * Appends event listeners to block right-clicks and common image saving shortcuts.
  */
 function applyViewerSecurity() {
-    const viewer = document.getElementById('viewer-container');
+    // Target the actual viewer element where Pannellum renders
+    const container = document.getElementById('viewer-container');
+    const panoramaViewer = document.getElementById('panorama-viewer');
 
-    // Block right-clicks inside the 3D Viewer Container
-    viewer.addEventListener('contextmenu', (e) => {
+    const handleContextMenu = (e) => {
         e.preventDefault();
-        alert('Security Alert: Direct image downloading or copying is disabled on this asset.');
-    });
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        
+        // Nếu viewer đang hoạt động, lấy tọa độ Pitch/Yaw tại điểm click
+        if (activeViewer) {
+            // Lấy tọa độ cầu (Pitch/Yaw) từ điểm click chuột
+            const coords = activeViewer.mouseEventToCoords(e);
+            if (!coords) return;
+            
+            const pitch = coords[0];
+            const yaw = coords[1];
+
+            // Kiểm tra xem có hotspot nào gần điểm click không (ngưỡng 2 độ)
+            const existing = currentHotspots.find(h => 
+                Math.abs(h.pitch - pitch) < 2 && Math.abs(h.yaw - yaw) < 2
+            );
+
+            if (typeof window.handleHotspotCreation === 'function') {
+                window.handleHotspotCreation(pitch, yaw, existing);
+            } else {
+                console.log(`Coordinates captured: Pitch ${pitch}, Yaw ${yaw}`);
+            }
+        }
+        return false;
+    };
+
+    // Sử dụng capture phase (true) để bắt sự kiện trước khi nó chạm đến Pannellum
+    container.addEventListener('contextmenu', handleContextMenu, true);
+    panoramaViewer.addEventListener('contextmenu', handleContextMenu, true);
 
     // Block drag and drop
-    viewer.addEventListener('dragstart', (e) => {
+    container.addEventListener('dragstart', (e) => {
         e.preventDefault();
     });
 }