No labels added yet.

"; return; } bdtData.labels.forEach(label => { const row = document.createElement('div'); row.className = 'bdt-label-row'; row.innerHTML = ` Remove `; outputs.labelsListEditor.appendChild(row); }); // Attach listeners for input fields in the list document.querySelectorAll('#labels-list-editor input').forEach(input => { input.addEventListener('input', (e) => { const id = parseInt(e.target.dataset.id); const updatedLabel = bdtData.labels.find(l => l.id === id); if (updatedLabel) updatedLabel.text = e.target.value; renderAll(); }); }); } // --- 5. EVENT LISTENERS & ACTIONS --- function attachListeners() { // Configuration Inputs Object.values(inputs).forEach(inp => inp.addEventListener('input', renderAll)); // Click on editor image to add new label outputs.editorArea.addEventListener('click', function(e) { if (!bdtData.meta.diagramType) { alert("Please select a diagram type first."); return; } if (e.target !== outputs.editorDiagramImage && e.target !== outputs.editorArea) { return; // Only add label if clicking on the image or the main editor area } const rect = this.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width * 100; const y = (e.clientY - rect.top) / rect.height * 100; const newLabelText = prompt("Enter label text:"); if (newLabelText) { bdtData.labels.push({ id: Date.now(), text: newLabelText, x: x, y: y }); renderAll(); } }); } window.removeLabel = function(id) { if(confirm("Remove this label?")) { bdtData.labels = bdtData.labels.filter(label => label.id !== id); renderAll(); } }; // --- 6. TAB NAVIGATION --- window.bdtSwitchTab = function(tabId) { if (tabId === 'tab-labels') { // Re-render labels specifically for the editor when switching to this tab renderLabels(outputs.editorLabelsOverlay, true); } document.querySelectorAll('.bdt-tab-pane').forEach(p => p.classList.remove('active')); document.querySelectorAll('.bdt-tab-btn').forEach(b => b.classList.remove('active')); document.getElementById(tabId).classList.add('active'); document.querySelector(`.bdt-tab-btn[data-tab="${tabId}"]`).classList.add('active'); document.getElementById('bio-diagram-tool').scrollIntoView({behavior: 'smooth'}); }; document.querySelectorAll('.bdt-tab-btn').forEach(btn => { btn.addEventListener('click', function() { bdtSwitchTab(this.dataset.tab); }); }); // --- 7. PDF EXPORT --- const btnDown = document.getElementById('bdt-download-btn'); if(btnDown) { btnDown.addEventListener('click', function() { renderAll(); const element = document.getElementById('bdt-render-area'); const filename = (inputs.diagramTitle.value || 'Biology_Diagram').replace(/\s+/g,'_'); // Temporarily hide editable attributes for clean PDF export const editableLabels = document.querySelectorAll('#diagram-labels-overlay .bdt-label[contenteditable="true"]'); editableLabels.forEach(label => label.removeAttribute('contenteditable')); const opt = { margin: 0.5, filename: `${filename}.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true, logging: false, dpi: 192, letterRendering: true }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; const origText = btnDown.innerText; btnDown.innerText = "Generating Diagram..."; html2pdf().set(opt).from(element).save().then(() => { // Restore editable attributes after PDF generation editableLabels.forEach(label => label.setAttribute('contenteditable', 'true')); document.getElementById('bdt-download-btn').innerText = origText; }); }); } // Start init(); });