@littlecarlito/blorktools 0.50.4 → 0.51.0

package/src/asset_debugger/util/animation/render/pbr-material-factory.js

@@ -0,0 +1,82 @@
+import * as THREE from 'three';
+import { getState, updateState } from '../../state/scene-state.js';
+
+/**
+ * Create a PBR material with the loaded textures
+ * @returns {THREE.MeshStandardMaterial} The created material
+ */
+export function createMaterial() {
+    const state = getState();
+    
+    // Set proper texture parameters for all textures
+    setupTextureParameters();
+    
+    // Create a material configuration with available textures
+    const materialConfig = {
+        side: THREE.DoubleSide // Make material double-sided
+    };
+    
+    // Apply baseColor texture if available
+    if (state.textureObjects.baseColor) {
+        materialConfig.map = state.textureObjects.baseColor;
+        materialConfig.color = 0xffffff; // White color to let the texture show properly
+    } else {
+        // If no base color texture, use a light gray color
+        materialConfig.color = 0xcccccc;
+    }
+    
+    // Apply normal map if available
+    if (state.textureObjects.normal) {
+        materialConfig.normalMap = state.textureObjects.normal;
+        materialConfig.normalScale = new THREE.Vector2(1, 1);
+    }
+    
+    // Apply ORM texture if available
+    if (state.textureObjects.orm) {
+        // If we have the ORM texture, apply all its channels
+        materialConfig.aoMap = state.textureObjects.orm;
+        materialConfig.roughnessMap = state.textureObjects.orm;
+        materialConfig.metalnessMap = state.textureObjects.orm;
+        // When ORM is available, use its full range
+        materialConfig.roughness = 1.0;
+        materialConfig.metalness = 1.0;
+    } else {
+        // If we don't have ORM, use reasonable defaults
+        materialConfig.roughness = 0.7;
+        materialConfig.metalness = 0.2;
+    }
+    
+    // Create material with properly configured textures
+    // Explicitly ensure transparency is disabled
+    materialConfig.transparent = false;
+    materialConfig.alphaTest = 0;
+    
+    return new THREE.MeshStandardMaterial(materialConfig);
+}
+
+/**
+ * Setup texture parameters for all loaded textures
+ */
+function setupTextureParameters() {
+    const state = getState();
+    
+    if (state.textureObjects.baseColor) {
+        state.textureObjects.baseColor.encoding = THREE.sRGBEncoding;
+        state.textureObjects.baseColor.wrapS = THREE.RepeatWrapping;
+        state.textureObjects.baseColor.wrapT = THREE.RepeatWrapping;
+    }
+    
+    if (state.textureObjects.normal) {
+        state.textureObjects.normal.encoding = THREE.LinearEncoding;
+        state.textureObjects.normal.wrapS = THREE.RepeatWrapping;
+        state.textureObjects.normal.wrapT = THREE.RepeatWrapping;
+    }
+    
+    if (state.textureObjects.orm) {
+        state.textureObjects.orm.encoding = THREE.LinearEncoding;
+        state.textureObjects.orm.wrapS = THREE.RepeatWrapping;
+        state.textureObjects.orm.wrapT = THREE.RepeatWrapping;
+    }
+}
+
+

package/src/asset_debugger/util/common.css

