Update index.html

index.html

@@ -151,9 +151,7 @@
       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">
@@ -168,7 +166,7 @@
         `;
       } else if (type === 'Print') {
         html += `
-          <input type="text" class="print-value" placeholder="Variable or Text">
+          <input type="text" class="print-value" placeholder='Expression to print (e.g., "Hello " + x)'>
           <div class="port port-input" data-type="input"></div>
         `;
       } else if (type === 'Function') {
@@ -228,7 +226,8 @@
         `;
       } 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') {
+      } 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">
@@ -303,7 +302,6 @@
     // ----------------------------
     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);
@@ -394,7 +392,6 @@
         }
       }
     });
-
     document.addEventListener('mouseup', (e) => {
       if (draggingNode) draggingNode = null;
       if (draggingPort) {
@@ -413,7 +410,6 @@
         }
       }
     });
-
     function updateConnections() {
       connectionsSvg.innerHTML = '';
       const canvasRect = canvas.getBoundingClientRect();
@@ -433,14 +429,19 @@
     }
 
     // ----------------------------
-    // Expression Evaluation
+    // Expression Evaluation (with string support)
     // ----------------------------
     function evaluateExpression(expr) {
       if (!expr) return null;
       try {
         let evalExpr = expr;
+        // Replace variable names with their values. If a variable is a non-numeric string, wrap in quotes.
         for (const [varName, varValue] of Object.entries(variables)) {
-          evalExpr = evalExpr.replace(new RegExp(`\\b${varName}\\b`, 'g'), varValue);
+          let replacement = varValue;
+          if (typeof varValue === "string" || isNaN(varValue)) {
+            replacement = `"${varValue}"`;
+          }
+          evalExpr = evalExpr.replace(new RegExp(`\\b${varName}\\b`, 'g'), replacement);
         }
         if (evalExpr.includes('=')) {
           const [varName, value] = evalExpr.split('=').map(s => s.trim());
@@ -459,7 +460,7 @@
     }
 
     // ----------------------------
-    // Export Workflow to Code (DFS-based)
+    // Export Workflow to Code (DFS-based, with proper indentation)
     // ----------------------------
     function getChild(node, portSelector) {
       const port = node.querySelector(portSelector);
@@ -467,11 +468,9 @@
       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 "";
@@ -598,7 +597,7 @@
           default:
             nodeCode += indent + `// Unhandled node type: ${node.dataset.type}\n`;
         }
-        // For non-control nodes, append the next node if available
+        // For non-control nodes, append the next connected node (if any)
         if (node.dataset.type !== "If" && node.dataset.type !== "WhileLoop" && node.dataset.type !== "ForLoop") {
           let child = getChild(node, '.port-output');
           if (child) {
@@ -607,8 +606,6 @@
         }
         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);
@@ -732,7 +729,6 @@
         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;
@@ -748,9 +744,9 @@
         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`;
+        const expr = node.querySelector('.print-value').value;
+        const result = evaluateExpression(expr);
+        workflowOutput += (result !== null ? result : "") + "\n";
       } else if (type === 'Function') {
         const funcName = node.querySelector('.func-name').value;
         const args = Array.from(node.querySelectorAll('.arg-name')).map(input => input.value);
@@ -792,7 +788,6 @@
         }
         executeNext(node, 'output', loopControl, funcContext);
       }
-      // Library Node
       else if (type === 'Library') {
         const libUrl = node.querySelector('.lib-url').value;
         if (libUrl) {
@@ -813,11 +808,9 @@
           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;
@@ -938,7 +931,6 @@
         executeNext(node, 'output', loopControl, funcContext);
       }
     }
-
     function runWorkflow() {
       workflowOutput = "";
       variables = {};
@@ -949,7 +941,6 @@
       startNodes.forEach(node => executeNode(node));
       alert(workflowOutput || 'No output generated! Check your connections and node settings.');
     }
-
     // ----------------------------
     // Step-by-step execution
     // ----------------------------
@@ -986,9 +977,9 @@
         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);
+        const expr = node.querySelector('.print-value').value;
+        const result = evaluateExpression(expr);
+        console.log(result);
       } else if (type === 'Add') {
         const op1 = evaluateExpression(node.querySelector('.operand1').value);
         const op2 = evaluateExpression(node.querySelector('.operand2').value);
@@ -1032,7 +1023,6 @@
       const conn = connections.find(c => c.from === port);
       return conn ? conn.to.parentElement : null;
     }
-
     // ----------------------------
     // Workflow Persistence (Save/Load)
     // ----------------------------
@@ -1092,9 +1082,8 @@
         alert("Invalid JSON data.");
       }
     }
-
     // ----------------------------
-    // Export Workflow to Code (with indentation)
+    // Export Workflow to Code
     // ----------------------------
     function exportWorkflowToLanguage(language) {
       let visited = new Set();
@@ -1225,7 +1214,7 @@
           default:
             nodeCode += indent + `// Unhandled node type: ${node.dataset.type}\n`;
         }
-        // For non-control nodes, recursively add the next connected node
+        // For non-control nodes, 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) {
@@ -1343,15 +1332,15 @@
     // ----------------------------
     // Zooming Support
     // ----------------------------
-    canvas.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      if (e.deltaY < 0) {
-        zoomFactor *= 1.1;
-      } else {
-        zoomFactor /= 1.1;
-      }
-      canvas.style.transform = `scale(${zoomFactor})`;
-    });
+    // 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>