npm - senangwebs-tour - Versions diffs - 1.0.3 → 1.0.5 - Mend

senangwebs-tour 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/swt-editor.css +36 -2
package/dist/swt-editor.css.map +1 -1
package/dist/swt-editor.js +3102 -209
package/dist/swt-editor.js.map +1 -1
package/dist/swt-editor.min.css +1 -1
package/dist/swt-editor.min.js +1 -1
package/dist/swt.js +292 -26
package/dist/swt.js.map +1 -1
package/dist/swt.min.js +1 -1
package/package.json +2 -1
package/src/AssetManager.js +13 -2
package/src/HotspotManager.js +93 -20
package/src/IconRenderer.js +123 -0
package/src/SceneManager.js +7 -1
package/src/editor/css/main.css +41 -2
package/src/editor/js/editor.js +108 -23
package/src/editor/js/export-manager.js +56 -9
package/src/editor/js/hotspot-editor.js +10 -57
package/src/editor/js/preview-controller.js +132 -105
package/src/editor/js/ui-controller.js +91 -8
package/src/editor/js/utils.js +1 -0
package/src/index.js +56 -3

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

@@ -1,9 +1,11 @@
 // Export Manager - Handles JSON generation for SWT library
-import { downloadTextAsFile, showModal } from "./utils.js";
+import { downloadTextAsFile, showModal, copyToClipboard } from "./utils.js";
+import { IconRenderer } from "../../IconRenderer.js";
 class ExportManager {
   constructor(editor) {
     this.editor = editor;
+    this.iconRenderer = new IconRenderer();
   }
   /**
@@ -40,8 +42,13 @@ class ExportManager {
           // Add appearance
           hotspotData.appearance = {
             color: hotspot.color || "#FF6B6B",
-            scale: "2 2 2",
+            scale: hotspot.scale || "2 2 2",
           };
+          // Add icon if set
+          if (hotspot.icon) {
+            hotspotData.appearance.icon = hotspot.icon;
+          }
           // Add tooltip if title exists
           if (hotspot.title) {
@@ -53,6 +60,11 @@ class ExportManager {
           return hotspotData;
         }),
       };
+      // Add starting position if set
+      if (scene.startingPosition) {
+        scenesData[scene.id].startingPosition = scene.startingPosition;
+      }
     });
     // Determine initial scene
@@ -70,6 +82,41 @@ class ExportManager {
     return jsonData;
   }
+  /**
+   * Generate JSON with icons baked in as SVG data URLs
+   * This ensures the exported HTML doesn't need the SenangStart icons library
+   */
+  async generateJSONWithBakedIcons() {
+    const jsonData = this.generateJSON();
+    // Process all scenes and convert icon names to data URLs
+    for (const sceneId of Object.keys(jsonData.scenes)) {
+      const scene = jsonData.scenes[sceneId];
+      for (let i = 0; i < scene.hotspots.length; i++) {
+        const hotspot = scene.hotspots[i];
+        const icon = hotspot.appearance?.icon;
+        // Skip if no icon or if it's already a data URL or URL
+        if (!icon) continue;
+        if (icon.startsWith('data:') || icon.startsWith('http') || icon.startsWith('/')) continue;
+        // Generate SVG data URL from icon name
+        try {
+          const color = hotspot.appearance?.color || '#ffffff';
+          const dataUrl = await this.iconRenderer.generateIconDataUrl(icon, color, 128);
+          if (dataUrl) {
+            hotspot.appearance.icon = dataUrl;
+          }
+        } catch (err) {
+          console.warn(`Failed to bake icon "${icon}" for export:`, err);
+        }
+      }
+    }
+    return jsonData;
+  }
   /**
    * Export as JSON file
    */
@@ -114,10 +161,10 @@ class ExportManager {
   }
   /**
-   * Generate HTML viewer code
+   * Generate HTML viewer code with icons baked in
    */
-  generateViewerHTML() {
-    const jsonData = this.generateJSON();
+  async generateViewerHTML() {
+    const jsonData = await this.generateJSONWithBakedIcons();
     const title = this.editor.config.title || "Virtual Tour";
     return `<!DOCTYPE html>
@@ -130,7 +177,7 @@ class ExportManager {
   </head>
   <body>
     <a-scene id="tour-container">
-      <a-camera>
+      <a-camera look-controls>
         <a-cursor></a-cursor>
       </a-camera>
     </a-scene>
@@ -154,11 +201,11 @@ class ExportManager {
   }
   /**
-   * Export as standalone HTML viewer
+   * Export as standalone HTML viewer with icons baked in
    */
-  exportViewerHTML() {
+  async exportViewerHTML() {
     try {
-      const html = this.generateViewerHTML();
+      const html = await this.generateViewerHTML();
       const title = this.editor.config.title || "tour";
       const filename = sanitizeId(title) + "-viewer.html";

package/src/editor/js/hotspot-editor.js CHANGED Viewed

@@ -5,66 +5,15 @@ class HotspotEditor {
     constructor(editor) {
         this.editor = editor;
         this.currentHotspotIndex = -1;
-        this.placementMode = false;
     }
-    /**
-     * Enable hotspot placement mode
-     */
-    enablePlacementMode() {
-        const scene = this.editor.sceneManager.getCurrentScene();
-        if (!scene) {
-            showToast('Please select a scene first', 'error');
-            return false;
-        }
-        this.placementMode = true;
-        // Visual feedback
-        document.body.style.cursor = 'crosshair';
-        const preview = document.getElementById('preview');
-        if (preview) {
-            preview.style.border = '3px solid #4CC3D9';
-            preview.style.boxShadow = '0 0 20px rgba(76, 195, 217, 0.5)';
-        }
-        // Update button state
-        const btn = document.getElementById('addHotspotBtn');
-        if (btn) {
-            btn.textContent = 'Click on Preview...';
-            btn.classList.add('btn-active');
-        }
-        showToast('Click on the 360° preview to place hotspot', 'info', 5000);
-        return true;
-    }
-    /**
-     * Disable hotspot placement mode
-     */
-    disablePlacementMode() {
-        this.placementMode = false;
-        document.body.style.cursor = 'default';
-        // Remove visual feedback
-        const preview = document.getElementById('preview');
-        if (preview) {
-            preview.style.border = '';
-            preview.style.boxShadow = '';
-        }
-        // Reset button state
-        const btn = document.getElementById('addHotspotBtn');
-        if (btn) {
-            btn.textContent = '+ Add Hotspot';
-            btn.classList.remove('btn-active');
-        }
-}
     /**
      * Add hotspot at position
+     * @param {Object} position - The 3D position {x, y, z}
+     * @param {string} targetSceneId - Target scene ID for navigation
+     * @param {Object} cameraOrientation - Camera orientation at creation {pitch, yaw} in radians
      */
-    addHotspot(position, targetSceneId = '') {
+    addHotspot(position, targetSceneId = '', cameraOrientation = null) {
         const scene = this.editor.sceneManager.getCurrentScene();
         if (!scene) {
             showToast('No scene selected', 'error');
@@ -75,17 +24,18 @@ class HotspotEditor {
             id: generateId('hotspot'),
             type: 'navigation',
             position: position,
+            cameraOrientation: cameraOrientation, // Store camera pitch/yaw for reliable pointing
             targetSceneId: targetSceneId,
             title: 'New Hotspot',
             description: '',
             color: '#00ff00',
-            icon: ''
+            icon: '',
+            scale: '1 1 1'
         };
         scene.hotspots.push(hotspot);
         this.currentHotspotIndex = scene.hotspots.length - 1;
-        this.disablePlacementMode();
         showToast('Hotspot added', 'success');
         return hotspot;
@@ -201,6 +151,9 @@ class HotspotEditor {
             y: original.position.y,
             z: original.position.z
         };
+        // Clear camera orientation since position changed - will fallback to position-based calculation
+        duplicate.cameraOrientation = null;
         scene.hotspots.push(duplicate);
         this.currentHotspotIndex = scene.hotspots.length - 1;

package/src/editor/js/preview-controller.js CHANGED Viewed

@@ -174,6 +174,7 @@ class PreviewController {
         name: s.name,
         panorama: s.imageUrl,
         hotspots: sceneHotspots,
+        startingPosition: s.startingPosition || null,
       };
     });
@@ -181,10 +182,6 @@ class PreviewController {
       title: scene.name,
       initialScene: scene.id,
       scenes: allScenes,
-      settings: {
-        autoRotate: false,
-        showCompass: false,
-      },
     };
     try {
@@ -221,15 +218,18 @@ class PreviewController {
       // Hide loading animation after scene loads
       this.hideLoading();
-      // Restore camera rotation if preserved
+      // Handle camera rotation after scene loads
       if (savedRotation && preserveCameraRotation) {
+        // Restore previous camera rotation
         this.setCameraRotation(savedRotation);
+      } else if (scene.startingPosition) {
+        // Set camera to scene's starting position immediately
+        this.setCameraRotation({
+          x: scene.startingPosition.pitch,
+          y: scene.startingPosition.yaw,
+          z: 0
+        });
       }
-      // Setup click handler after a short delay to ensure A-Frame is ready
-      setTimeout(() => {
-        this.setupClickHandler();
-      }, 500);
     } catch (error) {
       console.error("Failed to load preview:", error);
       showToast("Failed to load preview: " + error.message, "error");
@@ -239,76 +239,73 @@ class PreviewController {
   }
   /**
-   * Setup click handler for hotspot placement
+   * Get the current cursor intersection point with the sky sphere.
+   * Raycasts from the camera center (where the A-Cursor points) to find the intersection.
+   * @returns {Object|null} The 3D position {x, y, z} or null if no intersection
    */
-  setupClickHandler() {
-    if (!this.tour) {
-      return;
-    }
-    const aframeScene = this.previewContainer.querySelector("a-scene");
+  getCursorIntersection() {
+    const aframeScene = this.previewContainer?.querySelector("a-scene");
     if (!aframeScene) {
-      setTimeout(() => this.setupClickHandler(), 200); // Retry
-      return;
-    }
-    // Remove any existing click handler to avoid duplicates
-    if (this.clickHandler) {
-      aframeScene.removeEventListener("click", this.clickHandler);
+      return null;
     }
-    // Create and store the click handler
-    this.clickHandler = (evt) => {
-      if (!this.editor.hotspotEditor.placementMode) {
-        return;
-      }
-      // Try to get intersection from event detail first
-      let intersection = evt.detail?.intersection;
+    const camera = aframeScene.querySelector("[camera]");
+    const sky = aframeScene.querySelector("a-sky");
-      // If no intersection, perform manual raycasting
-      if (!intersection) {
-        const camera = aframeScene.querySelector("[camera]");
-        const sky = aframeScene.querySelector("a-sky");
+    if (!camera || !sky) {
+      return null;
+    }
-        if (!camera || !sky) {
-          showToast("Scene not ready, please try again", "warning");
-          return;
-        }
+    // Get pitch and yaw from look-controls (the authoritative source in A-Frame)
+    const lookControls = camera.components?.["look-controls"];
+    let pitch = 0;
+    let yaw = 0;
-        // Get mouse position relative to canvas
-        const canvas = aframeScene.canvas;
-        const rect = canvas.getBoundingClientRect();
-        const mouse = {
-          x: ((evt.clientX - rect.left) / rect.width) * 2 - 1,
-          y: -((evt.clientY - rect.top) / rect.height) * 2 + 1,
-        };
-        // Perform raycasting
-        const raycaster = new THREE.Raycaster();
-        const cameraEl = camera.object3D;
-        raycaster.setFromCamera(mouse, cameraEl.children[0]); // Get the actual camera
-        // Raycast against the sky sphere
-        const intersects = raycaster.intersectObject(sky.object3D, true);
-        if (intersects.length > 0) {
-          intersection = intersects[0];
-        } else {
-          showToast("Click on the panorama image", "warning");
-          return;
-        }
-      }
+    if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+      pitch = lookControls.pitchObject.rotation.x;
+      yaw = lookControls.yawObject.rotation.y;
+    } else {
+      // Fallback to object3D rotation
+      pitch = camera.object3D.rotation.x;
+      yaw = camera.object3D.rotation.y;
+    }
-      const point = intersection.point;
-      const position = {
+    // Calculate direction vector from pitch/yaw
+    // In A-Frame/Three.js coordinate system:
+    // - Looking forward is -Z
+    // - Yaw rotates around Y axis
+    // - Pitch rotates around X axis
+    const direction = new THREE.Vector3();
+    direction.x = -Math.sin(yaw) * Math.cos(pitch);
+    direction.y = Math.sin(pitch);
+    direction.z = -Math.cos(yaw) * Math.cos(pitch);
+    direction.normalize();
+    // Create raycaster from camera position in the direction we're looking
+    const raycaster = new THREE.Raycaster();
+    const origin = new THREE.Vector3(0, 0, 0); // Camera is typically at origin in 360 viewer
+    raycaster.set(origin, direction);
+    // Raycast against the sky sphere
+    const intersects = raycaster.intersectObject(sky.object3D, true);
+    if (intersects.length > 0) {
+      const point = intersects[0].point;
+      // Calculate an upward offset to center the hotspot visual on the cursor
+      // The offset is applied along the "up" direction relative to the sphere surface
+      // For a sphere, we shift the point slightly in the Y direction (vertical up in world space)
+      // The offset compensates for the hotspot visual being centered, so the top aligns with cursor
+      const offsetAmount = 200; // Adjust this value to fine-tune alignment
+      return {
         x: parseFloat(point.x.toFixed(2)),
-        y: parseFloat(point.y.toFixed(2)),
+        y: parseFloat((point.y + offsetAmount).toFixed(2)),
         z: parseFloat(point.z.toFixed(2)),
       };
-      this.editor.addHotspotAtPosition(position);
-    };
-    aframeScene.addEventListener("click", this.clickHandler);
+    }
+    return null;
   }
   /**
@@ -414,10 +411,12 @@ class PreviewController {
   }
   /**
-   * Point camera to hotspot position
+   * Point camera to hotspot
+   * Uses stored camera orientation if available, otherwise calculates from position
+   * @param {Object} hotspot - The hotspot object with position and optional cameraOrientation
    */
-  pointCameraToHotspot(hotspotPosition) {
-    if (!hotspotPosition) {
+  pointCameraToHotspot(hotspot) {
+    if (!hotspot) {
       return;
     }
@@ -431,25 +430,36 @@ class PreviewController {
       return;
     }
-    // Get camera position (usually at origin 0,0,0)
-    const cameraPos = camera.object3D.position;
-    // Calculate direction vector from camera to hotspot
-    const direction = new THREE.Vector3(
-      hotspotPosition.x - cameraPos.x,
-      hotspotPosition.y - cameraPos.y,
-      hotspotPosition.z - cameraPos.z
-    );
+    let pitch, yaw;
+    // Use stored camera orientation if available (more reliable)
+    if (hotspot.cameraOrientation) {
+      // Stored values are in radians, convert to degrees for animateCameraRotation
+      pitch = hotspot.cameraOrientation.pitch * (180 / Math.PI);
+      yaw = hotspot.cameraOrientation.yaw * (180 / Math.PI);
+    } else if (hotspot.position) {
+      // Fallback: calculate from position (for legacy hotspots without cameraOrientation)
+      const hotspotPosition = hotspot.position;
+      const cameraPos = camera.object3D.position;
+      // Calculate direction vector from camera to hotspot
+      const direction = new THREE.Vector3(
+        hotspotPosition.x - cameraPos.x,
+        hotspotPosition.y - cameraPos.y,
+        hotspotPosition.z - cameraPos.z
+      );
-    // Calculate spherical coordinates (yaw and pitch)
-    const distance = direction.length();
+      // Calculate spherical coordinates (yaw and pitch)
+      const distance = direction.length();
-    // Pitch (up/down rotation around X-axis) - in degrees
-    const pitch = Math.asin(direction.y / distance) * (180 / Math.PI);
+      // Pitch (up/down rotation around X-axis) - in degrees
+      pitch = Math.asin(direction.y / distance) * (180 / Math.PI);
-    // Yaw (left/right rotation around Y-axis) - in degrees
-    // Using atan2 to get correct quadrant
-    const yaw = Math.atan2(direction.x, direction.z) * (180 / Math.PI);
+      // Yaw (left/right rotation around Y-axis) - in degrees
+      yaw = Math.atan2(direction.x, direction.z) * (180 / Math.PI);
+    } else {
+      return;
+    }
     // Apply smooth rotation with animation
     this.animateCameraRotation(camera, { x: pitch, y: yaw, z: 0 });
@@ -457,15 +467,29 @@ class PreviewController {
   /**
    * Animate camera rotation smoothly
+   * Uses look-controls internal pitchObject/yawObject to avoid being overwritten
    */
   animateCameraRotation(camera, targetRotation, duration = 800) {
     if (!camera || !camera.object3D) return;
-    const startRotation = {
-      x: camera.object3D.rotation.x * (180 / Math.PI),
-      y: camera.object3D.rotation.y * (180 / Math.PI),
-      z: camera.object3D.rotation.z * (180 / Math.PI),
-    };
+    // Get look-controls component
+    const lookControls = camera.components?.["look-controls"];
+    // Get current rotation - prefer look-controls internal state
+    let startRotation;
+    if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+      startRotation = {
+        x: lookControls.pitchObject.rotation.x * (180 / Math.PI),
+        y: lookControls.yawObject.rotation.y * (180 / Math.PI),
+        z: 0,
+      };
+    } else {
+      startRotation = {
+        x: camera.object3D.rotation.x * (180 / Math.PI),
+        y: camera.object3D.rotation.y * (180 / Math.PI),
+        z: 0,
+      };
+    }
     // Handle angle wrapping for smooth rotation
     let deltaY = targetRotation.y - startRotation.y;
@@ -488,19 +512,22 @@ class PreviewController {
           ? 2 * progress * progress
           : 1 - Math.pow(-2 * progress + 2, 2) / 2;
-      // Interpolate rotation
-      const currentRotation = {
-        x: startRotation.x + (targetRotation.x - startRotation.x) * eased,
-        y: startRotation.y + (endRotationY - startRotation.y) * eased,
-        z: startRotation.z + (targetRotation.z - startRotation.z) * eased,
-      };
+      // Interpolate rotation (in degrees)
+      const currentX = startRotation.x + (targetRotation.x - startRotation.x) * eased;
+      const currentY = startRotation.y + (endRotationY - startRotation.y) * eased;
-      // Apply rotation (convert degrees to radians)
-      camera.object3D.rotation.set(
-        currentRotation.x * (Math.PI / 180),
-        currentRotation.y * (Math.PI / 180),
-        currentRotation.z * (Math.PI / 180)
-      );
+      // Apply rotation using look-controls internal objects (in radians)
+      if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+        lookControls.pitchObject.rotation.x = currentX * (Math.PI / 180);
+        lookControls.yawObject.rotation.y = currentY * (Math.PI / 180);
+      } else {
+        // Fallback to direct rotation
+        camera.object3D.rotation.set(
+          currentX * (Math.PI / 180),
+          currentY * (Math.PI / 180),
+          0
+        );
+      }
       if (progress < 1) {
         requestAnimationFrame(animate);