senangwebs-tour 1.0.2

package/src/editor/js/utils.js

@@ -0,0 +1,217 @@
+// Utility Functions
+
+/**
+ * Generate a unique ID
+ */
+function generateId(prefix = 'id') {
+    return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Sanitize string for use as ID
+ */
+function sanitizeId(str) {
+    return str.toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '');
+}
+
+/**
+ * Generate thumbnail from image file
+ */
+async function generateThumbnail(file, maxWidth = 200, maxHeight = 150) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        
+        reader.onload = (e) => {
+            const img = new Image();
+            
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                
+                let width = img.width;
+                let height = img.height;
+                
+                if (width > height) {
+                    if (width > maxWidth) {
+                        height *= maxWidth / width;
+                        width = maxWidth;
+                    }
+                } else {
+                    if (height > maxHeight) {
+                        width *= maxHeight / height;
+                        height = maxHeight;
+                    }
+                }
+                
+                canvas.width = width;
+                canvas.height = height;
+                ctx.drawImage(img, 0, 0, width, height);
+                
+                resolve(canvas.toDataURL('image/jpeg', 0.7));
+            };
+            
+            img.onerror = reject;
+            img.src = e.target.result;
+        };
+        
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+
+/**
+ * Load image file as data URL
+ */
+async function loadImageAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+
+/**
+ * Show toast notification
+ */
+function showToast(message, type = 'info', duration = 3000) {
+    const toast = document.getElementById('toast');
+    toast.textContent = message;
+    toast.className = `toast ${type}`;
+    toast.classList.add('show');
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, duration);
+}
+
+/**
+ * Show modal
+ */
+function showModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.classList.add('show');
+    }
+}
+
+/**
+ * Hide modal
+ */
+function hideModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.classList.remove('show');
+    }
+}
+
+/**
+ * Format file size
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+/**
+ * Download text as file
+ */
+function downloadTextAsFile(text, filename) {
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+/**
+ * Copy text to clipboard
+ */
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    } catch (err) {
+        // Fallback for older browsers
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        const success = document.execCommand('copy');
+        document.body.removeChild(textarea);
+        return success;
+    }
+}
+
+/**
+ * Debounce function
+ */
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+/**
+ * Convert position object to string
+ */
+function positionToString(pos) {
+    return `${pos.x.toFixed(1)} ${pos.y.toFixed(1)} ${pos.z.toFixed(1)}`;
+}
+
+/**
+ * Parse position string to object
+ */
+function parsePosition(str) {
+    const parts = str.split(' ').map(Number);
+    return { x: parts[0] || 0, y: parts[1] || 0, z: parts[2] || 0 };
+}
+
+/**
+ * Validate email
+ */
+function isValidEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
+
+/**
+ * Deep clone object
+ */
+function deepClone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+export {
+    generateId,
+    sanitizeId,
+    generateThumbnail,
+    loadImageAsDataUrl,
+    showToast,
+    showModal,
+    hideModal,
+    formatFileSize,
+    downloadTextAsFile,
+    debounce,
+    positionToString,
+    parsePosition,
+    isValidEmail,
+    deepClone
+};

package/src/index.js

