@littlecarlito/blorktools 0.50.4 → 0.51.0

package/src/asset_debugger/widgets/mesh-info-widget.js

@@ -0,0 +1,280 @@
+import * as THREE from 'three';
+import { getState } from "../util/state/scene-state";
+import { getHtmlSettingsForMesh } from '../util/data/mesh-html-manager';
+
+// Info panel state variables
+export let infoPanel = null;
+let infoPanelCollapsed = false;
+let infoPanelPosition = { x: 10, y: 10 }; // Default position in top-left corner
+
+/**
+ * Create a collapsible info panel for the preview that shows mesh details
+ * This panel is similar to the axis indicator and can be collapsed/expanded
+ * and dragged around the preview area. It shows detailed information about
+ * the mesh being previewed including geometry, materials, and transform data.
+ * 
+ * @param {HTMLElement} container - The container to add the info panel to
+ * @param {number} meshId - The ID of the mesh being previewed
+ * @returns {HTMLElement} The created info panel element
+ */
+export function createMeshInfoPanel(container, meshId) {
+    // Remove any existing info panel
+    if (infoPanel) {
+        if (infoPanel.parentNode) {
+            infoPanel.parentNode.removeChild(infoPanel);
+        }
+        infoPanel = null;
+    }
+    
+    // Get mesh data from state
+    const state = getState();
+    const mesh = state.meshes ? state.meshes[meshId] : null;
+    
+    if (!mesh) {
+        return;
+    }
+    
+    // Create the info panel container
+    const panel = document.createElement('div');
+    panel.id = 'preview-info-panel';
+    panel.style.position = 'absolute';
+    panel.style.zIndex = '900'; // Lower z-index than the loading overlay (1000)
+    panel.style.pointerEvents = 'auto';
+    panel.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';
+    panel.style.border = '1px solid rgba(50, 50, 50, 0.7)';
+    panel.style.borderRadius = '5px';
+    panel.style.overflow = 'hidden';
+    panel.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+    panel.style.width = '250px';
+    panel.style.left = `${infoPanelPosition.x}px`;
+    panel.style.top = `${infoPanelPosition.y}px`;
+    
+    // Create the header
+    const header = document.createElement('div');
+    header.id = 'preview-info-header';
+    header.style.backgroundColor = 'rgba(30, 30, 30, 0.7)';
+    header.style.color = 'white';
+    header.style.padding = '5px 10px';
+    header.style.cursor = 'grab';
+    header.style.userSelect = 'none';
+    header.style.display = 'flex';
+    header.style.alignItems = 'center';
+    header.style.justifyContent = 'space-between';
+    header.style.width = '100%';
+    header.style.boxSizing = 'border-box';
+    
+    // Add title
+    const title = document.createElement('span');
+    title.textContent = 'Mesh Info';
+    title.style.fontWeight = 'bold';
+    title.style.fontSize = '12px';
+    
+    // Add collapse/expand button
+    const collapseBtn = document.createElement('span');
+    collapseBtn.textContent = infoPanelCollapsed ? '▼' : '▲';
+    collapseBtn.style.fontSize = '12px';
+    collapseBtn.style.cursor = 'pointer';
+    collapseBtn.style.marginLeft = '10px';
+    collapseBtn.style.width = '15px';
+    collapseBtn.style.textAlign = 'center';
+    
+    // Add elements to header
+    header.appendChild(title);
+    header.appendChild(collapseBtn);
+    
+    // Create content container
+    const content = document.createElement('div');
+    content.id = 'preview-info-content';
+    content.style.backgroundColor = 'rgba(20, 20, 20, 0.7)';
+    content.style.color = 'white';
+    content.style.padding = '10px';
+    content.style.fontSize = '12px';
+    content.style.display = infoPanelCollapsed ? 'none' : 'block';
+    content.style.maxHeight = '300px';
+    content.style.overflowY = 'auto';
+    
+    // Gather mesh information
+    const info = [];
+    
+    // Basic Information
+    info.push('<strong>Basic Information</strong>');
+    info.push(`Name: ${mesh.name || 'Unnamed'}`);
+    info.push(`ID: ${meshId}`);
+    info.push(`Visible: ${mesh.visible ? 'Yes' : 'No'}`);
+    
+    // Dimensions
+    let dimensions = null;
+    if (mesh.geometry) {
+        // Compute bounding box if not already computed
+        if (!mesh.geometry.boundingBox) {
+            mesh.geometry.computeBoundingBox();
+        }
+        
+        if (mesh.geometry.boundingBox) {
+            const box = mesh.geometry.boundingBox;
+            const width = box.max.x - box.min.x;
+            const height = box.max.y - box.min.y;
+            const depth = box.max.z - box.min.z;
+            
+            dimensions = { width, height, depth };
+            
+            info.push('<strong>Dimensions</strong>');
+            info.push(`Width (X): ${width.toFixed(3)}`);
+            info.push(`Height (Y): ${height.toFixed(3)}`);
+            info.push(`Depth (Z): ${depth.toFixed(3)}`);
+        }
+    }
+    
+    // Geometry details
+    if (mesh.geometry) {
+        info.push('<strong>Geometry</strong>');
+        
+        // Geometry type
+        info.push(`Type: ${mesh.geometry.type || 'Unknown'}`);
+        
+        // Vertices count
+        const vertexCount = mesh.geometry.attributes && mesh.geometry.attributes.position ? 
+            mesh.geometry.attributes.position.count : 'Unknown';
+        info.push(`Vertices: ${vertexCount}`);
+        
+        // Faces count (triangles)
+        let faceCount = 'Unknown';
+        if (mesh.geometry.index) {
+            faceCount = Math.floor(mesh.geometry.index.count / 3);
+        } else if (mesh.geometry.attributes && mesh.geometry.attributes.position) {
+            faceCount = Math.floor(mesh.geometry.attributes.position.count / 3);
+        }
+        info.push(`Faces: ${faceCount}`);
+    }
+    
+    // Material details
+    if (mesh.material) {
+        info.push('<strong>Material</strong>');
+        
+        // Handle multiple materials
+        const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+        
+        info.push(`Count: ${materials.length}`);
+        
+        // Material properties (just show first material if multiple)
+        const material = materials[0];
+        info.push(`Type: ${material.type || 'Unknown'}`);
+        info.push(`Double Sided: ${material.side === THREE.DoubleSide ? 'Yes' : 'No'}`);
+        info.push(`Transparent: ${material.transparent ? 'Yes' : 'No'}`);
+        
+        // Color if available
+        if (material.color) {
+            const colorHex = '#' + material.color.getHexString();
+            info.push(`Color: <span style="color:${colorHex}">■</span> ${colorHex}`);
+        }
+    }
+    
+    // Transform information
+    info.push('<strong>Transform</strong>');
+    info.push(`Position: X:${mesh.position.x.toFixed(3)}, Y:${mesh.position.y.toFixed(3)}, Z:${mesh.position.z.toFixed(3)}`);
+    info.push(`Rotation: X:${(mesh.rotation.x * 180 / Math.PI).toFixed(1)}°, Y:${(mesh.rotation.y * 180 / Math.PI).toFixed(1)}°, Z:${(mesh.rotation.z * 180 / Math.PI).toFixed(1)}°`);
+    info.push(`Scale: X:${mesh.scale.x.toFixed(3)}, Y:${mesh.scale.y.toFixed(3)}, Z:${mesh.scale.z.toFixed(3)}`);
+    
+    // HTML settings
+    const htmlSettings = getHtmlSettingsForMesh(meshId);
+    if (htmlSettings) {
+        info.push('<strong>HTML Settings</strong>');
+        info.push(`Render Mode: ${htmlSettings.previewMode || 'threejs'}`);
+        info.push(`Playback Speed: ${htmlSettings.playbackSpeed || '1'}`);
+        info.push(`Animation: ${htmlSettings.animation?.type || 'play'}`);
+        info.push(`Show Borders: ${htmlSettings.showBorders !== false ? 'Yes' : 'No'}`);
+        info.push(`Display on Mesh: ${htmlSettings.displayOnMesh === true ? 'Yes' : 'No'}`);
+        info.push(`Rig Control Node: ${htmlSettings.rigControlNode === true ? 'Yes' : 'No'}`);
+    }
+    
+    // Add content to the panel
+    content.innerHTML = info.join('<br>');
+    
+    // Add header and content to panel
+    panel.appendChild(header);
+    panel.appendChild(content);
+    
+    // Add to container
+    container.appendChild(panel);
+    
+    // Store reference
+    infoPanel = panel;
+    
+    // Add collapse functionality
+    collapseBtn.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent triggering drag
+        infoPanelCollapsed = !infoPanelCollapsed;
+        collapseBtn.textContent = infoPanelCollapsed ? '▼' : '▲';
+        content.style.display = infoPanelCollapsed ? 'none' : 'block';
+        updatePanelHeight();
+    });
+    
+    // Function to update panel height
+    function updatePanelHeight() {
+        if (infoPanelCollapsed) {
+            panel.style.height = `${header.offsetHeight}px`;
+        } else {
+            panel.style.height = 'auto';
+        }
+    }
+    
+    // Call once to set initial height
+    updatePanelHeight();
+    
+    // Make the header draggable
+    let isHeaderDragging = false;
+    let startX, startY;
+    let startLeft, startTop;
+    
+    header.addEventListener('mousedown', (e) => {
+        isHeaderDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        startLeft = parseInt(panel.style.left);
+        startTop = parseInt(panel.style.top);
+        header.style.cursor = 'grabbing';
+        
+        e.preventDefault();
+    });
+    
+    document.addEventListener('mousemove', (e) => {
+        if (!isHeaderDragging) return;
+        
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        
+        const newLeft = startLeft + dx;
+        const newTop = startTop + dy;
+        
+        // Get current container dimensions
+        const containerRect = container.getBoundingClientRect();
+        const maxLeft = containerRect.width - panel.offsetWidth;
+        const maxTop = containerRect.height - panel.offsetHeight;
+        
+        const constrainedLeft = Math.max(0, Math.min(newLeft, maxLeft));
+        const constrainedTop = Math.max(0, Math.min(newTop, maxTop));
+        
+        panel.style.left = `${constrainedLeft}px`;
+        panel.style.top = `${constrainedTop}px`;
+        
+        // Update stored position
+        infoPanelPosition.x = constrainedLeft;
+        infoPanelPosition.y = constrainedTop;
+    });
+    
+    document.addEventListener('mouseup', () => {
+        if (isHeaderDragging) {
+            isHeaderDragging = false;
+            header.style.cursor = 'grab';
+        }
+    });
+    
+    return panel;
+}
+
+/**
+ * Reset info panel to null
+ */
+export function resetInfoPanel() {
+    infoPanel = null;
+}

