@littlecarlito/blorktools 0.50.4 → 0.51.0

package/src/asset_debugger/util/data/html-formatter.js

@@ -0,0 +1,76 @@
+/**
+ * HTML Formatter
+ * 
+ * This module provides HTML formatting capabilities.
+ * It uses js-beautify for HTML formatting.
+ */
+
+import jsBeautify from 'js-beautify';
+const { html: beautifyHtml, css: beautifyCss } = jsBeautify;
+
+/**
+ * Format HTML code with proper indentation
+ * @param {string} html - The HTML code to format
+ * @param {Object} options - Formatting options (tabWidth, useTabs)
+ * @returns {string} The formatted HTML
+ */
+export function formatHtml(html, options = {}) {
+    if (!html || html.trim() === '') return '';
+    
+    try {
+        const tabWidth = options.tabWidth || 2;
+        const useTabs = options.useTabs || false;
+        
+        // Check if input is partial CSS (not complete HTML)
+        const isPartialCss = html.trim().startsWith('body') || 
+                           html.trim().startsWith('.') || 
+                           html.trim().startsWith('#') ||
+                           (html.includes('{') && !html.includes('<'));
+        
+        // Beautify options
+        const beautifyOptions = {
+            indent_size: tabWidth,
+            indent_with_tabs: useTabs,
+            preserve_newlines: true,
+            max_preserve_newlines: 2,
+            wrap_line_length: 0,
+            end_with_newline: true,
+            indent_inner_html: true,
+            extra_liners: []
+        };
+        
+        // Format based on content type
+        if (isPartialCss) {
+            return beautifyCss(html, beautifyOptions);
+        } else {
+            return beautifyHtml(html, beautifyOptions);
+        }
+    } catch (error) {
+        console.error('Error formatting HTML:', error);
+        // Fallback to returning the original HTML if formatting fails
+        return html;
+    }
+}
+
+/**
+ * Check if external formatter is available
+ * @returns {boolean} Always true since we use js-beautify
+ */
+export function hasExternalFormatter() {
+    return true;
+}
+
+/**
+ * Initialize the HTML formatter
+ * @returns {Promise<void>}
+ */
+export async function initHtmlFormatter() {
+    console.log('HTML formatter initialized (js-beautify)');
+    return Promise.resolve();
+}
+
+export default {
+    formatHtml,
+    initHtmlFormatter,
+    hasExternalFormatter
+}; 

package/src/asset_debugger/util/data/html-linter.js

