Update static/canvas.js

static/canvas.js

@@ -8,9 +8,10 @@ const stage = new Konva.Stage({
 const layer = new Konva.Layer();
 stage.add(layer);
 
-// Store nodes and connections
+// Store nodes, connections, and parsed data
 let nodes = [];
 let connections = [];
+let parsedConnections = [];
 let selectedNode = null;
 
 // Submit code or file for parsing
@@ -39,6 +40,7 @@ function submitCode() {
             return;
         }
         clearCanvas();
+        parsedConnections = data.connections; // Store for auto-connect
         createNodesFromParsedData(data.nodes, data.connections);
     })
     .catch(error => console.error('Error:', error));
@@ -47,9 +49,10 @@ function submitCode() {
 // Clear existing nodes and connections
 function clearCanvas() {
     nodes.forEach(node => node.destroy());
-    layer.find('Line').forEach(line => line.destroy());
+    layer.find('Shape').forEach(shape => shape.destroy()); // Includes Bezier curves
     nodes = [];
     connections = [];
+    parsedConnections = [];
     layer.draw();
 }
 
@@ -69,23 +72,7 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
         layer.add(node);
     });
 
-    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) {
-            const line = new Konva.Line({
-                points: [
-                    fromNode.x() + 100, fromNode.y() + 25,
-                    toNode.x(), toNode.y() + 25
-                ],
-                stroke: 'black',
-                strokeWidth: 2
-            });
-            layer.add(line);
-            connections.push({ from: conn.from, to: conn.to });
-        }
-    });
-
+    // Initially, don't draw connections; wait for auto-connect or manual
     layer.draw();
     saveNodes();
 }
@@ -99,7 +86,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     });
 
     // Node rectangle
-    const color = type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : '#ccc';
+    const color = type === 'function' ? '#ffeb3b' : type.includes('variable') ? '#90caf9' : type === 'import' ? '#a5d6a7' : '#ccc';
     const box = new Konva.Rect({
         width: 100,
         height: 50,
@@ -160,15 +147,7 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         if (!selectedNode) {
             selectedNode = node;
         } else {
-            const line = new Konva.Line({
-                points: [
-                    selectedNode.x() + 100, selectedNode.y() + 25,
-                    node.x(), node.y() + 25
-                ],
-                stroke: 'black',
-                strokeWidth: 2
-            });
-            layer.add(line);
+            createSplineConnection(selectedNode, node);
             connections.push({
                 from: selectedNode.data.id,
                 to: node.data.id
@@ -189,6 +168,59 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     return node;
 }
 
+// Create a spline (Bezier curve) connection
+function createSplineConnection(fromNode, toNode) {
+    const startX = fromNode.x() + 100;
+    const startY = fromNode.y() + 25;
+    const endX = toNode.x();
+    const endY = toNode.y() + 25;
+
+    // Control points for Bezier curve
+    const control1X = startX + (endX - startX) / 3;
+    const control1Y = startY;
+    const control2X = startX + 2 * (endX - startX) / 3;
+    const control2Y = endY;
+
+    const spline = new Konva.Shape({
+        sceneFunc: function(context, shape) {
+            context.beginPath();
+            context.moveTo(startX, startY);
+            context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
+            context.fillStrokeShape(shape);
+        },
+        stroke: 'black',
+        strokeWidth: 2
+    });
+
+    spline.data = { from: fromNode.data.id, to: toNode.data.id };
+    layer.add(spline);
+    layer.draw();
+}
+
+// Auto-connect nodes based on parsed connections
+function autoConnect() {
+    // Clear existing connections
+    layer.find('Shape').forEach(shape => {
+        if (shape.data && shape.data.from !== undefined) {
+            shape.destroy();
+        }
+    });
+    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) {
+            createSplineConnection(fromNode, toNode);
+            connections.push({ from: conn.from, to: conn.to });
+        }
+    });
+
+    layer.draw();
+    saveNodes();
+}
+
 // Add a manual node
 function addNode() {
     const node = createNode(
@@ -206,18 +238,29 @@ function addNode() {
     saveNodes();
 }
 
-// Update connection lines when nodes move
+// Update spline connections when nodes move
 function updateConnections() {
-    connections.forEach((conn, index) => {
-        const fromNode = nodes.find(n => n.data.id === conn.from);
-        const toNode = nodes.find(n => n.data.id === conn.to);
-        if (fromNode && toNode) {
-            const line = layer.find('Line')[index];
-            if (line) {
-                line.points([
-                    fromNode.x() + 100, fromNode.y() + 25,
-                    toNode.x(), toNode.y() + 25
-                ]);
+    layer.find('Shape').forEach(shape => {
+        if (shape.data && shape.data.from !== undefined) {
+            const fromNode = nodes.find(n => n.data.id === shape.data.from);
+            const toNode = nodes.find(n => n.data.id === shape.data.to);
+            if (fromNode && toNode) {
+                const startX = fromNode.x() + 100;
+                const startY = fromNode.y() + 25;
+                const endX = toNode.x();
+                const endY = toNode.y() + 25;
+
+                const control1X = startX + (endX - startX) / 3;
+                const control1Y = startY;
+                const control2X = startX + 2 * (endX - startX) / 3;
+                const control2Y = endY;
+
+                shape.sceneFunc(function(context, shape) {
+                    context.beginPath();
+                    context.moveTo(startX, startY);
+                    context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
+                    context.fillStrokeShape(shape);
+                });
             }
         }
     });