pynode-flow 0.2.0__py3-none-any.whl

pynode/static/js/properties.js

@@ -0,0 +1,1270 @@
+// Properties panel
+import { state, markNodeModified, setModified, getNodeType } from './state.js';
+import { API_BASE } from './config.js';
+import { updateNodeOutputCount, updateNodeInputCount } from './nodes.js';
+import { updateConnections } from './connections.js';
+import { showToast } from './ui-utils.js';
+
+// Helper function to check if property should be shown
+function shouldShowProperty(showIf, config) {
+    for (const [key, value] of Object.entries(showIf)) {
+        const configValue = config[key];
+        
+        if (Array.isArray(value)) {
+            // Check if config value is in the array
+            if (!value.includes(configValue)) {
+                return false;
+            }
+        } else {
+            // Check if config value matches
+            if (configValue !== value) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+export function renderProperties(nodeData) {
+    const panel = document.getElementById('properties-panel');
+    const panelContainer = document.getElementById('properties-panel-container');
+    if (panelContainer) {
+        panelContainer.classList.remove('hidden');
+    }
+    
+    const isEnabled = nodeData.enabled !== undefined ? nodeData.enabled : true;
+    
+    let html = `
+        <div class="property-group">
+            <label class="property-label">Name</label>
+            <input type="text" class="property-input" value="${nodeData.name}" 
+                   onchange="window.updateNodeProperty('${nodeData.id}', 'name', this.value)">
+        </div>
+        <div class="property-group property-enabled-row">
+            <span class="property-label">Enabled</span>
+            <label class="gate-switch">
+                <input type="checkbox" ${isEnabled ? 'checked' : ''} 
+                       onchange="window.toggleNodeEnabled('${nodeData.id}', this.checked)">
+                <span class="gate-slider"></span>
+            </label>
+        </div>
+    `;
+    
+    const nodeType = getNodeType(nodeData.type);
+    if (nodeType && nodeType.properties) {
+        nodeType.properties.forEach(prop => {
+            // Add property group with conditional visibility
+            const shouldShow = !prop.showIf || shouldShowProperty(prop.showIf, nodeData.config);
+            
+            html += '<div class="property-group"';
+            // Add data attribute for dynamic visibility
+            if (prop.showIf) {
+                html += ` data-show-if='${JSON.stringify(prop.showIf)}'`;
+            }
+            // Hide initially if condition not met
+            if (!shouldShow) {
+                html += ' style="display: none;"';
+            }
+            html += '>';
+            
+            if (prop.type === 'text') {
+                const value = nodeData.config[prop.name] !== undefined ? nodeData.config[prop.name] : (prop.default || '');
+                const placeholder = prop.placeholder || prop.default || '';
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <input type="text" class="property-input" 
+                           value="${value}"
+                           placeholder="${placeholder}"
+                           onchange="window.updateNodeConfig('${nodeData.id}', '${prop.name}', this.value)">
+                `;
+            } else if (prop.type === 'number') {
+                const value = nodeData.config[prop.name] !== undefined ? nodeData.config[prop.name] : (prop.default || 0);
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <input type="number" class="property-input" 
+                           value="${value}"
+                           onchange="window.updateNodeConfig('${nodeData.id}', '${prop.name}', parseFloat(this.value))">
+                `;
+            } else if (prop.type === 'checkbox') {
+                const checked = nodeData.config[prop.name] !== undefined ? nodeData.config[prop.name] : (prop.default || false);
+                html += `
+                    <label class="property-label">
+                        <input type="checkbox" class="property-checkbox" 
+                               ${checked ? 'checked' : ''}
+                               onchange="window.updateNodeConfig('${nodeData.id}', '${prop.name}', this.checked)">
+                        ${prop.label}
+                    </label>
+                `;
+            } else if (prop.type === 'textarea') {
+                const value = nodeData.config[prop.name] !== undefined ? nodeData.config[prop.name] : (prop.default || '');
+                const placeholder = prop.placeholder || prop.default || '';
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <textarea class="property-input property-textarea" 
+                              placeholder="${placeholder}"
+                              onchange="window.updateNodeConfig('${nodeData.id}', '${prop.name}', this.value)">${value}</textarea>
+                `;
+            } else if (prop.type === 'select') {
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <select class="property-select" 
+                            onchange="window.updateNodeConfig('${nodeData.id}', '${prop.name}', this.value); window.updatePropertyVisibility('${nodeData.id}')">
+                `;
+                prop.options.forEach(option => {
+                    const selected = nodeData.config[prop.name] === option.value ? 'selected' : '';
+                    html += `<option value="${option.value}" ${selected}>${option.label}</option>`;
+                });
+                html += '</select>';
+            } else if (prop.type === 'button') {
+                html += `
+                    <button class="btn btn-primary" onclick="window.triggerNodeAction('${nodeData.id}', '${prop.action}')">${prop.label}</button>
+                `;
+            } else if (prop.type === 'toggle') {
+                // Toggle switch with action - syncs with node's uiComponent toggle
+                const stateField = prop.stateField || 'drawingEnabled';  // Default for backward compat
+                const isChecked = nodeData[stateField] !== false;  // Default to true if undefined
+                html += `
+                    <div class="property-toggle-row">
+                        <span class="property-label">${prop.label}</span>
+                        <label class="gate-switch">
+                            <input type="checkbox" 
+                                   id="prop-toggle-${nodeData.id}-${prop.name}"
+                                   data-state-field="${stateField}"
+                                   ${isChecked ? 'checked' : ''}
+                                   onchange="window.triggerToggleAction('${nodeData.id}', '${prop.action}', '${stateField}', this.checked)">
+                            <span class="gate-slider"></span>
+                        </label>
+                    </div>
+                `;
+            } else if (prop.type === 'file') {
+                const value = nodeData.config[prop.name] !== undefined ? nodeData.config[prop.name] : (prop.default || '');
+                const accept = prop.accept || '';
+                const uploadRoute = prop.uploadRoute || '';
+                const placeholder = prop.placeholder || 'Select or enter file path...';
+                const fileId = `file-${nodeData.id}-${prop.name}`;
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <div class="property-file-container">
+                        <input type="text" class="property-input property-file-path" 
+                               value="${value}"
+                               placeholder="${placeholder}"
+                               onchange="window.updateNodeConfig('${nodeData.id}', '${prop.name}', this.value)">
+                        <button class="btn btn-secondary property-file-btn" onclick="window.selectFile('${nodeData.id}', '${prop.name}', '${accept}', '${uploadRoute}')">
+                            <i class="fas fa-folder-open"></i>
+                        </button>
+                    </div>
+                    <div class="upload-progress-container" id="${fileId}-progress" style="display:none;">
+                        <div class="upload-progress-bar">
+                            <div class="upload-progress-fill" id="${fileId}-fill"></div>
+                        </div>
+                        <span class="upload-progress-text" id="${fileId}-text">0%</span>
+                    </div>
+                `;
+            } else if (prop.type === 'mqtt-service') {
+                // MQTT Service selector - like Node-RED config nodes
+                const currentServiceId = nodeData.config[prop.name] || '';
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <div class="property-service-container">
+                        <select class="property-select property-service-select" 
+                                id="mqtt-service-${nodeData.id}"
+                                data-node-id="${nodeData.id}"
+                                data-prop-name="${prop.name}"
+                                onchange="window.onMqttServiceSelect('${nodeData.id}', '${prop.name}', this.value)">
+                            <option value="">-- Select broker --</option>
+                        </select>
+                        <button class="btn btn-secondary property-service-btn" 
+                                onclick="window.openMqttServiceEditor('${nodeData.id}', '${prop.name}')"
+                                title="Edit broker settings">
+                            ✏️
+                        </button>
+                        <button class="btn btn-primary property-service-btn" 
+                                onclick="window.openMqttServiceEditor('${nodeData.id}', '${prop.name}', true)"
+                                title="Add new broker">
+                            +
+                        </button>
+                    </div>
+                `;
+                // Load services after rendering
+                setTimeout(() => window.loadMqttServices(nodeData.id, prop.name, currentServiceId), 0);
+            } else if (prop.type === 'rules') {
+                html += renderRulesEditor(nodeData.id, prop.name, nodeData.config[prop.name] || []);
+            } else if (prop.type === 'injectProps') {
+                html += renderInjectPropsEditor(nodeData.id, prop.name, nodeData.config[prop.name] || []);
+            } else if (prop.type === 'changeRules') {
+                html += renderChangeRulesEditor(nodeData.id, prop.name, nodeData.config[prop.name] || []);
+            } else if (prop.type === 'streamUrl') {
+                // Read-only stream URL that opens in new tab
+                const streamUrl = `${window.location.origin}/api/nodes/${nodeData.id}/stream`;
+                html += `
+                    <label class="property-label">${prop.label}</label>
+                    <div class="property-stream-url-container">
+                        <input type="text" class="property-input property-stream-url" 
+                               value="${streamUrl}" readonly
+                               onclick="this.select()">
+                        <button class="btn btn-secondary property-stream-btn" 
+                                onclick="window.open('${streamUrl}', '_blank')"
+                                title="Open stream in new tab">
+                            ↗️
+                        </button>
+                        <button class="btn btn-secondary property-stream-btn" 
+                                onclick="navigator.clipboard.writeText('${streamUrl}'); window.showToast && window.showToast('URL copied!')"
+                                title="Copy URL">
+                            🗐
+                        </button>
+                    </div>
+                `;
+            } else if (prop.type === 'multiselect') {
+                // Multiselect - allows selecting multiple options with checkboxes
+                const selectedValues = nodeData.config[prop.name] || prop.default || [];
+                html += `<label class="property-label">${prop.label}</label>`;
+                html += `<div class="property-multiselect" data-prop="${prop.name}">`;
+                
+                prop.options.forEach(option => {
+                    const optValue = typeof option === 'object' ? option.value : option;
+                    const optLabel = typeof option === 'object' ? option.label : option;
+                    const isChecked = Array.isArray(selectedValues) ? selectedValues.includes(optValue) : selectedValues === optValue;
+                    
+                    html += `
+                        <label class="multiselect-option">
+                            <input type="checkbox" 
+                                   value="${optValue}"
+                                   ${isChecked ? 'checked' : ''}
+                                   onchange="window.updateMultiselectConfig('${nodeData.id}', '${prop.name}', this)">
+                            <span>${optLabel}</span>
+                        </label>
+                    `;
+                });
+                
+                html += '</div>';
+            }
+            
+            if (prop.help) {
+                html += `<small class="property-help">${prop.help}</small>`;
+            }
+            
+            html += '</div>';
+        });
+    }
+    
+    panel.innerHTML = html;
+    
+    // Update property visibility based on current config
+    window.updatePropertyVisibility(nodeData.id);
+}
+
+export function updateNodeProperty(nodeId, property, value) {
+    const nodeData = state.nodes.get(nodeId);
+    nodeData[property] = value;
+    
+    const nodeEl = document.getElementById(`node-${nodeId}`);
+    nodeEl.querySelector('.node-title').textContent = value;
+    
+    markNodeModified(nodeId);
+    setModified(true);
+}
+
+export function updateNodeConfig(nodeId, key, value) {
+    const nodeData = state.nodes.get(nodeId);
+    nodeData.config[key] = value;
+    
+    // If outputs property changed, update the node's output ports
+    if (key === 'outputs') {
+        updateNodeOutputCount(nodeId, parseInt(value, 10));
+    }
+    
+    // If input_count property changed, update the node's input ports
+    if (key === 'input_count') {
+        updateNodeInputCount(nodeId, parseInt(value, 10));
+    }
+    
+    // Update property visibility since config changed
+    window.updatePropertyVisibility(nodeId);
+    
+    markNodeModified(nodeId);
+    setModified(true);
+}
+
+/**
+ * Update multiselect config - collects all checked values into an array
+ */
+export function updateMultiselectConfig(nodeId, propName, checkbox) {
+    const nodeData = state.nodes.get(nodeId);
+    if (!nodeData) return;
+    
+    // Get the parent multiselect container
+    const container = checkbox.closest('.property-multiselect');
+    if (!container) return;
+    
+    // Collect all checked values
+    const checkedValues = [];
+    container.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
+        checkedValues.push(cb.value);
+    });
+    
+    nodeData.config[propName] = checkedValues;
+    
+    // Update property visibility since config changed
+    window.updatePropertyVisibility(nodeId);
+    
+    markNodeModified(nodeId);
+    setModified(true);
+}
+
+// Make it available globally
+window.updateMultiselectConfig = updateMultiselectConfig;
+
+export async function triggerNodeAction(nodeId, action) {
+    try {
+        await fetch(`${API_BASE}/nodes/${nodeId}/${action}`, { method: 'POST' });
+    } catch (error) {
+        console.error(`Failed to trigger ${action} on node:`, error);
+    }
+}
+
+/**
+ * Trigger a toggle action and sync state between properties panel and node UI.
+ * @param {string} nodeId - The node ID
+ * @param {string} action - The action to call (e.g., 'toggle_drawing')
+ * @param {string} stateField - The field in nodeData to update (e.g., 'drawingEnabled')
+ * @param {boolean} checked - The new toggle state
+ */
+export async function triggerToggleAction(nodeId, action, stateField, checked) {
+    try {
+        // Call the action endpoint
+        const response = await fetch(`${API_BASE}/nodes/${nodeId}/${action}`, { method: 'POST' });
+        
+        if (response.ok) {
+            // Update nodeData state
+            const nodeData = state.nodes.get(nodeId);
+            if (nodeData) {
+                nodeData[stateField] = checked;
+            }
+            
+            // Sync the toggle on the node itself (if it has one)
+            const nodeToggle = document.getElementById(`toggle-${nodeId}`);
+            if (nodeToggle && nodeToggle.checked !== checked) {
+                nodeToggle.checked = checked;
+            }
+        }
+    } catch (error) {
+        console.error(`Failed to trigger ${action} on node:`, error);
+    }
+}
+
+/**
+ * Generic function to toggle node enabled state.
+ * Consolidates toggleGate, toggleDebug, and toggleNodeEnabled into one function.
+ * @param {string} nodeId - The node ID
+ * @param {boolean} enabled - The new enabled state
+ * @param {Object} options - Optional configuration
+ * @param {string} options.checkboxSelector - CSS selector for checkbox to sync (e.g., '#gate-{nodeId}')
+ */
+export async function toggleNodeState(nodeId, enabled, options = {}) {
+    try {
+        const response = await fetch(`${API_BASE}/nodes/${nodeId}/enabled`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ enabled: enabled })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
+        const nodeData = state.nodes.get(nodeId);
+        if (nodeData) {
+            nodeData.enabled = enabled;
+            
+            // Update node visual state
+            const nodeEl = document.getElementById(`node-${nodeId}`);
+            if (nodeEl) {
+                nodeEl.classList.toggle('disabled', !enabled);
+            }
+            
+            // Update connections (dashed when disabled)
+            updateConnections();
+            
+            // Update any visual toggle switches on the node (DebugNode, GateNode)
+            const gateCheckbox = document.getElementById(`gate-${nodeId}`);
+            const debugCheckbox = document.getElementById(`debug-${nodeId}`);
+            if (gateCheckbox) gateCheckbox.checked = enabled;
+            if (debugCheckbox) debugCheckbox.checked = enabled;
+            
+            // Sync properties panel if this node is selected
+            if (state.selectedNode === nodeId) {
+                const propsToggle = document.querySelector('#properties-panel .gate-switch input');
+                if (propsToggle) propsToggle.checked = enabled;
+            }
+        }
+    } catch (error) {
+        console.error('Failed to toggle node state:', error);
+    }
+}
+
+// Backwards compatibility aliases
+export const toggleGate = toggleNodeState;
+export const toggleNodeEnabled = toggleNodeState;
+
+/**
+ * Opens a file dialog to select a file and updates the node config.
+ * Uses XMLHttpRequest for upload progress tracking.
+ * @param {string} nodeId - The node ID
+ * @param {string} propName - The property name to update
+ * @param {string} accept - Comma-separated list of accepted file extensions
+ * @param {string} uploadRoute - Optional node-specific upload route (e.g. 'upload_video')
+ */
+export function selectFile(nodeId, propName, accept, uploadRoute) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    if (accept) {
+        input.accept = accept;
+    }
+    
+    input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        let url;
+        if (uploadRoute) {
+            url = `${API_BASE}/nodes/${nodeId}/${uploadRoute}`;
+        } else {
+            formData.append('nodeId', nodeId);
+            url = `${API_BASE}/upload/file`;
+        }
+        
+        // Progress bar elements
+        const fileId = `file-${nodeId}-${propName}`;
+        const progressContainer = document.getElementById(`${fileId}-progress`);
+        const progressFill = document.getElementById(`${fileId}-fill`);
+        const progressText = document.getElementById(`${fileId}-text`);
+        
+        const xhr = new XMLHttpRequest();
+        
+        xhr.upload.addEventListener('progress', (evt) => {
+            if (evt.lengthComputable && progressContainer) {
+                const pct = Math.round((evt.loaded / evt.total) * 100);
+                progressContainer.style.display = '';
+                progressFill.style.width = `${pct}%`;
+                progressText.textContent = `${pct}%`;
+            }
+        });
+        
+        xhr.addEventListener('load', () => {
+            // Hide progress bar
+            if (progressContainer) progressContainer.style.display = 'none';
+            
+            if (xhr.status >= 200 && xhr.status < 300) {
+                try {
+                    const result = JSON.parse(xhr.responseText);
+                    if (result.success) {
+                        const filePath = result.file_path || result.model_path;
+                        updateNodeConfig(nodeId, propName, filePath);
+                        
+                        const nodeData = state.nodes.get(nodeId);
+                        renderProperties(nodeData);
+                        
+                        showToast(`Uploaded: ${file.name}`);
+                    } else {
+                        showToast(`Upload failed: ${result.error}`, 'error');
+                    }
+                } catch (parseErr) {
+                    showToast(`Upload failed: invalid server response`, 'error');
+                }
+            } else {
+                let errorMsg = `Upload failed (${xhr.status})`;
+                try {
+                    const errResult = JSON.parse(xhr.responseText);
+                    errorMsg = errResult.error || errResult.message || errorMsg;
+                } catch (_) { /* use default */ }
+                showToast(errorMsg, 'error');
+            }
+        });
+        
+        xhr.addEventListener('error', () => {
+            if (progressContainer) progressContainer.style.display = 'none';
+            showToast('Upload failed: network error', 'error');
+        });
+        
+        xhr.addEventListener('abort', () => {
+            if (progressContainer) progressContainer.style.display = 'none';
+        });
+        
+        xhr.open('POST', url);
+        xhr.send(formData);
+    };
+    
+    input.click();
+}
+
+// Rules editor for switch node
+function renderRulesEditor(nodeId, propName, rules) {
+    let html = '<div class="rules-editor">';
+    
+    rules.forEach((rule, index) => {
+        html += `
+            <div class="rule-item" data-rule-index="${index}">
+                <div class="rule-header">
+                    <span class="rule-label">Rule ${index + 1} → Output ${index + 1}</span>
+                    <button class="btn-icon" onclick="window.removeRule('${nodeId}', '${propName}', ${index})" title="Delete rule">✕</button>
+                </div>
+                <div class="rule-config">
+                    <select class="rule-operator" onchange="window.updateRule('${nodeId}', '${propName}', ${index}, 'operator', this.value)">
+                        ${getOperatorOptions(rule.operator || 'eq')}
+                    </select>
+                    <input type="text" class="rule-value" placeholder="Value" 
+                           value="${rule.value || ''}"
+                           onchange="window.updateRule('${nodeId}', '${propName}', ${index}, 'value', this.value)">
+                    <select class="rule-type" onchange="window.updateRule('${nodeId}', '${propName}', ${index}, 'valueType', this.value)">
+                        ${getValueTypeOptions(rule.valueType || 'str')}
+                    </select>
+                </div>
+            </div>
+        `;
+    });
+    
+    html += `
+        <button class="btn btn-secondary btn-sm" onclick="window.addRule('${nodeId}', '${propName}')">+ Add Rule</button>
+    </div>`;
+    
+    return html;
+}
+
+function getOperatorOptions(selected) {
+    const operators = [
+        { value: 'eq', label: '==' },
+        { value: 'neq', label: '!=' },
+        { value: 'lt', label: '<' },
+        { value: 'lte', label: '<=' },
+        { value: 'gt', label: '>' },
+        { value: 'gte', label: '>=' },
+        { value: 'between', label: 'between' },
+        { value: 'contains', label: 'contains' },
+        { value: 'matches', label: 'matches regex' },
+        { value: 'true', label: 'is true' },
+        { value: 'false', label: 'is false' },
+        { value: 'null', label: 'is null' },
+        { value: 'nnull', label: 'is not null' },
+        { value: 'empty', label: 'is empty' },
+        { value: 'nempty', label: 'is not empty' },
+        { value: 'haskey', label: 'has key' },
+        { value: 'else', label: 'otherwise' }
+    ];
+    
+    return operators.map(op => 
+        `<option value="${op.value}" ${op.value === selected ? 'selected' : ''}>${op.label}</option>`
+    ).join('');
+}
+
+function getValueTypeOptions(selected) {
+    const types = [
+        { value: 'str', label: 'string' },
+        { value: 'num', label: 'number' },
+        { value: 'bool', label: 'boolean' },
+        { value: 'json', label: 'JSON' }
+    ];
+    
+    return types.map(type => 
+        `<option value="${type.value}" ${type.value === selected ? 'selected' : ''}>${type.label}</option>`
+    ).join('');
+}
+
+export function addRule(nodeId, propName) {
+    const nodeData = state.nodes.get(nodeId);
+    const rules = nodeData.config[propName] || [];
+    
+    rules.push({
+        operator: 'eq',
+        value: '',
+        valueType: 'str'
+    });
+    
+    nodeData.config[propName] = rules;
+    
+    // Update output count to match rules
+    updateNodeOutputCount(nodeId, rules.length);
+    
+    markNodeModified(nodeId);
+    setModified(true);
+    renderProperties(nodeData);
+}
+
+export function removeRule(nodeId, propName, ruleIndex) {
+    const nodeData = state.nodes.get(nodeId);
+    const rules = nodeData.config[propName] || [];
+    
+    if (rules.length > 1) {
+        rules.splice(ruleIndex, 1);
+        nodeData.config[propName] = rules;
+        
+        // Update output count to match rules
+        updateNodeOutputCount(nodeId, rules.length);
+        
+        markNodeModified(nodeId);
+        setModified(true);
+        renderProperties(nodeData);
+    }
+}
+
+export function updateRule(nodeId, propName, ruleIndex, field, value) {
+    const nodeData = state.nodes.get(nodeId);
+    const rules = nodeData.config[propName] || [];
+    
+    if (rules[ruleIndex]) {
+        rules[ruleIndex][field] = value;
+        nodeData.config[propName] = rules;
+        
+        markNodeModified(nodeId);
+        setModified(true);
+    }
+}
+
+// Inject properties editor for inject node
+function renderInjectPropsEditor(nodeId, propName, props) {
+    let html = '<div class="inject-props-editor">';
+    
+    props.forEach((prop, index) => {
+        html += `
+            <div class="inject-prop-row" data-prop-index="${index}">
+                <span class="inject-prop-prefix">msg.</span>
+                <input type="text" class="inject-prop-key" placeholder="payload" 
+                       value="${prop.property || ''}"
+                       onchange="window.updateInjectProp('${nodeId}', '${propName}', ${index}, 'property', this.value)">
+                <span class="inject-prop-eq">=</span>
+                <select class="inject-prop-type" onchange="window.updateInjectProp('${nodeId}', '${propName}', ${index}, 'valueType', this.value)">
+                    ${getInjectValueTypeOptions(prop.valueType || 'str')}
+                </select>
+                ${renderInjectValueInput(nodeId, propName, index, prop)}
+                <button class="btn-icon-sm" onclick="window.removeInjectProp('${nodeId}', '${propName}', ${index})" title="Delete">✕</button>
+            </div>
+        `;
+    });
+    
+    html += `
+        <button class="btn btn-secondary btn-sm" onclick="window.addInjectProp('${nodeId}', '${propName}')">+ Add</button>
+    </div>`;
+    
+    return html;
+}
+
+function getInjectValueTypeOptions(selected) {
+    const types = [
+        { value: 'str', icon: 'az', label: 'string' },
+        { value: 'num', icon: '123', label: 'number' },
+        { value: 'bool', icon: 't/f', label: 'boolean' },
+        { value: 'json', icon: '{ }', label: 'JSON' },
+        { value: 'date', icon: '⏱', label: 'timestamp' },
+        { value: 'env', icon: 'env', label: 'env variable' }
+    ];
+    
+    return types.map(type => 
+        `<option value="${type.value}" ${type.value === selected ? 'selected' : ''} data-icon="${type.icon}">${type.value === selected ? type.icon : type.label}</option>`
+    ).join('');
+}
+
+function renderInjectValueInput(nodeId, propName, index, prop) {
+    const valueType = prop.valueType || 'str';
+    const value = prop.value !== undefined ? prop.value : '';
+    
+    if (valueType === 'date') {
+        return '<input type="text" class="inject-prop-value" disabled placeholder="timestamp">';
+    } else if (valueType === 'bool') {
+        return `<select class="inject-prop-value" onchange="window.updateInjectProp('${nodeId}', '${propName}', ${index}, 'value', this.value)"><option value="true" ${value === 'true' || value === true ? 'selected' : ''}>true</option><option value="false" ${value === 'false' || value === false ? 'selected' : ''}>false</option></select>`;
+    } else if (valueType === 'json') {
+        const escaped = String(value).replace(/"/g, '&quot;');
+        return `<input type="text" class="inject-prop-value inject-prop-json" placeholder='{"key":"value"}' value="${escaped}" onchange="window.updateInjectProp('${nodeId}', '${propName}', ${index}, 'value', this.value)">`;
+    } else {
+        const placeholder = valueType === 'num' ? '0' : valueType === 'env' ? 'ENV_VAR' : '';
+        return `<input type="text" class="inject-prop-value" placeholder="${placeholder}" value="${value}" onchange="window.updateInjectProp('${nodeId}', '${propName}', ${index}, 'value', this.value)">`;
+    }
+}
+
+export function addInjectProp(nodeId, propName) {
+    const nodeData = state.nodes.get(nodeId);
+    const props = nodeData.config[propName] || [];
+    
+    props.push({
+        property: 'payload',
+        valueType: 'date',
+        value: ''
+    });
+    
+    nodeData.config[propName] = props;
+    
+    markNodeModified(nodeId);
+    setModified(true);
+    renderProperties(nodeData);
+}
+
+export function removeInjectProp(nodeId, propName, propIndex) {
+    const nodeData = state.nodes.get(nodeId);
+    const props = nodeData.config[propName] || [];
+    
+    if (props.length > 0) {
+        props.splice(propIndex, 1);
+        nodeData.config[propName] = props;
+        
+        markNodeModified(nodeId);
+        setModified(true);
+        renderProperties(nodeData);
+    }
+}
+
+export function updateInjectProp(nodeId, propName, propIndex, field, value) {
+    const nodeData = state.nodes.get(nodeId);
+    const props = nodeData.config[propName] || [];
+    
+    if (props[propIndex]) {
+        props[propIndex][field] = value;
+        nodeData.config[propName] = props;
+        
+        // Re-render if type changed to update value input
+        if (field === 'valueType') {
+            renderProperties(nodeData);
+        }
+        
+        markNodeModified(nodeId);
+        setModified(true);
+    }
+}
+
+// Change rules editor for change node (Node-RED style)
+function renderChangeRulesEditor(nodeId, propName, rules) {
+    let html = '<div class="change-rules-editor">';
+    
+    rules.forEach((rule, index) => {
+        html += renderChangeRuleItem(nodeId, propName, rule, index);
+    });
+    
+    html += `
+        <button class="btn btn-secondary btn-sm" onclick="window.addChangeRule('${nodeId}', '${propName}')">+ Add Rule</button>
+    </div>`;
+    
+    return html;
+}
+
+function renderChangeRuleItem(nodeId, propName, rule, index) {
+    const ruleType = rule.type || 'set';
+    const path = rule.path || 'msg.payload';
+    const value = rule.value !== undefined ? rule.value : '';
+    const valueType = rule.valueType || 'str';
+    const search = rule.search || '';
+    const replace = rule.replace || '';
+    const searchType = rule.searchType || 'str';
+    const replaceType = rule.replaceType || 'str';
+    
+    let html = `
+        <div class="change-rule-item" data-rule-index="${index}">
+            <div class="change-rule-header">
+                <select class="change-rule-type" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'type', this.value)">
+                    ${getChangeRuleTypeOptions(ruleType)}
+                </select>
+                <button class="btn-icon-sm" onclick="window.removeChangeRule('${nodeId}', '${propName}', ${index})" title="Delete rule">✕</button>
+            </div>
+            <div class="change-rule-config">
+    `;
+    
+    if (ruleType === 'set') {
+        html += `
+            <div class="change-rule-row">
+                <input type="text" class="change-rule-path" placeholder="msg.payload" 
+                       value="${path}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'path', this.value)">
+                <span class="change-rule-to">to</span>
+                <select class="change-rule-value-type" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'valueType', this.value)">
+                    ${getChangeValueTypeOptions(valueType)}
+                </select>
+                ${renderChangeValueInput(nodeId, propName, index, value, valueType)}
+            </div>
+        `;
+    } else if (ruleType === 'change') {
+        html += `
+            <div class="change-rule-row">
+                <span class="change-rule-label">in</span>
+                <input type="text" class="change-rule-path" placeholder="msg.payload" 
+                       value="${path}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'path', this.value)">
+            </div>
+            <div class="change-rule-row">
+                <span class="change-rule-label">search</span>
+                <select class="change-rule-search-type" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'searchType', this.value)">
+                    ${getChangeSearchTypeOptions(searchType)}
+                </select>
+                <input type="text" class="change-rule-search" placeholder="search" 
+                       value="${escapeHtml(search)}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'search', this.value)">
+            </div>
+            <div class="change-rule-row">
+                <span class="change-rule-label">replace</span>
+                <select class="change-rule-replace-type" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'replaceType', this.value)">
+                    ${getChangeReplaceTypeOptions(replaceType)}
+                </select>
+                <input type="text" class="change-rule-replace" placeholder="replace" 
+                       value="${escapeHtml(replace)}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'replace', this.value)">
+            </div>
+        `;
+    } else if (ruleType === 'delete') {
+        html += `
+            <div class="change-rule-row">
+                <input type="text" class="change-rule-path" placeholder="msg.payload" 
+                       value="${path}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'path', this.value)">
+            </div>
+        `;
+    } else if (ruleType === 'move') {
+        const toPath = rule.toPath || '';
+        html += `
+            <div class="change-rule-row">
+                <input type="text" class="change-rule-path" placeholder="msg.payload" 
+                       value="${path}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'path', this.value)">
+                <span class="change-rule-to">to</span>
+                <input type="text" class="change-rule-to-path" placeholder="msg.newPayload" 
+                       value="${toPath}"
+                       onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'toPath', this.value)">
+            </div>
+        `;
+    }
+    
+    html += `
+            </div>
+        </div>
+    `;
+    
+    return html;
+}
+
+function escapeHtml(str) {
+    if (str === null || str === undefined) return '';
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+function getChangeRuleTypeOptions(selected) {
+    const types = [
+        { value: 'set', label: 'Set' },
+        { value: 'change', label: 'Change' },
+        { value: 'delete', label: 'Delete' },
+        { value: 'move', label: 'Move' }
+    ];
+    
+    return types.map(type => 
+        `<option value="${type.value}" ${type.value === selected ? 'selected' : ''}>${type.label}</option>`
+    ).join('');
+}
+
+function getChangeValueTypeOptions(selected) {
+    const types = [
+        { value: 'str', label: 'string' },
+        { value: 'num', label: 'number' },
+        { value: 'bool', label: 'boolean' },
+        { value: 'json', label: 'JSON' },
+        { value: 'path', label: 'msg. path' },
+        { value: 'date', label: 'timestamp' },
+        { value: 'env', label: 'env var' }
+    ];
+    
+    return types.map(type => 
+        `<option value="${type.value}" ${type.value === selected ? 'selected' : ''}>${type.label}</option>`
+    ).join('');
+}
+
+function getChangeSearchTypeOptions(selected) {
+    const types = [
+        { value: 'str', label: 'string' },
+        { value: 'regex', label: 'regex' }
+    ];
+    
+    return types.map(type => 
+        `<option value="${type.value}" ${type.value === selected ? 'selected' : ''}>${type.label}</option>`
+    ).join('');
+}
+
+function getChangeReplaceTypeOptions(selected) {
+    const types = [
+        { value: 'str', label: 'string' },
+        { value: 'path', label: 'msg. path' }
+    ];
+    
+    return types.map(type => 
+        `<option value="${type.value}" ${type.value === selected ? 'selected' : ''}>${type.label}</option>`
+    ).join('');
+}
+
+function renderChangeValueInput(nodeId, propName, index, value, valueType) {
+    const escaped = escapeHtml(value);
+    
+    if (valueType === 'bool') {
+        const boolVal = value === true || value === 'true';
+        return `<select class="change-rule-value" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'value', this.value === 'true')">
+            <option value="true" ${boolVal ? 'selected' : ''}>true</option>
+            <option value="false" ${!boolVal ? 'selected' : ''}>false</option>
+        </select>`;
+    } else if (valueType === 'date') {
+        return '<input type="text" class="change-rule-value" disabled placeholder="timestamp">';
+    } else if (valueType === 'json') {
+        return `<input type="text" class="change-rule-value change-rule-json" placeholder='{"key":"value"}' value="${escaped}" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'value', this.value)">`;
+    } else if (valueType === 'path') {
+        return `<input type="text" class="change-rule-value" placeholder="payload.data" value="${escaped}" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'value', this.value)">`;
+    } else {
+        const placeholder = valueType === 'num' ? '0' : valueType === 'env' ? 'ENV_VAR' : '';
+        return `<input type="text" class="change-rule-value" placeholder="${placeholder}" value="${escaped}" onchange="window.updateChangeRule('${nodeId}', '${propName}', ${index}, 'value', this.value)">`;
+    }
+}
+
+export function addChangeRule(nodeId, propName) {
+    const nodeData = state.nodes.get(nodeId);
+    const rules = nodeData.config[propName] || [];
+    
+    rules.push({
+        type: 'set',
+        path: 'msg.payload',
+        value: '',
+        valueType: 'str'
+    });
+    
+    nodeData.config[propName] = rules;
+    
+    markNodeModified(nodeId);
+    setModified(true);
+    renderProperties(nodeData);
+}
+
+export function removeChangeRule(nodeId, propName, ruleIndex) {
+    const nodeData = state.nodes.get(nodeId);
+    const rules = nodeData.config[propName] || [];
+    
+    if (rules.length > 0) {
+        rules.splice(ruleIndex, 1);
+        nodeData.config[propName] = rules;
+        
+        markNodeModified(nodeId);
+        setModified(true);
+        renderProperties(nodeData);
+    }
+}
+
+export function updateChangeRule(nodeId, propName, ruleIndex, field, value) {
+    const nodeData = state.nodes.get(nodeId);
+    const rules = nodeData.config[propName] || [];
+    
+    if (rules[ruleIndex]) {
+        rules[ruleIndex][field] = value;
+        nodeData.config[propName] = rules;
+        
+        // Re-render if type changed to update inputs
+        if (field === 'type' || field === 'valueType') {
+            renderProperties(nodeData);
+        }
+        
+        markNodeModified(nodeId);
+        setModified(true);
+    }
+}
+
+// Update property visibility based on current config values
+window.updatePropertyVisibility = function(nodeId) {
+    const nodeData = state.nodes.get(nodeId);
+    if (!nodeData) return;
+    
+    const nodeType = getNodeType(nodeData.type);
+    if (!nodeType || !nodeType.properties) return;
+    
+    // Get all property groups
+    const propertyGroups = document.querySelectorAll('.property-group[data-show-if]');
+    
+    propertyGroups.forEach(group => {
+        const showIfStr = group.getAttribute('data-show-if');
+        if (!showIfStr) return;
+        
+        try {
+            const showIf = JSON.parse(showIfStr);
+            const shouldShow = shouldShowProperty(showIf, nodeData.config);
+            
+            if (shouldShow) {
+                group.style.display = '';
+            } else {
+                group.style.display = 'none';
+            }
+        } catch (e) {
+            console.error('Error parsing showIf condition:', e);
+        }
+    });
+};
+
+// ==============================================================================
+// MQTT Service Management Functions
+// ==============================================================================
+
+// Load available MQTT services into a select dropdown
+window.loadMqttServices = async function(nodeId, propName, currentServiceId) {
+    try {
+        const response = await fetch(`${API_BASE}/services/mqtt`);
+        const data = await response.json();
+        
+        if (!data.success) {
+            console.error('Failed to load MQTT services:', data.error);
+            return;
+        }
+        
+        const select = document.getElementById(`mqtt-service-${nodeId}`);
+        if (!select) return;
+        
+        // Clear existing options except the first placeholder
+        select.innerHTML = '<option value="">-- Select broker --</option>';
+        
+        // Add service options
+        data.services.forEach(service => {
+            const option = document.createElement('option');
+            option.value = service.id;
+            option.textContent = `${service.name} (${service.broker}:${service.port})`;
+            if (service.id === currentServiceId) {
+                option.selected = true;
+            }
+            select.appendChild(option);
+        });
+    } catch (error) {
+        console.error('Error loading MQTT services:', error);
+    }
+};
+
+// Handle MQTT service selection change
+window.onMqttServiceSelect = function(nodeId, propName, serviceId) {
+    const nodeData = state.nodes.get(nodeId);
+    if (!nodeData) return;
+    
+    nodeData.config[propName] = serviceId;
+    markNodeModified(nodeId);
+    setModified(true);
+};
+
+// Open MQTT service editor modal
+window.openMqttServiceEditor = function(nodeId, propName, isNew = false) {
+    const nodeData = state.nodes.get(nodeId);
+    const currentServiceId = isNew ? null : (nodeData?.config[propName] || null);
+    
+    // Create modal HTML
+    const modalHtml = `
+        <div class="mqtt-service-modal" id="mqtt-service-modal">
+            <div class="mqtt-service-modal-content">
+                <div class="mqtt-service-modal-header">
+                    <h3>${isNew ? 'Add New MQTT Broker' : 'Edit MQTT Broker'}</h3>
+                    <button class="mqtt-service-modal-close" onclick="window.closeMqttServiceModal()">&times;</button>
+                </div>
+                <div class="mqtt-service-modal-body">
+                    <input type="hidden" id="mqtt-service-id" value="${currentServiceId || ''}">
+                    <div class="property-group">
+                        <label class="property-label">Name</label>
+                        <input type="text" class="property-input" id="mqtt-service-name" placeholder="My MQTT Broker">
+                    </div>
+                    <div class="property-group">
+                        <label class="property-label">Broker Address</label>
+                        <input type="text" class="property-input" id="mqtt-service-broker" placeholder="localhost" value="localhost">
+                    </div>
+                    <div class="property-group">
+                        <label class="property-label">Port</label>
+                        <input type="number" class="property-input" id="mqtt-service-port" placeholder="1883" value="1883">
+                    </div>
+                    <div class="property-group">
+                        <label class="property-label">Client ID (optional)</label>
+                        <input type="text" class="property-input" id="mqtt-service-clientId" placeholder="Auto-generated if empty">
+                    </div>
+                    <div class="property-group">
+                        <label class="property-label">Username (optional)</label>
+                        <input type="text" class="property-input" id="mqtt-service-username">
+                    </div>
+                    <div class="property-group">
+                        <label class="property-label">Password (optional)</label>
+                        <input type="password" class="property-input" id="mqtt-service-password">
+                    </div>
+                </div>
+                <div class="mqtt-service-modal-footer">
+                    <button class="btn btn-secondary" onclick="window.testMqttService()">Test Connection</button>
+                    <div class="mqtt-service-modal-actions">
+                        ${!isNew ? '<button class="btn btn-danger" onclick="window.deleteMqttService(\'' + nodeId + '\', \'' + propName + '\')">Delete</button>' : ''}
+                        <button class="btn btn-secondary" onclick="window.closeMqttServiceModal()">Cancel</button>
+                        <button class="btn btn-primary" onclick="window.saveMqttService('${nodeId}', '${propName}', ${isNew})">Save</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    // Add modal to page
+    document.body.insertAdjacentHTML('beforeend', modalHtml);
+    
+    // If editing, load existing service data
+    if (!isNew && currentServiceId) {
+        window.loadMqttServiceData(currentServiceId);
+    }
+};
+
+// Load existing service data into the editor
+window.loadMqttServiceData = async function(serviceId) {
+    try {
+        const response = await fetch(`${API_BASE}/services/mqtt/${serviceId}`);
+        const data = await response.json();
+        
+        if (data.success && data.service) {
+            document.getElementById('mqtt-service-name').value = data.service.name || '';
+            document.getElementById('mqtt-service-broker').value = data.service.broker || 'localhost';
+            document.getElementById('mqtt-service-port').value = data.service.port || 1883;
+            document.getElementById('mqtt-service-clientId').value = data.service.clientId || '';
+            document.getElementById('mqtt-service-username').value = data.service.username || '';
+            document.getElementById('mqtt-service-password').value = data.service.password || '';
+        }
+    } catch (error) {
+        console.error('Error loading MQTT service:', error);
+    }
+};
+
+// Close the MQTT service modal
+window.closeMqttServiceModal = function() {
+    const modal = document.getElementById('mqtt-service-modal');
+    if (modal) {
+        modal.remove();
+    }
+};
+
+// Save MQTT service (create or update)
+window.saveMqttService = async function(nodeId, propName, isNew) {
+    const serviceId = document.getElementById('mqtt-service-id').value;
+    const serviceData = {
+        name: document.getElementById('mqtt-service-name').value,
+        broker: document.getElementById('mqtt-service-broker').value,
+        port: parseInt(document.getElementById('mqtt-service-port').value) || 1883,
+        clientId: document.getElementById('mqtt-service-clientId').value,
+        username: document.getElementById('mqtt-service-username').value,
+        password: document.getElementById('mqtt-service-password').value
+    };
+    
+    // Validate
+    if (!serviceData.name) {
+        alert('Please enter a name for the broker');
+        return;
+    }
+    if (!serviceData.broker) {
+        alert('Please enter a broker address');
+        return;
+    }
+    
+    try {
+        let response;
+        if (isNew || !serviceId) {
+            // Create new service
+            response = await fetch(`${API_BASE}/services/mqtt`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(serviceData)
+            });
+        } else {
+            // Update existing service
+            response = await fetch(`${API_BASE}/services/mqtt/${serviceId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(serviceData)
+            });
+        }
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // Update node config with new/updated service ID
+            const nodeData = state.nodes.get(nodeId);
+            if (nodeData) {
+                nodeData.config[propName] = data.service.id;
+                markNodeModified(nodeId);
+                setModified(true);
+            }
+            
+            // Reload services dropdown
+            await window.loadMqttServices(nodeId, propName, data.service.id);
+            
+            // Close modal
+            window.closeMqttServiceModal();
+        } else {
+            alert('Failed to save: ' + (data.error || 'Unknown error'));
+        }
+    } catch (error) {
+        console.error('Error saving MQTT service:', error);
+        alert('Error saving MQTT service');
+    }
+};
+
+// Test MQTT service connection
+window.testMqttService = async function() {
+    const serviceId = document.getElementById('mqtt-service-id').value;
+    
+    if (!serviceId) {
+        // For new services, we need to save first
+        alert('Please save the broker configuration first, then test the connection.');
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${API_BASE}/services/mqtt/${serviceId}/test`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        
+        if (data.success) {
+            if (data.connected) {
+                alert('✓ Connection successful!');
+            } else {
+                alert('✗ Connection failed. Please check your settings.');
+            }
+        } else {
+            alert('Test failed: ' + (data.error || 'Unknown error'));
+        }
+    } catch (error) {
+        console.error('Error testing MQTT service:', error);
+        alert('Error testing connection');
+    }
+};
+
+// Delete MQTT service
+window.deleteMqttService = async function(nodeId, propName) {
+    const serviceId = document.getElementById('mqtt-service-id').value;
+    
+    if (!serviceId) return;
+    
+    if (!confirm('Are you sure you want to delete this broker configuration?')) {
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${API_BASE}/services/mqtt/${serviceId}`, {
+            method: 'DELETE'
+        });
+        const data = await response.json();
+        
+        if (data.success) {
+            // Clear node config
+            const nodeData = state.nodes.get(nodeId);
+            if (nodeData) {
+                nodeData.config[propName] = '';
+                markNodeModified(nodeId);
+                setModified(true);
+            }
+            
+            // Reload services dropdown
+            await window.loadMqttServices(nodeId, propName, '');
+            
+            // Close modal
+            window.closeMqttServiceModal();
+        } else {
+            alert('Failed to delete: ' + (data.error || 'Service may still be in use'));
+        }
+    } catch (error) {
+        console.error('Error deleting MQTT service:', error);
+        alert('Error deleting MQTT service');
+    }
+};