senangwebs-tour 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "senangwebs-tour",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "description": "VR 360° virtual tour system with visual editor and viewer library",
   "main": "dist/swt.js",

package/src/editor/js/editor.js

@@ -1,5 +1,6 @@
 // Main Editor Controller
 import { debounce, showModal, showToast } from './utils.js';
+import EventEmitter, { EditorEvents } from './event-emitter.js';
 
 class TourEditor {
     constructor(options = {}) {
@@ -29,6 +30,47 @@ class TourEditor {
         this.hasUnsavedChanges = false;
         this.lastRenderedSceneIndex = -1;
         this.listenersSetup = false;
+        
+        // Initialize event emitter
+        this.events = new EventEmitter();
+    }
+
+    /**
+     * Subscribe to editor events
+     * @param {string} event - Event name (use EditorEvents constants)
+     * @param {Function} callback - Callback function
+     * @returns {Function} Unsubscribe function
+     */
+    on(event, callback) {
+        return this.events.on(event, callback);
+    }
+
+    /**
+     * Subscribe to an event once
+     * @param {string} event - Event name
+     * @param {Function} callback - Callback function
+     * @returns {Function} Unsubscribe function
+     */
+    once(event, callback) {
+        return this.events.once(event, callback);
+    }
+
+    /**
+     * Unsubscribe from an event
+     * @param {string} event - Event name
+     * @param {Function} callback - Callback to remove
+     */
+    off(event, callback) {
+        this.events.off(event, callback);
+    }
+
+    /**
+     * Emit an event
+     * @param {string} event - Event name
+     * @param {Object} data - Event data
+     */
+    emit(event, data = {}) {
+        this.events.emit(event, data);
     }
 
     /**
@@ -55,8 +97,8 @@ class TourEditor {
         // Setup event listeners
         this.setupEventListeners();
         
-        // Populate icon grid
-        this.uiController.populateIconGrid();
+        // Populate icon grid (async to wait for custom element registration)
+        await this.uiController.populateIconGrid();
         
         // Load saved project if exists (but only if it has valid data)
         if (this.storageManager.hasProject()) {
@@ -89,6 +131,9 @@ class TourEditor {
         
         showToast('Editor ready', 'success');
         
+        // Emit ready event
+        this.emit(EditorEvents.READY, { config: this.options });
+        
         return true;
     }
 
@@ -294,6 +339,9 @@ class TourEditor {
             }
 
             const scene = await this.sceneManager.addScene(file);
+            if (scene) {
+                this.emit(EditorEvents.SCENE_ADD, { scene, file });
+            }
         }
         this.uiController.setLoading(false);
         this.render();
@@ -327,6 +375,11 @@ class TourEditor {
             this.lastRenderedSceneIndex = -1;
             this.render();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.HOTSPOT_ADD, { 
+                hotspot, 
+                position, 
+                sceneId: this.sceneManager.getCurrentScene()?.id 
+            });
         } else {
             console.error('Failed to add hotspot');
         }
@@ -372,6 +425,8 @@ class TourEditor {
             this.uiController.updateHotspotProperties(null);
             this.uiController.updateInitialSceneOptions();
             this.uiController.updateTargetSceneOptions();
+            
+            this.emit(EditorEvents.SCENE_SELECT, { scene, index });
         }
     }
 
@@ -390,6 +445,8 @@ class TourEditor {
             if (hotspot) {
                 this.previewController.pointCameraToHotspot(hotspot);
             }
+            
+            this.emit(EditorEvents.HOTSPOT_SELECT, { hotspot, index });
         }
     }
 
@@ -397,9 +454,11 @@ class TourEditor {
      * Remove scene
      */
     removeScene(index) {
+        const scene = this.sceneManager.getScene(index);
         if (this.sceneManager.removeScene(index)) {
             this.render();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.SCENE_REMOVE, { scene, index });
         }
     }
 
@@ -407,10 +466,12 @@ class TourEditor {
      * Remove hotspot
      */
     removeHotspot(index) {
+        const hotspot = this.hotspotEditor.getHotspot(index);
         if (this.hotspotEditor.removeHotspot(index)) {
             this.lastRenderedSceneIndex = -1;
             this.render();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.HOTSPOT_REMOVE, { hotspot, index });
         }
     }
 
@@ -423,6 +484,7 @@ class TourEditor {
             this.lastRenderedSceneIndex = -1;
             this.render();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.HOTSPOT_DUPLICATE, { hotspot, originalIndex: index });
         }
     }
 
