From 46f40fe9bea0a15b8bc274d39a973a09322aa2d4 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Fri, 25 Sep 2026 13:04:54 +0200
Subject: [PATCH] Put a loop's delete button in its label, not between its ends
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every connection puts its × at the midpoint of its two ends, which is on
the curve for an ordinary one. A way back is drawn above the nodes, so
that midpoint landed on whatever connection ran between them - it looked
like that connection's ×, still showing after another was selected.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../custom-connection/custom-connection.ts    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/custom-connection/custom-connection.ts b/src/app/shared/custom-connection/custom-connection.ts
index 134164b..deccd0a 100644
--- a/src/app/shared/custom-connection/custom-connection.ts
+++ b/src/app/shared/custom-connection/custom-connection.ts
@@ -50,13 +50,21 @@ import { BiasComparisonViewStateService } from '@services/bias/bias-comparison-v
               (keydown)="$event.stopPropagation()"
               (change)="changeLimit($event)" />
           </label>
+          <button
+            type="button"
+            class="connection-delete loop-delete"
+            title="Delete connection"
+            (pointerdown)="deleteConnection($event)"
+            (click)="deleteConnection($event)">
+            <span>×</span>
+          </button>
           } @else {
           <span title="Goes round at most this many times; reaching the limit fails the execution">max {{ maxIterations }}</span>
           }
         </div>
       </foreignObject>
       }
-      @if (isSelected && !isReadonly) {
+      @if (isSelected && !isReadonly && !isLoopBack) {
       <foreignObject
         class="connection-delete-wrap"
         [attr.x]="deleteButtonX"
@@ -144,6 +152,16 @@ import { BiasComparisonViewStateService } from '@services/bias/bias-comparison-v
       line-height: 1;
     }
 
+    /* Its own × sits in the label: the midpoint of its two ends, where other connections put it,
+       is nowhere on a way back drawn above the nodes - it lands on whatever runs between them. */
+    :host .loop-delete {
+      width: 20px;
+      height: 20px;
+      font-size: 15px;
+      box-shadow: none;
+      border: 1px solid #fecaca;
+    }
+
     :host .loop-limit {
       display: inline-flex;
       align-items: center;