npm - senangwebs-tour - Versions diffs - 1.0.2 - Mend

senangwebs-tour 1.0.2

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 (29) hide show

package/LICENSE.md +21 -0
package/README.md +653 -0
package/dist/swt-editor.css +869 -0
package/dist/swt-editor.css.map +1 -0
package/dist/swt-editor.js +2853 -0
package/dist/swt-editor.js.map +1 -0
package/dist/swt-editor.min.css +1 -0
package/dist/swt-editor.min.js +1 -0
package/dist/swt.js +873 -0
package/dist/swt.js.map +1 -0
package/dist/swt.min.js +1 -0
package/package.json +39 -0
package/src/AssetManager.js +153 -0
package/src/HotspotManager.js +193 -0
package/src/SceneManager.js +162 -0
package/src/components/hotspot-listener.js +114 -0
package/src/editor/css/main.css +1002 -0
package/src/editor/editor-entry.css +4 -0
package/src/editor/editor-entry.js +30 -0
package/src/editor/js/editor.js +629 -0
package/src/editor/js/export-manager.js +286 -0
package/src/editor/js/hotspot-editor.js +237 -0
package/src/editor/js/preview-controller.js +556 -0
package/src/editor/js/scene-manager.js +202 -0
package/src/editor/js/storage-manager.js +193 -0
package/src/editor/js/ui-controller.js +387 -0
package/src/editor/js/ui-init.js +164 -0
package/src/editor/js/utils.js +217 -0
package/src/index.js +245 -0

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

