[2608] Improve the layout of edge handles on the left and right side of nodes

CHANGELOG.adoc

@@ -161,6 +161,7 @@ The new implementation of `IEditService`, named `ComposedEditService`, tries fir
 - https://github.com/eclipse-sirius/sirius-web/issues/2235[#2235] [diagram] Reduce the amount of code in DiagramRenderer
 - https://github.com/eclipse-sirius/sirius-web/issues/2572[#2572] [diagram] Each edges now have a dedicated handle.
 - https://github.com/eclipse-sirius/sirius-web/issues/2584[#2584] [diagram] Add feedback during edge creation.
+- https://github.com/eclipse-sirius/sirius-web/issues/2608[#2608] [diagram] Improve the placement of handles on the left and right side of nodes so that they are properly centered.
 
 == v2023.10.0
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionHandles.tsx

@@ -51,7 +51,12 @@ const borderHandlesStyle = (position: Position): React.CSSProperties => {
   return style;
 };
 
-const handleStyle = (theme: Theme, position: Position, isEdgeSelected: boolean): React.CSSProperties => {
+const handleStyle = (
+  theme: Theme,
+  position: Position,
+  isEdgeSelected: boolean,
+  isVirtualHandle: boolean
+): React.CSSProperties => {
   const style: React.CSSProperties = {
     position: 'relative',
     transform: 'none',
@@ -72,6 +77,10 @@ const handleStyle = (theme: Theme, position: Position, isEdgeSelected: boolean):
     style.opacity = 1;
     style.outline = `${theme.palette.primary.main} solid 1px`;
   }
+  if (isVirtualHandle) {
+    style.position = 'absolute';
+    style.display = 'none';
+  }
   return style;
 };
 
@@ -96,22 +105,30 @@ export const ConnectionHandles = ({ connectionHandles }: ConnectionHandlesProps)
   return (
     <>
       {Object.values(Position).map((position) => {
+        const currentSideHandles = connectionHandles.filter(
+          (connectionHandle) => connectionHandle.position === position
+        );
         return (
           <div style={borderHandlesStyle(position)} key={position}>
-            {connectionHandles
-              .filter((connectionHandle) => connectionHandle.position === position)
-              .map((connectionHandle) => {
-                return (
-                  <Handle
-                    id={connectionHandle.id ?? ''}
-                    style={handleStyle(theme, connectionHandle.position, isHandleSelected(connectionHandle))}
-                    type={connectionHandle.type}
-                    position={connectionHandle.position}
-                    key={connectionHandle.id}
-                    isConnectable={true}
-                  />
-                );
-              })}
+            {currentSideHandles.map((connectionHandle, index) => {
+              const isVirtualHandle =
+                (position === Position.Left || position === Position.Right) && index === currentSideHandles.length - 1;
+              return (
+                <Handle
+                  id={connectionHandle.id ?? ''}
+                  style={handleStyle(
+                    theme,
+                    connectionHandle.position,
+                    isHandleSelected(connectionHandle),
+                    isVirtualHandle
+                  )}
+                  type={connectionHandle.type}
+                  position={connectionHandle.position}
+                  key={connectionHandle.id}
+                  isConnectable={true}
+                />
+              );
+            })}
           </div>
         );
       })}