Spaces:

Ramesh-vani
/

nottri-lang

Running

App Files Files Community

Ramesh-vani commited on Mar 7

Commit

42076a5

verified ·

1 Parent(s): 2cf8873

Update index.html

Browse files

Files changed (1) hide show

index.html +713 -420

index.html CHANGED Viewed

@@ -1,450 +1,743 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visual Programming Language</title>
-    <style>
-        body { margin: 0; font-family: Arial, sans-serif; }
-        #canvas {
-            width: 100vw;
-            height: 100vh;
-            background: #f0f0f0;
-            position: relative;
-            overflow: auto;
-        }
-        .node {
-            position: absolute;
-            width: 250px;
-            background: #fff;
-            border: 2px solid #333;
-            border-radius: 5px;
-            padding: 10px;
-            cursor: move;
-            user-select: none;
-            z-index: 1;
-        }
-        .node-header { font-weight: bold; margin-bottom: 5px; }
-        .port {
-            width: 10px;
-            height: 10px;
-            background: #666;
-            border-radius: 50%;
-            position: absolute;
-            cursor: pointer;
-        }
-        .port-input { left: -15px; top: 50%; transform: translateY(-50%); }
-        .port-output { right: -15px; }
-        .port-output-true { right: -15px; top: 30%; }
-        .port-output-false { right: -15px; top: 70%; }
-        #toolbar {
-            position: fixed;
-            top: 10px;
-            left: 10px;
-            background: #ddd;
-            padding: 10px;
-            border-radius: 5px;
-            z-index: 10;
-        }
-        button { margin: 2px; }
-        #connections {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 0;
-        }
-        input { width: 80%; margin: 5px 0; }
-        .case-container { margin: 5px 0; display: flex; align-items: center; }
-        .label { font-size: 12px; color: #555; position: absolute; right: -50px; }
-        .arg-container { margin: 5px 0; }
-    </style>
 </head>
 <body>
-    <div id="toolbar">
-        <button onclick="addNode('Variable')">Variable</button>
-        <button onclick="addNode('Assign')">Assign</button>
-        <button onclick="addNode('Print')">Print</button>
-        <button onclick="addNode('Function')">Function</button>
-        <button onclick="addNode('Return')">Return</button>
-        <button onclick="addNode('Call')">Call</button>
-        <button onclick="addNode('If')">If</button>
-        <button onclick="addNode('WhileLoop')">While Loop</button>
-        <button onclick="addNode('Switch')">Switch</button>
-        <button onclick="addNode('Break')">Break</button>
-        <button onclick="addNode('Continue')">Continue</button>
-        <button onclick="runWorkflow()">Run Workflow</button>
-    </div>
-    <div id="canvas">
-        <svg id="connections"></svg>
-    </div>
-    <script>
-        const canvas = document.getElementById('canvas');
-        const connectionsSvg = document.getElementById('connections');
-        let nodes = [];
-        let connections = [];
-        let draggingNode = null;
-        let draggingPort = null;
-        let offsetX, offsetY;
-        let variables = {};
-        let functionReturns = {};
-        // Add a new node
-        function addNode(type) {
-            const node = document.createElement('div');
-            node.className = 'node';
-            node.style.left = `${Math.random() * 300 + 50}px`;
-            node.style.top = `${Math.random() * 300 + 50}px`;
-            node.dataset.type = type;
-            let html = `<div class="node-header">${type}</div>`;
-            if (type === 'Variable') {
-                html += `
-                    <input type="text" class="var-name" placeholder="Variable Name">
-                    <input type="text" class="var-value" placeholder="Value">
-                    <div class="port port-output" data-type="output"></div>
-                `;
-            } else if (type === 'Assign') {
-                html += `
-                    <input type="text" class="assign-expr" placeholder="Assignment (e.g., i = i + 1)">
-                    <div class="port port-input" data-type="input"></div>
-                    <div class="port port-output" data-type="output"></div>
-                `;
-            } else if (type === 'Print') {
-                html += `
-                    <input type="text" class="print-value" placeholder="Variable or Text">
-                    <div class="port port-input" data-type="input"></div>
-                `;
-            } else if (type === 'Function') {
-                html += `
-                    <input type="text" class="func-name" placeholder="Function Name">
-                    <div class="arg-container">
-                        <input type="text" class="arg-name" placeholder="Arg Name (e.g., a)">
-                    </div>
-                    <button onclick="addArg(this.parentElement)">Add Arg</button>
-                    <div class="port port-input" data-type="input"></div>
-                    <div class="port port-output" data-type="output"></div>
-                `;
-            } else if (type === 'Return') {
-                html += `
-                    <input type="text" class="return-value" placeholder="Return Value (e.g., x + 1)">
-                    <div class="port port-input" data-type="input"></div>
-                `;
-            } else if (type === 'Call') {
-                html += `
-                    <input type="text" class="call-name" placeholder="Function Name (e.g., add)">
-                    <div class="arg-container">
-                        <input type="text" class="call-arg" placeholder="Arg Value (e.g., 3)">
-                    </div>
-                    <button onclick="addCallArg(this.parentElement)">Add Arg</button>
-                    <input type="text" class="call-result" placeholder="Result Var (e.g., z)">
-                    <div class="port port-input" data-type="input"></div>
-                    <div class="port port-output" data-type="output"></div>
-                `;
-            } else if (type === 'If') {
-                html += `
-                    <input type="text" class="condition" placeholder="Condition (e.g., x > 5)">
-                    <div class="port port-input" data-type="input"></div>
-                    <div class="port port-output-true" data-type="output" data-branch="true"><span class="label">True</span></div>
-                    <div class="port port-output-false" data-type="output" data-branch="false"><span class="label">False</span></div>
-                `;
-            } else if (type === 'WhileLoop') {
-                html += `
-                    <input type="text" class="condition" placeholder="Condition (e.g., i < 5)">
-                    <input type="text" class="update" placeholder="Update (e.g., i = i + 1)">
-                    <div class="port port-input" data-type="input"></div>
-                    <div class="port port-output" data-type="output"></div>
-                `;
-            } else if (type === 'Switch') {
-                html += `
-                    <input type="text" class="switch-var" placeholder="Variable to Switch">
-                    <div class="case-container">
-                        <input type="text" class="case-value" placeholder="Case Value (e.g., 1)">
-                        <input type="checkbox" class="case-break" title="Break after this case">
-                        <div class="port port-output" data-type="output" data-case="0"></div>
-                    </div>
-                    <button onclick="addCase(this.parentElement)">Add Case</button>
-                    <div class="port port-input" data-type="input"></div>
-                `;
-            } else if (type === 'Break' || type === 'Continue') {
-                html += `
-                    <div class="port port-input" data-type="input"></div>
-                `;
-            }
-            node.innerHTML = html;
-            canvas.appendChild(node);
-            nodes.push(node);
-            // Dragging node
-            node.addEventListener('mousedown', (e) => {
-                if (!e.target.classList.contains('port') && e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
-                    draggingNode = node;
-                    const rect = node.getBoundingClientRect();
-                    offsetX = e.clientX - rect.left;
-                    offsetY = e.clientY - rect.top;
-                }
-            });
-            // Connecting ports
-            const ports = node.querySelectorAll('.port');
-            ports.forEach(port => {
-                port.addEventListener('mousedown', (e) => {
-                    e.stopPropagation();
-                    draggingPort = port;
-                });
-            });
-        }
-        // Add a new argument to Function node
-        function addArg(funcNode) {
-            const argCount = funcNode.querySelectorAll('.arg-container').length;
-            const argDiv = document.createElement('div');
-            argDiv.className = 'arg-container';
-            argDiv.innerHTML = `<input type="text" class="arg-name" placeholder="Arg Name (e.g., arg${argCount + 1})">`;
-            funcNode.insertBefore(argDiv, funcNode.querySelector('button'));
         }
-        // Add a new argument to Call node
-        function addCallArg(callNode) {
-            const argCount = callNode.querySelectorAll('.arg-container').length;
-            const argDiv = document.createElement('div');
-            argDiv.className = 'arg-container';
-            argDiv.innerHTML = `<input type="text" class="call-arg" placeholder="Arg Value (e.g., ${argCount + 1})">`;
-            callNode.insertBefore(argDiv, callNode.querySelector('button'));
         }
-        // Add a new case to Switch node
-        function addCase(switchNode) {
-            const caseCount = switchNode.querySelectorAll('.case-container').length;
-            const caseDiv = document.createElement('div');
-            caseDiv.className = 'case-container';
-            caseDiv.innerHTML = `
-                <input type="text" class="case-value" placeholder="Case Value (e.g., ${caseCount + 1})">
-                <input type="checkbox" class="case-break" title="Break after this case">
-                <div class="port port-output" data-type="output" data-case="${caseCount}"></div>
-            `;
-            switchNode.insertBefore(caseDiv, switchNode.querySelector('button'));
-            const newPort = caseDiv.querySelector('.port');
-            newPort.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-                draggingPort = newPort;
-            });
         }
