Update static/canvas.js

static/canvas.js

@@ -10,9 +10,10 @@ stage.add(layer);
 
 // Store nodes, connections, and parsed data
 let nodes = [];
-let connections = [];
+let connections = []; // { fromNodeId, fromPortId, toNodeId, toPortId }
 let parsedConnections = [];
-let selectedNode = null;
+let selectedPort = null; // { node, portId, type: 'input'|'output' }
+let disconnectMode = false;
 
 // Submit code or file for parsing
 function submitCode() {
@@ -49,7 +50,7 @@ function submitCode() {
 // Clear existing nodes and connections
 function clearCanvas() {
     nodes.forEach(node => node.destroy());
-    layer.find('Shape').forEach(shape => shape.destroy()); // Includes Bezier curves
+    layer.find('Shape').forEach(shape => shape.destroy());
     nodes = [];
     connections = [];
     parsedConnections = [];
@@ -71,8 +72,6 @@ function createNodesFromParsedData(parsedNodes, parsedConnections) {
         nodes.push(node);
         layer.add(node);
     });
-
-    // Initially, don't draw connections; wait for auto-connect or manual
     layer.draw();
     saveNodes();
 }
@@ -110,25 +109,97 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
     node.add(box);
     node.add(text);
 
-    // Add input/output ports
-    inputs.forEach((input, i) => {
-        const circle = new Konva.Circle({
+    // Add input/output ports with unique IDs
+    const inputPorts = inputs.map((input, i) => ({
+        id: `input-${id}-${i}`,
+        name: input,
+        circle: new Konva.Circle({
             x: 0,
             y: 10 + i * 20,
             radius: 5,
             fill: 'red'
-        });
-        node.add(circle);
-    });
+        })
+    }));
 
-    outputs.forEach((output, i) => {
-        const circle = new Konva.Circle({
+    const outputPorts = outputs.map((output, i) => ({
+        id: `output-${id}-${i}`,
+        name: output,
+        circle: new Konva.Circle({
             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; // First click on input enables disconnect mode
+            } else if (selectedPort.type === 'output' && selectedPort.node !== node) {
+                // Connect output to input
+                createSplineConnection(
+                    selectedPort.node,
+                    selectedPort.portId,
+                    node,
+                    port.id
+                );
+                connections.push({
+                    fromNodeId: selectedPort.node.data.id,
+                    fromPortId: selectedPort.portId,
+                    toNodeId: node.data.id,
+                    toPortId: port.id
+                });
+                selectedPort = null;
+                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
+            } else {
+                selectedPort = null;
+                disconnectMode = false;
+            }
+        });
+    });
+
+    outputPorts.forEach(port => {
+        node.add(port.circle);
+        port.circle.on('click', () => {
+            if (!selectedPort) {
+                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 &&
+                         c.fromNodeId === node.data.id &&
+                         c.fromPortId === port.id
+                );
+                if (connIndex !== -1) {
+                    const conn = connections[connIndex];
+                    const spline = layer.find('Shape').find(s => 
+                        s.data.fromNodeId === conn.fromNodeId &&
+                        s.data.fromPortId === conn.fromPortId &&
+                        s.data.toNodeId === conn.toNodeId &&
+                        s.data.toPortId === conn.toPortId
+                    );
+                    if (spline) spline.destroy();
+                    connections.splice(connIndex, 1);
+                    layer.draw();
+                    saveNodes();
+                }
+                selectedPort = null;
+                disconnectMode = false;
+            } else {
+                selectedPort = null;
+                disconnectMode = false;
+            }
         });
-        node.add(circle);
     });
 
     // Node data
@@ -136,27 +207,12 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
         id: id,
         type: type,
         label: label,
-        inputs: inputs,
-        outputs: outputs,
+        inputs: inputPorts,
+        outputs: outputPorts,
         x: x,
         y: y
     };
 
-    // Handle node click for manual connections
-    node.on('click', () => {
-        if (!selectedNode) {
-            selectedNode = node;
-        } else {
-            createSplineConnection(selectedNode, node);
-            connections.push({
-                from: selectedNode.data.id,
-                to: node.data.id
-            });
-            selectedNode = null;
-            saveNodes();
-        }
-    });
-
     // Update position and connections on drag
     node.on('dragmove', () => {
         node.data.x = node.x();
@@ -169,11 +225,15 @@ function createNode(x, y, label, type, inputs = [], outputs = [], id) {
 }
 
 // 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;
+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);
+    if (!fromPort || !toPort) return;
+
+    const startX = fromNode.x() + fromPort.circle.x();
+    const startY = fromNode.y() + fromPort.circle.y();
+    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;
@@ -192,7 +252,12 @@ function createSplineConnection(fromNode, toNode) {
         strokeWidth: 2
     });
 
-    spline.data = { from: fromNode.data.id, to: toNode.data.id };
+    spline.data = {
+        fromNodeId: fromNode.data.id,
+        fromPortId: fromPortId,
+        toNodeId: toNode.data.id,
+        toPortId: toPortId
+    };
     layer.add(spline);
     layer.draw();
 }
@@ -201,7 +266,7 @@ function createSplineConnection(fromNode, toNode) {
 function autoConnect() {
     // Clear existing connections
     layer.find('Shape').forEach(shape => {
-        if (shape.data && shape.data.from !== undefined) {
+        if (shape.data && shape.data.fromNodeId !== undefined) {
             shape.destroy();
         }
     });
@@ -212,8 +277,18 @@ function autoConnect() {
         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 });
+            // Find first available output and input ports
+            const fromPort = fromNode.data.outputs[0];
+            const toPort = toNode.data.inputs[0];
+            if (fromPort && toPort) {
+                createSplineConnection(fromNode, fromPort.id, toNode, toPort.id);
+                connections.push({
+                    fromNodeId: fromNode.data.id,
+                    fromPortId: fromPort.id,
+                    toNodeId: toNode.data.id,
+                    toPortId: toPort.id
+                });
+            }
         }
     });
 
@@ -228,8 +303,8 @@ function addNode() {
         Math.random() * (stage.height() - 100),
         'Function',
         'function',
-        [],
-        [],
+        ['in1'],
+        ['out1'],
         nodes.length
     );
     nodes.push(node);
@@ -241,26 +316,30 @@ function addNode() {
 // Update spline connections when nodes move
 function updateConnections() {
     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 (shape.data && shape.data.fromNodeId !== undefined) {
+            const fromNode = nodes.find(n => n.data.id === shape.data.fromNodeId);
+            const toNode = nodes.find(n => n.data.id === shape.data.toNodeId);
             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);
-                });
+                const fromPort = fromNode.data.outputs.find(p => p.id === shape.data.fromPortId);
+                const toPort = toNode.data.inputs.find(p => p.id === shape.data.toPortId);
+                if (fromPort && toPort) {
+                    const startX = fromNode.x() + fromPort.circle.x();
+                    const startY = fromNode.y() + fromPort.circle.y();
+                    const endX = toNode.x() + toPort.circle.x();
+                    const endY = toNode.y() + toPort.circle.y();
+
+                    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);
+                    });
+                }
             }
         }
     });
@@ -275,7 +354,15 @@ function saveNodes() {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            nodes: nodes.map(n => n.data),
+            nodes: nodes.map(n => ({
+                id: n.data.id,
+                type: n.data.type,
+                label: n.data.label,
+                x: n.data.x,
+                y: n.data.y,
+                inputs: n.data.inputs.map(p => p.name),
+                outputs: n.data.outputs.map(p => p.name)
+            })),
             connections: connections
         })
     }).then(response => response.json())