Spaces:

Ramesh-vani
/

nottri-lang

Running

App Files Files Community

Ramesh-vani commited on Mar 7

Commit

80a8361

verified ·

1 Parent(s): 42076a5

Update index.html

Browse files

Files changed (1) hide show

index.html +666 -52

index.html CHANGED Viewed

@@ -23,12 +23,25 @@
       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;
@@ -69,6 +82,7 @@
 </head>
 <body>
   <div id="toolbar">
     <button onclick="addNode('Variable')">Variable</button>
     <button onclick="addNode('Assign')">Assign</button>
     <button onclick="addNode('Print')">Print</button>
@@ -85,26 +99,32 @@
     <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 = {};
@@ -114,7 +134,7 @@
     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
@@ -124,16 +144,16 @@
       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">
@@ -181,8 +201,12 @@
         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 += `
@@ -219,6 +243,30 @@
           <div class="port port-output" data-type="output"></div>
         `;
       }
       node.innerHTML = html;
       canvas.appendChild(node);
       nodes.push(node);
@@ -228,9 +276,11 @@
           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;
@@ -248,6 +298,21 @@
       });
     }
     function addArg(funcNode) {
       const argCount = funcNode.querySelectorAll('.arg-container').length;
       const argDiv = document.createElement('div');
@@ -255,7 +320,6 @@
       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');
@@ -263,7 +327,6 @@
       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');
@@ -280,7 +343,6 @@
         draggingPort = newPort;
       });
     }
     function addArrayElement(arrayNode) {
       const container = arrayNode.querySelector('.elements-container');
       const input = document.createElement('input');
@@ -291,7 +353,7 @@
     }
     // ----------------------------
-    // Dragging and connection handling with requestAnimationFrame
     // ----------------------------
     document.addEventListener('mousemove', (e) => {
       if (draggingNode) {
@@ -337,12 +399,10 @@
       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();
         }
@@ -373,7 +433,7 @@
     }
     // ----------------------------
-    // Expression evaluation and error marking
     // ----------------------------
     function evaluateExpression(expr) {
       if (!expr) return null;
@@ -399,14 +459,272 @@
     }
     // ----------------------------
-    // 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)) {
@@ -473,7 +791,62 @@
           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 {
@@ -571,12 +944,9 @@
       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.');
     }
@@ -586,11 +956,11 @@
     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.");
@@ -602,7 +972,6 @@
       executionQueue.push(...nextNodes.filter(n => n));
       setTimeout(() => { node.classList.remove('executing'); }, 500);
     }
     function executeNodeStep(node) {
       let nextNodes = [];
       const type = node.dataset.type;
@@ -658,16 +1027,14 @@
       }
       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-"));
@@ -726,18 +1093,265 @@
       }
     }
-    // // ----------------------------
-    // // 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>

       cursor: move;
       user-select: none;
       box-sizing: border-box;
       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;
