senangwebs-tour 1.0.2 → 1.0.3

package/src/editor/js/export-manager.js

@@ -1,286 +1,199 @@
 // Export Manager - Handles JSON generation for SWT library
-import { downloadTextAsFile, showModal } from './utils.js';
+import { downloadTextAsFile, showModal } from "./utils.js";
 
 class ExportManager {
-    constructor(editor) {
-        this.editor = editor;
-    }
+  constructor(editor) {
+    this.editor = editor;
+  }
+
+  /**
+   * Generate JSON compatible with SWT library
+   * Follows the tourConfig structure from example-simple.html
+   */
+  generateJSON() {
+    const scenes = this.editor.sceneManager.getAllScenes();
+    const config = this.editor.config;
+
+    // Build scenes object (keyed by scene ID)
+    const scenesData = {};
+    scenes.forEach((scene) => {
+      scenesData[scene.id] = {
+        name: scene.name,
+        panorama: scene.imageUrl,
+        hotspots: scene.hotspots.map((hotspot) => {
+          const hotspotData = {
+            position: hotspot.position,
+          };
+
+          // Add action based on hotspot type
+          if (hotspot.type === "navigation" && hotspot.targetSceneId) {
+            hotspotData.action = {
+              type: "navigateTo",
+              target: hotspot.targetSceneId,
+            };
+          } else if (hotspot.type === "info") {
+            hotspotData.action = {
+              type: "showInfo",
+            };
+          }
+
+          // Add appearance
+          hotspotData.appearance = {
+            color: hotspot.color || "#FF6B6B",
+            scale: "2 2 2",
+          };
 
-    /**
-     * Generate JSON compatible with SWT library
-     */
-    generateJSON() {
-        const scenes = this.editor.sceneManager.getAllScenes();
-        const config = this.editor.config;
-        // Build scenes array
-        const scenesData = scenes.map(scene => ({
-            id: scene.id,
-            name: scene.name,
-            imageUrl: scene.imageUrl,
-            hotspots: scene.hotspots.map(hotspot => ({
-                id: hotspot.id,
-                type: hotspot.type || 'navigation',
-                position: hotspot.position,
-                targetSceneId: hotspot.targetSceneId || '',
-                title: hotspot.title || '',
-                description: hotspot.description || '',
-                color: hotspot.color || '#00ff00',
-                icon: hotspot.icon || ''
-            }))
-        }));
-// Determine initial scene
-        let initialSceneId = config.initialSceneId;
-        if (!initialSceneId && scenes.length > 0) {
-            initialSceneId = scenes[0].id;
-        }
+          // Add tooltip if title exists
+          if (hotspot.title) {
+            hotspotData.tooltip = {
+              text: hotspot.title,
+            };
+          }
 
-        // Build final JSON
-        const jsonData = {
-            title: config.title || 'Virtual Tour',
-            description: config.description || '',
-            initialSceneId: initialSceneId,
-            scenes: scenesData,
-            settings: {
-                autoRotate: config.autoRotate || false,
-                showCompass: config.showCompass || false
-            }
-        };
+          return hotspotData;
+        }),
+      };
+    });
 
-        return jsonData;
+    // Determine initial scene
+    let initialScene = config.initialSceneId;
+    if (!initialScene && scenes.length > 0) {
+      initialScene = scenes[0].id;
     }
 
-    /**
-     * Export as JSON file
-     */
-    exportJSON() {
-        try {
-            const jsonData = this.generateJSON();
-            const json = JSON.stringify(jsonData, null, 2);
-            
-            const filename = sanitizeId(jsonData.title || 'tour') + '.json';
-            downloadTextAsFile(json, filename);
-            
-            showToast('Tour exported successfully', 'success');
-            return true;
-        } catch (error) {
-            console.error('Export failed:', error);
-            showToast('Export failed', 'error');
-            return false;
-        }
+    // Build final JSON matching SWT tourConfig format
+    const jsonData = {
+      initialScene: initialScene,
+      scenes: scenesData,
+    };
+
+    return jsonData;
+  }
+
+  /**
+   * Export as JSON file
+   */
+  exportJSON() {
+    try {
+      const jsonData = this.generateJSON();
+      const json = JSON.stringify(jsonData, null, 2);
+
+      const title = this.editor.config.title || "tour";
+      const filename = sanitizeId(title) + ".json";
+      downloadTextAsFile(json, filename);
+
+      showToast("Tour exported successfully", "success");
+      return true;
+    } catch (error) {
+      console.error("Export failed:", error);
+      showToast("Export failed", "error");
+      return false;
     }
+  }
 
-    /**
-     * Copy JSON to clipboard
-     */
-    async copyJSON() {
-        try {
-            const jsonData = this.generateJSON();
-            const json = JSON.stringify(jsonData, null, 2);
-            
-            const success = await copyToClipboard(json);
-            if (success) {
-                showToast('JSON copied to clipboard', 'success');
-            } else {
-                showToast('Failed to copy to clipboard', 'error');
-            }
-            return success;
-        } catch (error) {
-            console.error('Copy failed:', error);
-            showToast('Copy failed', 'error');
-            return false;
-        }
+  /**
+   * Copy JSON to clipboard
+   */
+  async copyJSON() {
+    try {
+      const jsonData = this.generateJSON();
+      const json = JSON.stringify(jsonData, null, 2);
+
+      const success = await copyToClipboard(json);
+      if (success) {
+        showToast("JSON copied to clipboard", "success");
+      } else {
+        showToast("Failed to copy to clipboard", "error");
+      }
+      return success;
+    } catch (error) {
+      console.error("Copy failed:", error);
+      showToast("Copy failed", "error");
+      return false;
     }
+  }
+
+  /**
+   * Generate HTML viewer code
+   */
+  generateViewerHTML() {
+    const jsonData = this.generateJSON();
+    const title = this.editor.config.title || "Virtual Tour";
 
-    /**
-     * Generate HTML viewer code
-     */
-    generateViewerHTML() {
-        const jsonData = this.generateJSON();
-        
-        return `<!DOCTYPE html>
+    return `<!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${jsonData.title}</title>
-    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
-    <script src="dist/swt.min.js"></script>
-    <style>
-        body {
-            margin: 0;
-            overflow: hidden;
-            font-family: Arial, sans-serif;
-        }
-        
-        #loading {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: #000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fff;
-            z-index: 1000;
-        }
-        
-        #loading.hidden {
-            display: none;
-        }
-        
-        .spinner {
-            border: 4px solid rgba(255,255,255,0.3);
-            border-top: 4px solid #fff;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin-right: 15px;
-        }
-        
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        #ui {
-            position: fixed;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 100;
-            display: flex;
-            gap: 10px;
-        }
-        
-        .btn {
-            background: rgba(0,0,0,0.7);
-            color: #fff;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-        }
-        
-        .btn:hover {
-            background: rgba(0,0,0,0.9);
-        }
-    </style>
-</head>
-<body>
-    <div id="loading">
-        <div class="spinner"></div>
-        <span>Loading Tour...</span>
-    </div>
-    
-    <div id="tour-container"></div>
-    
-    <div id="ui" style="display: none;">
-        <button class="btn" id="resetBtn">Reset View</button>
-        <span class="btn" id="sceneInfo"></span>
-    </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title}</title>
+    <script src="https://unpkg.com/senangwebs-tour@latest/dist/swt.min.js"></script>
+  </head>
+  <body>
+    <a-scene id="tour-container">
+      <a-camera>
+        <a-cursor></a-cursor>
+      </a-camera>
+    </a-scene>
 
     <script>
-        // Tour configuration
-        const tourConfig = ${JSON.stringify(jsonData, null, 8)};
-        
-        // Initialize tour
-        let tour;
-        
-        document.addEventListener('DOMContentLoaded', async () => {
-            try {
-                // Create tour instance
-                tour = new SenangWebsTour('tour-container', tourConfig);
-                
-                // Listen to events
-                tour.on('sceneChanged', (sceneId) => {
-updateSceneInfo();
-                });
-                
-                tour.on('ready', () => {
-document.getElementById('loading').classList.add('hidden');
-                    document.getElementById('ui').style.display = 'flex';
-                    updateSceneInfo();
-                });
-                
-                tour.on('error', (error) => {
-                    console.error('Tour error:', error);
-                    alert('Failed to load tour: ' + error.message);
-                });
-                
-                // Start tour
-                await tour.start();
-                
-                // Setup UI
-                document.getElementById('resetBtn').addEventListener('click', () => {
-                    const camera = document.querySelector('[camera]');
-                    if (camera) {
-                        camera.setAttribute('rotation', '0 0 0');
-                    }
-                });
-                
-            } catch (error) {
-                console.error('Failed to initialize tour:', error);
-                alert('Failed to initialize tour: ' + error.message);
-            }
-        });
-        
-        function updateSceneInfo() {
-            const sceneId = tour.getCurrentSceneId();
-            const scene = tourConfig.scenes.find(s => s.id === sceneId);
-            if (scene) {
-                document.getElementById('sceneInfo').textContent = scene.name;
-            }
-        }
+      // Tour configuration
+      const tourConfig = ${JSON.stringify(jsonData, null, 8)
+        .split("\n")
+        .map((line, i) => (i === 0 ? line : "      " + line))
+        .join("\n")};
+
+      // Initialize tour when scene is loaded
+      const sceneEl = document.querySelector("#tour-container");
+      sceneEl.addEventListener("loaded", () => {
+        const tour = new SWT.Tour(sceneEl, tourConfig);
+        tour.start();
+      });
     </script>
-</body>
+  </body>
 </html>`;
-    }
+  }
 
-    /**
-     * Export as standalone HTML viewer
-     */
-    exportViewerHTML() {
-        try {
-            const html = this.generateViewerHTML();
-            const jsonData = this.generateJSON();
-            const filename = sanitizeId(jsonData.title || 'tour') + '-viewer.html';
-            
-            downloadTextAsFile(html, filename);
-            
-            showToast('Viewer HTML exported successfully', 'success');
-            return true;
-        } catch (error) {
-            console.error('Export viewer failed:', error);
-            showToast('Export viewer failed', 'error');
-            return false;
-        }
+  /**
+   * Export as standalone HTML viewer
+   */
+  exportViewerHTML() {
+    try {
+      const html = this.generateViewerHTML();
+      const title = this.editor.config.title || "tour";
+      const filename = sanitizeId(title) + "-viewer.html";
+
+      downloadTextAsFile(html, filename);
+
+      showToast("Viewer HTML exported successfully", "success");
+      return true;
+    } catch (error) {
+      console.error("Export viewer failed:", error);
+      showToast("Export viewer failed", "error");
+      return false;
     }
+  }
+
+  /**
+   * Show export preview in modal
+   */
+  showExportPreview() {
+    try {
+      const jsonData = this.generateJSON();
+      const json = JSON.stringify(jsonData, null, 2);
+
+      const preview = document.getElementById("exportPreview");
+      if (preview) {
+        preview.textContent = json;
+      }
 
-    /**
-     * Show export preview in modal
-     */
-    showExportPreview() {
-        try {
-            const jsonData = this.generateJSON();
-            const json = JSON.stringify(jsonData, null, 2);
-            
-            const preview = document.getElementById('exportPreview');
-            if (preview) {
-                preview.textContent = json;
-            }
-            
-            showModal('exportModal');
-            return true;
-        } catch (error) {
-            console.error('Failed to show export preview:', error);
-            showToast('Failed to generate preview', 'error');
-            return false;
-        }
+      showModal("exportModal");
+      return true;
+    } catch (error) {
+      console.error("Failed to show export preview:", error);
+      showToast("Failed to generate preview", "error");
+      return false;
     }
+  }
 }
 
 export default ExportManager;

package/src/editor/js/preview-controller.js

@@ -92,7 +92,7 @@ class PreviewController {
           console.error("Error removing scene:", error);
         }
       }
-      
+
       // Clear any remaining children (loading overlays, empty state, etc)
       while (this.previewContainer.firstChild) {
         this.previewContainer.removeChild(this.previewContainer.firstChild);
@@ -100,9 +100,9 @@ class PreviewController {
     } else {
       // First load - only remove non-A-Frame elements (like empty state divs)
       const children = Array.from(this.previewContainer.children);
-      children.forEach(child => {
+      children.forEach((child) => {
         // Only remove if it's NOT an a-scene (shouldn't be any, but be safe)
-        if (child.tagName.toLowerCase() !== 'a-scene') {
+        if (child.tagName.toLowerCase() !== "a-scene") {
           this.previewContainer.removeChild(child);
         }
       });
@@ -313,6 +313,7 @@ class PreviewController {
 
   /**
    * Get current camera rotation
+   * Works with A-Frame's look-controls component by reading its internal state
    */
   getCameraRotation() {
     const aframeScene = this.previewContainer?.querySelector("a-scene");
@@ -325,7 +326,18 @@ class PreviewController {
       return null;
     }
 
-    // Get rotation from object3D which is more reliable
+    // Try to get rotation from look-controls internal state (more reliable)
+    const lookControls = camera.components?.["look-controls"];
+    if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+      const savedRotation = {
+        x: lookControls.pitchObject.rotation.x,
+        y: lookControls.yawObject.rotation.y,
+        z: 0,
+      };
+      return savedRotation;
+    }
+
+    // Fallback to object3D rotation
     const rotation = camera.object3D.rotation;
     const savedRotation = {
       x: rotation.x,
@@ -337,6 +349,7 @@ class PreviewController {
 
   /**
    * Set camera rotation
+   * Works with A-Frame's look-controls component by setting its internal state
    */
   setCameraRotation(rotation) {
     if (!rotation) {
@@ -353,17 +366,30 @@ class PreviewController {
       return;
     }
 
-    // Set rotation on object3D directly
+    // Set rotation via look-controls internal pitchObject/yawObject
+    // This is required because look-controls overrides object3D.rotation on each tick
     const setRotation = () => {
-      if (camera.object3D) {
-        camera.object3D.rotation.set(rotation.x, rotation.y, rotation.z);
+      const cam = this.previewContainer?.querySelector("[camera]");
+      if (!cam) return;
+
+      const lookControls = cam.components?.["look-controls"];
+      if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+        // Set pitch (x rotation) on pitchObject
+        lookControls.pitchObject.rotation.x = rotation.x;
+        // Set yaw (y rotation) on yawObject
+        lookControls.yawObject.rotation.y = rotation.y;
+      } else if (cam.object3D) {
+        // Fallback to direct object3D if look-controls not ready
+        cam.object3D.rotation.set(rotation.x, rotation.y, rotation.z);
       }
     };
 
-    // Try immediately and also after a delay to ensure it sticks
+    // Try immediately and also after delays to ensure it sticks
+    // A-Frame look-controls may not be fully initialized immediately
     setRotation();
     setTimeout(setRotation, 100);
     setTimeout(setRotation, 300);
+    setTimeout(setRotation, 500);
   }
 
   /**
@@ -372,15 +398,8 @@ class PreviewController {
   async refresh() {
     const scene = this.editor.sceneManager.getCurrentScene();
     if (scene) {
-      // Save current camera rotation
-      const savedRotation = this.getCameraRotation();
-      // Reload scene
-      await this.loadScene(scene);
-
-      // Restore camera rotation
-      if (savedRotation) {
-        this.setCameraRotation(savedRotation);
-      }
+      // loadScene with preserveCameraRotation=true handles save/restore internally
+      await this.loadScene(scene, true);
     }
   }