d

2025-08-25 09:08:12 +02:00
parent ba8eb581c9
commit f548139c1a
3 changed files with 248 additions and 8 deletions
--- a/src/index.js
+++ b/src/index.js
@@ -117,6 +117,9 @@ async function init() {
    // Handle print events
    setupPrintHandlers();
    
+    // Setup manual print button
+    setupPrintButton();
+    
    // Start render loop
    animate();
 }
@@ -141,23 +144,153 @@ function setupCustomTouchControls() {

 function setupPrintHandlers() {
    const originalBackgroundColor = scene.background;
+    const originalRendererClearColor = renderer.getClearColor(new THREE.Color());
+    const originalRendererClearAlpha = renderer.getClearAlpha();
    
-    // Before print - change background to white
+    let isTestMode = false;
+    let testTimeout = null;
+    
+    // Before print - change background to white and make renderer opaque
    const beforePrint = () => {
-        scene.background = new THREE.Color(0xffffff); // White background for printing
-        console.log('Print mode activated - background set to white');
+        if (isTestMode) {
+            console.log('🚫 Print event ignored - test mode is active');
+            return;
+        }
+        
+        console.log('🖨️ PRINT MODE ACTIVATED - Changing background to white');
+        
+        // Force scene background to white
+        scene.background = new THREE.Color(0xffffff);
+        
+        // Set renderer clear color to white
+        renderer.setClearColor(0xffffff, 1.0);
+        
+        // Force canvas background to white with multiple methods
+        const canvas = renderer.domElement;
+        canvas.style.setProperty('background', 'white', 'important');
+        canvas.style.setProperty('background-color', 'white', 'important');
+        canvas.style.setProperty('background-image', 'none', 'important');
+        
+        // Also set body and html backgrounds
+        document.body.style.setProperty('background', 'white', 'important');
+        document.body.style.setProperty('background-color', 'white', 'important');
+        document.documentElement.style.setProperty('background', 'white', 'important');
+        document.documentElement.style.setProperty('background-color', 'white', 'important');
+        
+        // Force a render to apply changes immediately
+        renderer.render(scene, camera);
+        
+        console.log('✅ Print background forcibly set to white');
    };
    
    // After print - restore original background
    const afterPrint = () => {
-        scene.background = originalBackgroundColor; // Restore original background
-        console.log('Print mode deactivated - background restored');
+        if (isTestMode) {
+            console.log('🚫 Print restore ignored - test mode is active');
+            return;
+        }
+        
+        console.log('🖨️ PRINT MODE DEACTIVATED - Restoring original background');
+        
+        // Restore original settings
+        scene.background = originalBackgroundColor;
+        renderer.setClearColor(originalRendererClearColor, originalRendererClearAlpha);
+        
+        // Remove forced styles
+        const canvas = renderer.domElement;
+        canvas.style.removeProperty('background');
+        canvas.style.removeProperty('background-color');
+        canvas.style.removeProperty('background-image');
+        
+        document.body.style.removeProperty('background');
+        document.body.style.removeProperty('background-color');
+        document.documentElement.style.removeProperty('background');
+        document.documentElement.style.removeProperty('background-color');
+        
+        console.log('✅ Original background restored');
+    };
+    
+    // Apply white background (used by both test and print modes)
+    const applyWhiteBackground = () => {
+        // Force scene background to white
+        scene.background = new THREE.Color(0xffffff);
+        
+        // Set renderer clear color to white
+        renderer.setClearColor(0xffffff, 1.0);
+        
+        // Force canvas background to white with multiple methods
+        const canvas = renderer.domElement;
+        canvas.style.setProperty('background', 'white', 'important');
+        canvas.style.setProperty('background-color', 'white', 'important');
+        canvas.style.setProperty('background-image', 'none', 'important');
+        
+        // Also set body and html backgrounds
+        document.body.style.setProperty('background', 'white', 'important');
+        document.body.style.setProperty('background-color', 'white', 'important');
+        document.documentElement.style.setProperty('background', 'white', 'important');
+        document.documentElement.style.setProperty('background-color', 'white', 'important');
+        
+        // Force a render to apply changes immediately
+        renderer.render(scene, camera);
+    };
+    
+    // Restore original background (used by both test and print modes)
+    const restoreBackground = () => {
+        // Restore original settings
+        scene.background = originalBackgroundColor;
+        renderer.setClearColor(originalRendererClearColor, originalRendererClearAlpha);
+        
+        // Remove forced styles
+        const canvas = renderer.domElement;
+        canvas.style.removeProperty('background');
+        canvas.style.removeProperty('background-color');
+        canvas.style.removeProperty('background-image');
+        
+        document.body.style.removeProperty('background');
+        document.body.style.removeProperty('background-color');
+        document.documentElement.style.removeProperty('background');
+        document.documentElement.style.removeProperty('background-color');
+    };
+    
+    // Test the print handler immediately (for debugging)
+    window.testPrintMode = () => {
+        console.log('🧪 Testing print mode (print events disabled during test)...');
+        isTestMode = true;
+        
+        if (testTimeout) {
+            clearTimeout(testTimeout);
+        }
+        
+        applyWhiteBackground();
+        console.log('✅ Test mode background set to white');
+        
+        testTimeout = setTimeout(() => {
+            console.log('🧪 Test complete, restoring...');
+            restoreBackground();
+            isTestMode = false;
+            testTimeout = null;
+            console.log('✅ Test mode complete, print events re-enabled');
+        }, 6000);
+    };
+    
+    // Cancel test mode early
+    window.cancelTestMode = () => {
+        if (testTimeout) {
+            clearTimeout(testTimeout);
+            testTimeout = null;
+        }
+        if (isTestMode) {
+            restoreBackground();
+            isTestMode = false;
+            console.log('🧪 Test mode cancelled, print events re-enabled');
+        }
    };
    
    // Listen for print events
    if (window.matchMedia) {
        const mediaQueryList = window.matchMedia('print');
        mediaQueryList.addEventListener('change', (mql) => {
+            console.log('📱 Media query change detected:', mql.matches ? 'PRINT' : 'SCREEN');
            if (mql.matches) {
                beforePrint();
            } else {
@@ -167,10 +300,80 @@ function setupPrintHandlers() {
    }
    
    // Fallback for older browsers
-    window.addEventListener('beforeprint', beforePrint);
-    window.addEventListener('afterprint', afterPrint);
+    window.addEventListener('beforeprint', () => {
+        console.log('🖨️ beforeprint event fired');
+        beforePrint();
+    });
+    window.addEventListener('afterprint', () => {
+        console.log('🖨️ afterprint event fired');
+        afterPrint();
+    });
    
-    console.log('Print event handlers set up');
+    console.log('🔧 Print event handlers set up.');
+    console.log('   Use window.testPrintMode() to test for 6 seconds');
+    console.log('   Use window.cancelTestMode() to end test early');
+}
+
+function setupPrintButton() {
+    const printBtn = document.getElementById('print-btn');
+    if (!printBtn) {
+        console.warn('Print button not found');
+        return;
+    }
+    
+    const originalBackgroundColor = scene.background;
+    const originalRendererClearColor = renderer.getClearColor(new THREE.Color());
+    const originalRendererClearAlpha = renderer.getClearAlpha();
+    
+    printBtn.addEventListener('click', () => {
+        console.log('🖨️ Manual print button clicked - forcing white background');
+        
+        // Force white background immediately
+        scene.background = new THREE.Color(0xffffff);
+        renderer.setClearColor(0xffffff, 1.0);
+        
+        // Force canvas and page backgrounds to white
+        const canvas = renderer.domElement;
+        canvas.style.setProperty('background', 'white', 'important');
+        canvas.style.setProperty('background-color', 'white', 'important');
+        canvas.style.setProperty('background-image', 'none', 'important');
+        
+        document.body.style.setProperty('background', 'white', 'important');
+        document.body.style.setProperty('background-color', 'white', 'important');
+        document.documentElement.style.setProperty('background', 'white', 'important');
+        document.documentElement.style.setProperty('background-color', 'white', 'important');
+        
+        // Force a render to apply changes
+        renderer.render(scene, camera);
+        
+        console.log('✅ Background forced to white, opening print dialog...');
+        
+        // Small delay to ensure changes are applied, then open print dialog
+        setTimeout(() => {
+            window.print();
+            
+            // Restore background after a delay to account for print dialog
+            setTimeout(() => {
+                console.log('🔄 Restoring original background...');
+                
+                scene.background = originalBackgroundColor;
+                renderer.setClearColor(originalRendererClearColor, originalRendererClearAlpha);
+                
+                canvas.style.removeProperty('background');
+                canvas.style.removeProperty('background-color');
+                canvas.style.removeProperty('background-image');
+                
+                document.body.style.removeProperty('background');
+                document.body.style.removeProperty('background-color');
+                document.documentElement.style.removeProperty('background');
+                document.documentElement.style.removeProperty('background-color');
+                
+                console.log('✅ Original background restored');
+            }, 1000); // Wait 1 second after print dialog opens
+        }, 100); // Small delay to apply changes
+    });
+    
+    console.log('🖨️ Manual print button set up');
 }

 function setupLighting() {