senangwebs-tour 1.0.3 → 1.0.6

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

@@ -1,5 +1,8 @@
 // UI Controller - Handles DOM manipulation and rendering
 
+// Import icons list from SenangStart icons package (baked into bundle at build time)
+import iconsData from "@bookklik/senangstart-icons/src/icons.json";
+
 class UIController {
   constructor(editor) {
     this.editor = editor;
@@ -189,9 +192,18 @@ class UIController {
     const item = document.createElement("div");
     item.className = "hotspot-item" + (isActive ? " active" : "");
 
-    const color = document.createElement("div");
-    color.className = "hotspot-color";
-    color.style.backgroundColor = hotspot.color;
+    const colorIndicator = document.createElement("div");
+    colorIndicator.className = "hotspot-color";
+    colorIndicator.style.backgroundColor = hotspot.color;
+    
+    // If hotspot has an icon, show it with the color applied
+    if (hotspot.icon) {
+      colorIndicator.innerHTML = `<ss-icon icon="${hotspot.icon}" thickness="2.2" style="color: ${hotspot.color}; width: 20px; height: 20px;"></ss-icon>`;
+      colorIndicator.style.backgroundColor = "transparent";
+      colorIndicator.style.display = "flex";
+      colorIndicator.style.alignItems = "center";
+      colorIndicator.style.justifyContent = "center";
+    }
 
     const info = document.createElement("div");
     info.className = "hotspot-info";
@@ -230,7 +242,7 @@ class UIController {
 
     actions.appendChild(deleteBtn);
 
-    item.appendChild(color);
+    item.appendChild(colorIndicator);
     item.appendChild(info);
     item.appendChild(actions);
 
@@ -241,6 +253,58 @@ class UIController {
     return item;
   }
 
+  /**
+   * Set active state on icon grid button
+   */
+  setActiveIconButton(iconName) {
+    const grid = document.getElementById("hotspotIconGrid");
+    if (!grid) return;
+    
+    // Remove active from all buttons
+    grid.querySelectorAll(".icon-btn").forEach(btn => {
+      btn.classList.remove("active");
+    });
+    
+    // Find and activate the matching button
+    const activeBtn = grid.querySelector(`.icon-btn[data-icon="${iconName}"]`);
+    if (activeBtn) {
+      activeBtn.classList.add("active");
+    }
+  }
+
+  /**
+   * Populate icon grid from SenangStart icons (baked in at build time)
+   */
+  populateIconGrid() {
+    const grid = document.getElementById("hotspotIconGrid");
+    if (!grid) return;
+
+    // Clear existing content
+    grid.innerHTML = "";
+
+    // Add "No icon" button first
+    const noIconBtn = document.createElement("button");
+    noIconBtn.type = "button";
+    noIconBtn.className = "icon-btn active";
+    noIconBtn.dataset.icon = "";
+    noIconBtn.title = "No icon";
+    noIconBtn.innerHTML = '<ss-icon icon="x-mark" thickness="1.5" style="opacity: 0.5;"></ss-icon>';
+    grid.appendChild(noIconBtn);
+
+    // Add buttons for each icon from imported JSON
+    iconsData.forEach(icon => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "icon-btn";
+      btn.dataset.icon = icon.slug;
+      btn.title = icon.name;
+      btn.innerHTML = `<ss-icon icon="${icon.slug}" thickness="2.2"></ss-icon>`;
+      grid.appendChild(btn);
+    });
+
+    console.log(`Loaded ${iconsData.length} icons`);
+  }
+
   /**
    * Update properties panel for hotspot
    */
@@ -260,6 +324,8 @@ class UIController {
       document.getElementById("hotspotColor").value = "#00ff00";
       const colorText = document.getElementById("hotspotColorText");
       if (colorText) colorText.value = "#00ff00";
+      // Reset icon grid to "no icon" button
+      this.setActiveIconButton("");
       document.getElementById("hotspotPosX").value = "";
       document.getElementById("hotspotPosY").value = "";
       document.getElementById("hotspotPosZ").value = "";
@@ -283,6 +349,9 @@ class UIController {
       colorText.value = hotspot.color || "#00ff00";
     }
 
+    // Update icon grid active button
+    this.setActiveIconButton(hotspot.icon || "");
+
     // Update position inputs
     const pos = hotspot.position || { x: 0, y: 0, z: 0 };
     document.getElementById("hotspotPosX").value = pos.x;
@@ -297,16 +366,34 @@ class UIController {
    * Update properties panel for scene
    */
   updateSceneProperties(scene) {
+    const startingPosDisplay = document.getElementById("startingPositionDisplay");
+    
     if (!scene) {
       document.getElementById("sceneId").value = "";
       document.getElementById("sceneName").value = "";
       document.getElementById("sceneImageUrl").value = "";
+      if (startingPosDisplay) {
+        startingPosDisplay.textContent = "Not set (camera keeps current position)";
+      }
       return;
     }
 
     document.getElementById("sceneId").value = scene.id || "";
     document.getElementById("sceneName").value = scene.name || "";
     document.getElementById("sceneImageUrl").value = scene.imageUrl || "";
+    
+    // Update starting position display
+    if (startingPosDisplay) {
+      if (scene.startingPosition) {
+        const pitchDeg = (scene.startingPosition.pitch * 180 / Math.PI).toFixed(1);
+        const yawDeg = (scene.startingPosition.yaw * 180 / Math.PI).toFixed(1);
+        startingPosDisplay.textContent = `Pitch: ${pitchDeg}° | Yaw: ${yawDeg}°`;
+        startingPosDisplay.style.color = "var(--accent-primary)";
+      } else {
+        startingPosDisplay.textContent = "Not set (camera keeps current position)";
+        startingPosDisplay.style.color = "var(--text-muted)";
+      }
+    }
   }
 
   /**
@@ -317,10 +404,6 @@ class UIController {
     document.getElementById("tourDescription").value = config.description || "";
     document.getElementById("tourInitialScene").value =
       config.initialSceneId || "";
-    document.getElementById("tourAutoRotate").checked =
-      config.autoRotate || false;
-    document.getElementById("tourShowCompass").checked =
-      config.showCompass || false;
 
     // Also update project name in header if it exists
     const projectName = document.getElementById("project-name");

package/src/editor/js/utils.js

@@ -209,6 +209,7 @@ export {
     hideModal,
     formatFileSize,
     downloadTextAsFile,
+    copyToClipboard,
     debounce,
     positionToString,
     parsePosition,

package/src/index.js

@@ -9,6 +9,7 @@ import "./components/hotspot-listener.js";
 import { AssetManager } from "./AssetManager.js";
 import { SceneManager } from "./SceneManager.js";
 import { HotspotManager } from "./HotspotManager.js";
+import { IconRenderer } from "./IconRenderer.js";
 
 /**
  * Main Tour class - The public API for the SWT library
@@ -32,12 +33,14 @@ class Tour {
     // 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
@@ -98,6 +101,11 @@ class Tour {
 
       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 });
@@ -133,8 +141,13 @@ class Tour {
       // 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 || []);
@@ -188,6 +201,41 @@ class Tour {
     }
   }
 
+  /**
+   * 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
+    const lookControls = 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}
@@ -242,6 +290,11 @@ class Tour {
     this.hotspotManager.destroy();
     this.sceneManager.destroy();
     this.assetManager.destroy();
+    
+    // Clean up icon renderer
+    if (this.iconRenderer) {
+      this.iconRenderer.destroy();
+    }
 
     this.isStarted = false;
   }