senangwebs-tour 1.0.3 → 1.0.6

package/dist/swt.js

@@ -55829,8 +55829,19 @@ void main() {
 	   * @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
@@ -55989,15 +56000,21 @@ void main() {
 	   * 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();
 
@@ -56092,13 +56109,17 @@ void main() {
 	 * HotspotManager - Creates, manages, and removes hotspot entities in the A-Frame scene
 	 */
 	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) => {
@@ -56177,20 +56198,50 @@ void main() {
 	      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) => {
@@ -56211,26 +56262,31 @@ void main() {
 	    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');
 	    }
 
@@ -56258,6 +56314,9 @@ void main() {
 	   * 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);
@@ -56265,12 +56324,43 @@ void main() {
 	    });
 	    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
 	   */
@@ -56282,6 +56372,130 @@ void main() {
 	  }
 	}
 
+	/**
+	 * IconRenderer - Converts SenangStart icon names to image data URLs for A-Frame
+	 */
+	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();
+	  }
+	}
+
 	/**
 	 * SenangWebs Tour (SWT) - Main Library Entry Point
 	 * Version 1.0.3
@@ -56310,12 +56524,14 @@ void main() {
 	    // Initialize managers
 	    this.assetManager = new AssetManager(this.sceneEl);
 	    this.sceneManager = new SceneManager(this.sceneEl, this.assetManager);
+	    this.iconRenderer = new IconRenderer();
 
 	    const defaultHotspotSettings = this.config.settings?.defaultHotspot || {};
 	    this.hotspotManager = new HotspotManager(
 	      this.sceneEl,
 	      this.assetManager,
-	      defaultHotspotSettings
+	      defaultHotspotSettings,
+	      this.iconRenderer
 	    );
 
 	    // Event listeners
@@ -56376,6 +56592,11 @@ void main() {
 
 	      this.isStarted = true;
 
+	      // Set camera to starting position if set
+	      if (initialSceneData.startingPosition) {
+	        this.setCameraToStartingPosition(initialSceneData.startingPosition);
+	      }
+
 	      // Emit events
 	      this.emit("scene-loaded", { sceneId: initialSceneId });
 	      this.emit("tour-started", { sceneId: initialSceneId });
@@ -56411,8 +56632,13 @@ void main() {
 	      // Remove old hotspots
 	      this.hotspotManager.removeAllHotspots();
 
-	      // Transition to new scene
-	      await this.sceneManager.transitionTo(sceneId, sceneData);
+	      // Transition to new scene with callback to set camera position while screen is black
+	      await this.sceneManager.transitionTo(sceneId, sceneData, () => {
+	        // Set camera to starting position during transition (while screen is still black)
+	        if (sceneData.startingPosition) {
+	          this.setCameraToStartingPosition(sceneData.startingPosition);
+	        }
+	      });
 
 	      // Create new hotspots
 	      await this.hotspotManager.createHotspots(sceneData.hotspots || []);
@@ -56466,6 +56692,41 @@ void main() {
 	    }
 	  }
 
+	  /**
+	   * Set camera to a starting position immediately
+	   * Uses look-controls internal pitchObject/yawObject for proper A-Frame compatibility
+	   * @param {Object} startingPosition - Object with pitch and yaw in radians
+	   */
+	  setCameraToStartingPosition(startingPosition) {
+	    if (!startingPosition) return;
+
+	    const camera = this.sceneEl.querySelector("[camera]");
+	    if (!camera) return;
+
+	    // Get look-controls component
+	    camera.components?.["look-controls"];
+
+	    // Set rotation using look-controls internal objects (already in radians)
+	    const setRotation = () => {
+	      const cam = this.sceneEl.querySelector("[camera]");
+	      if (!cam) return;
+	      
+	      const lc = cam.components?.["look-controls"];
+	      if (lc && lc.pitchObject && lc.yawObject) {
+	        lc.pitchObject.rotation.x = startingPosition.pitch;
+	        lc.yawObject.rotation.y = startingPosition.yaw;
+	      } else if (cam.object3D) {
+	        cam.object3D.rotation.set(startingPosition.pitch, startingPosition.yaw, 0);
+	      }
+	    };
+
+	    // Set immediately and retry a few times to ensure it sticks
+	    setRotation();
+	    setTimeout(setRotation, 100);
+	    setTimeout(setRotation, 300);
+	    setTimeout(setRotation, 500);
+	  }
+
 	  /**
 	   * Get the current scene ID
 	   * @returns {string}
@@ -56520,6 +56781,11 @@ void main() {
 	    this.hotspotManager.destroy();
 	    this.sceneManager.destroy();
 	    this.assetManager.destroy();
+	    
+	    // Clean up icon renderer
+	    if (this.iconRenderer) {
+	      this.iconRenderer.destroy();
+	    }
 
 	    this.isStarted = false;
 	  }