Fix InvalidOperationException when deleting connections from UI (#73)

Author: Copilot

src/NodeDev.Blazor/Components/GraphCanvas.razor.cs

@@ -580,7 +580,11 @@ public void RemoveLinkFromGraphCanvas(Connection source, Connection destination)
         DisableConnectionUpdate = true;
         try
         {
-            Diagram.Links.Remove(Diagram.Links.First(x => (x.Source.Model as GraphPortModel)?.Connection == source && (x.Target.Model as GraphPortModel)?.Connection == destination));
+            var link = Diagram.Links.FirstOrDefault(x => (x.Source.Model as GraphPortModel)?.Connection == source && (x.Target.Model as GraphPortModel)?.Connection == destination);
+            if (link != null)
+            {
+                Diagram.Links.Remove(link);
+            }
         }
         finally
         {

src/NodeDev.EndToEndTests/Features/NodeManipulation.feature

@@ -34,6 +34,13 @@ Scenario: Disconnect and reconnect nodes
 	When I connect the 'Entry' 'Exec' output to the 'Return' 'Exec' input
 	Then I take a screenshot named 'reconnected'
 
+Scenario: Delete connection between Entry and Return nodes
+	Given I load the default project
+	And I open the 'Main' method in the 'Program' class
+	When I delete the connection between 'Entry' 'Exec' output and 'Return' 'Exec' input
+	Then There should be no console errors
+	And I take a screenshot named 'connection-deleted'
+
 Scenario: Open method and check for browser errors
 	Given I load the default project
 	When I check for console errors

src/NodeDev.EndToEndTests/Pages/HomePage.cs

@@ -254,6 +254,41 @@ public async Task ConnectPorts(string sourceNodeName, string sourcePortName, str
 		await Task.Delay(200); // Wait for connection to be established
 	}
 
+	public async Task DeleteConnection(string sourceNodeName, string sourcePortName, string targetNodeName, string targetPortName)
+	{
+		Console.WriteLine($"Deleting connection: {sourceNodeName}.{sourcePortName} -> {targetNodeName}.{targetPortName}");
+		
+		// In Blazor.Diagrams, connections are rendered as SVG paths
+		// We need to click on the connection to select it, then press Delete
+		
+		// Get source and target port positions
+		var sourcePort = GetGraphPort(sourceNodeName, sourcePortName, isInput: false);
+		await sourcePort.WaitForVisible();
+		
+		var targetPort = GetGraphPort(targetNodeName, targetPortName, isInput: true);
+		await targetPort.WaitForVisible();
+		
+		var sourceBox = await sourcePort.BoundingBoxAsync();
+		var targetBox = await targetPort.BoundingBoxAsync();
+		
+		if (sourceBox == null || targetBox == null)
+			throw new Exception("Could not get bounding boxes for ports");
+		
+		// Calculate midpoint between source and target
+		var midX = (float)(sourceBox.X + sourceBox.Width / 2 + targetBox.X + targetBox.Width / 2) / 2;
+		var midY = (float)(sourceBox.Y + sourceBox.Height / 2 + targetBox.Y + targetBox.Height / 2) / 2;
+		
+		Console.WriteLine($"Clicking on connection midpoint: ({midX}, {midY})");
+		
+		// Click on the connection to select it
+		await _user.Mouse.ClickAsync(midX, midY);
+		await Task.Delay(100);
+		
+		// Press Delete key to remove the connection
+		await _user.Keyboard.PressAsync("Delete");
+		await Task.Delay(100);
+	}
+
 	public async Task TakeScreenshot(string fileName)
 	{
 		await _user.ScreenshotAsync(new() { Path = fileName });

src/NodeDev.EndToEndTests/StepDefinitions/NodeManipulationStepDefinitions.cs

@@ -205,4 +205,22 @@ public async Task ThenTheGraphCanvasShouldBeVisible()
 
 		Console.WriteLine("✓ Graph canvas is visible");
 	}
+
+	[When("I delete the connection between {string} {string} output and {string} {string} input")]
+	public async Task WhenIDeleteTheConnectionBetweenOutputAndInput(string sourceNode, string sourcePort, string targetNode, string targetPort)
+	{
+		Console.WriteLine($"Deleting connection: {sourceNode}.{sourcePort} (output) -> {targetNode}.{targetPort} (input)");
+		
+		// Take screenshot before
+		await HomePage.TakeScreenshot($"/tmp/before-delete-connection-{Guid.NewGuid()}.png");
+		
+		// Delete the connection
+		await HomePage.DeleteConnection(sourceNode, sourcePort, targetNode, targetPort);
+		
+		// Take screenshot after
+		await HomePage.TakeScreenshot($"/tmp/after-delete-connection-{Guid.NewGuid()}.png");
+		
+		// Wait for UI to update
+		await Task.Delay(200);
+	}
 }