`; timelineContainer.appendChild(itemEl); }); }; // --- Update & PDF Download Logic --- updateTimelineBtn.addEventListener('click', () => { try { const newData = JSON.parse(dataInput.value); if (!Array.isArray(newData)) throw new Error("Data must be an array."); // Basic validation for required fields newData.forEach(item => { if (!item.date || !item.title || !item.description) { throw new Error("Each item must have a 'date', 'title', and 'description'."); } }); jsonError.classList.add('hidden'); createTimeline(newData); currentTab = 0; updateTabUI(); } catch (e) { jsonError.textContent = `Invalid Data: ${e.message}`; jsonError.classList.remove('hidden'); console.error("Invalid Data:", e); } }); downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const visualizationWrapper = document.getElementById('visualization-wrapper'); html2canvas(visualizationWrapper, { scale: 2, windowWidth: visualizationWrapper.scrollWidth, windowHeight: visualizationWrapper.scrollHeight }).then(canvas => { const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const margin = 15; pdf.setFontSize(22); pdf.setFont("helvetica", "bold"); pdf.text("Timeline Report", pdfWidth / 2, margin, { align: 'center' }); const imgData = canvas.toDataURL('image/png'); const imgProps = pdf.getImageProperties(imgData); const imgWidth = pdfWidth - margin * 2; const imgHeight = (imgProps.height * imgWidth) / imgProps.width; let currentHeight = imgHeight; let currentY = margin + 10; if (imgHeight > pdfHeight - currentY - margin) { // This is a simplified approach. For very long timelines, // a multi-page solution would be needed. console.warn("Timeline is long and may be clipped in the PDF."); currentHeight = pdfHeight - currentY - margin; } pdf.addImage(imgData, 'PNG', margin, currentY, imgWidth, currentHeight); pdf.save('Timeline-Visualization.pdf'); }); }); // --- Initial Setup --- updateTabUI(); try { createTimeline(JSON.parse(dataInput.value)); } catch (e) { createTimeline([]); console.error("Could not parse initial sample data."); } });