From 2bf0f4080493a06c37175170d3ac390bb355bea1 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Tue, 29 Sep 2026 09:36:20 +0200
Subject: [PATCH] Put a resource's handle bar on its right edge

Its links now leave to the right from the bar's middle, as a step's
outputs do, and come into the step's handle from the left.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../custom-connection/custom-connection.ts     | 10 ++++------
 .../nodes/resource-node/resource-node.css      | 18 +++++++++---------
 src/app/utilities/rete-editor.ts               |  4 ++--
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/app/shared/custom-connection/custom-connection.ts b/src/app/shared/custom-connection/custom-connection.ts
index 99c694b..91db8cb 100644
--- a/src/app/shared/custom-connection/custom-connection.ts
+++ b/src/app/shared/custom-connection/custom-connection.ts
@@ -248,16 +248,14 @@ export class CustomConnectionComponent {
   }
 
   /**
-   * A resource's handle is on its top edge, so its link leaves vertically, towards the step, and
-   * comes into the step's handle from the left - not the side-to-side curve of a connection
-   * between steps.
+   * A resource's handle is a bar on its right edge, and a link leaves it from the middle: out to
+   * the right and into the step's handle from the left.
    */
   private resourceLinkPath(): string {
     const { x: sx, y: sy } = this.start;
     const { x: ex, y: ey } = this.end;
-    const rise = (ey <= sy ? -1 : 1) * Math.max(50, Math.abs(ey - sy) / 2);
-    const across = Math.max(50, Math.abs(ex - sx) / 2);
-    return `M ${sx} ${sy} C ${sx} ${sy + rise}, ${ex - across} ${ey}, ${ex} ${ey}`;
+    const across = Math.max(60, Math.abs(ex - sx) / 2);
+    return `M ${sx} ${sy} C ${sx + across} ${sy}, ${ex - across} ${ey}, ${ex} ${ey}`;
   }
 
   private get loopTop(): number {
diff --git a/src/app/shared/nodes/resource-node/resource-node.css b/src/app/shared/nodes/resource-node/resource-node.css
index a6fd866..45168b1 100644
--- a/src/app/shared/nodes/resource-node/resource-node.css
+++ b/src/app/shared/nodes/resource-node/resource-node.css
@@ -15,7 +15,7 @@
 .resource-card {
   position: relative;
   width: 250px;
-  padding: 16px 12px 12px;
+  padding: 12px 16px 12px 12px;
   border: 1.5px solid #99f6e4;
   border-left: 5px solid #0d9488;
   border-radius: 14px;
@@ -217,15 +217,15 @@
 }
 
 /*
- * The handle is a bar along the whole top edge: a resource usually lies under the steps that use
- * it, and its links rise to them from anywhere along it rather than from a point on a side.
+ * The handle is a bar along the whole right edge, so it can be grabbed anywhere along it, and its
+ * links leave from the bar's middle towards the steps that use the resource.
  */
 .resource-card__link {
   position: absolute;
-  top: -5px;
-  left: 18px;
-  right: 18px;
-  height: 9px;
+  top: 14px;
+  bottom: 14px;
+  right: -5px;
+  width: 9px;
 }
 
 .resource-card__socket {
@@ -236,8 +236,8 @@
 
 /* The socket sizes itself as a square; here it is stretched into the bar. */
 .resource-card__socket ::ng-deep > * {
-  width: 100% !important;
-  height: 9px !important;
+  width: 9px !important;
+  height: 100% !important;
   border-radius: 999px !important;
 }
 
diff --git a/src/app/utilities/rete-editor.ts b/src/app/utilities/rete-editor.ts
index 8508f03..f15c62e 100644
--- a/src/app/utilities/rete-editor.ts
+++ b/src/app/utilities/rete-editor.ts
@@ -124,8 +124,8 @@ export async function createEditor(
 
   render.addPreset(
     Presets.classic.setup({
-      // Rete pushes an output's anchor 12px past its socket, for a handle on a node's right side.
-      // A resource's handle is a bar along its top edge: its links start from the bar's middle.
+      // Rete pushes an output's anchor 12px past its socket, for a small handle on a node's side.
+      // A resource's handle is a bar along its right edge: its links start from the bar itself.
       socketPositionWatcher: getDOMSocketPosition<HFSchemes, any>({
         offset: (position, _nodeId, side, key) => key === FLOW_RESOURCE_PORT_KEY
           ? position