npm - @littlecarlito/blorktools - Versions diffs - 0.50.4 → 0.51.0 - Mend

@littlecarlito/blorktools 0.50.4 → 0.51.0

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

package/src/asset_debugger/loading-splash/loading-splash.css ADDED Viewed

@@ -0,0 +1,195 @@
+.loading-splash {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #0a0a0a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+    overflow: hidden;
+    font-family: monospace;
+}
+.loading-splash.fade-out {
+    opacity: 0;
+    pointer-events: none;
+}
+.loading-content {
+    text-align: center;
+    color: #2ecc71;
+    font-family: 'Courier New', monospace;
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    padding: 2rem;
+}
+.loading-title {
+    margin-bottom: 30px;
+    letter-spacing: 3px;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #2ecc71;
+    text-transform: uppercase;
+    text-shadow: 0 0 10px rgba(46, 204, 113, 0.7);
+}
+.loading-spinner-container {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 30px auto;
+}
+/* Atomic spinner styles */
+.atomic-spinner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+.nucleus {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #2ecc71;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 15px #2ecc71;
+}
+.electron-orbit {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px dashed rgba(46, 204, 113, 0.3);
+    border-radius: 50%;
+    animation: rotate 4s linear infinite;
+}
+.electron-orbit:nth-child(2) {
+    width: 90%;
+    height: 90%;
+    top: 5%;
+    left: 5%;
+    animation-duration: 3s;
+    transform: rotate(60deg);
+}
+.electron-orbit:nth-child(3) {
+    width: 80%;
+    height: 80%;
+    top: 10%;
+    left: 10%;
+    animation-duration: 5s;
+    transform: rotate(120deg);
+}
+.electron {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: #2ecc71;
+    border-radius: 50%;
+    box-shadow: 0 0 10px #2ecc71;
+}
+.electron-orbit:nth-child(1) .electron {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.electron-orbit:nth-child(2) .electron {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+}
+.electron-orbit:nth-child(3) .electron {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.loading-progress-text {
+    margin-top: 20px;
+    font-size: 16px;
+    color: #2ecc71;
+    letter-spacing: 1px;
+    font-family: 'Courier New', monospace;
+    position: relative;
+}
+.loading-progress-text::after {
+    content: "_";
+    animation: blink 1s step-end infinite;
+}
+/* Animations */
+@keyframes rotate {
+    0% { transform: rotateZ(0deg); }
+    100% { transform: rotateZ(360deg); }
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+.asset-preview-container {
+    position: relative;
+}
+/* Shared preview loading effect */
+.preview-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(10, 10, 10, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+}
+.preview-loading-spinner {
+    width: 40px;
+    height: 40px;
+    position: relative;
+}
+.preview-loading-spinner .nucleus {
+    width: 10px;
+    height: 10px;
+}
+.preview-loading-spinner .electron {
+    width: 5px;
+    height: 5px;
+}
+.preview-loading-text {
+    margin-top: 10px;
+    font-size: 12px;
+    color: #2ecc71;
+    font-family: 'Courier New', monospace;
+}

package/src/asset_debugger/loading-splash/loading-splash.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- Loading Splash Screen -->
+<div id="loading-splash" class="loading-splash">
+    <div class="loading-content">
+        <h1 class="loading-title">ASSET DEBUGGER</h1>
+        <div class="loading-spinner-container">
+            <div class="atomic-spinner">
+                <div class="nucleus"></div>
+                <div class="electron-orbit">
+                    <div class="electron"></div>
+                </div>
+                <div class="electron-orbit">
+                    <div class="electron"></div>
+                </div>
+                <div class="electron-orbit">
+                    <div class="electron"></div>
+                </div>
+            </div>
+        </div>
+        <div id="loading-progress-text" class="loading-progress-text">Initializing</div>
+    </div>
+</div>

package/src/asset_debugger/loading-splash/loading-splash.js ADDED Viewed

@@ -0,0 +1,59 @@
+// loading-splash.js - Updated for overlay integration
+import { getCaller } from "../util/state/log-util";
+/**
+ * Shows the loading splash screen overlay
+ */
+export function showLoadingSplash(text = "") {
+    const loadingSplash = document.getElementById('loading-splash');
+    if (loadingSplash) {
+        loadingSplash.style.display = 'flex';
+        loadingSplash.classList.remove('fade-out');
+        const functionCaller = getCaller(1);
+        let logString = functionCaller + " requested to show load splash screen";
+        if(text) {
+            updateLoadingProgress(text);
+            logString += " with text \"" + text + "\"";
+        }
+        console.debug(logString);
+    } else {
+        console.error('Loading splash element not found in DOM');
+    }
+}
+/**
+ * Updates the loading progress text on the splash screen
+ * @param {string} text - The progress message to display
+ */
+export function updateLoadingProgress(text) {
+    const progressText = document.getElementById('loading-progress-text');
+    if (progressText) {
+        progressText.textContent = text;
+    } else {
+        console.error('Loading progress text element not found');
+    }
+}
+/**
+ * Hides the loading splash screen with a fade-out animation
+ */
+export function hideLoadingSplash() {
+    const loadingSplash = document.getElementById('loading-splash');
+    if (loadingSplash) {
+        loadingSplash.classList.add('fade-out');
+        setTimeout(() => {
+            loadingSplash.style.display = 'none';
+            loadingSplash.classList.remove('fade-out');
+        }, 500); // Match your CSS transition duration
+    } else {
+        console.warning('Loading splash element not found');
+    }
+}
+// Make functions globally available
+window.showLoadingSplash = showLoadingSplash;
+window.updateLoadingProgress = updateLoadingProgress;
+window.hideLoadingSplash = hideLoadingSplash;

package/src/asset_debugger/loading-splash/preview-loading-splash.js ADDED Viewed

@@ -0,0 +1,66 @@
+/**
+ * Shows loading state for a preview element
+ * @param {HTMLElement} previewElement - The preview element to show loading for
+ */
+export function showPreviewLoading(previewElement) {
+    // Create loading overlay if it doesn't exist
+    if (!previewElement.querySelector('.preview-loading')) {
+        const loadingElement = document.createElement('div');
+        loadingElement.className = 'preview-loading';
+        const spinnerContainer = document.createElement('div');
+        spinnerContainer.className = 'preview-loading-spinner';
+        // Create atomic spinner structure
+        const atomicSpinner = document.createElement('div');
+        atomicSpinner.className = 'atomic-spinner';
+        const nucleus = document.createElement('div');
+        nucleus.className = 'nucleus';
+        const orbit1 = document.createElement('div');
+        orbit1.className = 'electron-orbit';
+        const electron1 = document.createElement('div');
+        electron1.className = 'electron';
+        orbit1.appendChild(electron1);
+        const orbit2 = document.createElement('div');
+        orbit2.className = 'electron-orbit';
+        const electron2 = document.createElement('div');
+        electron2.className = 'electron';
+        orbit2.appendChild(electron2);
+        const orbit3 = document.createElement('div');
+        orbit3.className = 'electron-orbit';
+        const electron3 = document.createElement('div');
+        electron3.className = 'electron';
+        orbit3.appendChild(electron3);
+        atomicSpinner.appendChild(nucleus);
+        atomicSpinner.appendChild(orbit1);
+        atomicSpinner.appendChild(orbit2);
+        atomicSpinner.appendChild(orbit3);
+        spinnerContainer.appendChild(atomicSpinner);
+        const loadingText = document.createElement('div');
+        loadingText.className = 'preview-loading-text';
+        loadingText.textContent = 'Loading...';
+        loadingElement.appendChild(spinnerContainer);
+        loadingElement.appendChild(loadingText);
+        previewElement.appendChild(loadingElement);
+    }
+}
+/**
+ * Hides loading state for a preview element
+ * @param {HTMLElement} previewElement - The preview element to hide loading for
+ */
+export function hidePreviewLoading(previewElement) {
+    const loadingElement = previewElement.querySelector('.preview-loading');
+    if (loadingElement) {
+        loadingElement.remove();
+    }
+}

package/src/asset_debugger/main.css ADDED Viewed

@@ -0,0 +1,14 @@
+@import url('util/common.css');
+@import url('loading-splash/loading-splash.css');
+@import url('header/header.css');
+@import url('landing-page/landing-page.css');
+@import url('debugger-scene/debugger-scene.css');
+@import url('axis-indicator/axis-indicator.css');
+@import url('panels/world-panel/world-panel.css');
+@import url('panels/asset-panel/asset-panel.css');
+@import url('panels/asset-panel/atlas-heading/atlas-heading.css');
+@import url('panels/asset-panel/rig-heading/rig-heading.css');
+@import url('panels/asset-panel/uv-heading/uv-heading.css');
+@import url('modals/settings-modal/settings-modal.css');
+@import url('modals/mesh-info-modal/mesh-info-modal.css');
+@import url('modals/examples-modal/examples-modal.css');

package/src/asset_debugger/modals/examples-modal/examples-modal.css ADDED Viewed

@@ -0,0 +1,41 @@
+/* Example Modal Styles */
+#load-example-modal .modal-container {
+    background-color: var(--panel-bg);
+    border: 1px solid var(--panel-border);
+    color: var(--text-color);
+    font-family: monospace;
+}
+#load-example-modal .modal-header {
+    border-bottom: 1px solid var(--panel-border);
+}
+#load-example-modal .modal-title {
+    color: var(--primary-color);
+}
+#load-example-modal .modal-close {
+    color: var(--text-color);
+}
+#rig-example-button {
+    background-color: var(--button-color);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-family: monospace;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 80%;
+    margin: 0 auto;
+    display: block;
+}
+#rig-example-button:hover {
+    background-color: #0d74c7;
+}
+#rig-example-button:active {
+    transform: scale(0.98);
+}

