`; } }); if (includedCount === 0) { chartPlaceholder.style.display = 'block'; chartGrid.innerHTML = ''; } else { chartPlaceholder.style.display = 'none'; chartGrid.innerHTML = chartHtml; } // Switch to chart tab (Spec II.B.4) switchTab('chart'); } // --- PDF DOWNLOAD (Spec II.C) --- async function downloadPDF() { // Ensure libraries are loaded if (typeof window.jspdf === 'undefined' || typeof window.html2canvas === 'undefined') { alert("Error: PDF generation libraries are not loaded. Cannot create PDF."); return; } const { jsPDF } = window.jspdf; const chartElement = chartWrapper; // The element to capture // Temporarily set title toolContainer.querySelector('#smg-chart-title').textContent = "My Simple Machines Chart"; try { const canvas = await window.html2canvas(chartElement, { scale: 2, // Higher scale for better quality useCORS: true, logging: false }); const imgData = canvas.toDataURL('image/png'); // PDF setup (A4 landscape) const pdfWidth = 297; const pdfHeight = 210; const doc = new jsPDF('l', 'mm', [pdfWidth, pdfHeight]); // Calculate image dimensions to fit PDF const imgProps = doc.getImageProperties(imgData); const imgWidth = imgProps.width; const imgHeight = imgProps.height; const ratio = imgWidth / imgHeight; let finalWidth = pdfWidth - 20; // 10mm margins let finalHeight = finalWidth / ratio; if (finalHeight > pdfHeight - 20) { finalHeight = pdfHeight - 20; finalWidth = finalHeight * ratio; } const x = (pdfWidth - finalWidth) / 2; const y = (pdfHeight - finalHeight) / 2; doc.addImage(imgData, 'PNG', x, y, finalWidth, finalHeight); doc.save('simple-machines-chart.pdf'); } catch (error) { console.error("Error generating PDF:", error); alert("An error occurred while generating the PDF. See console for details."); } finally { // Reset title toolContainer.querySelector('#smg-chart-title').textContent = "Simple Machines"; } } // --- EVENT LISTENERS (Spec IV.A) --- function attachEventListeners() { // Tab navigation tabButtons.forEach(btn => { btn.addEventListener('click', () => switchTab(btn.dataset.tab)); }); nextTabBtn.addEventListener('click', () => switchTab('config')); prevTabBtn.addEventListener('click', () => switchTab('chart')); // Main actions generateBtn.addEventListener('click', generateChart); downloadPdfBtn.addEventListener('click', downloadPDF); } // --- RUN --- init(); });