+      position: relative;
+    }
+    .remove-node {
+      position: absolute;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+      color: red;
+      font-weight: bold;
+      padding: 0 4px;
+      user-select: none;
+    }
     .port {
       width: 10px;
       height: 10px;
 </head>
 <body>
   <div id="toolbar">
+    <!-- Existing Nodes -->
     <button onclick="addNode('Variable')">Variable</button>
     <button onclick="addNode('Assign')">Assign</button>
     <button onclick="addNode('Print')">Print</button>
     <button onclick="addNode('Multiply')">Multiply</button>
     <button onclick="addNode('Divide')">Divide</button>
     <button onclick="addNode('Array')">Array</button>
+    <button onclick="addNode('Library')">Import Library</button>
+    <!-- New Nodes -->
+    <button onclick="addNode('Comment')">Comment</button>
+    <button onclick="addNode('ForLoop')">For Loop</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>
+    <button onclick="groupSimilarNodes()">Group Similar Nodes</button>
+    <button onclick="exportCode()">Export Code</button>
   </div>
   <div id="canvas">
     <svg id="connections"></svg>
   </div>
   <script>
+    // Global variables
     const canvas = document.getElementById('canvas');
     const connectionsSvg = document.getElementById('connections');
     let nodes = [];
     let connections = [];
     let draggingNode = null;
     let draggingPort = null;
+    let tempLine = null;
     let offsetX, offsetY;
     let variables = {};
     let functionReturns = {};
     let workflowOutput = "";
     let executionQueue = [];
     const controlNodes = ["If", "WhileLoop", "Switch", "Break", "Continue", "Function", "Return"];
+    let highestZ = 100;
     // ----------------------------
     // Node creation and UI helpers
       node.className = 'node';
       node.dataset.type = type;
       node.dataset.id = nodeIdCounter++;
       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`;
       highestZ++;
       node.style.zIndex = highestZ;
+      // Add a remove button inside the header
+      let html = `<div class="node-header">${type}<span class="remove-node" onclick="removeNode(this)">×</span></div>`;
+      // Node types and their inner HTML
       if (type === 'Variable') {
         html += `
           <input type="text" class="var-name" placeholder="Variable Name">
         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 += `
           <div class="port port-output" data-type="output"></div>
         `;
       }
+      // New: Library Node
+      else if (type === 'Library') {
+        html += `
+          <input type="text" class="lib-url" placeholder="Library (e.g., os)">
+          <div class="port port-output" data-type="output"></div>
+        `;
+      }
+      // New: Comment Node
+      else if (type === 'Comment') {
+        html += `
+          <input type="text" class="comment-text" placeholder="Enter comment">
+          <div class="port port-output" data-type="output"></div>
+        `;
+      }
+      // New: For Loop Node
+      else if (type === 'ForLoop') {
+        html += `
+          <input type="text" class="init" placeholder="Initialization (e.g., let i = 0)">
+          <input type="text" class="condition" placeholder="Condition (e.g., i < 10)">
+          <input type="text" class="update" placeholder="Update (e.g., i++)">
+          <div class="port port-input" data-type="input"></div>
+          <div class="port port-output" data-type="output"></div>
+        `;
+      }
       node.innerHTML = html;
       canvas.appendChild(node);
       nodes.push(node);
           if (input) input.value = options.inputs[className];
         });
       }
+      // Bring node to front on mousedown
       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;
       });
     }
+    // ----------------------------
+    // Remove Node
+    // ----------------------------
+    function removeNode(removeButton) {
+      const node = removeButton.parentElement.parentElement;
+      // Remove connections for this node
+      connections = connections.filter(conn => conn.from.parentElement !== node && conn.to.parentElement !== node);
+      node.remove();
+      nodes = nodes.filter(n => n !== node);
+      updateConnections();
+    }
+    // ----------------------------
+    // Additional helper functions for node inputs
+    // ----------------------------
     function addArg(funcNode) {
       const argCount = funcNode.querySelectorAll('.arg-container').length;
       const argDiv = document.createElement('div');
       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.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');
         draggingPort = newPort;
       });
     }
     function addArrayElement(arrayNode) {
       const container = arrayNode.querySelector('.elements-container');
       const input = document.createElement('input');
     }
     // ----------------------------