@@ -0,0 +1,276 @@
+/**
+ * HTML Linter
+ * 
+ * This module provides HTML linting capabilities using a built-in implementation.
+ * No external dependencies are used.
+ */
+
+
+// Store current lint errors
+let currentLintErrors = [];
+
+/**
+ * Initialize the HTML linter (no-op since we don't need initialization)
+ * @returns {Promise<void>}
+ */
+export async function initHtmlLinter() {
+    console.log('HTML linter initialized (built-in)');
+    return Promise.resolve();
+}
+
+/**
+ * Lint the HTML content in the editor
+ */
+export async function lintHtmlContent() {
+    const modal = document.getElementById('html-editor-modal');
+    const textarea = modal ? modal.querySelector('#html-editor-textarea') : null;
+    const errorContainer = modal ? modal.querySelector('#html-editor-errors') : null;
+    
+    if (!textarea) return;
+    
+    const html = textarea.value;
+    
+    try {
+        // Run the linter
+        const errors = await lintHtml(html);
+        currentLintErrors = errors;
+        
+        // Clear previous error indicators
+        clearErrorIndicators();
+        
+        // Create error container if it doesn't exist
+        const container = errorContainer || createErrorContainer();
+        
+        // Display errors if any
+        if (errors && errors.length > 0) {
+            displayLintErrors(errors);
+            container.style.display = 'block';
+        } else {
+            if (container) container.style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error linting HTML:', error);
+    }
+}
+
+/**
+ * Built-in HTML validation
+ * @param {string} html - The HTML to validate
+ * @returns {Array} Array of lint errors/warnings
+ */
+function validateHtml(html) {
+    const errors = [];
+    
+    if (!html || html.trim() === '') {
+        return errors;
+    }
+    
+    // Split into lines for better error reporting
+    const lines = html.split('\n');
+    
+    // Check for basic HTML structure
+    if (!html.includes('<')) {
+        errors.push({
+            line: 1,
+            col: 1,
+            message: 'No HTML tags found',
+            rule: 'tag-required',
+            severity: 'error'
+        });
+    }
+    
+    // Track open tags to check for proper nesting and closure
+    const openTags = [];
+    let lineNum = 0;
+    
+    // Process each line
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        lineNum = i + 1; // 1-based line numbers
+        
+        // Extract tags from the line
+        const tagMatches = line.match(/<\/?[a-z][a-z0-9]*(?:\s+[^>]*)?>/gi) || [];
+        
+        // Process each tag in the line
+        for (const tag of tagMatches) {
+            const colNum = line.indexOf(tag) + 1; // 1-based column numbers
+            
+            // Check if it's a closing tag
+            if (tag.match(/<\//)) {
+                const tagName = tag.match(/<\/([a-z][a-z0-9]*)/i)?.[1]?.toLowerCase();
+                
+                if (!tagName) {
+                    errors.push({
+                        line: lineNum,
+                        col: colNum,
+                        message: 'Invalid closing tag format',
+                        rule: 'tag-format',
+                        severity: 'error'
+                    });
+                    continue;
+                }
+                
+                // Check if this closing tag matches the last opened tag
+                if (openTags.length === 0) {
+                    errors.push({
+                        line: lineNum,
+                        col: colNum,
+                        message: `Closing tag </${tagName}> without matching opening tag`,
+                        rule: 'tag-pair',
+                        severity: 'error'
+                    });
+                } else if (openTags[openTags.length - 1].name !== tagName) {
+                    const lastOpenTag = openTags[openTags.length - 1].name;
+                    errors.push({
+                        line: lineNum,
+                        col: colNum,
+                        message: `Expected closing tag </${lastOpenTag}>, found </${tagName}>`,
+                        rule: 'tag-pair',
+                        severity: 'error'
+                    });
+                } else {
+                    // Correct closing tag, remove from stack
+                    openTags.pop();
+                }
+            }
+            // Check if it's a self-closing tag
+            else if (tag.endsWith('/>') || 
+                     tag.match(/<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)(\s|>)/i)) {
+                // Self-closing tags are fine, no need to track
+            }
+            // It's an opening tag
+            else {
+                const tagName = tag.match(/<([a-z][a-z0-9]*)/i)?.[1]?.toLowerCase();
+                
+                if (!tagName) {
+                    errors.push({
+                        line: lineNum,
+                        col: colNum,
+                        message: 'Invalid opening tag format',
+                        rule: 'tag-format',
+                        severity: 'error'
+                    });
+                    continue;
+                }
+                
+                // Check for attribute format issues
+                const attributeText = tag.slice(tagName.length + 1, -1).trim();
+                if (attributeText) {
+                    const attrMatches = attributeText.match(/([a-z][a-z0-9\-_]*)(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?/gi) || [];
+                    
+                    // Check for duplicate attributes
+                    const attrNames = [];
+                    for (const attr of attrMatches) {
+                        const attrName = attr.split('=')[0].toLowerCase();
+                        if (attrNames.includes(attrName)) {
+                            errors.push({
+                                line: lineNum,
+                                col: colNum,
+                                message: `Duplicate attribute '${attrName}' in tag`,
+                                rule: 'attr-no-duplication',
+                                severity: 'error'
+                            });
+                        }
+                        attrNames.push(attrName);
+                    }
+                }
+                
+                // Add to open tags stack
+                openTags.push({
+                    name: tagName,
+                    line: lineNum,
+                    col: colNum
+                });
+            }
+        }
+    }
+    
+    // Check for unclosed tags
+    for (const tag of openTags) {
+        errors.push({
+            line: tag.line,
+            col: tag.col,
+            message: `Unclosed tag <${tag.name}>`,
+            rule: 'tag-pair',
+            severity: 'error'
+        });
+    }
+    
+    return errors;
+}
+
+/**
+ * Lint HTML code to find errors and warnings
+ * @param {string} html - The HTML to lint
+ * @returns {Promise<Array>} Array of lint errors/warnings
+ */
+async function lintHtml(html) {
+    if (!html) return [];
+    
+    try {
+        return validateHtml(html);
+    } catch (error) {
+        console.error('Error linting HTML:', error);
+        return [{
+            line: 1,
+            col: 1,
+            message: `Linting error: ${error.message}`,
+            rule: 'internal-error',
+            severity: 'error'
+        }];
+    }
+}
+
+/**
+ * Clear error indicators from the editor
+ */
+function clearErrorIndicators() {
+    const modal = document.getElementById('html-editor-modal');
+    const textarea = modal ? modal.querySelector('#html-editor-textarea') : null;
+    if (!textarea) return;
+    
+    // Remove any existing error styling
+    textarea.classList.remove('has-errors');
+    
+    // Clear the error container
+    const errorContainer = modal ? modal.querySelector('#html-editor-errors') : null;
+    if (errorContainer) {
+        errorContainer.innerHTML = '';
+    }
+}
+
+/**
+ * Display lint errors in the editor
+ * @param {Array} errors - The lint errors to display
+ */
+function displayLintErrors(errors) {
+    const modal = document.getElementById('html-editor-modal');
+    const textarea = modal ? modal.querySelector('#html-editor-textarea') : null;
+    const errorContainer = modal ? modal.querySelector('#html-editor-errors') : null;
+    
+    if (!textarea || !errorContainer) return;
+    
+    // Add error class to textarea
+    textarea.classList.add('has-errors');
+    
+    // Create error messages
+    const errorList = document.createElement('ul');
+    errorList.style.margin = '0';
+    errorList.style.padding = '0 0 0 20px';
+    
+    errors.forEach(error => {
+        const errorItem = document.createElement('li');
+        errorItem.textContent = `Line ${error.line}, Col ${error.col}: ${error.message}`;
+        errorItem.style.cursor = 'pointer';
+        
+        // Add click handler to navigate to the error position
+        errorItem.addEventListener('click', () => {
+            navigateToErrorPosition(textarea, error.line, error.col);
+        });
+        
+        errorList.appendChild(errorItem);
+    });
+    
+    errorContainer.innerHTML = '';
+    errorContainer.appendChild(errorList);
+}

package/src/asset_debugger/util/data/localstorage-manager.js

@@ -0,0 +1,265 @@
+/**
+ * Utilities for working with localStorage in the Asset Debugger
+ */
+
+// Storage keys
+const SETTINGS_KEY = 'assetDebuggerSettings';
+const CURRENT_SESSION_KEY = 'assetDebuggerCurrentState';
+const SESSION_HISTORY_KEY = 'assetDebuggerSessionHistory';
+const MAX_HISTORY_SESSIONS = 10;
+
+/**
+ * Save asset debugger settings to localStorage
+ * @param {Object} settings - The settings object to save
+ */
+export function saveSettings(settings) {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+}
+
+/**
+ * Load asset debugger settings from localStorage
+ * @returns {Object|null} The parsed settings object or null if no settings found
+ */
+export function loadSettings() {
+    const savedSettings = localStorage.getItem(SETTINGS_KEY);
+    
+    if (savedSettings) {
+        try {
+            const settings = JSON.parse(savedSettings);
+            console.log('Loaded settings:', settings);
+            return settings;
+        } catch (e) {
+            console.error('Error loading saved settings:', e);
+            return null;
+        }
+    }
+    
+    return null;
+}
+
+/**
+ * Get default asset debugger settings
+ * @returns {Object} The default settings object
+ */
+export function getDefaultSettings() {
+    return {
+        pinned: true, // Default pin state is enabled/pinned
+        tabPanelHidden: false, // Default tab panel state is visible
+        axisIndicator: {
+            type: 'embedded',
+            intensity: 0.7
+        },
+        rigOptions: {
+            displayRig: true,
+            forceZ: true,
+            wireframe: false,
+            primaryColor: 0x4CAF50,
+            secondaryColor: 0xFFFF00,
+            jointColor: 0x00FFFF,
+            showJointLabels: false,
+            normalColor: 0xFF0000,
+            hoverColor: 0x00FF00,
+            activeColor: 0x0000FF
+        }
+    };
+}
+
+/**
+ * Serialize a state object for storage
+ * @param {Object} state - The state object to serialize
+ * @returns {Object} Serialized state
+ */
+function serializeState(state) {
+    const serialized = { ...state };
+    
+    // Handle File objects in textureFiles
+    if (serialized.textureFiles) {
+        Object.keys(serialized.textureFiles).forEach(key => {
+            const file = serialized.textureFiles[key];
+            if (file instanceof File) {
+                serialized.textureFiles[key] = {
+                    name: file.name,
+                    type: file.type,
+                    size: file.size,
+                    lastModified: file.lastModified
+                };
+            }
+        });
+    }
+    
+    // Handle model file
+    if (serialized.modelFile instanceof File) {
+        serialized.modelFile = {
+            name: serialized.modelFile.name,
+            type: serialized.modelFile.type,
+            size: serialized.modelFile.size,
+            lastModified: serialized.modelFile.lastModified
+        };
+    }
+    
+    // Handle lighting file
+    if (serialized.lightingFile instanceof File) {
+        serialized.lightingFile = {
+            name: serialized.lightingFile.name,
+            type: serialized.lightingFile.type,
+            size: serialized.lightingFile.size,
+            lastModified: serialized.lightingFile.lastModified
+        };
+    }
+    
+    // Handle background file
+    if (serialized.backgroundFile instanceof File) {
+        serialized.backgroundFile = {
+            name: serialized.backgroundFile.name,
+            type: serialized.backgroundFile.type,
+            size: serialized.backgroundFile.size,
+            lastModified: serialized.backgroundFile.lastModified
+        };
+    }
+    
+    return serialized;
+}
+
+/**
+ * Save current session state
+ * @param {Object} state - The current session state
+ */
+export function saveCurrentSession(state) {
+    const serialized = serializeState(state);
+    localStorage.setItem(CURRENT_SESSION_KEY, JSON.stringify(serialized));
+    addToHistory(serialized);
+}
+
+/**
+ * Load current session state
+ * @returns {Object|null} The current session state or null if none exists
+ */
+export function loadCurrentSession() {
+    const savedState = localStorage.getItem(CURRENT_SESSION_KEY);
+    if (!savedState) return null;
+    
+    try {
+        const state = JSON.parse(savedState);
+        console.debug('Loaded state from localStorage:', state);
+        return state;
+    } catch (e) {
+        console.error('Error parsing saved state:', e);
+        return null;
+    }
+}
+
+/**
+ * Add a session to the history
+ * @param {Object} sessionState - The session state to add
+ */
+function addToHistory(sessionState) {
+    const history = getSessionHistory();
+    
+    // Add new session to the beginning of the array
+    history.unshift({
+        sessionId: sessionState.sessionId,
+        timestamp: sessionState.timestamp,
+        state: sessionState
+    });
+    
+    // Keep only the most recent MAX_HISTORY_SESSIONS
+    if (history.length > MAX_HISTORY_SESSIONS) {
+        history.pop();
+    }
+    
+    // Save updated history
+    localStorage.setItem(SESSION_HISTORY_KEY, JSON.stringify(history));
+}
+
+/**
+ * Get the session history
+ * @returns {Array} Array of session objects
+ */
+export function getSessionHistory() {
+    const history = localStorage.getItem(SESSION_HISTORY_KEY);
+    return history ? JSON.parse(history) : [];
+}
+
+/**
+ * Clear all session data from localStorage
+ */
+export function clearSessionData() {
+    localStorage.removeItem(CURRENT_SESSION_KEY);
+    localStorage.removeItem(SESSION_HISTORY_KEY);
+    console.debug('Cleared all session data from localStorage');
+}
+
+/**
+ * NEW: Clean up localStorage when quota is exceeded
+ * Removes old sessions and keeps only the most recent ones
+ */
+export function cleanupLocalStorage() {
+    try {
+        console.log('Cleaning up localStorage to free space...');
+        
+        // Get all keys from localStorage
+        const keys = Object.keys(localStorage);
+        
+        // Find session keys (they typically start with a timestamp or contain 'session')
+        const sessionKeys = keys.filter(key => 
+            key.includes('session') || 
+            key.includes('assetDebugger') ||
+            /^\d+$/.test(key) // Keys that are just numbers (timestamps)
+        );
+        
+        // Sort by key name (newer timestamps will be larger)
+        sessionKeys.sort();
+        
+        // Keep only the 3 most recent sessions, remove the rest
+        const keysToRemove = sessionKeys.slice(0, -3);
+        
+        keysToRemove.forEach(key => {
+            try {
+                localStorage.removeItem(key);
+                console.log(`Removed old session: ${key}`);
+            } catch (error) {
+                console.warn(`Could not remove key ${key}:`, error);
+            }
+        });
+        
+        console.log(`Cleaned up ${keysToRemove.length} old sessions from localStorage`);
+        
+    } catch (error) {
+        console.error('Error during localStorage cleanup:', error);
+        // If all else fails, clear everything
+        try {
+            localStorage.clear();
+            console.log('Cleared all localStorage due to cleanup failure');
+        } catch (clearError) {
+            console.error('Cannot clear localStorage:', clearError);
+        }
+    }
+}
+
+/**
+ * NEW: Safe save function that handles quota exceeded errors
+ */
+export function safeSaveCurrentSession(sessionData) {
+    try {
+        saveCurrentSession(sessionData);
+        return true;
+    } catch (error) {
+        if (error.name === 'QuotaExceededError' || error.message.includes('quota')) {
+            console.warn('localStorage quota exceeded, attempting cleanup...');
+            cleanupLocalStorage();
+            
+            // Try saving again after cleanup
+            try {
+                saveCurrentSession(sessionData);
+                console.log('Successfully saved session after cleanup');
+                return true;
+            } catch (secondError) {
+                console.error('Still cannot save after cleanup:', secondError);
+                return false;
+            }
+        } else {
+            console.error('Error saving session:', error);
+            return false;
+        }
+    }
+}