@@ -0,0 +1,245 @@
+/**
+ * SenangWebs Tour (SWT) - Main Library Entry Point
+ * Version 1.0.0
+ */
+
+import './components/hotspot-listener.js';
+import { AssetManager } from './AssetManager.js';
+import { SceneManager } from './SceneManager.js';
+import { HotspotManager } from './HotspotManager.js';
+
+/**
+ * Main Tour class - The public API for the SWT library
+ */
+class Tour {
+  constructor(aframeSceneEl, tourConfig) {
+    if (!aframeSceneEl) {
+      throw new Error('SWT.Tour requires an A-Frame scene element');
+    }
+
+    if (!tourConfig || !tourConfig.scenes || !tourConfig.initialScene) {
+      throw new Error('SWT.Tour requires a valid tour configuration with scenes and initialScene');
+    }
+
+    this.sceneEl = aframeSceneEl;
+    this.config = tourConfig;
+    this.isStarted = false;
+
+    // Initialize managers
+    this.assetManager = new AssetManager(this.sceneEl);
+    this.sceneManager = new SceneManager(this.sceneEl, this.assetManager);
+    
+    const defaultHotspotSettings = this.config.settings?.defaultHotspot || {};
+    this.hotspotManager = new HotspotManager(
+      this.sceneEl, 
+      this.assetManager, 
+      defaultHotspotSettings
+    );
+
+    // Event listeners
+    this.boundHandleHotspotClick = this.handleHotspotClick.bind(this);
+    this.sceneEl.addEventListener('swt-hotspot-clicked', this.boundHandleHotspotClick);
+
+    // Ensure cursor exists for interaction
+    this.ensureCursor();
+  }
+
+  /**
+   * Ensure the scene has a cursor for interaction
+   */
+  ensureCursor() {
+    const camera = this.sceneEl.querySelector('[camera]');
+    if (camera) {
+      let cursor = camera.querySelector('[cursor]');
+      if (!cursor) {
+        cursor = document.createElement('a-cursor');
+        cursor.setAttribute('fuse', 'true');
+        cursor.setAttribute('fuse-timeout', '1500');
+        camera.appendChild(cursor);
+      }
+    }
+  }
+
+  /**
+   * Start the tour - Load the initial scene
+   * @returns {Promise}
+   */
+  async start() {
+    if (this.isStarted) {
+      console.warn('Tour has already been started');
+      return Promise.resolve();
+    }
+
+    const initialSceneId = this.config.initialScene;
+    const initialSceneData = this.config.scenes[initialSceneId];
+
+    if (!initialSceneData) {
+      throw new Error(`Initial scene "${initialSceneId}" not found in tour configuration`);
+    }
+
+    try {
+      // Emit scene-loading event
+      this.emit('scene-loading', { sceneId: initialSceneId });
+
+      // Load the scene
+      await this.sceneManager.loadScene(initialSceneId, initialSceneData);
+
+      // Create hotspots
+      await this.hotspotManager.createHotspots(initialSceneData.hotspots || []);
+
+      this.isStarted = true;
+
+      // Emit events
+      this.emit('scene-loaded', { sceneId: initialSceneId });
+      this.emit('tour-started', { sceneId: initialSceneId });
+
+      return Promise.resolve();
+    } catch (error) {
+      console.error('Failed to start tour:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Navigate to a specific scene
+   * @param {string} sceneId - The ID of the scene to navigate to
+   * @returns {Promise}
+   */
+  async navigateTo(sceneId) {
+    const sceneData = this.config.scenes[sceneId];
+
+    if (!sceneData) {
+      throw new Error(`Scene "${sceneId}" not found in tour configuration`);
+    }
+
+    if (this.sceneManager.getCurrentSceneId() === sceneId) {
+      console.warn(`Already at scene "${sceneId}"`);
+      return Promise.resolve();
+    }
+
+    try {
+      // Emit scene-loading event
+      this.emit('scene-loading', { sceneId: sceneId });
+
+      // Remove old hotspots
+      this.hotspotManager.removeAllHotspots();
+
+      // Transition to new scene
+      await this.sceneManager.transitionTo(sceneId, sceneData);
+
+      // Create new hotspots
+      await this.hotspotManager.createHotspots(sceneData.hotspots || []);
+
+      // Emit scene-loaded event
+      this.emit('scene-loaded', { sceneId: sceneId });
+
+      return Promise.resolve();
+    } catch (error) {
+      console.error(`Failed to navigate to scene "${sceneId}":`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Handle hotspot click events
+   * @param {CustomEvent} evt - The hotspot click event
+   */
+  handleHotspotClick(evt) {
+    const { hotspotData } = evt.detail;
+    const currentSceneId = this.sceneManager.getCurrentSceneId();
+
+    // Emit hotspot-activated event
+    this.emit('hotspot-activated', {
+      hotspotData: hotspotData,
+      sceneId: currentSceneId
+    });
+
+    // Handle the action
+    if (hotspotData.action) {
+      this.handleAction(hotspotData.action);
+    }
+  }
+
+  /**
+   * Handle a hotspot action
+   * @param {Object} action - The action object
+   */
+  handleAction(action) {
+    switch (action.type) {
+      case 'navigateTo':
+        if (action.target) {
+          this.navigateTo(action.target).catch(err => {
+            console.error('Navigation failed:', err);
+          });
+        }
+        break;
+      
+      default:
+        console.warn(`Unknown action type: ${action.type}`);
+    }
+  }
+
+  /**
+   * Get the current scene ID
+   * @returns {string}
+   */
+  getCurrentSceneId() {
+    return this.sceneManager.getCurrentSceneId();
+  }
+
+  /**
+   * Emit a custom event
+   * @param {string} eventName - The event name
+   * @param {Object} detail - Event detail object
+   */
+  emit(eventName, detail = {}) {
+    const event = new CustomEvent(eventName, {
+      detail: detail,
+      bubbles: true,
+      cancelable: true
+    });
+    this.sceneEl.dispatchEvent(event);
+  }
+
+  /**
+   * Add an event listener
+   * @param {string} eventName - The event name
+   * @param {Function} handler - The event handler
+   */
+  addEventListener(eventName, handler) {
+    this.sceneEl.addEventListener(eventName, handler);
+  }
+
+  /**
+   * Remove an event listener
+   * @param {string} eventName - The event name
+   * @param {Function} handler - The event handler
+   */
+  removeEventListener(eventName, handler) {
+    this.sceneEl.removeEventListener(eventName, handler);
+  }
+
+  /**
+   * Destroy the tour and clean up resources
+   */
+  destroy() {
+    // Remove event listeners
+    this.sceneEl.removeEventListener('swt-hotspot-clicked', this.boundHandleHotspotClick);
+
+    // Clean up managers
+    this.hotspotManager.destroy();
+    this.sceneManager.destroy();
+    this.assetManager.destroy();
+
+    this.isStarted = false;
+  }
+}
+
+// Export the Tour class as the main API
+export { Tour };
+
+// Also attach to window for UMD usage
+if (typeof window !== 'undefined') {
+  window.SWT = window.SWT || {};
+  window.SWT.Tour = Tour;
+}