+    // Dragging and Connection Handling
     // ----------------------------
     document.addEventListener('mousemove', (e) => {
       if (draggingNode) {
       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();
         }
     }
     // ----------------------------
+    // Expression Evaluation
     // ----------------------------
     function evaluateExpression(expr) {
       if (!expr) return null;
     }
     // ----------------------------
+    // Export Workflow to Code (DFS-based)
+    // ----------------------------
+    function getChild(node, portSelector) {
+      const port = node.querySelector(portSelector);
+      if (!port) return null;
+      const conn = connections.find(c => c.from === port);
+      return conn ? conn.to.parentElement : null;
+    }
+    function exportWorkflowToLanguage(language) {
+      let visited = new Set();
+      let code = "";
+      function exportNode(node, indentLevel) {
+        let indent = "    ".repeat(indentLevel);
+        if (visited.has(node.dataset.id)) return "";
+        visited.add(node.dataset.id);
+        let nodeCode = "";
+        let inputs = {};
+        node.querySelectorAll('input').forEach(input => {
+          inputs[input.className.split(' ')[0]] = input.value;
+        });
+        switch(node.dataset.type) {
+          case "Variable":
+            if (language === "JavaScript") {
+              nodeCode += indent + `let ${inputs["var-name"]} = ${inputs["var-value"]};\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `${inputs["var-name"]} = ${inputs["var-value"]}\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `int ${inputs["var-name"]} = ${inputs["var-value"]};\n`;
+            }
+            break;
+          case "Assign":
+            nodeCode += indent + inputs["assign-expr"] + (language === "Python" ? "\n" : ";\n");
+            break;
+          case "Print":
+            if (language === "JavaScript") {
+              nodeCode += indent + `console.log(${inputs["print-value"]});\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `print(${inputs["print-value"]})\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `printf("%d", ${inputs["print-value"]});\n`;
+            }
+            break;
+          case "Function":
+            if (language === "JavaScript") {
+              nodeCode += indent + `function ${inputs["func-name"]}(${inputs["arg-name"] || ""}) {\n  // function body\n}\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `def ${inputs["func-name"]}(${inputs["arg-name"] || ""}):\n    # function body\n\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `void ${inputs["func-name"]}(${inputs["arg-name"] || "void"}) {\n  // function body\n}\n`;
+            }
+            break;
+          case "Return":
+            nodeCode += indent + (language === "Python" ? "return " : "return ") + inputs["return-value"] + (language === "Python" ? "\n" : ";\n");
+            break;
+          case "Call":
+            if (inputs["call-result"]) {
+              if (language === "JavaScript") {
+                nodeCode += indent + `let ${inputs["call-result"]} = ${inputs["call-name"]}(${inputs["call-arg"] || ""});\n`;
+              } else if (language === "Python") {
+                nodeCode += indent + `${inputs["call-result"]} = ${inputs["call-name"]}(${inputs["call-arg"] || ""})\n`;
+              } else if (language === "C") {
+                nodeCode += indent + `${inputs["call-name"]}(${inputs["call-arg"] || ""}); // assign result to ${inputs["call-result"]}\n`;
+              }
+            } else {
+              nodeCode += indent + `${inputs["call-name"]}(${inputs["call-arg"] || ""});\n`;
+            }
+            break;
+          case "If":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `if (${inputs["condition"]}) {\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `if ${inputs["condition"]}:\n`;
+            }
+            let trueChild = getChild(node, '.port-output-true');
+            if (trueChild) {
+              nodeCode += exportNode(trueChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `} else {\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `else:\n`;
+            }
+            let falseChild = getChild(node, '.port-output-false');
+            if (falseChild) {
+              nodeCode += exportNode(falseChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `}\n`;
+            }
+            break;
+          case "WhileLoop":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `while (${inputs["condition"]}) {\n  ${inputs["update"]};\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `while ${inputs["condition"]}:\n    ${inputs["update"]}\n`;
+            }
+            let whileChild = getChild(node, '.port-output');
+            if (whileChild) {
+              nodeCode += exportNode(whileChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `}\n`;
+            }
+            break;
+          case "ForLoop":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `for (${inputs["init"]}; ${inputs["condition"]}; ${inputs["update"]}) {\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `# For loop converted to while:\n${inputs["init"]}\nwhile ${inputs["condition"]}:\n`;
+            }
+            let forChild = getChild(node, '.port-output');
+            if (forChild) {
+              nodeCode += exportNode(forChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `}\n`;
+            }
+            break;
+          case "Comment":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `// ${inputs["comment-text"]}\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `# ${inputs["comment-text"]}\n`;
+            }
+            break;
+          case "Library":
+            if (language === "JavaScript") {
+              nodeCode += indent + `import * as lib from '${inputs["lib-url"]}';\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `import ${inputs["lib-url"]}\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `#include <${inputs["lib-url"]}>\n`;
+            }
+            break;
+          default:
+            nodeCode += indent + `// Unhandled node type: ${node.dataset.type}\n`;
+        }
+        // For non-control nodes, append the next node if available
+        if (node.dataset.type !== "If" && node.dataset.type !== "WhileLoop" && node.dataset.type !== "ForLoop") {
+          let child = getChild(node, '.port-output');
+          if (child) {
+            nodeCode += exportNode(child, indentLevel);
+          }
+        }
+        return nodeCode;
+      }
+      // Find starting nodes (with no incoming connection)
+      let startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
+      startNodes.forEach(node => {
+        code += exportNode(node, 0);
+      });
+      return code;
+    }
+    function exportCode() {
+      const language = prompt("Enter target language (JavaScript, Python, or C):", "JavaScript");
+      if (!language) return;
+      const code = exportWorkflowToLanguage(language);
+      const codeWindow = window.open("", "Exported Code", "width=600,height=400");
+      if (codeWindow) {
+        codeWindow.document.write("<pre>" + code + "</pre>");
+      } else {
+        alert("Exported Code:\n" + code);
+      }
+    }
+    // ----------------------------
+    // Group Similar Nodes
+    // ----------------------------
+    function groupSimilarNodes() {
+      const groups = {};
+      nodes.forEach(node => {
+        const type = node.dataset.type;
+        if (!groups[type]) {
+          groups[type] = [];
+        }
+        groups[type].push(node);
+      });
+      let xOffset = 20;
+      const yStart = 20;
+      const xGap = 280;
+      for (const type in groups) {
+        let yOffset = yStart;
+        groups[type].forEach(node => {
+          node.style.left = `${xOffset}px`;
+          node.style.top = `${yOffset}px`;
+          yOffset += node.offsetHeight + 20;
+        });
+        xOffset += xGap;
+      }
+      updateConnections();
+    }
+    // ----------------------------
+    // Workflow Persistence (Save/Load)
+    // ----------------------------
+    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.");
+      }
+    }
+    // ----------------------------
+    // 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)) {
           workflowOutput += `Function ${callName} not found!\n`;
         }
         executeNext(node, 'output', loopControl, funcContext);
