@littlecarlito/blorktools 0.50.3 → 0.51.0

package/src/asset_debugger/panels/asset-panel/asset-panel.css

@@ -0,0 +1,263 @@
+/* Asset Panel Styles */
+
+.asset-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+/* All content containers should be visible without scrollbars */
+.sample-status,
+.sample-data-info,
+.metadata-content {
+    overflow: visible !important;
+}
+
+/* Section header styles */
+.section-header {
+    padding: 4px 0;
+    margin-bottom: 6px;
+}
+
+/* Main section headers (Sample sections) */
+.asset-section > .section-header h3.metadata-header {
+    margin: 0;
+    font-size: 1.1em;
+    color: #4CAF50; /* Terminal green from theme */
+    font-weight: 500;
+    text-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
+}
+
+/* Main section collapse indicators */
+.asset-section > .section-header .collapse-indicator {
+    color: #4CAF50; /* Match header color */
+    font-weight: 500;
+}
+
+/* Subheaders remain gray for contrast */
+.section-content .metadata-header {
+    color: #aaa;
+}
+
+.section-content {
+    padding: 0 2px;
+}
+
+/* Section divider styles - reduce margins to fix spacing */
+.section-divider {
+    height: 1px;
+    background-color: #333;
+    margin: 4px 0; /* Reduced from 8px */
+    width: 100%;
+}
+
+/* Remove any underlines that might be appearing */
+.asset-section .section-header,
+.asset-section .metadata-header,
+.asset-section h3 {
+    border-bottom: none;
+    text-decoration: none;
+    box-shadow: none;
+}
+
+.sample-data-info {
+    margin-top: 8px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.metadata-header {
+    font-size: 1em;
+    color: #aaa;
+    margin: 0;
+    font-weight: normal;
+    cursor: pointer; /* Add pointer cursor to make it clear it's clickable */
+}
+
+.asset-metadata {
+    width: 100%;
+    font-size: 0.9em;
+    color: #aaa;
+    table-layout: fixed;
+}
+
+.asset-metadata td {
+    padding: 3px 0;
+}
+
+.asset-metadata td:first-child {
+    width: 110px;
+    color: #777;
+}
+
+/* Atlas Panel Styles */
+.panel-container {
+    width: 100%;
+    margin-bottom: 12px;
+}
+
+.atlas-view-container {
+    width: 100%;
+    margin-bottom: 10px;
+    border: 1px solid #444;
+    padding: 4px;
+    box-sizing: border-box;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgba(0,0,0,0.2);
+}
+
+/* UV Panel Styles */
+.uv-info-container {
+    background-color: rgba(0,0,0,0.2);
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 12px;
+    font-size: 0.9em;
+    color: #bbb;
+}
+
+.uv-manual-controls {
+    margin-top: 15px;
+    background-color: rgba(0,0,0,0.2);
+    padding: 10px;
+    border-radius: 4px;
+}
+
+.control-title {
+    margin: 0 0 10px 0;
+    font-size: 0.95em;
+    color: #4CAF50;
+    font-weight: normal;
+}
+
+/* Rig Panel Styles */
+.rig-controls-section {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+    background-color: rgba(0,0,0,0.2);
+    padding: 10px;
+    border-radius: 4px;
+}
+
+.rig-constraint-container,
+.rig-lock-container {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+    gap: 10px;
+}
+
+/* Download Asset Section - Always visible at bottom */
+.asset-download-section {
+    margin-top: 20px;
+    padding: 15px 0;
+    border-top: 1px solid #333;
+    text-align: center;
+}
+
+.download-asset-button {
+    background-color: transparent;
+    color: #4CAF50;
+    border: 1px solid #4CAF50;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: inherit;
+    border-radius: 0;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    min-width: 160px;
+}
+
+.download-asset-button:hover {
+    background-color: rgba(76, 175, 80, 0.2);
+}
+
+.download-asset-button:disabled {
+    background-color: transparent;
+    color: #666;
+    border-color: #666;
+    cursor: not-allowed;
+}
+
+.download-asset-button:disabled:hover {
+    background-color: transparent;
+}
+
+/* Mesh Settings Modal Styles */
+.settings-section {
+    margin-bottom: 20px;
+}
+
+.settings-section h4 {
+    color: #4CAF50;
+    margin: 0 0 15px 0;
+    font-weight: 500;
+}
+
+.position-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 5px;
+}
+
+.control-row {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.control-row label {
+    width: 20px;
+    margin-bottom: 0;
+    color: #aaa;
+}
+
+.number-input {
+    width: 60px;
+    padding: 4px 6px;
+    background: #333;
+    border: 1px solid #555;
+    color: white;
+    border-radius: 3px;
+}
+
+.settings-status {
+    margin-top: 15px;
+    padding: 5px 10px;
+    border-radius: 3px;
+    min-height: 20px;
+}
+
+.settings-status.success {
+    background-color: rgba(76, 175, 80, 0.2);
+    color: #4CAF50;
+}
+
+.settings-status.error {
+    background-color: rgba(244, 67, 54, 0.2);
+    color: #F44336;
+}
+
+.settings-status.info {
+    background-color: rgba(33, 150, 243, 0.2);
+    color: #2196F3;
+}
+
+.coords-container {
+    font-size: 12px;
+    margin-bottom: 10px;
+    font-family: monospace;
+    padding: 5px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--panel-border);
+    color: var(--text-color);
+}

