Update static/canvas.js

static/canvas.js

@@ -8,14 +8,12 @@ const stage = new Konva.Stage({
 const layer = new Konva.Layer();
 stage.add(layer);
 
-// Store nodes, connections, and parsed data
 let nodes = [];
-let connections = []; // { fromNodeId, fromPortId, toNodeId, toPortId }
+let connections = [];
 let parsedConnections = [];
-let selectedPort = null; // { node, portId, type: 'input'|'output' }
+let selectedPort = null;
 let disconnectMode = false;
 
-// Submit code or file for parsing
 function submitCode() {
     const fileInput = document.getElementById('codeFile');
     const codeInput = document.getElementById('codeInput').value;
@@ -41,13 +39,12 @@ function submitCode() {
             return;
         }
         clearCanvas();
-        parsedConnections = data.connections; // Store for auto-connect
+        parsedConnections = data.connections;
         createNodesFromParsedData(data.nodes, data.connections);
     })
     .catch(error => console.error('Error:', error));
 }
 
-// Clear existing nodes and connections
 function clearCanvas() {
     nodes.forEach(node => node.destroy());
     layer.find('Shape').forEach(shape => shape.destroy());
@@ -57,7 +54,6 @@ function clearCanvas() {
     layer.draw();
 }
 
-// Create nodes and connections from parsed data
 function createNodesFromParsedData(parsedNodes, parsedConnections) {
     parsedNodes.forEach(nodeData => {
         const node = createNode(
@@ -67,7 +63,8 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
             nodeData.type,
             nodeData.inputs,
             nodeData.outputs,
-            nodeData.id
+            nodeData.id,
+            nodeData.value
         );
         nodes.push(node);
         layer.add(node);
@@ -76,40 +73,44 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
     saveNodes();
 }
 
-// Create a node with inputs and outputs
-function createNode(x, y, label, type, inputs = [], outputs = [], id) {
+function createNode(x, y, label, type, inputs = [], outputs = [], id, value = null) {
     const node = new Konva.Group({
         x: x,
         y: y,
         draggable: true
     });
 
-    // Node rectangle
-    const color = type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : type === 'import' ? '#a5d6a7' : '#ccc';
+    // Node appearance based on type
+    const isNumberBox = type === 'number_box';
+    const color = isNumberBox ? '#ffcccb' : type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : type === 'import' ? '#a5d6a7' : '#ccc';
+    const width = isNumberBox ? 80 : 100;
+    const height = isNumberBox ? 40 : 50;
+
     const box = new Konva.Rect({
-        width: 100,
-        height: 50,
+        width: width,
+        height: height,
         fill: color,
         stroke: 'black',
         strokeWidth: 2,
         cornerRadius: 5
     });
 
-    // Node label
+    // Node label and value
+    const textContent = isNumberBox && value ? `${label} = ${value}` : label;
     const text = new Konva.Text({
-        text: label,
+        text: textContent,
         fontSize: 12,
         fontFamily: 'Arial',
         fill: 'black',
-        width: 100,
+        width: width,
         align: 'center',
-        y: 20
+        y: isNumberBox ? 14 : 20
     });
 
     node.add(box);
     node.add(text);
 
-    // Add input/output ports with unique IDs
+    // Input/output ports
     const inputPorts = inputs.map((input, i) => ({
         id: `input-${id}-${i}`,
         name: input,
@@ -125,22 +126,20 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         id: `output-${id}-${i}`,
         name: output,
         circle: new Konva.Circle({
-            x: 100,
+            x: width,
             y: 10 + i * 20,
             radius: 5,
             fill: 'green'
         })
     }));
 
-    // Add ports to node and set up click handlers
     inputPorts.forEach(port => {
         node.add(port.circle);
         port.circle.on('click', () => {
             if (!selectedPort) {
                 selectedPort = { node, portId: port.id, type: 'input' };
-                disconnectMode = true; // First click on input enables disconnect mode
+                disconnectMode = true;
             } else if (selectedPort.type === 'output' && selectedPort.node !== node) {
-                // Connect output to input
                 createSplineConnection(
                     selectedPort.node,
                     selectedPort.portId,
@@ -157,8 +156,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
                 disconnectMode = false;
                 saveNodes();
             } else if (disconnectMode && selectedPort.type === 'input' && selectedPort.node === node) {
-                // Select output to disconnect
-                selectedPort = { node, portId: port.id, type: 'input' }; // Keep input selected
+                selectedPort = { node, portId: port.id, type: 'input' };
             } else {
                 selectedPort = null;
                 disconnectMode = false;
@@ -173,7 +171,6 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
                 selectedPort = { node, portId: port.id, type: 'output' };
                 disconnectMode = false;
             } else if (disconnectMode && selectedPort.type === 'input') {
-                // Disconnect input from output
                 const connIndex = connections.findIndex(
                     c => c.toNodeId === selectedPort.node.data.id &&
                          c.toPortId === selectedPort.portId &&
@@ -202,7 +199,6 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         });
     });
 
-    // Node data
     node.data = {
         id: id,
         type: type,
@@ -210,10 +206,10 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         inputs: inputPorts,
         outputs: outputPorts,
         x: x,
-        y: y
+        y: y,
+        value: value
     };
 
-    // Update position and connections on drag
     node.on('dragmove', () => {
         node.data.x = node.x();
         node.data.y = node.y();
@@ -224,7 +220,6 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     return node;
 }
 
-// Create a spline (Bezier curve) connection
 function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
     const fromPort = fromNode.data.outputs.find(p => p.id === fromPortId);
     const toPort = toNode.data.inputs.find(p => p.id === toPortId);
@@ -235,7 +230,6 @@ function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
     const endX = toNode.x() + toPort.circle.x();
     const endY = toNode.y() + toPort.circle.y();
 
-    // Control points for Bezier curve
     const control1X = startX + (endX - startX) / 3;
     const control1Y = startY;
     const control2X = startX + 2 * (endX - startX) / 3;
@@ -262,9 +256,7 @@ function createSplineConnection(fromNode, fromPortId, toNode, toPortId) {
     layer.draw();
 }
 
-// Auto-connect nodes based on parsed connections
 function autoConnect() {
-    // Clear existing connections
     layer.find('Shape').forEach(shape => {
         if (shape.data && shape.data.fromNodeId !== undefined) {
             shape.destroy();
@@ -272,12 +264,10 @@ function autoConnect() {
     });
     connections = [];
 
-    // Create spline connections for parsed data
     parsedConnections.forEach(conn => {
         const fromNode = nodes.find(n => n.data.id === conn.from);
         const toNode = nodes.find(n => n.data.id === conn.to);
         if (fromNode && toNode) {
-            // Find first available output and input ports
             const fromPort = fromNode.data.outputs[0];
             const toPort = toNode.data.inputs[0];
             if (fromPort && toPort) {
@@ -296,7 +286,6 @@ function autoConnect() {
     saveNodes();
 }
 
-// Add a manual node
 function addNode() {
     const node = createNode(
         Math.random() * (stage.width() - 100),
@@ -313,7 +302,6 @@ function addNode() {
     saveNodes();
 }
 
-// Update spline connections when nodes move
 function updateConnections() {
     layer.find('Shape').forEach(shape => {
         if (shape.data && shape.data.fromNodeId !== undefined) {
@@ -346,7 +334,6 @@ function updateConnections() {
     layer.draw();
 }
 
-// Save nodes and connections to backend
 function saveNodes() {
     fetch('/save_nodes', {
         method: 'POST',
@@ -361,7 +348,8 @@ function saveNodes() {
                 x: n.data.x,
                 y: n.data.y,
                 inputs: n.data.inputs.map(p => p.name),
-                outputs: n.data.outputs.map(p => p.name)
+                outputs: n.data.outputs.map(p => p.name),
+                value: n.data.value
             })),
             connections: connections
         })
@@ -370,5 +358,4 @@ function saveNodes() {
       .catch(error => console.error('Error:', error));
 }
 
-// Initial draw
 layer.draw();