From f548139c1a6d36430b3c825aceaa2db6f5465019 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Mon, 25 Aug 2025 09:08:12 +0200 Subject: [PATCH] d --- src/index.html | 2 + src/index.js | 219 +++++++++++++++++++++++++++++++++++++++++++++++-- src/styles.css | 35 ++++++++ 3 files changed, 248 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 419169a..38e6c6f 100644 --- a/src/index.html +++ b/src/index.html @@ -21,6 +21,8 @@

๐Ÿ‘† Single finger drag: Rotate around model

๐Ÿค Pinch to zoom: Zoom in/out

โœŒ๏ธ Two finger drag: Pan around scene

+
+ diff --git a/src/index.js b/src/index.js index 3b0c6dd..2c8ad94 100644 --- 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() { diff --git a/src/styles.css b/src/styles.css index a010f4d..62b9355 100644 --- a/src/styles.css +++ b/src/styles.css @@ -51,6 +51,12 @@ body { margin: 3px 0 !important; border: 0.5px solid #555; } + + #print-btn { + font-size: 9px !important; + padding: 4px 6px !important; + border-radius: 3px !important; + } } /* Very small screens (phones in portrait) */ @@ -95,13 +101,28 @@ body { /* Print styles - make background transparent and model visible */ @media print { + * { + background: white !important; + background-image: none !important; + background-color: white !important; + } + body { background: white !important; background-image: none !important; + background-color: white !important; + } + + html { + background: white !important; + background-image: none !important; + background-color: white !important; } #container { background: white !important; + background-image: none !important; + background-color: white !important; } /* Hide info box when printing to focus on the model */ @@ -109,6 +130,11 @@ body { display: none !important; } + /* Hide print button in print output */ + #print-btn { + display: none !important; + } + /* Hide loading indicator when printing */ #loading { display: none !important; @@ -117,6 +143,8 @@ body { /* Ensure the canvas is visible and takes full page */ canvas { background: white !important; + background-image: none !important; + background-color: white !important; width: 100% !important; height: 100% !important; max-width: none !important; @@ -125,9 +153,16 @@ body { padding: 0 !important; } + /* Remove any WebGL background */ + canvas[data-engine*="three"], canvas[data-engine*="webgl"] { + background: white !important; + background-color: white !important; + } + /* Ensure proper print sizing */ @page { margin: 0.5in; size: auto; + background: white; } }