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

@littlecarlito/blorktools 0.50.3 → 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/router.js ADDED Viewed

@@ -0,0 +1,190 @@
+import { showLoadingSplash, updateLoadingProgress, hideLoadingSplash } from './loading-splash/loading-splash';
+class Router {
+    constructor() {
+        this.routes = new Map();
+        this.appDiv = document.getElementById('app');
+        this.currentModuleCleanup = null;
+        this.init();
+    }
+    addRoute(path, handler) {
+        this.routes.set(path, handler);
+        return this;
+    }
+    init() {
+        this.isHandlingRoute = false;
+        window.addEventListener('hashchange', this.handleRouteDebounced.bind(this));
+        window.addEventListener('load', this.handleRouteDebounced.bind(this));
+        if (!window.location.hash) {
+            this.navigate('/landing');
+        }
+    }
+    async handleRouteDebounced() {
+        if (this.isHandlingRoute) {
+            return;
+        }
+        this.isHandlingRoute = true;
+        try {
+            await this.handleRoute();
+        } finally {
+            this.isHandlingRoute = false;
+        }
+    }
+    async handleRoute() {
+        const hash = window.location.hash.slice(1) || '/landing';
+        const handler = this.routes.get(hash);
+        if (handler) {
+            await handler();
+        } else {
+            this.navigate('/landing');
+        }
+    }
+    navigate(path) {
+        window.location.hash = path;
+    }
+    navigateToPage(targetPage, params = {}) {
+        const navigationEvent = new CustomEvent('routerNavigation', {
+            detail: { targetPage, params, timestamp: Date.now() }
+        });
+        window.dispatchEvent(navigationEvent);
+        const routeMap = {
+            'debugger-scene': '/debugger-scene',
+            'landing': '/landing',
+            'tools': '/tools'
+        };
+        const route = routeMap[targetPage];
+        if (route) {
+            this.navigate(route);
+        } else {
+            this.navigate('/landing');
+        }
+    }
+    async clearContent() {
+        if (this.currentModuleCleanup) {
+            try {
+                const result = this.currentModuleCleanup();
+                this.currentModuleCleanup = null;
+            } catch (error) {
+                this.currentModuleCleanup = null;
+            }
+        }
+        this.cleanupCSS3DElements();
+        this.appDiv.innerHTML = '';
+    }
+    cleanupCSS3DElements() {
+        const css3dRenderers = document.querySelectorAll('div[style*="position: absolute"][style*="z-index: 1000"]');
+        css3dRenderers.forEach(renderer => {
+            if (renderer.parentNode && renderer !== this.appDiv) {
+                renderer.parentNode.removeChild(renderer);
+            }
+        });
+        const css3dIframes = document.querySelectorAll('iframe[style*="border: 2px solid #00ff88"]');
+        css3dIframes.forEach(iframe => {
+            if (iframe.parentNode) {
+                iframe.parentNode.removeChild(iframe);
+            }
+        });
+        const css3dElements = document.querySelectorAll('[style*="pointer-events: none"][style*="position: absolute"]');
+        css3dElements.forEach(element => {
+            if (element.parentNode && element !== this.appDiv && element.style.zIndex === '1000') {
+                element.parentNode.removeChild(element);
+            }
+        });
+    }
+    async loadContent(url) {
+        await this.clearContent();
+        await this.ensureHeaderLoaded();
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        const html = await response.text();
+        const contentToInsert = this.extractContent(html, url);
+        this.appDiv.innerHTML = contentToInsert;
+        await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+    extractContent(html, url) {
+        if (!html.includes('<!DOCTYPE html>')) {
+            return html;
+        }
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const body = doc.body.cloneNode(true);
+        const elementsToRemove = [
+            '#header-container',
+            'script',
+            'link[rel="stylesheet"]'
+        ];
+        elementsToRemove.forEach(selector => {
+            const elements = body.querySelectorAll(selector);
+            elements.forEach(el => el.remove());
+        });
+        return body.innerHTML;
+    }
+    async ensureHeaderLoaded() {
+        const headerContainer = document.getElementById('header-container');
+        if (headerContainer && headerContainer.innerHTML.trim() === '') {
+            try {
+                const { loadHeader } = await import('./header/header.js');
+                await loadHeader('header-container');
+            } catch (error) {
+                // Header loading failed
+            }
+        }
+    }
+    async initializeModule(modulePath, initFunctionName, routeName) {
+        try {
+            const module = await import(/* @vite-ignore */ `${modulePath}?t=${Date.now()}`);
+            if (module[initFunctionName]) {
+                const cleanup = await module[initFunctionName]();
+                if (cleanup && typeof cleanup === 'function') {
+                    this.currentModuleCleanup = cleanup;
+                }
+            }
+        } catch (error) {
+            // Module initialization failed
+        }
+    }
+}
+const router = new Router();
+router
+    .addRoute('/landing', async () => {
+        await router.loadContent('./landing-page/landing-page.html');
+        await router.initializeModule('./landing-page/landing-page.js', 'initalizeLandingPage', 'landing page');
+    })
+    .addRoute('/debugger-scene', async () => {
+        await router.loadContent('./debugger-scene/debugger-scene.html');
+        await router.initializeModule('./debugger-scene/debugger-scene.js', 'setupDebuggerScene', 'debugger scene');
+    });
+window.appRouter = router;

package/src/asset_debugger/util/animation/playback/animation-playback-controller.js ADDED Viewed

@@ -0,0 +1,150 @@
+import { frameInterval } from "./animation-preview-controller";
+import {
+    ANALYSIS_DURATION_MS,
+    animationDuration,
+    isAnimationFinite,
+    isPlaybackActive,
+    playbackStartTime,
+    preRenderedFrames,
+    setIsPlaybackActive,
+    setIsPreviewAnimationPaused,
+    setPlaybackStartTime
+} from "../../state/animation-state";
+import { setLastAnimationTime } from "../../state/css3d-state";
+/**
+ * Start playback timing - called when preview should begin playing
+ */
+export function startPlayback() {
+    setPlaybackStartTime(Date.now());
+    setIsPlaybackActive(true);
+    console.log('Playback started at:', playbackStartTime);
+}
+/**
+ * Stop playback timing
+ */
+export function stopPlayback() {
+    setIsPlaybackActive(false);
+    console.log('Playback stopped');
+}
+/**
+ * Get current frame based on elapsed playback time
+ */
+export function getCurrentFrameForPlayback(playbackSpeed = 1.0, animationType = 'play') {
+    if (!isPlaybackActive || preRenderedFrames.length === 0) {
+        return preRenderedFrames.length > 0 ? preRenderedFrames[preRenderedFrames.length - 1] : null;
+    }
+    const now = Date.now();
+    const playbackElapsed = now - playbackStartTime;
+    const adjustedElapsed = playbackElapsed * playbackSpeed;
+    // Use the analysis duration as our animation duration
+    // This represents the full time period we analyzed for animation
+    const naturalDuration = isAnimationFinite && animationDuration > 0 ?
+        animationDuration : ANALYSIS_DURATION_MS;
+    let normalizedTime;
+    switch (animationType) {
+        case 'play':
+            if (adjustedElapsed >= naturalDuration) {
+                setIsPreviewAnimationPaused(true);
+                return preRenderedFrames[preRenderedFrames.length - 1];
+            }
+            normalizedTime = adjustedElapsed / naturalDuration;
+            break;
+        case 'loop':
+            normalizedTime = (adjustedElapsed % naturalDuration) / naturalDuration;
+            break;
+        case 'bounce':
+            const cycle = Math.floor(adjustedElapsed / naturalDuration);
+            const position = (adjustedElapsed % naturalDuration) / naturalDuration;
+            normalizedTime = (cycle % 2 === 0) ? position : (1 - position);
+            break;
+        default:
+            normalizedTime = (adjustedElapsed % naturalDuration) / naturalDuration;
+            break;
+    }
+    const frameIndex = Math.min(
+        Math.floor(normalizedTime * preRenderedFrames.length),
+        preRenderedFrames.length - 1
+    );
+    return preRenderedFrames[frameIndex];
+}
+/**
+ * Update the mesh texture with the given texture
+ * @param {THREE.Texture} texture - The texture to apply to the mesh
+ * @param {THREE.Mesh} previewPlane - The mesh to update with the texture
+ */
+export function updateMeshTexture(texture, previewPlane) {
+    if (!texture || !previewPlane || !previewPlane.material) return;
+    let needsUpdate = false;
+    if (Array.isArray(previewPlane.material)) {
+        previewPlane.material.forEach(material => {
+            if (material.map !== texture) {
+                material.map = texture;
+                needsUpdate = true;
+            }
+        });
+        if (needsUpdate) {
+            previewPlane.material.forEach(material => {
+                material.needsUpdate = true;
+            });
+        }
+    } else {
+        if (previewPlane.material.map !== texture) {
+            previewPlane.material.map = texture;
+            previewPlane.material.needsUpdate = true;
+        }
+    }
+}
+export function runAnimationFrame(renderer, scene, camera, mesh, settings, frameState) {
+    // Extract settings
+    const { animationType, playbackSpeed, isPaused } = settings;
+    const { lastFrameTime, frameInterval } = frameState;
+    // Frame rate throttling
+    const now = performance.now();
+    const elapsed = now - lastFrameTime;
+    if (elapsed < frameInterval) {
+        return null; // Return null to indicate no frame update
+    }
+    const newFrameTime = now - (elapsed % frameInterval);
+    // Skip frame updates if animation is paused
+    if (isPaused) {
+        // Still render the scene with the current frame
+        if (renderer && scene && camera) {
+            renderer.render(scene, camera);
+        }
+        return newFrameTime;
+    }
+    // Get current frame
+    const currentFrame = getCurrentFrameForPlayback(playbackSpeed, animationType);
+    // Update texture
+    if (currentFrame && currentFrame.texture && mesh) {
+        updateMeshTexture(currentFrame.texture, mesh);
+    }
+    // Apply mesh animation (this would need to be imported if moved to separate module)
+    if (animationType !== 'play' && !isPaused && mesh) {
+        applyMeshAnimation(animationType, playbackSpeed, mesh);
+    }
+    // Render scene
+    if (renderer && scene && camera) {
+        renderer.render(scene, camera);
+    }
+    return newFrameTime;
+}

package/src/asset_debugger/util/animation/playback/animation-preview-controller.js ADDED Viewed

@@ -0,0 +1,316 @@
+import * as THREE from 'three';
+import { CustomTextureSettings, showStatus } from '../../../modals/html-editor-modal/html-editor-modal';
+import {
+    resetPreRenderState,
+    setIsPreviewActive,
+    setIsPreviewAnimationPaused,
+    resetPlaybackTimingState,
+    isPreviewAnimationPaused,
+    isPreviewActive
+} from '../../state/animation-state';
+import { sanitizeHtml } from '../../data/string-serder';
+import {
+    animationPreviewCamera,
+    animationPreviewRenderer,
+    animationPreviewScene,
+    previewPlane,
+    setPreviewRenderTarget
+} from '../../state/threejs-state';
+import { runAnimationFrame } from '../../animation/playback/animation-playback-controller';
+import { setupCSS3DScene } from '../../scene/css3d-scene-manager';
+import { startImage2TexturePreRendering } from '../../animation/render/image2texture-prerender-controller';
+import { startCss3dPreRendering } from '../../animation/render/css3d-prerender-controller';
+import { logError, logPreviewError } from '../../state/log-util';
+import { cleanupThreeJsPreview, initThreeJsPreview } from '../../scene/threejs-preview-manager';
+let currentPreviewSettings = null;
+const targetFrameRate = 60;
+let lastAnimationFrameTime = 0;
+export const frameInterval = 1000 / targetFrameRate;
+export let previewAnimationId = null;
+// Core HTML rendering logic (reusable)
+function createHtmlRenderer(html, onLoad) {
+    const sanitizedHtml = sanitizeHtml(html);
+    const renderIframe = document.createElement('iframe');
+    renderIframe.id = 'html-render-iframe';
+    renderIframe.style.width = '960px';
+    renderIframe.style.height = '540px';
+    renderIframe.style.position = 'absolute';
+    renderIframe.style.left = '-9999px';
+    renderIframe.style.top = '0';
+    renderIframe.style.border = 'none';
+    renderIframe.style.backgroundColor = 'transparent';
+    document.body.appendChild(renderIframe);
+    renderIframe.onload = onLoad;
+    try {
+        renderIframe.srcdoc = sanitizedHtml;
+    } catch (error) {
+        renderIframe.contentDocument.open();
+        renderIframe.contentDocument.write(sanitizedHtml);
+        renderIframe.contentDocument.close();
+    }
+    return renderIframe;
+}
+// Preview UI creation (preview-specific)
+function createPreviewUI(previewContent) {
+    previewContent.style.position = 'relative';
+    previewContent.style.minHeight = '400px';
+    previewContent.style.height = '100%';
+    const canvasContainer = document.createElement('div');
+    canvasContainer.style.width = '100%';
+    canvasContainer.style.height = '100%';
+    canvasContainer.style.position = 'absolute';
+    canvasContainer.style.top = '0';
+    canvasContainer.style.left = '0';
+    canvasContainer.style.right = '0';
+    canvasContainer.style.bottom = '0';
+    canvasContainer.style.overflow = 'hidden';
+    canvasContainer.style.display = 'block';
+    previewContent.appendChild(canvasContainer);
+    const errorLog = document.createElement('div');
+    errorLog.id = 'html-preview-error-log';
+    errorLog.className = 'preview-error-log';
+    errorLog.style.display = 'none';
+    previewContent.appendChild(errorLog);
+    const loadingOverlay = createLoadingOverlay();
+    canvasContainer.appendChild(loadingOverlay);
+    return { canvasContainer, errorLog, loadingOverlay };
+}
+function createLoadingOverlay() {
+    const loadingOverlay = document.createElement('div');
+    loadingOverlay.id = 'pre-rendering-overlay';
+    loadingOverlay.className = 'loading-splash';
+    loadingOverlay.style.position = 'absolute';
+    loadingOverlay.style.top = '0';
+    loadingOverlay.style.left = '0';
+    loadingOverlay.style.width = '100%';
+    loadingOverlay.style.height = '100%';
+    loadingOverlay.style.backgroundColor = '#000000';
+    loadingOverlay.style.zIndex = '1000';
+    loadingOverlay.style.border = 'none';
+    loadingOverlay.style.outline = 'none';
+    loadingOverlay.style.boxShadow = 'none';
+    const loadingContent = document.createElement('div');
+    loadingContent.className = 'loading-content';
+    loadingContent.style.display = 'flex';
+    loadingContent.style.flexDirection = 'column';
+    loadingContent.style.alignItems = 'center';
+    loadingContent.style.justifyContent = 'center';
+    loadingContent.style.height = '100%';
+    loadingContent.style.width = '100%';
+    loadingContent.style.backgroundColor = '#000000';
+    const loadingTitle = document.createElement('h2');
+    loadingTitle.className = 'loading-title';
+    loadingTitle.textContent = 'PRE-RENDERING';
+    loadingTitle.style.color = 'white';
+    loadingTitle.style.margin = '0 0 20px 0';
+    const spinnerContainer = document.createElement('div');
+    spinnerContainer.className = 'loading-spinner-container';
+    const atomicSpinner = document.createElement('div');
+    atomicSpinner.className = 'atomic-spinner';
+    const nucleus = document.createElement('div');
+    nucleus.className = 'nucleus';
+    atomicSpinner.appendChild(nucleus);
+    for (let i = 0; i < 3; i++) {
+        const orbit = document.createElement('div');
+        orbit.className = 'electron-orbit';
+        const electron = document.createElement('div');
+        electron.className = 'electron';
+        orbit.appendChild(electron);
+        atomicSpinner.appendChild(orbit);
+    }
+    spinnerContainer.appendChild(atomicSpinner);
+    const progressText = document.createElement('div');
+    progressText.id = 'loading-progress-text';
+    progressText.className = 'loading-progress-text';
+    progressText.textContent = 'Pre-rendering animation...';
+    progressText.style.color = 'white';
+    progressText.style.marginTop = '20px';
+    const progressContainer = document.createElement('div');
+    progressContainer.style.width = '80%';
+    progressContainer.style.height = '4px';
+    progressContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
+    progressContainer.style.borderRadius = '2px';
+    progressContainer.style.overflow = 'hidden';
+    progressContainer.style.marginTop = '10px';
+    const progressBar = document.createElement('div');
+    progressBar.id = 'pre-rendering-progress';
+    progressBar.style.width = '0%';
+    progressBar.style.height = '100%';
+    progressBar.style.backgroundColor = '#3498db';
+    progressBar.style.transition = 'width 0.3s ease-out';
+    progressContainer.appendChild(progressBar);
+    loadingContent.appendChild(loadingTitle);
+    loadingContent.appendChild(spinnerContainer);
+    loadingContent.appendChild(progressText);
+    loadingContent.appendChild(progressContainer);
+    loadingOverlay.appendChild(loadingContent);
+    return loadingOverlay;
+}
+// Main preview function (wrapper)
+export function initalizePreview(settings, previewContent, setModalData) {
+    if (!previewContent) return;
+    try {
+        const { html, meshId: currentMeshId, previewMode, playbackSpeed, animationType, isLongExposureMode, showPreviewBorders } = settings;
+        currentPreviewSettings = settings;
+        window.showPreviewBorders = showPreviewBorders;
+        resetPreRenderState();
+        resetPlaybackTimingState();
+        if (setModalData) {
+            setModalData('previewMode', previewMode);
+        }
+        cleanupThreeJsPreview();
+        previewContent.innerHTML = '';
+        setIsPreviewActive(true);
+        const statusMessage = isLongExposureMode
+            ? 'Pre-rendering animation for long exposure capture...'
+            : 'Pre-rendering animation for smooth playback...';
+        settings.updateStatus(statusMessage, 'info');
+        const renderIframe = createHtmlRenderer(html, () => {
+            if (!isPreviewActive) return;
+            const { canvasContainer, errorLog, loadingOverlay } = createPreviewUI(previewContent);
+            const progressBar = loadingOverlay.querySelector('#pre-rendering-progress');
+            const progressText = loadingOverlay.querySelector('#loading-progress-text');
+            setPreviewRenderTarget(renderIframe);
+            setIsPreviewAnimationPaused(true);
+            if (previewMode === 'css3d') {
+                console.log('CSS3D initialization will happen after pre-rendering');
+            } else {
+                if (settings && typeof settings.updateStatus === 'function') {
+                    settings.updateStatus('Initializing 3D cube preview...', 'info');
+                } else {
+                    showStatus('Initializing 3D cube preview...', 'info');
+                }
+                initThreeJsPreview(canvasContainer, renderIframe, currentMeshId, true);
+            }
+            switch (previewMode) {
+                case 'css3d':
+                    progressText.textContent = 'Analyzing CSS3D animation...';
+                    startCss3dPreRendering(renderIframe, () => {
+                        settings.updateStatus('Initializing CSS3D preview...', 'info');
+                        import('three/examples/jsm/renderers/CSS3DRenderer.js')
+                            .then(module => {
+                                const { CSS3DRenderer, CSS3DObject } = module;
+                                setupCSS3DScene(canvasContainer, renderIframe, CSS3DRenderer, CSS3DObject, currentMeshId, true);
+                            });
+                    }, progressBar, settings, previewPlane);
+                    break;
+                case 'threejs':
+                default:
+                    progressText.textContent = 'Pre-rendering animation...';
+                    startImage2TexturePreRendering(renderIframe, () => {
+                        // Pre-rendering complete
+                    }, progressBar, settings, previewPlane);
+                    break;
+            }
+        });
+    } catch (error) {
+        logPreviewError(`Preview error: ${error.message}`, previewContent, settings.errorContainer, settings.statusCallback);
+        settings.handleError('Error generating preview: ' + error.message);
+    }
+}
+/**
+ * Preview-specific animation loop wrapper
+ */
+export function animatePreview() {
+    // Preview-specific early exit check
+    if (!isPreviewActive) {
+        console.log('Preview no longer active, stopping animation loop');
+        return;
+    }
+    // Schedule next frame immediately for high priority
+    previewAnimationId = requestAnimationFrame(animatePreview);
+    try {
+        // Prepare preview-specific settings
+        const animationType = currentPreviewSettings?.animationType || 'play';
+        const playbackSpeed = currentPreviewSettings?.playbackSpeed || 1.0;
+        // Create settings object for generic animation function
+        const animationSettings = {
+            animationType,
+            playbackSpeed,
+            targetFrameRate,
+            isPaused: isPreviewAnimationPaused
+        };
+        // Create frame state object
+        const frameState = {
+            lastFrameTime: lastAnimationFrameTime,
+            frameInterval
+        };
+        // Call generic animation function
+        const newFrameTime = runAnimationFrame(
+            animationPreviewRenderer,
+            animationPreviewScene,
+            animationPreviewCamera,
+            previewPlane,
+            animationSettings,
+            frameState
+        );
+        // Update preview-specific frame time
+        if (newFrameTime !== null) {
+            lastAnimationFrameTime = newFrameTime;
+        }
+    } catch (error) {
+        console.error('Error in preview animation loop:', error);
+    }
+}
+export function resetPreviewAnimationId() {
+    previewAnimationId = null;
+}
+export function resetLastAnimationFrameTime() {
+    lastAnimationFrameTime = 0;
+}
+export function setLastAnimationFrameTime(incomingValue) {
+    if(!incomingValue) {
+        return;
+    }
+    lastAnimationFrameTime = incomingValue;
+}