+      }
+      // Library Node
+      else if (type === 'Library') {
+        const libUrl = node.querySelector('.lib-url').value;
+        if (libUrl) {
+          let script = document.createElement('script');
+          script.src = libUrl;
+          script.onload = () => {
+            workflowOutput += `Library loaded: ${libUrl}\n`;
+            executeNext(node, 'output', loopControl, funcContext);
+          };
+          script.onerror = () => {
+            markError(node, `Failed to load library: ${libUrl}`);
+            workflowOutput += `Failed to load library: ${libUrl}\n`;
+            executeNext(node, 'output', loopControl, funcContext);
+          };
+          document.head.appendChild(script);
+          return;
+        } else {
+          executeNext(node, 'output', loopControl, funcContext);
+        }
+      }
+      // Comment Node
+      else if (type === 'Comment') {
+        executeNext(node, 'output', loopControl, funcContext);
+      }
+      // For Loop Node
+      else if (type === 'ForLoop') {
+        const init = node.querySelector('.init').value;
+        const condition = node.querySelector('.condition').value;
+        const update = node.querySelector('.update').value;
+        evaluateExpression(init);
+        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) { evaluateExpression(update); continue; }
+              if (innerControl.break) break;
+              const error = evaluateExpression(update);
+              if (error) workflowOutput += `${error}\n`;
+            }
+          } catch (e) {
+            workflowOutput += `Error in ForLoop condition: ${e.message}\n`;
+            break;
+          }
+        }
+        executeNext(node, 'output', loopControl, funcContext);
+      }
+      else if (type === 'If') {
         const condition = node.querySelector('.condition').value;
         let result = false;
         try {
       variables = {};
       functionReturns = {};
       nodes.forEach(n => delete n.dataset.executed);
+      let startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
+      if (startNodes.length === 0) startNodes = nodes;
+      startNodes.forEach(node => executeNode(node));
       alert(workflowOutput || 'No output generated! Check your connections and node settings.');
     }
     function startStepExecution() {
       executionQueue = [];
       nodes.forEach(n => delete n.dataset.executedStep);
+      let startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
+      if (startNodes.length === 0) startNodes = nodes;
       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.");
       executionQueue.push(...nextNodes.filter(n => n));
       setTimeout(() => { node.classList.remove('executing'); }, 500);
     }
     function executeNodeStep(node) {
       let nextNodes = [];
       const type = node.dataset.type;
       }
       return nextNodes.filter(n => n);
     }
     function getNextNode(node) {
       const port = node.querySelector('.port.port-output');
       const conn = connections.find(c => c.from === port);
+      return conn ? conn.to.parentElement : null;
     }
     // ----------------------------
