senangwebs-tour 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "senangwebs-tour",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "description": "VR 360° virtual tour system with visual editor and viewer library",
   "main": "dist/swt.js",
@@ -24,6 +24,7 @@
   "author": "a-hakim",
   "license": "MIT",
   "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.2",

package/src/AssetManager.js

@@ -56,8 +56,19 @@ export class AssetManager {
    * @returns {Promise} - Resolves when the asset is loaded
    */
   async preloadImage(url, id) {
-    if (this.loadedAssets.has(id)) {
-      return Promise.resolve(this.loadedAssets.get(id));
+    // Check if asset exists and if the URL is the same
+    const existingAsset = this.loadedAssets.get(id);
+    if (existingAsset) {
+      const existingSrc = existingAsset.getAttribute('src');
+      if (existingSrc === url) {
+        // Same URL, return cached asset
+        return Promise.resolve(existingAsset);
+      }
+      // URL changed - remove old asset and create new one
+      if (existingAsset.parentNode) {
+        existingAsset.parentNode.removeChild(existingAsset);
+      }
+      this.loadedAssets.delete(id);
     }
 
     // Ensure assets element is ready

package/src/HotspotManager.js

@@ -2,13 +2,17 @@
  * HotspotManager - Creates, manages, and removes hotspot entities in the A-Frame scene
  */
 export class HotspotManager {
-  constructor(sceneEl, assetManager, defaultHotspotSettings = {}) {
+  constructor(sceneEl, assetManager, defaultHotspotSettings = {}, iconRenderer = null) {
     this.sceneEl = sceneEl;
     this.assetManager = assetManager;
     this.defaultSettings = defaultHotspotSettings;
+    this.iconRenderer = iconRenderer;
     this.activeHotspots = [];
     this.tooltipEl = null;
     this.tooltipCreated = false;
+    this.iconDataUrls = new Map(); // Cache for generated icon data URLs
+    this.sceneLoadCounter = 0; // Unique counter to prevent asset ID collisions between scene loads
+    this.currentAssetPrefix = ''; // Current asset ID prefix for this scene load
     
     // Listen for hover events
     this.sceneEl.addEventListener('swt-hotspot-hover', (evt) => {
@@ -87,20 +91,50 @@ export class HotspotManager {
       this.createTooltip();
     }
 
-    // First, preload all hotspot icons (with error handling)
-    const iconPromises = hotspots.map((hotspot, index) => {
+    // Increment scene load counter to ensure unique asset IDs for this scene load
+    // This prevents A-Frame/THREE.js texture caching from reusing old icons
+    this.sceneLoadCounter++;
+    this.currentAssetPrefix = `hotspot-icon-${this.sceneLoadCounter}`;
+
+    // Clear previous icon data URLs cache
+    this.iconDataUrls.clear();
+
+    // Process all hotspot icons SEQUENTIALLY to avoid race condition
+    // (IconRenderer uses a shared renderContainer that would be corrupted by parallel generation)
+    for (let index = 0; index < hotspots.length; index++) {
+      const hotspot = hotspots[index];
       const icon = hotspot.appearance?.icon || this.defaultSettings.icon;
-      if (icon) {
-        const assetId = `hotspot-icon-${index}`;
-        return this.assetManager.preloadImage(icon, assetId).catch(err => {
+      const color = hotspot.appearance?.color || '#ffffff';
+      
+      if (!icon) continue;
+      
+      // Check if it's an image URL
+      const isImageUrl = icon.startsWith('http') || icon.startsWith('data:') || icon.startsWith('/');
+      
+      // Use unique asset ID that includes scene load counter
+      const assetId = `${this.currentAssetPrefix}-${index}`;
+      
+      if (isImageUrl) {
+        // Preload as image asset
+        try {
+          await this.assetManager.preloadImage(icon, assetId);
+        } catch (err) {
           console.warn(`Failed to load icon for hotspot ${index}, will use color instead`);
-          return null; // Continue even if icon fails to load
-        });
+        }
+      } else if (this.iconRenderer) {
+        // Generate icon data URL from SenangStart icon name
+        try {
+          const dataUrl = await this.iconRenderer.generateIconDataUrl(icon, color, 128);
+          if (dataUrl) {
+            this.iconDataUrls.set(index, dataUrl);
+            // Preload the generated data URL as an asset
+            await this.assetManager.preloadImage(dataUrl, assetId);
+          }
+        } catch (err) {
+          console.warn(`Failed to generate icon for hotspot ${index}:`, err);
+        }
       }
-      return Promise.resolve();
-    });
-
-    await Promise.all(iconPromises);
+    }
 
     // Then create the hotspot entities
     hotspots.forEach((hotspot, index) => {
@@ -121,26 +155,31 @@ export class HotspotManager {
     const pos = hotspot.position;
     hotspotEl.setAttribute('position', `${pos.x} ${pos.y} ${pos.z}`);
 
-    // Set icon or fallback to plane with color
+    // Get icon and color
     const icon = hotspot.appearance?.icon || this.defaultSettings.icon;
-    const assetId = `hotspot-icon-${index}`;
-    const assetEl = icon ? document.getElementById(assetId) : null;
+    const color = hotspot.appearance?.color || '#4CC3D9';
+    
+    // Check if we have a preloaded icon asset (either from URL or generated from icon name)
+    // Use the unique asset prefix that includes scene load counter
+    const assetId = `${this.currentAssetPrefix}-${index}`;
+    const assetsEl = this.sceneEl.querySelector('a-assets');
+    const assetEl = assetsEl ? assetsEl.querySelector(`#${assetId}`) : null;
     
     let visualEl;
     
-    // Check if icon was successfully loaded
+    // Check if icon asset was successfully loaded/generated
     if (icon && assetEl) {
       visualEl = document.createElement('a-image');
       visualEl.setAttribute('src', `#${assetId}`);
       // Make images double-sided
-      visualEl.setAttribute('material', 'side', 'double');
+      visualEl.setAttribute('material', 'side: double; transparent: true; alphaTest: 0.1');
     } else {
-      // Fallback to a plane with color
+      // Fallback to a colored plane
       visualEl = document.createElement('a-plane');
-      visualEl.setAttribute('color', hotspot.appearance?.color || '#4CC3D9');
+      visualEl.setAttribute('color', color);
       visualEl.setAttribute('width', '1');
       visualEl.setAttribute('height', '1');
-      // Make plane double-sided and always face camera
+      // Make plane double-sided
       visualEl.setAttribute('material', 'side', 'double');
     }
 
@@ -168,6 +207,9 @@ export class HotspotManager {
    * Remove all active hotspots from the scene
    */
   removeAllHotspots() {
+    // Remove hotspot icon assets from a-assets to prevent icon mixup on scene navigation
+    this.removeHotspotIconAssets();
+    
     this.activeHotspots.forEach(hotspot => {
       if (hotspot.parentNode) {
         hotspot.parentNode.removeChild(hotspot);
@@ -175,12 +217,43 @@ export class HotspotManager {
     });
     this.activeHotspots = [];
     
+    // Clear icon data URLs cache
+    this.iconDataUrls.clear();
+    
     // Hide tooltip
     if (this.tooltipEl) {
       this.tooltipEl.setAttribute('visible', 'false');
     }
   }
 
+  /**
+   * Remove all hotspot icon assets from a-assets element
+   * This prevents icon mixup when navigating between scenes
+   */
+  removeHotspotIconAssets() {
+    const assetsEl = this.sceneEl.querySelector('a-assets');
+    if (!assetsEl) return;
+    
+    // Find and remove all assets with IDs matching hotspot-icon-* pattern
+    const iconAssets = assetsEl.querySelectorAll('[id^="hotspot-icon-"]');
+    iconAssets.forEach(asset => {
+      if (asset.parentNode) {
+        asset.parentNode.removeChild(asset);
+      }
+    });
+    
+    // Also clear the asset manager's loaded assets for hotspot icons
+    if (this.assetManager && this.assetManager.loadedAssets) {
+      const keysToDelete = [];
+      this.assetManager.loadedAssets.forEach((value, key) => {
+        if (key.startsWith('hotspot-icon-')) {
+          keysToDelete.push(key);
+        }
+      });
+      keysToDelete.forEach(key => this.assetManager.loadedAssets.delete(key));
+    }
+  }
+
   /**
    * Clean up the hotspot manager
    */

package/src/IconRenderer.js

@@ -0,0 +1,123 @@
+/**
+ * IconRenderer - Converts SenangStart icon names to image data URLs for A-Frame
+ */
+export class IconRenderer {
+  constructor() {
+    this.iconCache = new Map();
+    this.renderContainer = null;
+  }
+
+  /**
+   * Initialize the hidden render container
+   */
+  init() {
+    if (this.renderContainer) return;
+    
+    this.renderContainer = document.createElement('div');
+    this.renderContainer.id = 'swt-icon-renderer';
+    this.renderContainer.style.cssText = `
+      position: absolute;
+      left: -9999px;
+      top: -9999px;
+      width: 128px;
+      height: 128px;
+      pointer-events: none;
+      visibility: hidden;
+    `;
+    document.body.appendChild(this.renderContainer);
+  }
+
+  /**
+   * Generate an image data URL from a SenangStart icon
+   * @param {string} iconName - SenangStart icon name (e.g., 'arrow-right')
+   * @param {string} color - Hex color for the icon
+   * @param {number} size - Size in pixels (default 128)
+   * @returns {Promise<string>} - Data URL of the icon image
+   */
+  async generateIconDataUrl(iconName, color = '#ffffff', size = 128) {
+    const cacheKey = `${iconName}-${color}-${size}`;
+    
+    if (this.iconCache.has(cacheKey)) {
+      return this.iconCache.get(cacheKey);
+    }
+
+    this.init();
+
+    return new Promise((resolve, reject) => {
+      // Create the ss-icon element
+      this.renderContainer.innerHTML = `
+        <ss-icon 
+          icon="${iconName}" 
+          thickness="2.5" 
+          style="color: ${color}; width: ${size}px; height: ${size}px; display: block;"
+        ></ss-icon>
+      `;
+
+      // Wait for the custom element to render
+      setTimeout(() => {
+        try {
+          const ssIcon = this.renderContainer.querySelector('ss-icon');
+          if (!ssIcon || !ssIcon.shadowRoot) {
+            console.warn(`Icon ${iconName} not rendered properly`);
+            resolve(null);
+            return;
+          }
+
+          // Get the SVG from shadow root
+          const svg = ssIcon.shadowRoot.querySelector('svg');
+          if (!svg) {
+            console.warn(`SVG not found for icon ${iconName}`);
+            resolve(null);
+            return;
+          }
+
+          // Clone and prepare SVG
+          const svgClone = svg.cloneNode(true);
+          svgClone.setAttribute('width', size);
+          svgClone.setAttribute('height', size);
+          svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+          
+          // Apply the color to all paths/elements
+          svgClone.querySelectorAll('path, circle, rect, line, polyline, polygon').forEach(el => {
+            el.setAttribute('stroke', color);
+            // Keep fill as currentColor if it's set
+            const fill = el.getAttribute('fill');
+            if (fill && fill !== 'none') {
+              el.setAttribute('fill', color);
+            }
+          });
+
+          // Convert SVG to data URL
+          const svgString = new XMLSerializer().serializeToString(svgClone);
+          const dataUrl = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
+          
+          // Cache the result
+          this.iconCache.set(cacheKey, dataUrl);
+          
+          resolve(dataUrl);
+        } catch (error) {
+          console.error('Error generating icon data URL:', error);
+          resolve(null);
+        }
+      }, 100); // Wait for custom element to render
+    });
+  }
+
+  /**
+   * Clear the icon cache
+   */
+  clearCache() {
+    this.iconCache.clear();
+  }
+
+  /**
+   * Destroy the renderer
+   */
+  destroy() {
+    if (this.renderContainer && this.renderContainer.parentNode) {
+      this.renderContainer.parentNode.removeChild(this.renderContainer);
+    }
+    this.renderContainer = null;
+    this.iconCache.clear();
+  }
+}

package/src/SceneManager.js

@@ -62,15 +62,21 @@ export class SceneManager {
    * Transition to a new scene with fade effect
    * @param {string} sceneId - The target scene ID
    * @param {Object} sceneData - The scene configuration object
+   * @param {Function} onSceneLoaded - Optional callback to run after scene loads but before fade-in
    * @returns {Promise} - Resolves when the transition is complete
    */
-  async transitionTo(sceneId, sceneData) {
+  async transitionTo(sceneId, sceneData, onSceneLoaded = null) {
     // Fade out
     await this.fadeOut();
 
     // Load new scene
     await this.loadScene(sceneId, sceneData);
 
+    // Call onSceneLoaded callback (e.g., to set camera position while screen is black)
+    if (onSceneLoaded && typeof onSceneLoaded === 'function') {
+      onSceneLoaded();
+    }
+
     // Fade in
     await this.fadeIn();
 

package/src/editor/css/main.css

@@ -223,7 +223,6 @@ body {
 
 .scene-card.active {
   border-color: var(--accent-primary);
-  background: rgba(59, 130, 246, 0.1);
 }
 
 .scene-thumbnail {
@@ -677,7 +676,6 @@ body {
 
 .hotspot-item.active {
   border-color: var(--accent-primary);
-  background: rgba(59, 130, 246, 0.1);
 }
 
 .hotspot-color {
@@ -1020,6 +1018,47 @@ body {
   }
 }
 
+/* Icon Grid */
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+  margin-top: 8px;
+  height: 280px;
+  overflow-y: auto;
+}
+
+/* Icon Grid Buttons */
+.icon-btn {
+  width: 100%;
+  aspect-ratio: 1;
+  border: 2px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+}
+
+.icon-btn ss-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.icon-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--text-muted);
+}
+
+.icon-btn.active {
+  border-color: var(--accent-primary);
+  background: rgba(0, 255, 153, 0.1);
+  color: var(--accent-primary);
+}
+
 /* Responsive */
 @media (max-width: 1024px) {
   .sidebar {

package/src/editor/js/editor.js

@@ -1,14 +1,12 @@
 // Main Editor Controller
-import { debounce, showModal } from './utils.js';
+import { debounce, showModal, showToast } from './utils.js';
 
 class TourEditor {
     constructor(options = {}) {
         this.config = {
             title: options.projectName || 'My Virtual Tour',
             description: '',
-            initialSceneId: '',
-            autoRotate: false,
-            showCompass: false
+            initialSceneId: ''
         };
         
         // Store initialization options
@@ -57,6 +55,9 @@ class TourEditor {
         // Setup event listeners
         this.setupEventListeners();
         
+        // Populate icon grid
+        this.uiController.populateIconGrid();
+        
         // Load saved project if exists (but only if it has valid data)
         if (this.storageManager.hasProject()) {
             try {
@@ -131,7 +132,7 @@ class TourEditor {
         });
 
         document.getElementById('addHotspotBtn')?.addEventListener('click', () => {
-            this.hotspotEditor.enablePlacementMode();
+            this.addHotspotAtCursor();
         });
         
         document.getElementById('clearHotspotsBtn')?.addEventListener('click', () => {
@@ -163,6 +164,19 @@ class TourEditor {
             this.updateCurrentHotspot('color', e.target.value);
         });
 
+        // Icon grid button clicks
+        document.getElementById('hotspotIconGrid')?.addEventListener('click', (e) => {
+            const btn = e.target.closest('.icon-btn');
+            if (btn) {
+                const iconValue = btn.dataset.icon;
+                // Update active state
+                document.querySelectorAll('#hotspotIconGrid .icon-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                // Update hotspot
+                this.updateCurrentHotspot('icon', iconValue);
+            }
+        });
+
         document.getElementById('hotspotPosX')?.addEventListener('input', debounce((e) => {
             this.updateCurrentHotspotPosition('x', parseFloat(e.target.value) || 0);
         }, 300));
@@ -187,6 +201,14 @@ class TourEditor {
             this.updateCurrentSceneImage(e.target.value);
         }, 300));
 
+        document.getElementById('setStartingPosBtn')?.addEventListener('click', () => {
+            this.setSceneStartingPosition();
+        });
+        
+        document.getElementById('clearStartingPosBtn')?.addEventListener('click', () => {
+            this.clearSceneStartingPosition();
+        });
+
         document.getElementById('tourTitle')?.addEventListener('input', debounce((e) => {
             this.config.title = e.target.value;
             this.markUnsavedChanges();
@@ -214,16 +236,6 @@ class TourEditor {
             this.config.initialSceneId = e.target.value;
             this.markUnsavedChanges();
         });
-        
-        document.getElementById('tourAutoRotate')?.addEventListener('change', (e) => {
-            this.config.autoRotate = e.target.checked;
-            this.markUnsavedChanges();
-        });
-        
-        document.getElementById('tourShowCompass')?.addEventListener('change', (e) => {
-            this.config.showCompass = e.target.checked;
-            this.markUnsavedChanges();
-        });
 
         document.getElementById('exportJsonBtn')?.addEventListener('click', () => {
             this.exportManager.exportJSON();
@@ -233,8 +245,8 @@ class TourEditor {
             this.exportManager.copyJSON();
         });
         
-        document.getElementById('exportViewerBtn')?.addEventListener('click', () => {
-            this.exportManager.exportViewerHTML();
+        document.getElementById('exportViewerBtn')?.addEventListener('click', async () => {
+            await this.exportManager.exportViewerHTML();
         });
 
         document.querySelectorAll('.modal-close').forEach(btn => {
@@ -302,7 +314,15 @@ class TourEditor {
             position.y = parseFloat(position.y.toFixed(2));
             position.z = parseFloat(position.z.toFixed(2));
         }
-        const hotspot = this.hotspotEditor.addHotspot(position);
+        
+        // Capture current camera orientation for reliable pointing later
+        const cameraRotation = this.previewController.getCameraRotation();
+        const cameraOrientation = cameraRotation ? {
+            pitch: cameraRotation.x,
+            yaw: cameraRotation.y
+        } : null;
+        
+        const hotspot = this.hotspotEditor.addHotspot(position, '', cameraOrientation);
         if (hotspot) {
             this.lastRenderedSceneIndex = -1;
             this.render();
@@ -312,6 +332,26 @@ class TourEditor {
         }
     }
 
+    /**
+     * Add hotspot at current cursor position (center of view)
+     * This uses the A-Cursor's raycaster intersection with the sky sphere
+     */
+    addHotspotAtCursor() {
+        const scene = this.sceneManager.getCurrentScene();
+        if (!scene) {
+            showToast('Please select a scene first', 'error');
+            return;
+        }
+
+        const position = this.previewController.getCursorIntersection();
+        if (!position) {
+            showToast('Could not get cursor position. Please ensure the preview is loaded.', 'error');
+            return;
+        }
+
+        this.addHotspotAtPosition(position);
+    }
+
     /**
      * Select scene by index
      */
@@ -347,8 +387,8 @@ class TourEditor {
             this.uiController.updateTargetSceneOptions();
             this.uiController.switchTab('hotspot');
             
-            if (hotspot && hotspot.position) {
-                this.previewController.pointCameraToHotspot(hotspot.position);
+            if (hotspot) {
+                this.previewController.pointCameraToHotspot(hotspot);
             }
         }
     }
@@ -422,6 +462,10 @@ class TourEditor {
             
             hotspot.position[axis] = value;
             
+            // Clear camera orientation since position changed manually
+            // Will fallback to position-based calculation when pointing camera
+            hotspot.cameraOrientation = null;
+            
             const pos = hotspot.position;
             const distance = Math.sqrt(pos.x * pos.x + pos.y * pos.y + pos.z * pos.z);
             if (distance > 10) {
@@ -476,6 +520,49 @@ class TourEditor {
         }
     }
 
+    /**
+     * Set scene starting position to current camera rotation
+     */
+    setSceneStartingPosition() {
+        const scene = this.sceneManager.getCurrentScene();
+        if (!scene) {
+            showToast('No scene selected', 'error');
+            return;
+        }
+        
+        const rotation = this.previewController.getCameraRotation();
+        if (!rotation) {
+            showToast('Could not get camera rotation', 'error');
+            return;
+        }
+        
+        scene.startingPosition = {
+            pitch: rotation.x,
+            yaw: rotation.y
+        };
+        
+        this.uiController.updateSceneProperties(scene);
+        this.markUnsavedChanges();
+        showToast('Starting position set', 'success');
+    }
+
+    /**
+     * Clear scene starting position
+     */
+    clearSceneStartingPosition() {
+        const scene = this.sceneManager.getCurrentScene();
+        if (!scene) {
+            showToast('No scene selected', 'error');
+            return;
+        }
+        
+        scene.startingPosition = null;
+        
+        this.uiController.updateSceneProperties(scene);
+        this.markUnsavedChanges();
+        showToast('Starting position cleared', 'success');
+    }
+
     /**
      * Render all UI
      */
@@ -562,9 +649,7 @@ class TourEditor {
         this.config = {
             title: 'My Virtual Tour',
             description: '',
-            initialSceneId: '',
-            autoRotate: false,
-            showCompass: false
+            initialSceneId: ''
         };
         
         this.sceneManager.clearScenes();