@@ -433,6 +495,7 @@ class TourEditor {
         if (this.sceneManager.reorderScenes(fromIndex, toIndex)) {
             this.render();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.SCENE_REORDER, { fromIndex, toIndex });
         }
     }
 
@@ -445,6 +508,12 @@ class TourEditor {
             await this.previewController.updateHotspotMarker(index);
             this.uiController.renderHotspotList();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.HOTSPOT_UPDATE, { 
+                hotspot: this.hotspotEditor.getHotspot(index), 
+                index, 
+                property, 
+                value 
+            });
         }
     }
 
@@ -481,6 +550,13 @@ class TourEditor {
             await this.previewController.updateHotspotMarker(index);
             this.uiController.renderHotspotList();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.HOTSPOT_POSITION_CHANGE, { 
+                hotspot, 
+                index, 
+                axis, 
+                value, 
+                position: hotspot.position 
+            });
         }
     }
 
@@ -492,6 +568,12 @@ class TourEditor {
         if (this.sceneManager.updateScene(index, property, value)) {
             this.uiController.renderSceneList();
             this.markUnsavedChanges();
+            this.emit(EditorEvents.SCENE_UPDATE, { 
+                scene: this.sceneManager.getScene(index), 
+                index, 
+                property, 
+                value 
+            });
         }
     }
 
@@ -518,6 +600,7 @@ class TourEditor {
                 showToast('Scene image updated', 'success');
             }
             this.markUnsavedChanges();
+            this.emit(EditorEvents.SCENE_IMAGE_CHANGE, { scene, index, imageUrl });
         }
     }
 
