Function: ${structureData.function || 'N/A'}

`; } else { infoPanel.innerHTML = `

Structure Information

Select a cell type and click on a structure in the diagram, or choose one from the dropdown above.

`; } } // --- Event Listeners --- cellTypeSelect.addEventListener('change', (e) => { loadCellData(e.target.value); }); structureSelect.addEventListener('change', (e) => { const selectedId = e.target.value; if (selectedId) { selectStructure(selectedId); } else { deselectStructure(); } }); // --- PDF Download --- downloadBtn.addEventListener('click', () => { if (!selectedStructureId || !currentStructures[selectedStructureId]) { console.error("PDF download clicked but no valid structure selected."); return; // Should be disabled, but check anyway } const structureInfo = currentStructures[selectedStructureId]; const { jsPDF } = window.jspdf; const doc = new jsPDF(); const margin = 15; const pageWidth = doc.internal.pageSize.getWidth(); let currentY = margin; // --- PDF Content --- // Title doc.setFontSize(16); doc.setTextColor(pdfColors.primary); doc.text("Cell Structure Information", pageWidth / 2, currentY, { align: 'center' }); currentY += 10; // Cell Type doc.setFontSize(11); doc.setTextColor(pdfColors.secondary); doc.text(`Cell Type: ${currentCellType.charAt(0).toUpperCase() + currentCellType.slice(1)}`, margin, currentY); currentY += 10; // Structure Name (with a colored underline maybe) doc.setFontSize(14); doc.setTextColor(pdfColors.primary); // Use primary color for name doc.text(structureInfo.name, margin, currentY); // Add an accent underline const nameWidth = doc.getTextWidth(structureInfo.name); doc.setDrawColor(pdfColors.highlightStroke); // Use highlight color for accent doc.setLineWidth(0.5); doc.line(margin, currentY + 1, margin + nameWidth, currentY + 1); currentY += 10; // Function doc.setFontSize(11); doc.setTextColor(pdfColors.text); // Reset to default text color doc.setFont('helvetica', 'bold'); doc.text("Function:", margin, currentY); currentY += 5; doc.setFont('helvetica', 'normal'); const functionLines = doc.splitTextToSize(structureInfo.function || 'N/A', pageWidth - 2 * margin); doc.text(functionLines, margin, currentY); currentY += (functionLines.length * 5) + 5; // Adjust spacing // --- Save PDF --- const safeName = structureInfo.name.replace(/[^a-z0-9]/gi, '_').toLowerCase(); doc.save(`cell_structure_${safeName}.pdf`); }); // --- Initialize --- loadCellData(currentCellType); // Load default cell type on start });