package/src/asset_debugger/panels/asset-panel/asset-panel.html

@@ -0,0 +1,123 @@
+<!-- Asset Panel Component -->
+<link rel="stylesheet" href="/asset_debugger/panels/asset-panel/asset-panel.css">
+<div id="asset-tab" class="tab-content">
+    <div class="asset-section">
+        <div class="collapsible-header section-header">
+            <h3 class="metadata-header">Mesh</h3>
+            <span class="collapse-indicator">[+]</span>
+        </div>
+        <div class="metadata-content section-content" style="display: none;">
+            <!-- Mesh Visibility Panel -->
+            <div id="mesh-visibility-container">
+                <h4 class="subsection-header">Mesh Visibility</h4>
+                <div id="mesh-groups" class="mesh-groups-container"></div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="section-divider"></div>
+    
+    <div class="asset-section">
+        <div class="collapsible-header section-header">
+            <h3 class="metadata-header">Atlas</h3>
+            <span class="collapse-indicator">[+]</span>
+        </div>
+        <div class="metadata-content section-content" style="display: none;">
+            <!-- Atlas Heading -->
+            <div id="atlas-heading-container" class="panel-container">
+                <div class="texture-type-selector">
+                    <button data-texture-type="baseColor" class="texture-type-button active">Base Color</button>
+                    <button data-texture-type="orm" class="texture-type-button">ORM</button>
+                    <button data-texture-type="normal" class="texture-type-button">Normal</button>
+                </div>
+                <div class="atlas-view-container">
+                    <canvas id="atlas-canvas" width="256" height="256"></canvas>
+                    <div id="coords-text" class="coords-container">No texture loaded</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="section-divider"></div>
+    
+    <div class="asset-section">
+        <div class="collapsible-header section-header">
+            <h3 class="metadata-header">UV</h3>
+            <span class="collapse-indicator">[+]</span>
+        </div>
+        <div class="metadata-content section-content" style="display: none;">
+            <!-- UV Heading -->
+            <div id="uv-heading-container" class="panel-container">
+                <div id="uv-info-container" class="uv-info-container">
+                    <p>No UV data loaded yet.</p>
+                </div>
+                
+                <div id="uv-manual-controls" class="uv-manual-controls" style="display: none;">
+                    <h4 class="control-title">UV Mapping Controls</h4>
+                    
+                    <div class="uv-control-group">
+                        <div class="uv-control-row">
+                            <label for="uv-offset-x">Offset X:</label>
+                            <input type="number" id="uv-offset-x" min="0" max="1" step="0.05" value="0">
+                            <label for="uv-offset-y">Offset Y:</label>
+                            <input type="number" id="uv-offset-y" min="0" max="1" step="0.05" value="0">
+                        </div>
+                        <div class="uv-control-row">
+                            <label for="uv-scale-w">Scale W:</label>
+                            <input type="number" id="uv-scale-w" min="0.1" max="1" step="0.05" value="1">
+                            <label for="uv-scale-h">Scale H:</label>
+                            <input type="number" id="uv-scale-h" min="0.1" max="1" step="0.05" value="1">
+                        </div>
+                    </div>
+                    
+                    <div class="uv-control-group">
+                        <label for="uv-predefined-segments">Predefined Atlas Segments:</label>
+                        <select id="uv-predefined-segments">
+                            <option value="0">Full texture (1×1)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="section-divider"></div>
+    
+    <div class="asset-section">
+        <div class="collapsible-header section-header">
+            <h3 class="metadata-header">Rig</h3>
+            <span class="collapse-indicator">[+]</span>
+        </div>
+        <div class="metadata-content section-content" style="display: none;">
+            <!-- Rig Heading -->
+            <div id="rig-heading-container" class="panel-container">
+                <div id="rig-content" class="rig-container">
+                    <p>No rig data loaded yet.</p>
+                </div>
+                
+                <div id="rig-controls" class="rig-controls-section" style="display: none;">
+                    <h4 class="control-title">Rig Controls</h4>
+                    
+                    <div class="rig-checkbox-wrapper">
+                        <div class="rig-checkbox-container">
+                            <label for="rig-show-joints" class="rig-checkbox-label">Show Joints</label>
+                            <input type="checkbox" id="rig-show-joints" class="rig-checkbox">
+                        </div>
+                        
+                        <div class="rig-checkbox-container">
+                            <label for="rig-show-bones" class="rig-checkbox-label">Show Bones</label>
+                            <input type="checkbox" id="rig-show-bones" class="rig-checkbox">
+                        </div>
+                    </div>
+                    
+                    <button id="rig-reset-button" class="rig-reset-button">Reset Rig Position</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Download Asset Button - Always visible at bottom -->
+    <div class="asset-download-section">
+        <button id="download-asset-btn" class="download-asset-button">Download Asset</button>
+    </div>
+</div>