@@ -545,6 +628,7 @@ class TourEditor {
         this.uiController.updateSceneProperties(scene);
         this.markUnsavedChanges();
         showToast('Starting position set', 'success');
+        this.emit(EditorEvents.SCENE_STARTING_POSITION_SET, { scene, startingPosition: scene.startingPosition });
     }
 
     /**
@@ -562,6 +646,7 @@ class TourEditor {
         this.uiController.updateSceneProperties(scene);
         this.markUnsavedChanges();
         showToast('Starting position cleared', 'success');
+        this.emit(EditorEvents.SCENE_STARTING_POSITION_CLEAR, { scene });
     }
 
     /**
@@ -570,6 +655,7 @@ class TourEditor {
     render() {
         this.uiController.renderSceneList();
         this.uiController.renderHotspotList();
+        this.uiController.populateIconGrid(); // Re-render icon grid to ensure icons display
         
         const currentScene = this.sceneManager.getCurrentScene();
         const currentHotspot = this.hotspotEditor.getCurrentHotspot();
@@ -602,6 +688,8 @@ class TourEditor {
             }
             this.lastRenderedSceneIndex = -1;
         }
+        
+        this.emit(EditorEvents.UI_RENDER);
     }
 
     /**
@@ -616,6 +704,7 @@ class TourEditor {
         if (this.storageManager.saveProject(projectData)) {
             this.hasUnsavedChanges = false;
             showToast('Project saved', 'success');
+            this.emit(EditorEvents.PROJECT_SAVE, { projectData });
             return true;
         }
         return false;
@@ -632,6 +721,7 @@ class TourEditor {
             this.hasUnsavedChanges = false;
             this.render();
             showToast('Project loaded', 'success');
+            this.emit(EditorEvents.PROJECT_LOAD, { projectData });
             return true;
         }
         return false;
@@ -658,6 +748,7 @@ class TourEditor {
         this.render();
         
         showToast('New project created', 'success');
+        this.emit(EditorEvents.PROJECT_NEW, { config: this.config });
         return true;
     }
 
@@ -688,6 +779,7 @@ const importUpload = document.getElementById('importUpload');
             this.uiController.setLoading(false);
             
             showToast('Project imported successfully', 'success');
+            this.emit(EditorEvents.PROJECT_IMPORT, { projectData, file });
         } catch (error) {
             this.uiController.setLoading(false);
             console.error('Import failed:', error);
@@ -713,3 +805,4 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 export default TourEditor;
+export { EditorEvents } from './event-emitter.js';

package/src/editor/js/event-emitter.js

@@ -0,0 +1,257 @@
+/**
+ * Event Emitter for TourEditor
+ * 
+ * Provides a comprehensive event system for the editor with:
+ * - Specific events for all editor operations
+ * - A unified 'change' event that fires for any modification
+ * - Support for wildcards and namespaced events
+ */
+
+/**
+ * Event types for the Tour Editor
+ * These are the available events that can be listened to
+ */
+export const EditorEvents = {
+  // Lifecycle
+  INIT: 'init',
+  READY: 'ready',
+  DESTROY: 'destroy',
+  
+  // Scene events
+  SCENE_ADD: 'scene:add',
+  SCENE_REMOVE: 'scene:remove',
+  SCENE_SELECT: 'scene:select',
+  SCENE_UPDATE: 'scene:update',
+  SCENE_REORDER: 'scene:reorder',
+  SCENE_CLEAR: 'scene:clear',
+  SCENE_IMAGE_CHANGE: 'scene:imageChange',
+  SCENE_STARTING_POSITION_SET: 'scene:startingPositionSet',
+  SCENE_STARTING_POSITION_CLEAR: 'scene:startingPositionClear',
+  
+  // Hotspot events
+  HOTSPOT_ADD: 'hotspot:add',
+  HOTSPOT_REMOVE: 'hotspot:remove',
+  HOTSPOT_SELECT: 'hotspot:select',
+  HOTSPOT_UPDATE: 'hotspot:update',
+  HOTSPOT_DUPLICATE: 'hotspot:duplicate',
+  HOTSPOT_POSITION_CHANGE: 'hotspot:positionChange',
+  
+  // Project events
+  PROJECT_NEW: 'project:new',
+  PROJECT_SAVE: 'project:save',
+  PROJECT_LOAD: 'project:load',
+  PROJECT_IMPORT: 'project:import',
+  PROJECT_EXPORT: 'project:export',
+  
+  // Config events
+  CONFIG_UPDATE: 'config:update',
+  INITIAL_SCENE_CHANGE: 'config:initialSceneChange',
+  
+  // Preview events
+  PREVIEW_START: 'preview:start',
+  PREVIEW_STOP: 'preview:stop',
+  PREVIEW_SCENE_CHANGE: 'preview:sceneChange',
+  
+  // UI events
+  UI_RENDER: 'ui:render',
+  UI_LOADING_START: 'ui:loadingStart',
+  UI_LOADING_END: 'ui:loadingEnd',
+  MODAL_OPEN: 'ui:modalOpen',
+  MODAL_CLOSE: 'ui:modalClose',
+  
+  // Data events
+  DATA_CHANGE: 'data:change',      // Fires when any data changes
+  UNSAVED_CHANGES: 'data:unsavedChanges',
+  
+  // Unified change event - fires for ANY modification
+  CHANGE: 'change'
+};
+
+/**
+ * Event Emitter class
+ * Provides pub/sub functionality for editor events
+ */
+class EventEmitter {
+  constructor() {
+    this.listeners = new Map();
+    this.onceListeners = new Map();
+  }
+
+  /**
+   * Register an event listener
+   * @param {string} event - Event name or 'change' for all changes
+   * @param {Function} callback - Function to call when event fires
+   * @returns {Function} Unsubscribe function
+   */
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event).add(callback);
+    
+    // Return unsubscribe function
+    return () => this.off(event, callback);
+  }
+
+  /**
+   * Register a one-time event listener
+   * @param {string} event - Event name
+   * @param {Function} callback - Function to call once when event fires
+   * @returns {Function} Unsubscribe function
+   */
+  once(event, callback) {
+    if (!this.onceListeners.has(event)) {
+      this.onceListeners.set(event, new Set());
+    }
+    this.onceListeners.get(event).add(callback);
+    
+    return () => {
+      if (this.onceListeners.has(event)) {
+        this.onceListeners.get(event).delete(callback);
+      }
+    };
+  }
+
+  /**
+   * Remove an event listener
+   * @param {string} event - Event name
+   * @param {Function} callback - Function to remove
+   */
+  off(event, callback) {
+    if (this.listeners.has(event)) {
+      this.listeners.get(event).delete(callback);
+    }
+    if (this.onceListeners.has(event)) {
+      this.onceListeners.get(event).delete(callback);
+    }
+  }
+
+  /**
+   * Remove all listeners for an event, or all listeners if no event specified
+   * @param {string} [event] - Optional event name
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this.listeners.delete(event);
+      this.onceListeners.delete(event);
+    } else {
+      this.listeners.clear();
+      this.onceListeners.clear();
+    }
+  }
+
+  /**
+   * Emit an event
+   * @param {string} event - Event name
+   * @param {Object} data - Event data
+   */
+  emit(event, data = {}) {
+    const eventData = {
+      type: event,
+      timestamp: Date.now(),
+      ...data
+    };
+
+    // Call specific event listeners
+    if (this.listeners.has(event)) {
+      this.listeners.get(event).forEach(callback => {
+        try {
+          callback(eventData);
+        } catch (error) {
+          console.error(`Error in event listener for "${event}":`, error);
+        }
+      });
+    }
+
+    // Call once listeners and remove them
+    if (this.onceListeners.has(event)) {
+      const onceCallbacks = this.onceListeners.get(event);
+      this.onceListeners.delete(event);
+      onceCallbacks.forEach(callback => {
+        try {
+          callback(eventData);
+        } catch (error) {
+          console.error(`Error in once listener for "${event}":`, error);
+        }
+      });
+    }
+
+    // Also emit to wildcard listeners (namespace:*)
+    const namespace = event.split(':')[0];
+    const wildcardEvent = `${namespace}:*`;
+    if (this.listeners.has(wildcardEvent)) {
+      this.listeners.get(wildcardEvent).forEach(callback => {
+        try {
+          callback(eventData);
+        } catch (error) {
+          console.error(`Error in wildcard listener for "${wildcardEvent}":`, error);
+        }
+      });
+    }
+
+    // Emit unified 'change' event for data-modifying events
+    if (this.isDataModifyingEvent(event) && event !== EditorEvents.CHANGE) {
+      this.emit(EditorEvents.CHANGE, {
+        originalEvent: event,
+        ...data
+      });
+    }
+  }
+
+  /**
+   * Check if an event modifies data (should trigger 'change' event)
+   * @param {string} event - Event name
+   * @returns {boolean}
+   */
+  isDataModifyingEvent(event) {
+    const dataEvents = [
+      EditorEvents.SCENE_ADD,
+      EditorEvents.SCENE_REMOVE,
+      EditorEvents.SCENE_UPDATE,
+      EditorEvents.SCENE_REORDER,
+      EditorEvents.SCENE_CLEAR,
+      EditorEvents.SCENE_IMAGE_CHANGE,
+      EditorEvents.SCENE_STARTING_POSITION_SET,
+      EditorEvents.SCENE_STARTING_POSITION_CLEAR,
+      EditorEvents.HOTSPOT_ADD,
+      EditorEvents.HOTSPOT_REMOVE,
+      EditorEvents.HOTSPOT_UPDATE,
+      EditorEvents.HOTSPOT_DUPLICATE,
+      EditorEvents.HOTSPOT_POSITION_CHANGE,
+      EditorEvents.CONFIG_UPDATE,
+      EditorEvents.INITIAL_SCENE_CHANGE,
+      EditorEvents.PROJECT_LOAD,
+      EditorEvents.PROJECT_IMPORT,
+      EditorEvents.PROJECT_NEW,
+      EditorEvents.DATA_CHANGE
+    ];
+    return dataEvents.includes(event);
+  }
+
+  /**
+   * Get the number of listeners for an event
+   * @param {string} event - Event name
+   * @returns {number}
+   */
+  listenerCount(event) {
+    let count = 0;
+    if (this.listeners.has(event)) {
+      count += this.listeners.get(event).size;
+    }
+    if (this.onceListeners.has(event)) {
+      count += this.onceListeners.get(event).size;
+    }
+    return count;
+  }
+
+  /**
+   * Get all event names that have listeners
+   * @returns {string[]}
+   */
+  eventNames() {
+    const names = new Set([...this.listeners.keys(), ...this.onceListeners.keys()]);
+    return Array.from(names);
+  }
+}
+
+export default EventEmitter;

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

