No steps configured. Go to the Configuration tab to add some.

"; tableBody.innerHTML = "No steps configured."; return; } appState.steps.forEach(step => { // 1. Render Visual Node const node = document.createElement("div"); node.className = `paw-node paw-node-${step.type}`; node.innerHTML = ` `; visualContainer.appendChild(node); // 2. Render Table Row const tr = document.createElement("tr"); tr.innerHTML = ` ${step.name} ${step.type.charAt(0).toUpperCase() + step.type.slice(1)} ${step.desc} `; tableBody.appendChild(tr); }); } // --- Event Handlers --- // Update Dashboard Button updateBtn.addEventListener("click", () => { // Data is already in appState, just re-render dashboard renderDashboardTab(); // Switch to dashboard tab showTab(0); }); // Add Step addStepForm.addEventListener("submit", (e) => { e.preventDefault(); const name = stepName.value.trim(); const type = stepType.value; const desc = stepDesc.value.trim(); if (!name) { alert("Please enter a step name."); return; } const newStep = { id: Date.now(), // Simple unique ID name: name, type: type, desc: desc }; appState.steps.push(newStep); saveState(); renderConfigTab(); // Clear form stepName.value = ""; stepDesc.value = ""; stepType.value = "manual"; }); // Remove Step (Event Delegation) currentStepsList.addEventListener("click", (e) => { if (e.target.classList.contains("paw-remove-btn")) { const id = parseInt(e.target.dataset.id); appState.steps = appState.steps.filter(s => s.id !== id); saveState(); renderConfigTab(); } }); // PDF Download pdfBtn.addEventListener("click", () => { const { jsPDF } = window.jspdf; const fileName = 'Workflow_Diagram.pdf'; html2canvas(exportArea, { scale: 2, // Improve resolution useCORS: true, backgroundColor: '#ffffff' }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = doc.internal.pageSize.getWidth(); const pdfHeight = doc.internal.pageSize.getHeight(); const imgProps = doc.getImageProperties(imgData); const imgWidth = imgProps.width; const imgHeight = imgProps.height; const margin = 40; const usableWidth = pdfWidth - (2 * margin); const ratio = usableWidth / imgWidth; const scaledHeight = imgHeight * ratio; doc.addImage(imgData, 'PNG', margin, margin, usableWidth, scaledHeight); doc.save(fileName); }).catch(err => { console.error("PAW PDF Error:", err); // alert("An error occurred while generating the PDF."); // Per spec }); }); // --- Local Storage --- function saveState() { try { localStorage.setItem("pawAppState", JSON.stringify(appState)); } catch (e) { console.warn("PAW: Could not save state to localStorage."); } } function loadState() { try { const storedState = localStorage.getItem("pawAppState"); if (storedState) { appState = JSON.parse(storedState); } } catch (e) { console.warn("PAW: Could not load state, using defaults."); } } // --- Initial Load --- loadState(); renderConfigTab(); renderDashboardTab(); showTab(0); // Start on Dashboard });