@@ -0,0 +1,286 @@
+// Export Manager - Handles JSON generation for SWT library
+import { downloadTextAsFile, showModal } from './utils.js';
+class ExportManager {
+    constructor(editor) {
+        this.editor = editor;
+    }
+    /**
+     * Generate JSON compatible with SWT library
+     */
+    generateJSON() {
+        const scenes = this.editor.sceneManager.getAllScenes();
+        const config = this.editor.config;
+        // Build scenes array
+        const scenesData = scenes.map(scene => ({
+            id: scene.id,
+            name: scene.name,
+            imageUrl: scene.imageUrl,
+            hotspots: scene.hotspots.map(hotspot => ({
+                id: hotspot.id,
+                type: hotspot.type || 'navigation',
+                position: hotspot.position,
+                targetSceneId: hotspot.targetSceneId || '',
+                title: hotspot.title || '',
+                description: hotspot.description || '',
+                color: hotspot.color || '#00ff00',
+                icon: hotspot.icon || ''
+            }))
+        }));
+// Determine initial scene
+        let initialSceneId = config.initialSceneId;
+        if (!initialSceneId && scenes.length > 0) {
+            initialSceneId = scenes[0].id;
+        }
+        // Build final JSON
+        const jsonData = {
+            title: config.title || 'Virtual Tour',
+            description: config.description || '',
+            initialSceneId: initialSceneId,
+            scenes: scenesData,
+            settings: {
+                autoRotate: config.autoRotate || false,
+                showCompass: config.showCompass || false
+            }
+        };
+        return jsonData;
+    }
+    /**
+     * Export as JSON file
+     */
+    exportJSON() {
+        try {
+            const jsonData = this.generateJSON();
+            const json = JSON.stringify(jsonData, null, 2);
+            const filename = sanitizeId(jsonData.title || 'tour') + '.json';
+            downloadTextAsFile(json, filename);
+            showToast('Tour exported successfully', 'success');
+            return true;
+        } catch (error) {
+            console.error('Export failed:', error);
+            showToast('Export failed', 'error');
+            return false;
+        }
+    }
+    /**
+     * Copy JSON to clipboard
+     */
+    async copyJSON() {
+        try {
+            const jsonData = this.generateJSON();
+            const json = JSON.stringify(jsonData, null, 2);
+            const success = await copyToClipboard(json);
+            if (success) {
+                showToast('JSON copied to clipboard', 'success');
+            } else {
+                showToast('Failed to copy to clipboard', 'error');
+            }
+            return success;
+        } catch (error) {
+            console.error('Copy failed:', error);
+            showToast('Copy failed', 'error');
+            return false;
+        }
+    }
+    /**
+     * Generate HTML viewer code
+     */
+    generateViewerHTML() {
+        const jsonData = this.generateJSON();
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${jsonData.title}</title>
+    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
+    <script src="dist/swt.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+        }
+        #loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            z-index: 1000;
+        }
+        #loading.hidden {
+            display: none;
+        }
+        .spinner {
+            border: 4px solid rgba(255,255,255,0.3);
+            border-top: 4px solid #fff;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin-right: 15px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        #ui {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 100;
+            display: flex;
+            gap: 10px;
+        }
+        .btn {
+            background: rgba(0,0,0,0.7);
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .btn:hover {
+            background: rgba(0,0,0,0.9);
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <div class="spinner"></div>
+        <span>Loading Tour...</span>
+    </div>
+    <div id="tour-container"></div>
+    <div id="ui" style="display: none;">
+        <button class="btn" id="resetBtn">Reset View</button>
+        <span class="btn" id="sceneInfo"></span>
+    </div>
+    <script>
+        // Tour configuration
+        const tourConfig = ${JSON.stringify(jsonData, null, 8)};
+        // Initialize tour
+        let tour;
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                // Create tour instance
+                tour = new SenangWebsTour('tour-container', tourConfig);
+                // Listen to events
+                tour.on('sceneChanged', (sceneId) => {
+updateSceneInfo();
+                });
+                tour.on('ready', () => {
+document.getElementById('loading').classList.add('hidden');
+                    document.getElementById('ui').style.display = 'flex';
+                    updateSceneInfo();
+                });
+                tour.on('error', (error) => {
+                    console.error('Tour error:', error);
+                    alert('Failed to load tour: ' + error.message);
+                });
+                // Start tour
+                await tour.start();
+                // Setup UI
+                document.getElementById('resetBtn').addEventListener('click', () => {
+                    const camera = document.querySelector('[camera]');
+                    if (camera) {
+                        camera.setAttribute('rotation', '0 0 0');
+                    }
+                });
+            } catch (error) {
+                console.error('Failed to initialize tour:', error);
+                alert('Failed to initialize tour: ' + error.message);
+            }
+        });
+        function updateSceneInfo() {
+            const sceneId = tour.getCurrentSceneId();
+            const scene = tourConfig.scenes.find(s => s.id === sceneId);
+            if (scene) {
+                document.getElementById('sceneInfo').textContent = scene.name;
+            }
+        }
+    </script>
+</body>
+</html>`;
+    }
+    /**
+     * Export as standalone HTML viewer
+     */
+    exportViewerHTML() {
+        try {
+            const html = this.generateViewerHTML();
+            const jsonData = this.generateJSON();
+            const filename = sanitizeId(jsonData.title || 'tour') + '-viewer.html';
+            downloadTextAsFile(html, filename);
+            showToast('Viewer HTML exported successfully', 'success');
+            return true;
+        } catch (error) {
+            console.error('Export viewer failed:', error);
+            showToast('Export viewer failed', 'error');
+            return false;
+        }
+    }
+    /**
+     * Show export preview in modal
+     */
+    showExportPreview() {
+        try {
+            const jsonData = this.generateJSON();
+            const json = JSON.stringify(jsonData, null, 2);
+            const preview = document.getElementById('exportPreview');
+            if (preview) {
+                preview.textContent = json;
+            }
+            showModal('exportModal');
+            return true;
+        } catch (error) {
+            console.error('Failed to show export preview:', error);
+            showToast('Failed to generate preview', 'error');
+            return false;
+        }
+    }
+}
+export default ExportManager;

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

@@ -0,0 +1,237 @@
+// Hotspot Editor - Handles hotspot placement and editing
+import { generateId, showToast } from './utils.js';
+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
+     */
+    addHotspot(position, targetSceneId = '') {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene) {
+            showToast('No scene selected', 'error');
+            return null;
+        }
+        const hotspot = {
+            id: generateId('hotspot'),
+            type: 'navigation',
+            position: position,
+            targetSceneId: targetSceneId,
+            title: 'New Hotspot',
+            description: '',
+            color: '#00ff00',
+            icon: ''
+        };
+        scene.hotspots.push(hotspot);
+        this.currentHotspotIndex = scene.hotspots.length - 1;
+        this.disablePlacementMode();
+        showToast('Hotspot added', 'success');
+        return hotspot;
+    }
+    /**
+     * Remove hotspot
+     */
+    removeHotspot(index) {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || index < 0 || index >= scene.hotspots.length) {
+            return false;
+        }
+        if (!confirm('Are you sure you want to delete this hotspot?')) {
+            return false;
+        }
+        scene.hotspots.splice(index, 1);
+        // Update current index
+        if (this.currentHotspotIndex === index) {
+            this.currentHotspotIndex = -1;
+        } else if (this.currentHotspotIndex > index) {
+            this.currentHotspotIndex--;
+        }
+        showToast('Hotspot removed', 'success');
+        return true;
+    }
+    /**
+     * Update hotspot property
+     */
+    updateHotspot(index, property, value) {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || index < 0 || index >= scene.hotspots.length) {
+            return false;
+        }
+        scene.hotspots[index][property] = value;
+        return true;
+    }
+    /**
+     * Get hotspot by index
+     */
+    getHotspot(index) {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || index < 0 || index >= scene.hotspots.length) {
+            return null;
+        }
+        return scene.hotspots[index];
+    }
+    /**
+     * Update hotspot position
+     */
+    updateHotspotPosition(index, position) {
+        return this.updateHotspot(index, 'position', position);
+    }
+    /**
+     * Get current hotspot
+     */
+    getCurrentHotspot() {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || this.currentHotspotIndex < 0) {
+            return null;
+        }
+        return scene.hotspots[this.currentHotspotIndex] || null;
+    }
+    /**
+     * Set current hotspot
+     */
+    setCurrentHotspot(index) {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || index < 0 || index >= scene.hotspots.length) {
+            this.currentHotspotIndex = -1;
+            return false;
+        }
+        this.currentHotspotIndex = index;
+        return true;
+    }
+    /**
+     * Get all hotspots for current scene
+     */
+    getAllHotspots() {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        return scene ? scene.hotspots : [];
+    }
+    /**
+     * Duplicate hotspot
+     */
+    duplicateHotspot(index) {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || index < 0 || index >= scene.hotspots.length) {
+            return null;
+        }
+        const original = scene.hotspots[index];
+        const duplicate = deepClone(original);
+        duplicate.id = generateId('hotspot');
+        duplicate.title = original.title + ' (Copy)';
+        // Offset position slightly
+        duplicate.position = {
+            x: original.position.x + 0.5,
+            y: original.position.y,
+            z: original.position.z
+        };
+        scene.hotspots.push(duplicate);
+        this.currentHotspotIndex = scene.hotspots.length - 1;
+        showToast('Hotspot duplicated', 'success');
+        return duplicate;
+    }
+    /**
+     * Clear all hotspots
+     */
+    clearAllHotspots() {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene) {
+            return false;
+        }
+        if (scene.hotspots.length === 0) {
+            return true;
+        }
+        if (!confirm('Are you sure you want to remove all hotspots from this scene?')) {
+            return false;
+        }
+        scene.hotspots = [];
+        this.currentHotspotIndex = -1;
+        showToast('All hotspots removed', 'success');
+        return true;
+    }
+}
+export default HotspotEditor;