package/src/asset_debugger/panels/asset-panel/asset-panel.js

@@ -0,0 +1,136 @@
+import { getState } from '../../util/state/scene-state';
+import { createMeshVisibilityPanel } from './mesh-heading/mesh-heading';
+import { initAtlasPanel, updateAtlasVisualization } from './atlas-heading/atlas-heading';
+import { initUvPanel, updateUvPanel } from './uv-heading/uv-heading.js';
+import { updateRigPanel } from './rig-heading/rig-heading';
+import { downloadUpdatedGlb, onGlbBufferUpdate } from '../../util/scene/glb-controller.js';
+
+let controlsInitialized = false;
+let atlasInitialized = false;
+let uvInitialized = false;
+let rigInitialized = false;
+let downloadButtonInitialized = false;
+
+export function initAssetPanel() {
+    if (controlsInitialized) {
+        console.log('Asset Panel already initialized, skipping');
+        return;
+    }
+    
+    console.debug('Initializing Asset Panel...');
+    
+    const assetPanel = document.getElementById('asset-tab') || document.getElementById('asset-tab-container');
+    
+    if (!assetPanel) {
+        console.error('Asset panel elements not found. Panel may not be loaded in DOM yet.');
+        return;
+    }
+    
+    console.debug('Asset panel found, initializing...');
+    
+    const collapsibleHeaders = document.querySelectorAll('.asset-section .collapsible-header');
+    if (collapsibleHeaders) {
+        collapsibleHeaders.forEach(header => {
+            header.addEventListener('click', function() {
+                const content = this.nextElementSibling;
+                const indicator = this.querySelector('.collapse-indicator');
+                
+                if (content.style.display === 'none') {
+                    content.style.display = 'block';
+                    indicator.textContent = '[-]';
+                    
+                    const headerText = this.querySelector('.metadata-header').textContent;
+                    
+                    if (headerText === 'Mesh') {
+                        createMeshVisibilityPanel();
+                    } 
+                    else if (headerText === 'Atlas') {
+                        if (!atlasInitialized) {
+                            initAtlasPanel();
+                            atlasInitialized = true;
+                        } else {
+                            updateAtlasVisualization();
+                        }
+                    }
+                    else if (headerText === 'UV') {
+                        if (!uvInitialized) {
+                            initUvPanel();
+                            uvInitialized = true;
+                        } else {
+                            updateUvPanel();
+                        }
+                    }
+                    else if (headerText === 'Rig') {
+                        if (!rigInitialized) {
+                            updateRigPanel();
+                            rigInitialized = true;
+                        } else {
+                            updateRigPanel();
+                        }
+                    }
+                } else {
+                    content.style.display = 'none';
+                    indicator.textContent = '[+]';
+                }
+            });
+        });
+    }
+    
+    initDownloadButton();
+    setupBufferListener();
+    updateDownloadButtonVisibility();
+    
+    controlsInitialized = true;
+}
+
+function initDownloadButton() {
+    const downloadBtn = document.getElementById('download-asset-btn');
+    if (!downloadBtn) {
+        console.error('Download button not found');
+        return;
+    }
+    
+    if (downloadButtonInitialized) {
+        console.log('Download button already initialized, skipping');
+        return;
+    }
+    
+    downloadBtn.addEventListener('click', async () => {
+        try {
+            await downloadUpdatedGlb();
+        } catch (error) {
+            console.error('Error downloading GLB:', error);
+            alert('Error downloading GLB: ' + error.message);
+        }
+    });
+    
+    downloadButtonInitialized = true;
+    console.log('Download button event listener initialized successfully');
+}
+
+function setupBufferListener() {
+    onGlbBufferUpdate(() => {
+        updateDownloadButtonVisibility();
+    });
+    
+    window.addEventListener('glb-buffer-changed', () => {
+        updateDownloadButtonVisibility();
+    });
+}
+
+function updateDownloadButtonVisibility() {
+    const downloadSection = document.querySelector('.asset-download-section');
+    const state = getState();
+    
+    if (!downloadSection) return;
+    
+    const hasModel = state.modelFile !== null;
+    
+    downloadSection.style.display = hasModel ? 'block' : 'none';
+    
+    console.log(`Download button ${hasModel ? 'shown' : 'hidden'} - hasModel: ${hasModel}`);
+}
+
+export function refreshDownloadButtonVisibility() {
+    updateDownloadButtonVisibility();
+}