-        // Handle dragging
-        document.addEventListener('mousemove', (e) => {
-            if (draggingNode) {
-                const canvasRect = canvas.getBoundingClientRect();
-                const x = e.clientX - offsetX - canvasRect.left;
-                const y = e.clientY - offsetY - canvasRect.top;
-                draggingNode.style.left = `${x}px`;
-                draggingNode.style.top = `${y}px`;
-                updateConnections();
-            }
-        });
-        // Handle mouse up
-        document.addEventListener('mouseup', (e) => {
-            if (draggingNode) draggingNode = null;
-            if (draggingPort) {
-                const targetPort = e.target.closest('.port');
-                if (targetPort && targetPort !== draggingPort &&
-                    draggingPort.dataset.type !== targetPort.dataset.type) {
-                    connections.push({ from: draggingPort, to: targetPort });
-                    updateConnections();
-                }
-                draggingPort = null;
-            }
-        });
-        // Update connection lines
-        function updateConnections() {
-            connectionsSvg.innerHTML = '';
-            const canvasRect = canvas.getBoundingClientRect();
-            connections.forEach(conn => {
-                const fromRect = conn.from.getBoundingClientRect();
-                const toRect = conn.to.getBoundingClientRect();
-                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                line.setAttribute('x1', fromRect.left + fromRect.width / 2 - canvasRect.left);
-                line.setAttribute('y1', fromRect.top + fromRect.height / 2 - canvasRect.top);
-                line.setAttribute('x2', toRect.left + toRect.width / 2 - canvasRect.left);
-                line.setAttribute('y2', toRect.top + toRect.height / 2 - canvasRect.top);
-                line.setAttribute('stroke', '#333');
-                line.setAttribute('stroke-width', '2');
-                connectionsSvg.appendChild(line);
-            });
         }
-        // Evaluate an expression
-        function evaluateExpression(expr) {
-            if (!expr) return null;
-            try {
-                let evalExpr = expr;
-                for (const [varName, varValue] of Object.entries(variables)) {
-                    evalExpr = evalExpr.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
-                }
-                if (evalExpr.includes('=')) {
-                    const [varName, value] = evalExpr.split('=').map(s => s.trim());
-                    variables[varName] = eval(value);
-                    return null;
-                }
-                return eval(evalExpr);
-            } catch (e) {
-                return `Error in expression: ${e.message}`;
             }
         }