+    // Workflow Persistence (Save/Load)
     // ----------------------------
     function getPortIdentifier(port) {
       return Array.from(port.classList).find(cls => cls.startsWith("port-"));
       }
     }
+    // ----------------------------
+    // Export Workflow to Code (with indentation)
+    // ----------------------------
+    function exportWorkflowToLanguage(language) {
+      let visited = new Set();
+      let code = "";
+      function exportNode(node, indentLevel) {
+        let indent = "    ".repeat(indentLevel);
+        if (visited.has(node.dataset.id)) return "";
+        visited.add(node.dataset.id);
+        let nodeCode = "";
+        let inputs = {};
+        node.querySelectorAll('input').forEach(input => {
+          inputs[input.className.split(' ')[0]] = input.value;
+        });
+        switch(node.dataset.type) {
+          case "Variable":
+            if (language === "JavaScript") {
+              nodeCode += indent + `let ${inputs["var-name"]} = ${inputs["var-value"]};\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `${inputs["var-name"]} = ${inputs["var-value"]}\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `int ${inputs["var-name"]} = ${inputs["var-value"]};\n`;
+            }
+            break;
+          case "Assign":
+            nodeCode += indent + inputs["assign-expr"] + (language === "Python" ? "\n" : ";\n");
+            break;
+          case "Print":
+            if (language === "JavaScript") {
+              nodeCode += indent + `console.log(${inputs["print-value"]});\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `print(${inputs["print-value"]})\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `printf("%d", ${inputs["print-value"]});\n`;
+            }
+            break;
+          case "Function":
+            if (language === "JavaScript") {
+              nodeCode += indent + `function ${inputs["func-name"]}(${inputs["arg-name"] || ""}) {\n  // function body\n}\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `def ${inputs["func-name"]}(${inputs["arg-name"] || ""}):\n    # function body\n\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `void ${inputs["func-name"]}(${inputs["arg-name"] || "void"}) {\n  // function body\n}\n`;
+            }
+            break;
+          case "Return":
+            nodeCode += indent + (language === "Python" ? "return " : "return ") + inputs["return-value"] + (language === "Python" ? "\n" : ";\n");
+            break;
+          case "Call":
+            if (inputs["call-result"]) {
+              if (language === "JavaScript") {
+                nodeCode += indent + `let ${inputs["call-result"]} = ${inputs["call-name"]}(${inputs["call-arg"] || ""});\n`;
+              } else if (language === "Python") {
+                nodeCode += indent + `${inputs["call-result"]} = ${inputs["call-name"]}(${inputs["call-arg"] || ""})\n`;
+              } else if (language === "C") {
+                nodeCode += indent + `${inputs["call-name"]}(${inputs["call-arg"] || ""}); // assign result to ${inputs["call-result"]}\n`;
+              }
+            } else {
+              nodeCode += indent + `${inputs["call-name"]}(${inputs["call-arg"] || ""});\n`;
+            }
+            break;
+          case "If":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `if (${inputs["condition"]}) {\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `if ${inputs["condition"]}:\n`;
+            }
+            let trueChild = getChild(node, '.port-output-true');
+            if (trueChild) {
+              nodeCode += exportNode(trueChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `} else {\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `else:\n`;
+            }
+            let falseChild = getChild(node, '.port-output-false');
+            if (falseChild) {
+              nodeCode += exportNode(falseChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `}\n`;
+            }
+            break;
+          case "WhileLoop":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `while (${inputs["condition"]}) {\n  ${inputs["update"]};\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `while ${inputs["condition"]}:\n    ${inputs["update"]}\n`;
+            }
+            let whileChild = getChild(node, '.port-output');
+            if (whileChild) {
+              nodeCode += exportNode(whileChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `}\n`;
+            }
+            break;
+          case "ForLoop":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `for (${inputs["init"]}; ${inputs["condition"]}; ${inputs["update"]}) {\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `# For loop converted to while:\n${inputs["init"]}\nwhile ${inputs["condition"]}:\n`;
+            }
+            let forChild = getChild(node, '.port-output');
+            if (forChild) {
+              nodeCode += exportNode(forChild, indentLevel + 1);
+            }
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `}\n`;
+            }
+            break;
+          case "Comment":
+            if (language === "JavaScript" || language === "C") {
+              nodeCode += indent + `// ${inputs["comment-text"]}\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `# ${inputs["comment-text"]}\n`;
+            }
+            break;
+          case "Library":
+            if (language === "JavaScript") {
+              nodeCode += indent + `import * as lib from '${inputs["lib-url"]}';\n`;
+            } else if (language === "Python") {
+              nodeCode += indent + `import ${inputs["lib-url"]}\n`;
+            } else if (language === "C") {
+              nodeCode += indent + `#include <${inputs["lib-url"]}>\n`;
+            }
+            break;
+          default:
+            nodeCode += indent + `// Unhandled node type: ${node.dataset.type}\n`;
+        }
+        // For non-control nodes, recursively add the next connected node
+        if (node.dataset.type !== "If" && node.dataset.type !== "WhileLoop" && node.dataset.type !== "ForLoop") {
+          let child = getChild(node, '.port-output');
+          if (child) {
+            nodeCode += exportNode(child, indentLevel);
+          }
+        }
+        return nodeCode;
+      }
+      let startNodes = nodes.filter(n => !connections.some(c => c.to.parentElement === n));
+      startNodes.forEach(node => {
+        code += exportNode(node, 0);
+      });
+      return code;
+    }
+    function exportCode() {
+      const language = prompt("Enter target language (JavaScript, Python, or C):", "JavaScript");
+      if (!language) return;
+      const code = exportWorkflowToLanguage(language);
+      const codeWindow = window.open("", "Exported Code", "width=600,height=400");
+      if (codeWindow) {
+        codeWindow.document.write("<pre>" + code + "</pre>");
+      } else {
+        alert("Exported Code:\n" + code);
+      }
+    }
+    // ----------------------------
+    // Group Similar Nodes
+    // ----------------------------
+    function groupSimilarNodes() {
+      const groups = {};
+      nodes.forEach(node => {
+        const type = node.dataset.type;
+        if (!groups[type]) {
+          groups[type] = [];
+        }
+        groups[type].push(node);
+      });
+      let xOffset = 20;
+      const yStart = 20;
+      const xGap = 280;
+      for (const type in groups) {
+        let yOffset = yStart;
+        groups[type].forEach(node => {
+          node.style.left = `${xOffset}px`;
+          node.style.top = `${yOffset}px`;
+          yOffset += node.offsetHeight + 20;
+        });
+        xOffset += xGap;
+      }
+      updateConnections();
+    }
+    // ----------------------------
+    // Workflow Persistence (Save/Load)
+    // ----------------------------
+    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>