@@ -0,0 +1,280 @@
+/* Blorkvisor-inspired theme */
+:root {
+    --primary-color: #4CAF50; /* Terminal green */
+    --tool-color: #F1C40F; /* Blorkvisor tool color (yellow) for borders */
+    --fallout-yellow: #f8d73e; /* Adjusted to be more yellow and less orange */
+    --button-color: #1E88E5; /* Blorkvisor button color (blue) */
+    --secondary-color: #1a1a1a; /* Dark background but not pure black */
+    --bg-color: #121212; /* Dark background */
+    --panel-bg: #1e1e1e; /* Panel background */
+    --panel-bg-lighter: #252525; /* Lighter panel background */
+    --panel-border: #333; /* Panel border */
+    --text-color: #b8b8b8; /* Light gray for regular text */
+    --card-border: #333; /* Card border color */
+    --input-bg: #252525; /* Input background */
+    --input-text: #dadada; /* Input text */
+    --label-text: #959595; /* Label text */
+    --hover-glow: 0 0 5px rgba(241, 196, 15, 0.7); /* Yellow glow for hover */
+    --success-glow: 0 0 5px rgba(76, 175, 80, 0.7); /* Green glow for success */
+    --tooltip-bg: rgba(40, 40, 40, 0.95); /* Tooltip background */
+    --tooltip-border: #555; /* Tooltip border */
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: monospace;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 20px;
+    background-color: rgba(26, 26, 26, 0.85);
+    color: var(--primary-color);
+    border-bottom: 1px solid var(--panel-border);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    height: 50px;
+    backdrop-filter: blur(5px);
+}
+
+h1 {
+    margin: 0;
+    font-size: 24px;
+    color: var(--primary-color);
+}
+
+h2 {
+    font-size: 18px;
+    margin: 5px 0;
+}
+
+h3 {
+    margin: 0;
+    font-size: 16px;
+    color: var(--primary-color);
+}
+
+h2, h3 {
+    margin: 5px 0;
+    color: var(--primary-color);
+    font-weight: normal;
+}
+
+
+/* Shared toggle theme */
+.theme-toggle {
+    background-color: transparent;
+    border: 1px solid var(--button-color);
+    color: var(--button-color);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 8px 12px;
+    font-family: monospace;
+    transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+    background-color: rgba(30, 136, 229, 0.2);
+}
+
+.theme-toggle.active {
+    background-color: rgba(30, 136, 229, 0.3);
+    color: white;
+    border-color: var(--button-color);
+}
+
+
+/* Shared modal styling */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(3px);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+}
+
+.modal-container {
+    background-color: var(--panel-bg);
+    width: 400px;
+    max-width: 90%;
+    border: 1px solid var(--panel-border);
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid var(--panel-border);
+}
+
+.modal-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin: 0;
+    color: var(--primary-color);
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--text-color);
+}
+
+.modal-body {
+    padding: 20px;
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    padding: 15px 20px;
+    border-top: 1px solid var(--panel-border);
+    display: flex;
+    justify-content: flex-end;
+}
+
+.modal-btn {
+    padding: 8px 16px;
+    border: none;
+    cursor: pointer;
+    margin-left: 10px;
+    font-family: monospace;
+    transition: all 0.3s ease;
+}
+
+.modal-btn-primary {
+    background-color: var(--button-color);
+    color: white;
+}
+
+.modal-btn-secondary {
+    background-color: #555;
+    color: white;
+}
+
+.modal-btn:hover {
+    opacity: 0.9;
+}
+
+
+/* Shared settings styles */
+.settings-group {
+    margin-bottom: 20px;
+    border: 1px solid var(--panel-border);
+    padding: 15px;
+    background-color: rgba(0,0,0,0.1);
+}
+
+.settings-option {
+    flex: 0 0 48%;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.settings-option label {
+    width: 120px;
+    margin-left: 10px;
+    color: var(--label-text);
+}
+
+.settings-select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid var(--panel-border);
+    background-color: var(--input-bg);
+    color: var(--input-text);
+    font-family: monospace;
+}
+
+.settings-slider {
+    width: 80%;
+    margin-right: 10px;
+    background-color: var(--secondary-color);
+    border: 1px solid var(--panel-border);
+    height: 5px;
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+}
+
+
+/* Shared collapsible styles */
+.collapsible-header {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   cursor: pointer;
+   padding: 4px 0;
+}
+
+.collapsible-header .settings-subheading {
+    margin-bottom: 0;
+    flex: 1;
+}
+
+.collapse-indicator {
+   font-size: 14px;
+   color: #777;
+   margin-right: 4px;
+   transition: none;
+}
+
+.collapsible-header.expanded .collapse-indicator {
+    transform: none;
+}
+
+/* Shared no image container*/
+.no-image-message-container {
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   text-align: center;
+   color: #777;
+   font-size: 0.9em;
+   font-style: italic;
+   padding: 20px;
+   background-color: rgba(30, 30, 30, 0.7);
+   border-radius: 4px;
+   width: 80%;
+   display: block;
+}
+
+.no-image-message-container.visible {
+    display: block;
+}
+
+.no-image-message-container.hidden {
+    display: none;
+}

