Update static/canvas.js

static/canvas.js

@@ -2,18 +2,58 @@
 const stage = new Konva.Stage({
     container: 'container',
     width: 1000,
-    height: 600
+    height: 600,
+    draggable: true // Enable stage dragging for panning
 });
 
 const layer = new Konva.Layer();
 stage.add(layer);
 
+// Store nodes, connections, and parsed data
 let nodes = [];
-let connections = [];
+let connections = []; // { fromNodeId, fromPortId, toNodeId, toPortId }
 let parsedConnections = [];
-let selectedPort = null;
+let selectedPort = null; // { node, portId, type: 'input'|'output' }
 let disconnectMode = false;
 
+// Zoom functionality
+let scale = 1;
+const scaleFactor = 1.1;
+const minScale = 0.5;
+const maxScale = 2.0;
+
+stage.on('wheel', (e) => {
+    e.evt.preventDefault(); // Prevent default browser scrolling
+
+    const oldScale = scale;
+    const pointer = stage.getPointerPosition();
+
+    // Determine zoom direction
+    const delta = e.evt.deltaY > 0 ? 1 / scaleFactor : scaleFactor;
+    const newScale = Math.max(minScale, Math.min(maxScale, oldScale * delta));
+
+    if (newScale === scale) return; // No change in scale
+    scale = newScale;
+
+    // Calculate mouse position relative to stage
+    const mousePointTo = {
+        x: (pointer.x - stage.x()) / oldScale,
+        y: (pointer.y - stage.y()) / oldScale
+    };
+
+    // Apply new scale
+    stage.scale({ x: scale, y: scale });
+
+    // Adjust stage position to keep the zoom centered on the mouse
+    const newPos = {
+        x: pointer.x - mousePointTo.x * scale,
+        y: pointer.y - mousePointTo.y * scale
+    };
+    stage.position(newPos);
+    stage.batchDraw();
+});
+
+// Submit code or file for parsing
 function submitCode() {
     const fileInput = document.getElementById('codeFile');
     const codeInput = document.getElementById('codeInput').value;
@@ -39,12 +79,13 @@ function submitCode() {
             return;
         }
         clearCanvas();
-        parsedConnections = data.connections;
+        parsedConnections = data.connections; // Store for auto-connect
         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());
@@ -54,6 +95,7 @@ function clearCanvas() {
     layer.draw();
 }
 
+// Create nodes and connections from parsed data
 function createNodesFromParsedData(parsedNodes, parsedConnections) {
     parsedNodes.forEach(nodeData => {
         const node = createNode(
@@ -63,8 +105,7 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
             nodeData.type,
             nodeData.inputs,
             nodeData.outputs,
-            nodeData.id,
-            nodeData.value
+            nodeData.id
         );
         nodes.push(node);
         layer.add(node);
@@ -73,44 +114,40 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
     saveNodes();
 }
 
-function createNode(x, y, label, type, inputs = [], outputs = [], id, value = null) {
+// Create a node with inputs and outputs
+function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     const node = new Konva.Group({
         x: x,
         y: y,
         draggable: true
     });
 
-    // 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;
-
+    // Node rectangle
+    const color = type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : type === 'import' ? '#a5d6a7' : '#ccc';
     const box = new Konva.Rect({
-        width: width,
-        height: height,
+        width: 100,
+        height: 50,
         fill: color,
         stroke: 'black',
         strokeWidth: 2,
         cornerRadius: 5
     });
 
-    // Node label and value
-    const textContent = isNumberBox && value ? `${label} = ${value}` : label;
+    // Node label
     const text = new Konva.Text({
-        text: textContent,
+        text: label,
         fontSize: 12,
         fontFamily: 'Arial',
         fill: 'black',
-        width: width,
+        width: 100,
         align: 'center',
-        y: isNumberBox ? 14 : 20
+        y: 20
     });
 
     node.add(box);
     node.add(text);
 
-    // Input/output ports
+    // Add input/output ports with unique IDs
     const inputPorts = inputs.map((input, i) => ({
         id: `input-${id}-${i}`,
         name: input,
@@ -126,20 +163,22 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, value = nu
         id: `output-${id}-${i}`,
         name: output,
         circle: new Konva.Circle({
-            x: width,
+            x: 100,
             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;
+                disconnectMode = true; // First click on input enables disconnect mode
             } else if (selectedPort.type === 'output' && selectedPort.node !== node) {
+                // Connect output to input
                 createSplineConnection(
                     selectedPort.node,
                     selectedPort.portId,
@@ -156,7 +195,8 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, value = nu
                 disconnectMode = false;
                 saveNodes();
             } else if (disconnectMode && selectedPort.type === 'input' && selectedPort.node === node) {
-                selectedPort = { node, portId: port.id, type: 'input' };
+                // Select output to disconnect
+                selectedPort = { node, portId: port.id, type: 'input' }; // Keep input selected
             } else {
                 selectedPort = null;
                 disconnectMode = false;
@@ -171,6 +211,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, value = nu
                 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 &&
@@ -199,6 +240,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, value = nu
         });
     });
 
+    // Node data
     node.data = {
         id: id,
         type: type,
@@ -206,10 +248,10 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, value = nu
         inputs: inputPorts,
         outputs: outputPorts,
         x: x,
-        y: y,
-        value: value
+        y: y
     };
 
+    // Update position and connections on drag
     node.on('dragmove', () => {
         node.data.x = node.x();
         node.data.y = node.y();
@@ -220,6 +262,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id, value = nu
     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);
@@ -230,6 +273,7 @@ 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;
@@ -256,7 +300,9 @@ 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();
@@ -264,10 +310,12 @@ 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) {
@@ -286,6 +334,7 @@ function autoConnect() {
     saveNodes();
 }
 
+// Add a manual node
 function addNode() {
     const node = createNode(
         Math.random() * (stage.width() - 100),
@@ -302,6 +351,7 @@ function addNode() {
     saveNodes();
 }
 
+// Update spline connections when nodes move
 function updateConnections() {
     layer.find('Shape').forEach(shape => {
         if (shape.data && shape.data.fromNodeId !== undefined) {
@@ -334,6 +384,7 @@ function updateConnections() {
     layer.draw();
 }
 
+// Save nodes and connections to backend
 function saveNodes() {
     fetch('/save_nodes', {
         method: 'POST',
@@ -348,8 +399,7 @@ 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),
-                value: n.data.value
+                outputs: n.data.outputs.map(p => p.name)
             })),
             connections: connections
         })
@@ -358,4 +408,5 @@ function saveNodes() {
       .catch(error => console.error('Error:', error));
 }
 
+// Initial draw
 layer.draw();