@@ -1,7 +1,8 @@
 // Export Manager - Handles JSON generation for SWT library
-import { downloadTextAsFile, showModal, copyToClipboard } from "./utils.js";
+import { downloadTextAsFile, showModal, copyToClipboard, showToast } from "./utils.js";
 import { IconRenderer } from "../../IconRenderer.js";
 import { buildTourConfig } from "./data-transform.js";
+import { EditorEvents } from "./event-emitter.js";
 
 class ExportManager {
   constructor(editor) {
@@ -21,6 +22,51 @@ class ExportManager {
     return buildTourConfig(config, scenes);
   }
 
+  /**
+   * Load tour data from JSON (inverse of generateJSON)
+   * This loads the entire tour configuration including initialScene and all scenes
+   * @param {Object} tourData - Tour configuration object with initialScene and scenes
+   * @param {string} tourData.initialScene - Initial scene ID
+   * @param {Array} tourData.scenes - Array of scene objects
+   * @returns {boolean} Success status
+   */
+  loadJSON(tourData) {
+    try {
+      if (!tourData || typeof tourData !== 'object') {
+        console.error('Invalid tour data: expected object');
+        return false;
+      }
+
+      // Load scenes into scene manager
+      const scenes = tourData.scenes || [];
+      this.editor.sceneManager.loadScenes(scenes);
+
+      // Set initial scene in config
+      if (tourData.initialScene) {
+        this.editor.config.initialSceneId = tourData.initialScene;
+      } else if (scenes.length > 0) {
+        this.editor.config.initialSceneId = scenes[0].id;
+      }
+
+      // Mark as having unsaved changes
+      this.editor.hasUnsavedChanges = true;
+
+      // Re-render the editor UI
+      this.editor.render();
+
+      showToast('Tour loaded successfully', 'success');
+      
+      // Emit event
+      this.editor.emit(EditorEvents.PROJECT_LOAD, { tourData, source: 'loadJSON' });
+      
+      return true;
+    } catch (error) {
+      console.error('Failed to load tour data:', error);
+      showToast('Failed to load tour', 'error');
+      return false;
+    }
+  }
+
   /**
    * Generate JSON with icons baked in as SVG data URLs
    * This ensures the exported HTML doesn't need the SenangStart icons library

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

@@ -281,11 +281,27 @@ class UIController {
 
   /**
    * Populate icon grid from SenangStart icons (baked in at build time)
+   * Waits for ss-icon custom element to be defined to avoid race conditions
    */
-  populateIconGrid() {
+  async populateIconGrid() {
     const grid = document.getElementById("hotspotIconGrid");
     if (!grid) return;
 
+    // Wait for ss-icon custom element to be defined before populating
+    // This prevents race conditions where icons don't render if the
+    // custom element isn't registered yet when this method runs
+    try {
+      if (customElements.get('ss-icon') === undefined) {
+        // Give a reasonable timeout to avoid infinite waiting
+        await Promise.race([
+          customElements.whenDefined('ss-icon'),
+          new Promise((_, reject) => setTimeout(() => reject(new Error('ss-icon timeout')), 5000))
+        ]);
+      }
+    } catch (err) {
+      console.warn('ss-icon custom element not available, icon grid may not render properly:', err.message);
+    }
+
     // Clear existing content
     grid.innerHTML = "";
 
@@ -309,7 +325,7 @@ class UIController {
       grid.appendChild(btn);
     });
 
-    console.log(`Loaded ${iconsData.length} icons`);
+    // console.log(`Loaded ${iconsData.length} icons`);
   }
 
   /**