package/src/asset_debugger/modals/examples-modal/examples-modal.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!-- Load Example Modal -->
+<div id="load-example-modal" class="modal-overlay">
+    <div class="modal-container">
+        <div class="modal-header">
+            <h3 class="modal-title">LOAD EXAMPLE</h3>
+            <button class="modal-close" id="close-example-modal">&times;</button>
+        </div>
+        <div class="modal-body" style="padding: 25px 20px;">
+            <div style="text-align: center; margin-bottom: 20px;">
+                <p style="margin-bottom: 20px; font-size: 16px;">SELECT AN EXAMPLE TO LOAD:</p>
+                <button id="rig-example-button">RIG EXAMPLE</button>
+            </div>
+            <div style="font-size: 12px; margin-top: 30px; color: #999; text-align: center;">
+                <p>EXAMPLES WILL LOAD WITHOUT REQUIRING ANY FILE UPLOADS</p>
+            </div>
+        </div>
+    </div>
+</div>

package/src/asset_debugger/modals/examples-modal/examples-modal.js ADDED Viewed

@@ -0,0 +1,111 @@
+/**
+ * Examples Modal UI Component for Asset Debugger
+ *
+ * This component displays a modal with examples when no files are loaded.
+ */
+export class ExamplesModal {
+    constructor(onExampleSelected) {
+        // Store the callback function to be called when an example is selected
+        this.onExampleSelected = onExampleSelected;
+        // Wait for HTML to be loaded before initializing elements
+        this.waitForElementsAndInitialize();
+    }
+    /**
+     * Wait for modal elements to be available in DOM before initializing
+     */
+    waitForElementsAndInitialize() {
+        // Check if modal container is loaded
+        if (document.getElementById('examples-modal-container')) {
+            // Check if modal content has been loaded into the container
+            if (document.getElementById('load-example-modal')) {
+                this.initializeElements();
+                this.initEventListeners();
+            } else {
+                // Wait for content to be loaded
+                setTimeout(() => this.waitForElementsAndInitialize(), 100);
+            }
+        } else {
+            // Wait for container to be available
+            setTimeout(() => this.waitForElementsAndInitialize(), 100);
+        }
+    }
+    /**
+     * Initialize modal elements
+     */
+    initializeElements() {
+        // Modal elements
+        this.modal = document.getElementById('load-example-modal');
+        this.closeButton = document.getElementById('close-example-modal');
+        this.rigExampleButton = document.getElementById('rig-example-button');
+        console.log('Examples modal elements initialized:', !!this.modal, !!this.closeButton, !!this.rigExampleButton);
+    }
+    /**
+     * Initialize all event listeners for the examples modal
+     */
+    initEventListeners() {
+        // Close button event listener
+        if (this.closeButton) {
+            this.closeButton.addEventListener('click', () => this.closeModal());
+        }
+        // Rig example button event listener
+        if (this.rigExampleButton) {
+            this.rigExampleButton.addEventListener('click', () => {
+                this.closeModal();
+                // Call the callback with the example type
+                if (this.onExampleSelected) {
+                    this.onExampleSelected('rig');
+                }
+            });
+        }
+        // Close modal when clicking outside
+        if (this.modal) {
+            this.modal.addEventListener('click', (event) => {
+                if (event.target === this.modal) {
+                    this.closeModal();
+                }
+            });
+        }
+    }
+    /**
+     * Open the examples modal
+     */
+    openModal() {
+        if (this.modal) {
+            this.modal.style.display = 'flex';
+        }
+    }
+    /**
+     * Close the examples modal
+     */
+    closeModal() {
+        if (this.modal) {
+            this.modal.style.display = 'none';
+        }
+    }
+    /**
+     * Show the modal if no files are loaded
+     * @param {boolean} hasFiles - Whether any files are loaded
+     * @returns {boolean} - Whether the modal was shown
+     */
+    showIfNoFiles(hasFiles) {
+        if (!hasFiles) {
+            console.log('No files loaded. Showing example modal...');
+            this.openModal();
+            return true;
+        }
+        return false;
+    }
+}
+export default ExamplesModal;