package/src/asset_debugger/util/data/animation-classifier.js

@@ -0,0 +1,323 @@
+/**
+ * Classify the type of animation based on name and initial style
+ * @param {string} animationName - The animation name
+ * @param {Object} initialStyle - Initial computed style
+ * @returns {Object} Classification information
+ */
+export function classifyAnimation(animationName, initialStyle) {
+    const name = animationName.toLowerCase();
+    
+    // Build a classification object
+    const classification = {
+        isFadeIn: name.includes('fadein') || (name.includes('fade') && name.includes('in')),
+        isFadeOut: name.includes('fadeout') || (name.includes('fade') && name.includes('out')),
+        isSlideIn: name.includes('slidein') || (name.includes('slide') && name.includes('in')),
+        isSlideOut: name.includes('slideout') || (name.includes('slide') && name.includes('out')),
+        isZoomIn: name.includes('zoomin') || (name.includes('zoom') && name.includes('in')),
+        isZoomOut: name.includes('zoomout') || (name.includes('zoom') && name.includes('out')),
+        isBounce: name.includes('bounce'),
+        isRotate: name.includes('rotate'),
+        isPulse: name.includes('pulse'),
+        isFlash: name.includes('flash'),
+        isShake: name.includes('shake'),
+        isWobble: name.includes('wobble'),
+        isJello: name.includes('jello'),
+        isFlip: name.includes('flip'),
+        isHeartBeat: name.includes('heartbeat') || name.includes('heart-beat'),
+        isHinge: name.includes('hinge'),
+        isBlink: name.includes('blink')
+    };
+    
+    // Determine animation category
+    if (classification.isFadeIn || classification.isFadeOut) {
+        classification.category = 'fade';
+    } else if (classification.isSlideIn || classification.isSlideOut) {
+        classification.category = 'slide';
+    } else if (classification.isZoomIn || classification.isZoomOut) {
+        classification.category = 'zoom';
+    } else if (classification.isRotate) {
+        classification.category = 'rotate';
+    } else if (classification.isBounce || classification.isPulse || classification.isFlash || 
+               classification.isShake || classification.isWobble || classification.isJello || 
+               classification.isFlip || classification.isHeartBeat || classification.isHinge || 
+               classification.isBlink) {
+        classification.category = 'attention';
+    } else {
+        classification.category = 'other';
+    }
+    
+    return classification;
+}
+
+/**
+ * Classify the type of transition
+ * @param {string} property - The CSS property being transitioned
+ * @param {string} initialValue - Starting value
+ * @param {string} currentValue - Current value during transition
+ * @returns {Object} Classification information
+ */
+export function classifyTransition(property, initialValue, currentValue) {
+    const classification = {
+        property: property
+    };
+    
+    // Determine transition type based on property
+    switch (property) {
+        case 'opacity':
+            const initialOpacity = parseFloat(initialValue) || 0;
+            const currentOpacity = parseFloat(currentValue) || 0;
+            classification.isFadeIn = initialOpacity < currentOpacity;
+            classification.isFadeOut = initialOpacity > currentOpacity;
+            classification.category = 'fade';
+            break;
+            
+        case 'transform':
+            if (initialValue.includes('scale')) {
+                const initialScale = extractScaleValue(initialValue);
+                const currentScale = extractScaleValue(currentValue);
+                classification.isZoomIn = initialScale < currentScale;
+                classification.isZoomOut = initialScale > currentScale;
+                classification.category = 'zoom';
+            } else if (initialValue.includes('rotate')) {
+                classification.isRotate = true;
+                classification.category = 'rotate';
+            } else if (initialValue.includes('translate')) {
+                classification.isMove = true;
+                classification.category = 'move';
+            } else {
+                classification.category = 'transform';
+            }
+            break;
+            
+        case 'left':
+        case 'right':
+        case 'top':
+        case 'bottom':
+            classification.isMove = true;
+            classification.category = 'move';
+            break;
+            
+        case 'width':
+        case 'height':
+            const initialSize = parseFloat(initialValue) || 0;
+            const currentSize = parseFloat(currentValue) || 0;
+            classification.isExpand = initialSize < currentSize;
+            classification.isShrink = initialSize > currentSize;
+            classification.category = 'size';
+            break;
+            
+        default:
+            classification.category = 'other';
+    }
+    
+    return classification;
+}
+
+/**
+ * Extract scale value from a transform string
+ * @param {string} transform - CSS transform value
+ * @returns {number} Extracted scale or 1 if not found
+ */
+function extractScaleValue(transform) {
+    try {
+        const scaleMatch = transform.match(/scale\(([^)]+)\)/);
+        if (scaleMatch && scaleMatch[1]) {
+            return parseFloat(scaleMatch[1]) || 1;
+        }
+        
+        const scale3dMatch = transform.match(/scale3d\(([^,]+),/);
+        if (scale3dMatch && scale3dMatch[1]) {
+            return parseFloat(scale3dMatch[1]) || 1;
+        }
+    } catch (e) {}
+    
+    return 1;
+}
+
+// Unified animation detection script for both CSS3D and Image2Texture modes
+export function injectUnifiedAnimationDetectionScript(iframe, mode = 'auto') {
+    if (!iframe || !iframe.contentDocument) return;
+    
+    const script = iframe.contentDocument.createElement('script');
+    script.textContent = `
+        // Unified animation detection system
+        window.__animationDetection = {
+            // Basic counters
+            setTimeout: 0,
+            setInterval: 0,
+            rAF: 0,
+            activeTimeouts: 0,
+            activeIntervals: 0,
+            animationFrameIds: new Set(),
+            
+            // CSS animation tracking
+            cssAnimations: new Set(),
+            cssTransitions: new Set(),
+            
+            // DOM change tracking
+            domChanges: 0,
+            lastDomChange: 0,
+            styleChanges: false,
+            
+            // Mode configuration
+            mode: '${mode}', // 'css3d', 'image2texture', or 'auto'
+            
+            // Advanced detection
+            isAnimationLoop: false,
+            loopDetectionThreshold: 5
+        };
+        
+        const detection = window.__animationDetection;
+        
+        // Override setTimeout
+        const originalSetTimeout = window.setTimeout;
+        window.setTimeout = function(callback, delay) {
+            detection.setTimeout++;
+            detection.activeTimeouts++;
+            const id = originalSetTimeout.call(this, function() {
+                detection.activeTimeouts--;
+                if (typeof callback === 'function') callback();
+            }, delay);
+            return id;
+        };
+        
+        // Override setInterval
+        const originalSetInterval = window.setInterval;
+        window.setInterval = function(callback, delay) {
+            detection.setInterval++;
+            detection.activeIntervals++;
+            return originalSetInterval.call(this, callback, delay);
+        };
+        
+        // Override requestAnimationFrame
+        const originalRAF = window.requestAnimationFrame;
+        window.requestAnimationFrame = function(callback) {
+            detection.rAF++;
+            const id = originalRAF.call(this, function(timestamp) {
+                detection.animationFrameIds.add(id);
+                if (typeof callback === 'function') callback(timestamp);
+                
+                // Animation loop detection for image2texture mode
+                if (detection.mode === 'image2texture' || detection.mode === 'auto') {
+                    if (detection.animationFrameIds.size > detection.loopDetectionThreshold) {
+                        detection.isAnimationLoop = true;
+                    }
+                }
+            });
+            return id;
+        };
+        
+        // CSS Animation and Transition Event Listeners (for CSS3D mode or auto)
+        if (detection.mode === 'css3d' || detection.mode === 'auto') {
+            // CSS animation events
+            document.addEventListener('animationstart', (event) => {
+                detection.cssAnimations.add(event.animationName);
+            });
+            
+            document.addEventListener('animationend', (event) => {
+                detection.cssAnimations.delete(event.animationName);
+            });
+            
+            document.addEventListener('animationiteration', (event) => {
+                detection.lastDomChange = Date.now();
+            });
+            
+            // CSS transition events
+            document.addEventListener('transitionstart', (event) => {
+                detection.cssTransitions.add(event.propertyName);
+            });
+            
+            document.addEventListener('transitionend', (event) => {
+                detection.cssTransitions.delete(event.propertyName);
+            });
+            
+            document.addEventListener('transitionrun', (event) => {
+                detection.lastDomChange = Date.now();
+            });
+        }
+        
+        // DOM Mutation Observer (enhanced for both modes)
+        try {
+            const observer = new MutationObserver(mutations => {
+                detection.domChanges += mutations.length;
+                detection.lastDomChange = Date.now();
+                
+                for (const mutation of mutations) {
+                    // Check for style or class changes
+                    if (mutation.type === 'attributes' && 
+                        (mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
+                        detection.styleChanges = true;
+                    }
+                    
+                    // Check for added/removed nodes (image2texture specific)
+                    if (detection.mode === 'image2texture' || detection.mode === 'auto') {
+                        if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+                            detection.domChanges++;
+                        }
+                    }
+                }
+            });
+            
+            // Configure observer based on mode
+            const observerConfig = {
+                attributes: true,
+                childList: true,
+                subtree: true
+            };
+            
+            // Add attribute filter for CSS3D mode for better performance
+            if (detection.mode === 'css3d') {
+                observerConfig.attributeFilter = ['style', 'class'];
+            }
+            
+            observer.observe(document.documentElement, observerConfig);
+            
+        } catch (e) {
+            console.debug('MutationObserver not available:', e);
+        }
+        
+        // Utility methods for external access
+        window.__animationDetection.getStatus = function() {
+            const now = Date.now();
+            return {
+                hasActiveTimeouts: detection.activeTimeouts > 0,
+                hasActiveIntervals: detection.activeIntervals > 0,
+                hasActiveRAF: detection.rAF > 0 && detection.animationFrameIds.size > 0,
+                hasCssAnimations: detection.cssAnimations.size > 0,
+                hasCssTransitions: detection.cssTransitions.size > 0,
+                hasRecentDomChanges: (now - detection.lastDomChange) < 500,
+                timeSinceLastChange: now - detection.lastDomChange,
+                totalChanges: detection.domChanges,
+                isAnimationLoop: detection.isAnimationLoop,
+                mode: detection.mode
+            };
+        };
+        
+        window.__animationDetection.isAnimating = function() {
+            const status = this.getStatus();
+            return status.hasActiveTimeouts || 
+                   status.hasActiveIntervals || 
+                   status.hasActiveRAF || 
+                   status.hasCssAnimations || 
+                   status.hasCssTransitions || 
+                   status.hasRecentDomChanges;
+        };
+        
+        window.__animationDetection.reset = function() {
+            detection.setTimeout = 0;
+            detection.setInterval = 0;
+            detection.rAF = 0;
+            detection.activeTimeouts = 0;
+            detection.activeIntervals = 0;
+            detection.animationFrameIds.clear();
+            detection.cssAnimations.clear();
+            detection.cssTransitions.clear();
+            detection.domChanges = 0;
+            detection.lastDomChange = 0;
+            detection.styleChanges = false;
+            detection.isAnimationLoop = false;
+        };
+    `;
+    
+    iframe.contentDocument.head.appendChild(script);
+}

package/src/asset_debugger/util/data/duplicate-handler.js

@@ -0,0 +1,20 @@
+/**
+ * Deduplicate items by name, counting duplicates
+ * @param {Array} items - Array of items to deduplicate
+ * @returns {Array} Deduplicated items with count property
+ */
+export function deduplicateItemsByName(items) {
+    const uniqueItems = new Map();
+    
+    items.forEach(item => {
+        const key = item.name;
+        if (uniqueItems.has(key)) {
+            const existingItem = uniqueItems.get(key);
+            existingItem.count = (existingItem.count || 1) + 1;
+        } else {
+            uniqueItems.set(key, {...item, count: 1});
+        }
+    });
+    
+    return Array.from(uniqueItems.values());
+}