-        // Run the workflow
-        function runWorkflow() {
-            let output = '';
-            variables = {};
-            functionReturns = {};
-            nodes.forEach(n => delete n.dataset.executed);
-            function executeNode(node, loopControl = { break: false, continue: false }, funcContext = null) {
-                if (node.dataset.executed || loopControl.break) return;
-                node.dataset.executed = true;
-                const type = node.dataset.type;
-                if (type === 'Variable') {
-                    const name = node.querySelector('.var-name').value;
-                    const value = node.querySelector('.var-value').value;
-                    variables[name] = isNaN(value) ? value : Number(value);
-                    executeNext(node, 'output', loopControl, funcContext);
-                } else if (type === 'Assign') {
-                    const expr = node.querySelector('.assign-expr').value;
-                    const error = evaluateExpression(expr);
-                    if (error) output += `${error}\n`;
-                    executeNext(node, 'output', loopControl, funcContext);
-                } else if (type === 'Print') {
-                    const value = node.querySelector('.print-value').value;
-                    const printVal = variables[value] !== undefined ? variables[value] : value;
-                    output += `${printVal}\n`;
-                } else if (type === 'Function') {
-                    const funcName = node.querySelector('.func-name').value;
-                    const args = Array.from(node.querySelectorAll('.arg-name')).map(input => input.value);
-                    const prevVars = { ...variables };
-                    funcContext = { name: funcName, args: {}, returned: false };
-                    executeNext(node, 'output', loopControl, funcContext);
-                    variables = prevVars;
-                    if (!funcContext.returned) functionReturns[funcName] = undefined;
-                } else if (type === 'Return') {
-                    if (funcContext) {
-                        const returnValue = node.querySelector('.return-value').value;
-                        const result = evaluateExpression(returnValue);
-                        if (result && !result.startsWith('Error')) {
-                            functionReturns[funcContext.name] = result;
-                        } else if (result) {
-                            output += `${result}\n`;
-                        }
-                        funcContext.returned = true;
-                    }
-                } else if (type === 'Call') {
-                    const callName = node.querySelector('.call-name').value;
-                    const callArgs = Array.from(node.querySelectorAll('.call-arg')).map(input => evaluateExpression(input.value) || input.value);
-                    const resultVar = node.querySelector('.call-result').value;
-                    const targetFunc = nodes.find(n => n.dataset.type === 'Function' && n.querySelector('.func-name').value === callName);
-                    if (targetFunc) {
-                        const funcArgs = Array.from(targetFunc.querySelectorAll('.arg-name')).map(input => input.value);
-                        const prevVars = { ...variables };
-                        funcArgs.forEach((argName, index) => {
-                            variables[argName] = callArgs[index] !== undefined ? callArgs[index] : undefined;
-                        });
-                        const funcContext = { name: callName, args: {}, returned: false };
-                        executeNode(targetFunc, { break: false, continue: false }, funcContext);
-                        variables = prevVars;
-                        if (resultVar && functionReturns[callName] !== undefined) {
-                            variables[resultVar] = functionReturns[callName];
-                        }
-                    } else {
-                        output += `Function ${callName} not found!\n`;
-                    }
-                    executeNext(node, 'output', loopControl, funcContext);
-                } else if (type === 'If') {
-                    const condition = node.querySelector('.condition').value;
-                    let result = false;
-                    try {
-                        let evalCondition = condition;
-                        for (const [varName, varValue] of Object.entries(variables)) {
-                            evalCondition = evalCondition.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
-                        }
-                        result = eval(evalCondition);
-                    } catch (e) {
-                        output += `Error in If condition: ${e.message}\n`;
-                    }
-                    executeNext(node, result ? 'true' : 'false', loopControl, funcContext);
-                } else if (type === 'WhileLoop') {
-                    const condition = node.querySelector('.condition').value;
-                    const update = node.querySelector('.update').value;
-                    let result = true;
-                    while (result && !loopControl.break) {
-                        try {
-                            let evalCondition = condition;
-                            for (const [varName, varValue] of Object.entries(variables)) {
-                                evalCondition = evalCondition.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
-                            }
-                            result = eval(evalCondition);
-                            if (result) {
-                                let innerControl = { break: false, continue: false };
-                                executeNext(node, 'output', innerControl, funcContext);
-                                if (innerControl.continue) continue;
-                                if (innerControl.break) break;
-                                const error = evaluateExpression(update);
-                                if (error) output += `${error}\n`;
-                            }
-                        } catch (e) {
-                            output += `Error in WhileLoop condition: ${e.message}\n`;
-                            break;
-                        }
-                    }
-                } else if (type === 'Switch') {
-                    const switchVar = node.querySelector('.switch-var').value;
-                    const caseInputs = node.querySelectorAll('.case-container');
-                    const value = variables[switchVar];
-                    let matched = false;
-                    for (let [index, container] of caseInputs.entries()) {
-                        const caseValue = container.querySelector('.case-value').value;
-                        const shouldBreak = container.querySelector('.case-break').checked;
-                        if (caseValue == value || matched) {
-                            matched = true;
-                            executeNext(node, index.toString(), loopControl, funcContext);
-                            if (shouldBreak) break;
-                        }
-                    }
-                    if (!matched) output += `No matching case for ${switchVar}=${value}\n`;
-                } else if (type === 'Break') {
-                    loopControl.break = true;
-                } else if (type === 'Continue') {
-                    loopControl.continue = true;
-                }
-            }
-            function executeNext(node, branch, loopControl, funcContext) {
-                let portClass;
-                if (node.dataset.type === 'Switch') {
-                    portClass = `.port-output[data-case="${branch}"]`;
-                } else {
-                    portClass = branch === 'true' ? '.port-output-true' : branch === 'false' ? '.port-output-false' : '.port-output';
-                }
-                const nextConn = connections.find(c => c.from === node.querySelector(portClass));
-                if (nextConn && (!funcContext || !funcContext.returned)) {
-                    const nextNode = nextConn.to.parentElement;
-                    executeNode(nextNode, loopControl, funcContext);
-                }
-            }
-            const startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
-            if (startNodes.length > 0) {
-                startNodes.forEach(node => executeNode(node));
-            } else {
-                nodes.forEach(node => executeNode(node));
             }
-            alert(output || 'No output generated! Check your connections and node settings.');
-        }
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Visual Programming Language</title>
+  <style>
+    body { margin: 0; font-family: Arial, sans-serif; }
+    #canvas {
+      width: 100vw;
+      height: 100vh;
+      background: #f0f0f0;
+      position: relative;
+      overflow: auto;
+    }
+    .node {
+      position: absolute;
+      width: 250px;
+      background: #fff;
+      border: 2px solid #333;
+      border-radius: 5px;
+      padding: 10px;
+      cursor: move;
+      user-select: none;
+      box-sizing: border-box;
+      /* Smooth transition for slight style changes */
+      transition: box-shadow 0.1s ease;
+    }
+    .node.executing { border: 3px solid orange; }
+    .node.error { border-color: red; }
+    .node-header { font-weight: bold; margin-bottom: 5px; }
+    .port {
+      width: 10px;
+      height: 10px;
+      background: #666;
+      border-radius: 50%;
+      position: absolute;
+      cursor: pointer;
+    }
+    .port-input { left: -15px; top: 50%; transform: translateY(-50%); }
+    .port-output { right: -15px; top: 50%; transform: translateY(-50%); }
+    .port-output-true { right: -15px; top: 30%; }
+    .port-output-false { right: -15px; top: 70%; }
+    #toolbar {
+      position: fixed;
+      top: 10px;
+      left: 10px;
+      background: #ddd;
+      padding: 10px;
+      border-radius: 5px;
+      z-index: 1000;
+    }
+    button { margin: 2px; }
+    #connections {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 0;
+    }
+    input { width: 80%; margin: 5px 0; }
+    .case-container { margin: 5px 0; display: flex; align-items: center; }
+    .label { font-size: 12px; color: #555; position: absolute; right: -50px; }
+    .arg-container { margin: 5px 0; }
+    .elements-container input { width: 70%; margin: 3px 0; }
+  </style>
 </head>
 <body>
+  <div id="toolbar">
+    <button onclick="addNode('Variable')">Variable</button>
+    <button onclick="addNode('Assign')">Assign</button>
+    <button onclick="addNode('Print')">Print</button>
+    <button onclick="addNode('Function')">Function</button>
+    <button onclick="addNode('Return')">Return</button>
+    <button onclick="addNode('Call')">Call</button>
+    <button onclick="addNode('If')">If</button>
+    <button onclick="addNode('WhileLoop')">While Loop</button>
+    <button onclick="addNode('Switch')">Switch</button>
+    <button onclick="addNode('Break')">Break</button>
+    <button onclick="addNode('Continue')">Continue</button>
+    <button onclick="addNode('Add')">Add</button>
+    <button onclick="addNode('Subtract')">Subtract</button>
+    <button onclick="addNode('Multiply')">Multiply</button>
+    <button onclick="addNode('Divide')">Divide</button>
+    <button onclick="addNode('Array')">Array</button>
+    <br>
+    <button onclick="runWorkflow()">Run Workflow</button>
+    <button onclick="startStepExecution()">Start Step Execution</button>
+    <button onclick="stepExecution()">Step Execution</button>
+    <button onclick="saveWorkflow()">Save Workflow</button>
+    <button onclick="loadWorkflow()">Load Workflow</button>
+  </div>
+  <div id="canvas">
+    <svg id="connections"></svg>
+  </div>
+  <script>
+    // Global variables and a variable to track the highest z-index
+    const canvas = document.getElementById('canvas');
+    const connectionsSvg = document.getElementById('connections');
+    let nodes = [];
+    let connections = [];
+    let draggingNode = null;
+    let draggingPort = null;
+    let tempLine = null; // temporary connection line
+    let offsetX, offsetY;
+    let variables = {};
+    let functionReturns = {};
+    let nodeIdCounter = 0;
+    const gridSize = 20;
+    let zoomFactor = 1.0;
+    let workflowOutput = "";
+    let executionQueue = [];
+    const controlNodes = ["If", "WhileLoop", "Switch", "Break", "Continue", "Function", "Return"];
+    let highestZ = 100; // initial highest z-index
+    // ----------------------------
+    // Node creation and UI helpers
+    // ----------------------------
+    function addNode(type, options = {}) {
+      const node = document.createElement('div');
+      node.className = 'node';
+      node.dataset.type = type;
+      node.dataset.id = nodeIdCounter++;
+      // Set node position (snapped to grid)
+      const left = options.left || Math.round((Math.random() * 300 + 50) / gridSize) * gridSize;
+      const top = options.top || Math.round((Math.random() * 300 + 50) / gridSize) * gridSize;
+      node.style.left = `${left}px`;
+      node.style.top = `${top}px`;
+      // Ensure node is on top when created
+      highestZ++;
+      node.style.zIndex = highestZ;
+      let html = `<div class="node-header">${type}</div>`;
+      if (type === 'Variable') {
+        html += `
+          <input type="text" class="var-name" placeholder="Variable Name">
+          <input type="text" class="var-value" placeholder="Value">
+          <div class="port port-output" data-type="output"></div>
+        `;
+      } else if (type === 'Assign') {
+        html += `
+          <input type="text" class="assign-expr" placeholder="Assignment (e.g., i = i + 1)">
+          <div class="port port-input" data-type="input"></div>
+          <div class="port port-output" data-type="output"></div>
+        `;
+      } else if (type === 'Print') {
+        html += `
+          <input type="text" class="print-value" placeholder="Variable or Text">
+          <div class="port port-input" data-type="input"></div>
+        `;
+      } else if (type === 'Function') {
+        html += `
+          <input type="text" class="func-name" placeholder="Function Name">
+          <div class="arg-container">
+            <input type="text" class="arg-name" placeholder="Arg Name (e.g., a)">
+          </div>
+          <button onclick="addArg(this.parentElement)">Add Arg</button>
+          <div class="port port-input" data-type="input"></div>
+          <div class="port port-output" data-type="output"></div>
+        `;
+      } else if (type === 'Return') {
+        html += `
+          <input type="text" class="return-value" placeholder="Return Value (e.g., x + 1)">
+          <div class="port port-input" data-type="input"></div>
+        `;
+      } else if (type === 'Call') {
+        html += `
+          <input type="text" class="call-name" placeholder="Function Name (e.g., add)">
+          <div class="arg-container">
+            <input type="text" class="call-arg" placeholder="Arg Value (e.g., 3)">
+          </div>
+          <button onclick="addCallArg(this.parentElement)">Add Arg</button>
+          <input type="text" class="call-result" placeholder="Result Var (e.g., z)">
+          <div class="port port-input" data-type="input"></div>
+          <div class="port port-output" data-type="output"></div>
+        `;
+      } else if (type === 'If') {
+        html += `
+          <input type="text" class="condition" placeholder="Condition (e.g., x > 5)">
+          <div class="port port-input" data-type="input"></div>
+          <div class="port port-output-true" data-type="output" data-branch="true"><span class="label">True</span></div>
+          <div class="port port-output-false" data-type="output" data-branch="false"><span class="label">False</span></div>
+        `;
+      } else if (type === 'WhileLoop') {
+        html += `
+          <input type="text" class="condition" placeholder="Condition (e.g., i < 5)">
+          <input type="text" class="update" placeholder="Update (e.g., i = i + 1)">
+          <div class="port port-input" data-type="input"></div>
+          <div class="port port-output" data-type="output"></div>
+        `;
+      } else if (type === 'Switch') {
+        html += `
+          <input type="text" class="switch-var" placeholder="Variable to Switch">
+          <div class="case-container">
+            <input type="text" class="case-value" placeholder="Case Value (e.g., 1)">
+            <input type="checkbox" class="case-break" title="Break after this case">
+            <div class="port port-output" data-type="output" data-case="0"></div>
+          </div>
+          <button onclick="addCase(this.parentElement)">Add Case</button>
+          <div class="port port-input" data-type="input"></div>
+        `;
+      } else if (type === 'Break' || type === 'Continue') {
+        html += `<div class="port port-input" data-type="input"></div>`;
+      } else if (type === 'Add' || type === 'Subtract' || type === 'Multiply' || type === 'Divide') {
+        html += `
+          <input type="text" class="operand1" placeholder="Operand 1">
+          <input type="text" class="operand2" placeholder="Operand 2">
+          <input type="text" class="result-var" placeholder="Result Var">
+          <div class="port port-output" data-type="output"></div>
+        `;
+      } else if (type === 'Array') {
+        html += `
+          <input type="text" class="array-name" placeholder="Array Name">
+          <div class="elements-container"></div>
+          <button onclick="addArrayElement(this.parentElement)">Add Element</button>
+          <div class="port port-output" data-type="output"></div>
+        `;
+      }
+      node.innerHTML = html;
+      canvas.appendChild(node);
+      nodes.push(node);
+      if (options.inputs) {
+        Object.keys(options.inputs).forEach(className => {
+          const input = node.querySelector(`.${className}`);
+          if (input) input.value = options.inputs[className];
+        });
+      }
+      // When a node is clicked (mousedown), bring it to the top
+      node.addEventListener('mousedown', (e) => {
+        if (!e.target.classList.contains('port') && e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
+          highestZ++;
+          node.style.zIndex = highestZ;
+          draggingNode = node;
+          const rect = node.getBoundingClientRect();
+          offsetX = e.clientX - rect.left;
+          offsetY = e.clientY - rect.top;
+        }
+      });
+      const ports = node.querySelectorAll('.port');
+      ports.forEach(port => {
+        port.addEventListener('mousedown', (e) => {
+          e.stopPropagation();
+          draggingPort = port;
+        });
+      });
+    }
+    function addArg(funcNode) {
+      const argCount = funcNode.querySelectorAll('.arg-container').length;
+      const argDiv = document.createElement('div');
+      argDiv.className = 'arg-container';
+      argDiv.innerHTML = `<input type="text" class="arg-name" placeholder="Arg Name (e.g., arg${argCount + 1})">`;
+      funcNode.insertBefore(argDiv, funcNode.querySelector('button'));
+    }
+    function addCallArg(callNode) {
+      const argCount = callNode.querySelectorAll('.arg-container').length;
+      const argDiv = document.createElement('div');
+      argDiv.className = 'arg-container';
+      argDiv.innerHTML = `<input type="text" class="call-arg" placeholder="Arg Value (e.g., ${argCount + 1})">`;
+      callNode.insertBefore(argDiv, callNode.querySelector('button'));
+    }
+    function addCase(switchNode) {
+      const caseCount = switchNode.querySelectorAll('.case-container').length;
+      const caseDiv = document.createElement('div');
+      caseDiv.className = 'case-container';
+      caseDiv.innerHTML = `
+        <input type="text" class="case-value" placeholder="Case Value (e.g., ${caseCount + 1})">
+        <input type="checkbox" class="case-break" title="Break after this case">
+        <div class="port port-output" data-type="output" data-case="${caseCount}"></div>
+      `;
+      switchNode.insertBefore(caseDiv, switchNode.querySelector('button'));
+      const newPort = caseDiv.querySelector('.port');
+      newPort.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+        draggingPort = newPort;
+      });
+    }
+    function addArrayElement(arrayNode) {
+      const container = arrayNode.querySelector('.elements-container');
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'element-value';
+      input.placeholder = 'Element value';
+      container.appendChild(input);
+    }
+    // ----------------------------
+    // Dragging and connection handling with requestAnimationFrame
+    // ----------------------------
+    document.addEventListener('mousemove', (e) => {
+      if (draggingNode) {
+        requestAnimationFrame(() => {
+          const canvasRect = canvas.getBoundingClientRect();
+          let x = e.clientX - offsetX - canvasRect.left;
+          let y = e.clientY - offsetY - canvasRect.top;
+          x = Math.round(x / gridSize) * gridSize;
+          y = Math.round(y / gridSize) * gridSize;
+          draggingNode.style.left = `${x}px`;
+          draggingNode.style.top = `${y}px`;
+          updateConnections();
+        });
+      }
+      if (draggingPort) {
+        requestAnimationFrame(() => {
+          if (!tempLine) {
+            tempLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            tempLine.setAttribute('stroke', 'green');
+            tempLine.setAttribute('stroke-width', '2');
+            connectionsSvg.appendChild(tempLine);
+          }
+          const canvasRect = canvas.getBoundingClientRect();
+          const fromRect = draggingPort.getBoundingClientRect();
+          const x1 = fromRect.left + fromRect.width / 2 - canvasRect.left;
+          const y1 = fromRect.top + fromRect.height / 2 - canvasRect.top;
+          const x2 = e.clientX - canvasRect.left;
+          const y2 = e.clientY - canvasRect.top;
+          tempLine.setAttribute('x1', x1);
+          tempLine.setAttribute('y1', y1);
+          tempLine.setAttribute('x2', x2);
+          tempLine.setAttribute('y2', y2);
+        });
+      } else {
+        if (tempLine) {
+          tempLine.remove();
+          tempLine = null;
         }
+      }
+    });
+    document.addEventListener('mouseup', (e) => {
+      if (draggingNode) draggingNode = null;
+      if (draggingPort) {
+        const targetPort = e.target.closest('.port');
+        if (
+          targetPort &&
+          targetPort !== draggingPort &&
+          draggingPort.dataset.type === "output" &&
+          targetPort.dataset.type === "input"
+        ) {
+          connections.push({ from: draggingPort, to: targetPort });
+          updateConnections();
+        }
+        draggingPort = null;
+        if (tempLine) {
+          tempLine.remove();
+          tempLine = null;
         }
+      }
+    });
+    function updateConnections() {
+      connectionsSvg.innerHTML = '';
+      const canvasRect = canvas.getBoundingClientRect();
+      connections.forEach(conn => {
+        const fromRect = conn.from.getBoundingClientRect();
+        const toRect = conn.to.getBoundingClientRect();
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', fromRect.left + fromRect.width / 2 - canvasRect.left);
+        line.setAttribute('y1', fromRect.top + fromRect.height / 2 - canvasRect.top);
+        line.setAttribute('x2', toRect.left + toRect.width / 2 - canvasRect.left);
+        line.setAttribute('y2', toRect.top + toRect.height / 2 - canvasRect.top);
+        const fromNodeType = conn.from.parentElement.dataset.type;
+        line.setAttribute('stroke', controlNodes.includes(fromNodeType) ? 'red' : 'blue');
+        line.setAttribute('stroke-width', '2');
+        connectionsSvg.appendChild(line);
+      });
+    }
+    // ----------------------------
+    // Expression evaluation and error marking
+    // ----------------------------
+    function evaluateExpression(expr) {
+      if (!expr) return null;
+      try {
+        let evalExpr = expr;
+        for (const [varName, varValue] of Object.entries(variables)) {
+          evalExpr = evalExpr.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
+        }
+        if (evalExpr.includes('=')) {
+          const [varName, value] = evalExpr.split('=').map(s => s.trim());
+          variables[varName] = eval(value);
+          return null;
         }
+        return eval(evalExpr);
+      } catch (e) {
+        return `Error in expression: ${e.message}`;
+      }
+    }
+    function markError(node, message) {
+      node.classList.add('error');
+      node.title = message;
+    }
+    // ----------------------------
+    // Global workflow execution functions
+    // ----------------------------
+    function executeNext(node, branch, loopControl, funcContext) {
+      let portClass;
+      if (node.dataset.type === 'Switch') {
+        portClass = `.port-output[data-case="${branch}"]`;
+      } else {
+        portClass = branch === 'true' ? '.port-output-true' : branch === 'false' ? '.port-output-false' : '.port-output';
+      }
+      const nextConn = connections.find(c => c.from === node.querySelector(portClass));
+      if (nextConn && (!funcContext || !funcContext.returned)) {
+        const nextNode = nextConn.to.parentElement;
+        executeNode(nextNode, loopControl, funcContext);
+      }
+    }
+    function executeNode(node, loopControl = { break: false, continue: false }, funcContext = null) {
+      if (node.dataset.executed || loopControl.break) return;
+      node.dataset.executed = true;
+      const type = node.dataset.type;
+      if (type === 'Variable') {
+        const name = node.querySelector('.var-name').value;
+        const value = node.querySelector('.var-value').value;
+        variables[name] = isNaN(value) ? value : Number(value);
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'Assign') {
+        const expr = node.querySelector('.assign-expr').value;
+        const error = evaluateExpression(expr);
+        if (typeof error === 'string' && error.startsWith('Error')) markError(node, error);
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'Print') {
+        const value = node.querySelector('.print-value').value;
+        const printVal = variables[value] !== undefined ? variables[value] : value;
+        workflowOutput += `${printVal}\n`;
+      } else if (type === 'Function') {
+        const funcName = node.querySelector('.func-name').value;
+        const args = Array.from(node.querySelectorAll('.arg-name')).map(input => input.value);
+        const prevVars = { ...variables };
+        funcContext = { name: funcName, args: {}, returned: false };
+        executeNext(node, 'output', loopControl, funcContext);
+        variables = prevVars;
+        if (!funcContext.returned) functionReturns[funcName] = undefined;
+      } else if (type === 'Return') {
+        if (funcContext) {
+          const returnValue = node.querySelector('.return-value').value;
+          const result = evaluateExpression(returnValue);
+          if (result && !result.startsWith('Error')) {
+            functionReturns[funcContext.name] = result;
+          } else if (result) {
+            workflowOutput += `${result}\n`;
+          }
+          funcContext.returned = true;
         }
+      } else if (type === 'Call') {
+        const callName = node.querySelector('.call-name').value;
+        const callArgs = Array.from(node.querySelectorAll('.call-arg')).map(input => evaluateExpression(input.value) || input.value);
+        const resultVar = node.querySelector('.call-result').value;
+        const targetFunc = nodes.find(n => n.dataset.type === 'Function' && n.querySelector('.func-name').value === callName);
+        if (targetFunc) {
+          const funcArgs = Array.from(targetFunc.querySelectorAll('.arg-name')).map(input => input.value);
+          const prevVars = { ...variables };
+          funcArgs.forEach((argName, index) => {
+            variables[argName] = callArgs[index] !== undefined ? callArgs[index] : undefined;
+          });
+          const funcContext = { name: callName, args: {}, returned: false };
+          executeNode(targetFunc, { break: false, continue: false }, funcContext);
+          variables = prevVars;
+          if (resultVar && functionReturns[callName] !== undefined) {
+            variables[resultVar] = functionReturns[callName];
+          }
+        } else {
+          workflowOutput += `Function ${callName} not found!\n`;
+        }
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'If') {
+        const condition = node.querySelector('.condition').value;
+        let result = false;
+        try {
+          let evalCondition = condition;
+          for (const [varName, varValue] of Object.entries(variables)) {
+            evalCondition = evalCondition.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
+          }
+          result = eval(evalCondition);
+        } catch (e) {
+          workflowOutput += `Error in If condition: ${e.message}\n`;
+        }
+        executeNext(node, result ? 'true' : 'false', loopControl, funcContext);
+      } else if (type === 'WhileLoop') {
+        const condition = node.querySelector('.condition').value;
+        const update = node.querySelector('.update').value;
+        let result = true;
+        while (result && !loopControl.break) {
+          try {
+            let evalCondition = condition;
+            for (const [varName, varValue] of Object.entries(variables)) {
+              evalCondition = evalCondition.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
             }
+            result = eval(evalCondition);
+            if (result) {
+              let innerControl = { break: false, continue: false };
+              executeNext(node, 'output', innerControl, funcContext);
+              if (innerControl.continue) continue;
+              if (innerControl.break) break;
+              const error = evaluateExpression(update);
+              if (error) workflowOutput += `${error}\n`;
+            }
+          } catch (e) {
+            workflowOutput += `Error in WhileLoop condition: ${e.message}\n`;
+            break;
+          }
+        }
+      } else if (type === 'Switch') {
+        const switchVar = node.querySelector('.switch-var').value;
+        const caseInputs = node.querySelectorAll('.case-container');
+        const value = variables[switchVar];
+        let matched = false;
+        for (let [index, container] of caseInputs.entries()) {
+          const caseValue = container.querySelector('.case-value').value;
+          const shouldBreak = container.querySelector('.case-break').checked;
+          if (caseValue == value || matched) {
+            matched = true;
+            executeNext(node, index.toString(), loopControl, funcContext);
+            if (shouldBreak) break;
+          }
         }
+        if (!matched) workflowOutput += `No matching case for ${switchVar}=${value}\n`;
+      } else if (type === 'Break') {
+        loopControl.break = true;
+      } else if (type === 'Continue') {
+        loopControl.continue = true;
+      } else if (type === 'Add') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        variables[resultVar] = Number(op1) + Number(op2);
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'Subtract') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        variables[resultVar] = Number(op1) - Number(op2);
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'Multiply') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        variables[resultVar] = Number(op1) * Number(op2);
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'Divide') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        if (Number(op2) === 0) {
+          workflowOutput += "Division by zero error\n";
+          markError(node, "Division by zero");
+        } else {
+          variables[resultVar] = Number(op1) / Number(op2);
+        }
+        executeNext(node, 'output', loopControl, funcContext);
+      } else if (type === 'Array') {
+        const arrayName = node.querySelector('.array-name').value;
+        const elements = Array.from(node.querySelectorAll('.element-value')).map(input => evaluateExpression(input.value));
+        variables[arrayName] = elements;
+        executeNext(node, 'output', loopControl, funcContext);
+      }
+    }
+    function runWorkflow() {
+      workflowOutput = "";
+      variables = {};
+      functionReturns = {};
+      nodes.forEach(n => delete n.dataset.executed);
+      const startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
+      if (startNodes.length > 0) {
+        startNodes.forEach(node => executeNode(node));
+      } else {
+        nodes.forEach(node => executeNode(node));
+      }
+      alert(workflowOutput || 'No output generated! Check your connections and node settings.');
+    }
+    // ----------------------------
+    // Step-by-step execution
+    // ----------------------------
+    function startStepExecution() {
+      executionQueue = [];
+      nodes.forEach(n => delete n.dataset.executedStep);
+      const startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
+      executionQueue.push(...startNodes);
+      alert("Step execution started. Click 'Step Execution' to execute the next node. Check the console for output.");
+    }
+    function stepExecution() {
+      if (executionQueue.length === 0) {
+        alert("Execution finished.");
+        return;
+      }
+      const node = executionQueue.shift();
+      node.classList.add('executing');
+      const nextNodes = executeNodeStep(node);
+      executionQueue.push(...nextNodes.filter(n => n));
+      setTimeout(() => { node.classList.remove('executing'); }, 500);
+    }
+    function executeNodeStep(node) {
+      let nextNodes = [];
+      const type = node.dataset.type;
+      if (type === 'Variable') {
+        const name = node.querySelector('.var-name').value;
+        const value = node.querySelector('.var-value').value;
+        variables[name] = isNaN(value) ? value : Number(value);
+        nextNodes.push(getNextNode(node));
+      } else if (type === 'Assign') {
+        const expr = node.querySelector('.assign-expr').value;
+        const error = evaluateExpression(expr);
+        if (typeof error === 'string' && error.startsWith('Error')) markError(node, error);
+        nextNodes.push(getNextNode(node));
+      } else if (type === 'Print') {
+        const value = node.querySelector('.print-value').value;
+        const printVal = variables[value] !== undefined ? variables[value] : value;
+        console.log(printVal);
+      } else if (type === 'Add') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        variables[resultVar] = Number(op1) + Number(op2);
+        nextNodes.push(getNextNode(node));
+      } else if (type === 'Subtract') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        variables[resultVar] = Number(op1) - Number(op2);
+        nextNodes.push(getNextNode(node));
+      } else if (type === 'Multiply') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        variables[resultVar] = Number(op1) * Number(op2);
+        nextNodes.push(getNextNode(node));
+      } else if (type === 'Divide') {
+        const op1 = evaluateExpression(node.querySelector('.operand1').value);
+        const op2 = evaluateExpression(node.querySelector('.operand2').value);
+        const resultVar = node.querySelector('.result-var').value;
+        if (Number(op2) === 0) {
+          markError(node, "Division by zero");
+        } else {
+          variables[resultVar] = Number(op1) / Number(op2);
+        }
+        nextNodes.push(getNextNode(node));
+      } else if (type === 'Array') {
+        const arrayName = node.querySelector('.array-name').value;
+        const elements = Array.from(node.querySelectorAll('.element-value')).map(input => evaluateExpression(input.value));
+        variables[arrayName] = elements;
+        nextNodes.push(getNextNode(node));
+      } else {
+        nextNodes.push(getNextNode(node));
+      }
+      return nextNodes.filter(n => n);
+    }
+    function getNextNode(node) {
+      const port = node.querySelector('.port.port-output');
+      const conn = connections.find(c => c.from === port);
+      if (conn) return conn.to.parentElement;
+      return null;
+    }
+    // ----------------------------
+    // Workflow persistence
+    // ----------------------------
+    function getPortIdentifier(port) {
+      return Array.from(port.classList).find(cls => cls.startsWith("port-"));
+    }
+    function saveWorkflow() {
+      const workflow = {
+        nodes: nodes.map(n => {
+          const inputs = {};
+          n.querySelectorAll('input').forEach(input => {
+            inputs[input.className.split(' ')[0]] = input.value;
+          });
+          return {
+            id: n.dataset.id,
+            type: n.dataset.type,
+            left: n.style.left,
+            top: n.style.top,
+            inputs: inputs
+          };
+        }),
+        connections: connections.map(c => {
+          return {
+            fromNodeId: c.from.parentElement.dataset.id,
+            fromPortClass: getPortIdentifier(c.from),
+            toNodeId: c.to.parentElement.dataset.id,
+            toPortClass: getPortIdentifier(c.to)
+          };
+        })
+      };
+      prompt("Copy your workflow JSON:", JSON.stringify(workflow));
+    }
+    function loadWorkflow() {
+      const data = prompt("Paste your workflow JSON:");
+      if (!data) return;
+      try {
+        const workflow = JSON.parse(data);
+        nodes = [];
+        connections = [];
+        canvas.querySelectorAll('.node').forEach(n => n.remove());
+        workflow.nodes.forEach(nData => {
+          addNode(nData.type, { left: parseInt(nData.left), top: parseInt(nData.top), inputs: nData.inputs });
+        });
+        workflow.connections.forEach(conn => {
+          const fromNode = nodes.find(n => n.dataset.id === conn.fromNodeId);
+          const toNode = nodes.find(n => n.dataset.id === conn.toNodeId);
+          if (fromNode && toNode) {
+            const fromPort = Array.from(fromNode.querySelectorAll('.port')).find(p => p.classList.contains(conn.fromPortClass));
+            const toPort = Array.from(toNode.querySelectorAll('.port')).find(p => p.classList.contains(conn.toPortClass));
+            if (fromPort && toPort) {
+              connections.push({ from: fromPort, to: toPort });
             }
+          }
+        });
+        updateConnections();
+      } catch (e) {
+        alert("Invalid JSON data.");
+      }
+    }
+    // // ----------------------------
+    // // Zooming support
+    // // ----------------------------
+    // canvas.addEventListener('wheel', (e) => {
+    //   e.preventDefault();
+    //   if (e.deltaY < 0) {
+    //     zoomFactor *= 1.1;
+    //   } else {
+    //     zoomFactor /= 1.1;
+    //   }
+    //   canvas.style.transform = `scale(${zoomFactor})`;
+    // });
+  </script>
 </body>
+</html>