package/src/asset_debugger/modals/examples-modal/examples.js ADDED Viewed

@@ -0,0 +1,125 @@
+/**
+ * Asset Debugger - Examples Module
+ *
+ * This module provides examples that can be loaded in the asset debugger
+ * when no files are uploaded by the user.
+ */
+import * as THREE from 'three';
+import { getState, updateState } from '../../util/state/scene-state.js';
+import { createMeshVisibilityPanel } from '../../panels/mesh-heading/mesh-heading.js';
+/**
+ * Load a specific example by name
+ * @param {string} exampleName - The name of the example to load
+ * @returns {Promise} A promise that resolves when the example is loaded
+ */
+export function loadExample(exampleName) {
+    console.log(`Loading example: ${exampleName}`);
+    switch(exampleName) {
+        case 'rig':
+            // For the rig example, create a wireframe cube as the base
+            return createWireframeCubeExample();
+        case 'wireframe-cube':
+            return createWireframeCubeExample();
+        default:
+            console.warn(`Unknown example: ${exampleName}`);
+            return Promise.reject(new Error(`Unknown example: ${exampleName}`));
+    }
+}
+/**
+ * Create a wireframe cube example
+ * @returns {Promise} A promise that resolves when the example is loaded
+ */
+export function createWireframeCubeExample() {
+    return new Promise((resolve, reject) => {
+        const state = getState();
+        // Check if scene is initialized
+        if (!state.scene) {
+            console.warn("Scene not initialized yet. Cannot create wireframe cube example.");
+            reject(new Error("Scene not initialized. Try again after scene is ready."));
+            return;
+        }
+        try {
+            console.log('[EXAMPLE] Creating wireframe cube example');
+            // Create a default dark gray background color
+            state.scene.background = new THREE.Color(0x222222);
+            console.log('[EXAMPLE] Background color set to #222222');
+            // Import lighting utilities to use their default lighting
+            import('../../util/scene/lighting-manager.js').then(lightingUtil => {
+                // Add standard lighting from lighting-util.js
+                lightingUtil.addLighting(state.scene);
+                console.log('[EXAMPLE] Added standard lighting using lighting-util.js');
+                // Create cube geometry (make it larger for visibility)
+                const geometry = new THREE.BoxGeometry(3, 3, 3);
+                // Create wireframe material with a bright color
+                const material = new THREE.MeshBasicMaterial({
+                    color: 0x00ff00, // Bright green
+                    wireframe: true,
+                    wireframeLinewidth: 3
+                });
+                // Create mesh and add to scene
+                const cube = new THREE.Mesh(geometry, material);
+                cube.name = "WireframeCube";
+                state.scene.add(cube);
+                console.log('[EXAMPLE] Added wireframe cube to scene');
+                // Position the cube at the center
+                cube.position.set(0, 0, 0);
+                // Explicitly position the camera to view the cube
+                if (state.camera) {
+                    // Position camera far enough to see the cube
+                    state.camera.position.set(0, 0, 10);
+                    state.camera.lookAt(0, 0, 0);
+                    console.log('[EXAMPLE] Positioned camera at (0,0,10) looking at cube');
+                    // If we have camera controls, reset them
+                    if (state.controls) {
+                        state.controls.target.set(0, 0, 0);
+                        state.controls.update();
+                        console.log('[EXAMPLE] Updated camera controls to target cube');
+                    }
+                } else {
+                    console.warn('[EXAMPLE] Camera not found in state, may not be able to see cube');
+                }
+                // Store in state
+                updateState('cube', cube);
+                updateState('meshes', [cube]);
+                console.log('[EXAMPLE] Updated state with cube reference');
+                // Set up mesh visibility panel
+                createMeshVisibilityPanel();
+                // Log scene contents for debugging
+                console.log('[EXAMPLE] Scene children:', state.scene.children);
+                console.log('[EXAMPLE] Camera position:', state.camera ? state.camera.position : 'Camera not found');
+                console.log('[EXAMPLE] Created wireframe cube example with standard lighting');
+                resolve(cube);
+            }).catch(error => {
+                console.error('[EXAMPLE] Error importing lighting-util.js:', error);
+                reject(error);
+            });
+        } catch (error) {
+            console.error('[EXAMPLE] Error creating wireframe cube example:', error);
+            reject(error);
+        }
+    });
+}
+export default {
+    loadExample,
+    createWireframeCubeExample
+};