feat: boolean param in dynamic form

public/scripts/components/NodeDetailsComponent.js

@@ -99,12 +99,29 @@ class NodeDetailsComponent extends Component {
                       value="${defaultValue}">`;
     }
 
+    renderBooleanComponent(p, formId, pidx) {
+        const defaultValue = p.default !== undefined ? p.default : false;
+        const checked = defaultValue ? 'checked' : '';
+        return `<div class="boolean-input-container">
+            <input id="${formId}-field-${pidx}" 
+                   data-param-name="${p.name}" 
+                   data-param-location="${p.location || 'body'}" 
+                   data-param-type="${p.type || 'boolean'}" 
+                   data-param-required="${p.required ? '1' : '0'}" 
+                   class="param-input boolean-checkbox" 
+                   type="checkbox" 
+                   ${checked}>
+            <label for="${formId}-field-${pidx}" class="boolean-label">${p.name}</label>
+        </div>`;
+    }
+
     // Component map for parameter types
     getParameterComponentMap() {
         const components = {
             select: this.renderSelectComponent,
             color: this.renderColorComponent,
             numberRange: this.renderNumberRangeComponent,
+            boolean: this.renderBooleanComponent,
             text: this.renderTextComponent
         };
         
@@ -119,7 +136,8 @@ class NodeDetailsComponent extends Component {
         const typeRules = [
             { condition: () => Array.isArray(p.values) && p.values.length > 1, type: 'select' },
             { condition: () => p.type === 'color', type: 'color' },
-            { condition: () => p.type === 'numberRange', type: 'numberRange' }
+            { condition: () => p.type === 'numberRange', type: 'numberRange' },
+            { condition: () => p.type === 'boolean', type: 'boolean' }
         ];
         
         const matchedRule = typeRules.find(rule => rule.condition());
@@ -616,6 +634,10 @@ class NodeDetailsComponent extends Component {
                         const rgbDisplay = input.parentElement.querySelector('.color-rgb-display');
                         value = rgbDisplay ? rgbDisplay.value : this.hexToRgbInt(input.value);
                     }
+                    // For boolean type, convert checkbox checked state to boolean
+                    else if (input.dataset.paramType === 'boolean' && input.type === 'checkbox') {
+                        value = input.checked;
+                    }
                     return {
                         name: input.dataset.paramName,
                         location: input.dataset.paramLocation || 'body',
@@ -626,7 +648,7 @@ class NodeDetailsComponent extends Component {
                 });
 
                 // Required validation
-                const missing = params.filter(p => p.required && (!p.value || String(p.value).trim() === ''));
+                const missing = params.filter(p => p.required && (p.type === 'boolean' ? false : (!p.value || String(p.value).trim() === '')));
                 if (missing.length > 0) {
                     resultEl.style.display = 'block';
                     resultEl.innerHTML = `