Edit Styles

`; return html; } // Export as full HTML document.getElementById('exportBtn').onclick = () => { const htmlContent = generateFullHTML(); const blob = new Blob([htmlContent], {type: 'text/html'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'builder.html'; a.click(); URL.revokeObjectURL(url); }; // Save state document.getElementById('saveBtn').onclick = () => { const state = { components: components.map(c => { return { html: c.innerHTML, style: { backgroundColor: c.style.backgroundColor, borderColor: c.style.borderColor, color: c.style.color, padding: c.style.padding, } } }), }; localStorage.setItem('builderState', JSON.stringify(state)); alert('State saved!'); }; // Load state document.getElementById('loadBtn').onclick = () => { const stateStr = localStorage.getItem('builderState'); if (!stateStr) { alert('No saved state'); return; } const state = JSON.parse(stateStr); builderArea.innerHTML = ''; components = []; state.components.forEach(c => { addComponentToBuilder(c.html); const last = components[components.length -1]; if (last && c.style) { last.style.backgroundColor = c.style.backgroundColor; last.style.borderColor = c.style.borderColor; last.style.color = c.style.color; last.style.padding = c.style.padding; } }); alert('State loaded!'); }; // Generate C++ ImGui code function generateCppCode() { const lines = []; lines.push('// Generated ImGui code'); lines.push('void RenderUI() {'); // Recursive function const recurse = (comp, indent=' ') => { let codeLines = []; Array.from(comp.childNodes).forEach(node => { if (node.nodeType === Node.ELEMENT_NODE && node.className === 'component') { codeLines.push(...recurse(node, indent)); } else if (node.nodeType === Node.ELEMENT_NODE) { const tag = node.tagName.toLowerCase(); if (tag === 'button') { const label = node.innerText.replace(/"/g, '\\"'); codeLines.push(`${indent}if (ImGui::Button("${label}")) { /* action */ }`); } else if (tag === 'div' || tag === 'span') { const isEditable = node.getAttribute('contenteditable') === 'true'; if (isEditable) { const text = node.innerText.replace(/"/g, '\\"'); codeLines.push(`${indent}ImGui::TextWrapped("${text}");`); } } else if (tag === 'input') { const type = node.getAttribute('type'); if (type === 'text') { codeLines.push(`${indent}static char buf[256];`); codeLines.push(`${indent}ImGui::InputText("Input", buf, 256);`); } else if (type === 'checkbox') { codeLines.push(`${indent}static bool checked = false;`); codeLines.push(`${indent}ImGui::Checkbox("Checkbox", &checked);`); } } // images and containers } }); return codeLines; }; // Generate code for each top component components.forEach(c => { lines.push(...recurse(c)); }); lines.push('}'); return lines.join('\n'); } // Initialize UI switchMode('view');