package/src/asset_debugger/panels/asset-panel/atlas-heading/atlas-heading.css

@@ -0,0 +1,94 @@
+/* Shared atlas canvas*/
+#atlas-canvas {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    background-color: #222;
+}
+
+.texture-label {
+   position: absolute;
+   right: 10px;
+   bottom: 10px;
+   background-color: rgba(0, 0, 0, 0.6);
+   color: #aaa;
+   padding: 5px 10px;
+   font-size: 12px;
+   border-radius: 4px;
+   z-index: 2;
+   margin-top: 5px;
+   display: inline-block;
+}
+
+.texture-preview {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1/1; /* Make it a perfect square */
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0,0,0,0.2);
+    border: 1px solid var(--panel-border);
+    overflow: hidden;
+}
+
+.texture-preview img,
+.texture-preview canvas {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* Ensure content fits without distortion */
+}
+
+.atlas-display {
+    width: 100%;
+    height: auto;
+    border: none;
+    margin: 0;
+    background-color: #000;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.segment-info {
+    font-size: 12px;
+    padding: 5px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--panel-border);
+    margin-bottom: 10px;
+    color: var(--text-color);
+}
+
+/* Shared texture selector */
+.texture-type-selector {
+   display: flex;
+   justify-content: space-between;
+   gap: 8px;
+   margin-bottom: 15px;
+   flex-wrap: wrap;
+}
+
+.texture-type-button {
+   flex: 1;
+   background-color: #333;
+   border: 1px solid #555;
+   color: #ddd;
+   padding: 5px 8px;
+   font-size: 12px;
+   cursor: pointer;
+   border-radius: 3px;
+   transition: all 0.3s ease;
+   font-family: monospace;
+}
+
+.texture-type-button:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.texture-type-button.active {
+   background-color: #4CAF50;
+   color: white;
+   border-color: #4CAF50;
+}