package/src/index.html

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Development Tools</title>
+  <link rel="stylesheet" href="./asset_debugger/util/common.css">
+  <style>
+    /* Override container styles for this index page */
+    body {
+      font-family: monospace;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      margin: 0;
+      padding: 20px;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .dev-tools-container {
+      max-width: 1000px;
+      width: 100%;
+      background-color: var(--panel-bg);
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      padding: 30px;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+    }
+
+    .dev-tools-header {
+      text-align: center;
+      margin-bottom: 30px;
+      border-bottom: 2px solid var(--panel-border);
+      padding-bottom: 20px;
+    }
+
+    .header-section {
+      display: flex;
+      align-items: flex-start;
+      gap: 40px;
+      margin-bottom: 40px;
+      border-bottom: 2px solid var(--panel-border);
+      padding-bottom: 30px;
+    }
+
+    .header-left {
+      flex: 0 0 auto;
+    }
+
+    .header-right {
+      flex: 1;
+      padding-top: 10px;
+    }
+
+    .dev-tools-title {
+      font-size: 36px;
+      color: var(--primary-color);
+      margin: 0;
+      text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+      letter-spacing: 2px;
+      white-space: nowrap;
+    }
+
+    .dev-tools-subtitle {
+      font-size: 16px;
+      color: var(--text-color);
+      margin: 0;
+      line-height: 1.5;
+      text-align: left;
+    }
+
+    .tools-section {
+      display: flex;
+      gap: 30px;
+      margin-bottom: 40px;
+    }
+
+    .notes-section {
+      width: 100%;
+    }
+    
+    .tool-card {
+      background-color: var(--panel-bg-lighter);
+      border: 2px solid var(--panel-border);
+      border-radius: 8px;
+      padding: 25px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+      flex: 1;
+    }
+
+    .tool-card:hover {
+      transform: translateY(-8px);
+      border-color: var(--tool-color);
+      box-shadow: var(--hover-glow);
+    }
+
+    .tool-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, var(--primary-color), var(--tool-color));
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .tool-card:hover::before {
+      opacity: 1;
+    }
+
+    .tool-card-title {
+      font-size: 20px;
+      color: var(--primary-color);
+      margin: 0 0 15px 0;
+      font-weight: bold;
+    }
+
+    .tool-card-description {
+      color: var(--text-color);
+      margin: 0 0 20px 0;
+      line-height: 1.5;
+      font-size: 14px;
+    }
+
+    .tool-card-link {
+      display: inline-block;
+      background-color: var(--button-color);
+      color: white;
+      padding: 12px 20px;
+      border-radius: 6px;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 14px;
+      transition: all 0.3s ease;
+      border: none;
+      cursor: pointer;
+    }
+
+    .tool-card-link:hover {
+      background-color: #0d74c7;
+      transform: scale(1.05);
+    }
+
+    .dev-note {
+      background-color: rgba(76, 175, 80, 0.1);
+      border: 1px solid var(--primary-color);
+      border-left: 4px solid var(--primary-color);
+      border-radius: 6px;
+      padding: 20px;
+      margin-top: 30px;
+    }
+
+    .dev-note-title {
+      font-size: 18px;
+      color: var(--primary-color);
+      margin: 0 0 15px 0;
+      font-weight: bold;
+    }
+
+    .dev-note-text {
+      color: var(--text-color);
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      body {
+        padding: 15px;
+      }
+      
+      .dev-tools-container {
+        padding: 20px;
+      }
+      
+      .dev-tools-title {
+        font-size: 28px;
+      }
+      
+      .tools-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .dev-tools-title {
+        font-size: 24px;
+        letter-spacing: 1px;
+      }
+      
+      .tool-card {
+        padding: 20px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="dev-tools-container">
+    <div class="header-section">
+      <div class="header-left">
+        <h1 class="dev-tools-title">Development Tools</h1>
+      </div>
+      <div class="header-right">
+        <p class="dev-tools-subtitle">
+          This page provides access to various development tools for the project.<br>
+          These tools are only available during development and won't be included in the production build.
+        </p>
+      </div>
+    </div>
+    
+    <div class="tools-section">
+      <div class="tool-card">
+        <h3 class="tool-card-title">Asset Debugger</h3>
+        <p class="tool-card-description">
+          Test and debug PBR texture sets with a simple drag-and-drop interface. 
+          Supports Base Color, ORM, and Normal map atlases with real-time preview.
+        </p>
+        <a href="./asset_debugger/index.html" class="tool-card-link">Open Asset Debugger</a>
+      </div>
+    </div>
+    
+    <div class="notes-section">
+      <div class="dev-note">
+        <h2 class="dev-note-title">Development Notes</h2>
+        <p class="dev-note-text">
+          These tools are for development purposes only and will not be included in the production build.
+          Feel free to add more tools to this directory as needed for your development workflow.
+          Each tool maintains its own isolated environment and styling consistent with the project theme.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Clean up when navigating to SPAs to prevent DOM bleeding
+    document.addEventListener('DOMContentLoaded', function() {
+      const toolLinks = document.querySelectorAll('.tool-card-link');
+      
+      toolLinks.forEach(link => {
+        link.addEventListener('click', function() {
+          // Small delay to let the navigation start, then clean up
+          setTimeout(() => {
+            document.body.innerHTML = '';
+            document.body.style.cssText = '';
+            document.body.className = '';
+          }, 10);
+        });
+      });
+    });
+  </script>
+</body>
+</html>

package/src/index.js

@@ -0,0 +1,8 @@
+/**
+ * Blorktools - 3D Asset Development Toolset
+ * Main entry point for the package
+ */
+
+// Export individual tools
+export const tools = {
+};

package/vite.config.js

@@ -0,0 +1,66 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function gracefulShutdownPlugin() {
+	return {
+		name: 'graceful-shutdown',
+		configureServer(server) {
+			const shutdown = () => {
+				server.close();
+				process.exit(0);
+			};
+			process.on('SIGINT', shutdown);
+			process.on('SIGTERM', shutdown);
+		}
+	};
+}
+
+export default defineConfig({
+	root: path.resolve(__dirname, 'src'),
+	build: {
+		lib: {
+			entry: path.resolve(__dirname, 'src/index.js'),
+			name: 'blorktools',
+			fileName: 'index'
+		},
+		outDir: path.resolve(__dirname, 'dist'),
+		emptyOutDir: true,
+		sourcemap: true,
+		rollupOptions: {
+			external: ['three', 'jszip'],
+			output: {
+				globals: {
+					three: 'THREE',
+					jszip: 'JSZip'
+				}
+			}
+		}
+	},
+	server: {
+		open: '/index.html',
+		port: 3001,
+		strictPort: true,
+		fs: {
+			allow: [__dirname]
+		},
+		middlewareMode: false
+	},
+	plugins: [
+		gracefulShutdownPlugin()
+	],
+	optimizeDeps: {
+		include: ['js-beautify'],
+		exclude: ['jszip'],
+		esbuildOptions: {
+			define: {
+				global: 'globalThis'
+			}
+		}
+	},
+	resolve: {
+		alias: {}
+	}
+});