[6032] Ensure edge handles on border nodes are placed opposite their anchor point

Bug: #6032
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

Author: frouene

CHANGELOG.adoc

@@ -250,6 +250,7 @@ Downstream applications can now implement `IProxyRemovalServiceDelegate` to cust
 The node action icons are now a little smaller and only appear after the node has been hovered for 0.5s.
 - https://github.com/eclipse-sirius/sirius-web/issues/6022[#6022] [sirius-web] Rename the "Representations" workbench view to "Related Views"
 - https://github.com/eclipse-sirius/sirius-web/issues/6041[#6041] [sirius-web] Provide access to the `editingContextId`, for migration participants during the loading of the resources, thanks to an adapter on the resource set named `EditingContextAdapter`.
+- https://github.com/eclipse-sirius/sirius-web/issues/6032[#6032] [diagram] Ensure edge handles on border nodes are placed opposite their anchor point
 
 
 

integration-tests-playwright/playwright/e2e/diagrams/bordernode.spec.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2025 Obeo.
+ * Copyright (c) 2025, 2026 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -98,3 +98,26 @@ test.describe('diagram - borderNode', () => {
     expect(reactFlowXYPositionEastAfterTopLeft.x).toBe(parentSizeAfterTopLeft.width - borderNodeGap);
   });
 });
+test.describe('diagram - borderNode', () => {
+  let projectId;
+  test.beforeEach(async ({ page, request }) => {
+    await new PlaywrightProject(request).uploadProject(page, 'projectBorderNodeHandlePosition.zip');
+    const playwrightExplorer = new PlaywrightExplorer(page);
+    await playwrightExplorer.expand('handlePosition');
+    await playwrightExplorer.expand('Root');
+    await playwrightExplorer.select('diagram');
+    const url = page.url();
+    const parts = url.split('/');
+    const projectsIndex = parts.indexOf('projects');
+    projectId = parts[projectsIndex + 1];
+  });
+
+  test.afterEach(async ({ request }) => {
+    await new PlaywrightProject(request).deleteProject(projectId);
+  });
+
+  test('When an edge is on a border node, then its handle is on the opposite', async ({ page }) => {
+    await expect(page.locator('.target_handle_right')).toHaveCount(1);
+    await expect(page.locator('.source_handle_top')).toHaveCount(1);
+  });
+});

integration-tests-playwright/playwright/resources/projectBorderNodeHandlePosition.zip

@@ -125,6 +125,21 @@ export const convertPositionToBorderNodePosition = (position: Position): BorderN
   }
 };
 
+export const convertBorderNodePositionToPosition = (borderNodePosition: BorderNodePosition | null): Position => {
+  switch (borderNodePosition) {
+    case BorderNodePosition.NORTH:
+      return Position.Top;
+    case BorderNodePosition.EAST:
+      return Position.Right;
+    case BorderNodePosition.SOUTH:
+      return Position.Bottom;
+    case BorderNodePosition.WEST:
+      return Position.Left;
+    default:
+      return Position.Right;
+  }
+};
+
 export const getBorderNodeParentIfExist = (
   node: InternalNode<Node<NodeData>>,
   nodeLookup: NodeLookup<InternalNode<Node<NodeData>>>

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layoutBorderNodes.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023, 2025 Obeo.
+ * Copyright (c) 2023, 2026 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -14,7 +14,12 @@ import { InternalNode, Node, Position, XYPosition } from '@xyflow/react';
 import { NodeLookup } from '@xyflow/system';
 import { GQLDiagramDescription } from '../../representation/DiagramRepresentation.types';
 import { NodeData } from '../DiagramRenderer.types';
-import { getEdgeParameters, getNodeCenter, getUpdatedConnectionHandles } from '../edge/EdgeLayout';
+import {
+  getEdgeParameters,
+  getNodeCenter,
+  getUpdatedConnectionHandle,
+  getUpdatedConnectionHandles,
+} from '../edge/EdgeLayout';
 import { ConnectionHandle } from '../handles/ConnectionHandles.types';
 import {
   GetUpdatedConnectionHandlesIndexByPosition,
@@ -23,9 +28,10 @@ import {
 import { evaluateAbsolutePosition } from '../node/NodeUtils';
 import { RawDiagram } from './layout.types';
 import {
-  getBorderNodeParentIfExist,
-  convertPositionToBorderNodePosition,
   computeBorderNodeXYPositionFromBorderNodePosition,
+  convertPositionToBorderNodePosition,
+  convertBorderNodePositionToPosition,
+  getBorderNodeParentIfExist,
 } from './layoutBorderNodes';
 
 const getHandlesIdsFromNode = (node: Node<NodeData>): string[] => {
@@ -197,38 +203,68 @@ const layoutHandlePosition = (
           (updatedNodes: Node<NodeData>[], node: Node<NodeData>, _index, nodeArray) => {
             if (edge.source && edge.target) {
               if (edge.source === node.id) {
-                if (node.data.isBorderNode && !node.data.movedByUser) {
-                  const newBorderNodePosition = convertPositionToBorderNodePosition(sourcePosition);
-                  const newXYPosition = computeBorderNodeXYPositionFromBorderNodePosition(
-                    node,
-                    nodeArray,
-                    updatedNodes,
-                    newBorderNodePosition,
-                    nodeLookup
-                  );
-                  if (newXYPosition) {
-                    node.position = newXYPosition;
+                if (node.data.isBorderNode) {
+                  if (!node.data.movedByUser) {
+                    const newBorderNodePosition = convertPositionToBorderNodePosition(sourcePosition);
+                    const newXYPosition = computeBorderNodeXYPositionFromBorderNodePosition(
+                      node,
+                      nodeArray,
+                      updatedNodes,
+                      newBorderNodePosition,
+                      nodeLookup
+                    );
+                    if (newXYPosition) {
+                      node.position = newXYPosition;
+                    }
+                    node.data = {
+                      ...node.data,
+                      borderNodePosition: newBorderNodePosition,
+                      connectionHandles: sourceConnectionHandles,
+                    };
+                  } else {
+                    const borderNodeConnectionHandles = getUpdatedConnectionHandle(
+                      sourceNode,
+                      convertBorderNodePositionToPosition(node.data.borderNodePosition),
+                      sourceHandle,
+                      'source'
+                    );
+                    node.data = { ...node.data, connectionHandles: borderNodeConnectionHandles };
                   }
-                  node.data = { ...node.data, borderNodePosition: newBorderNodePosition };
+                } else {
+                  node.data = { ...node.data, connectionHandles: sourceConnectionHandles };
                 }
-                node.data = { ...node.data, connectionHandles: sourceConnectionHandles };
               }
               if (edge.target === node.id) {
-                if (node.data.isBorderNode && !node.data.movedByUser) {
-                  const newBorderNodePosition = convertPositionToBorderNodePosition(targetPosition);
-                  const newXYPosition = computeBorderNodeXYPositionFromBorderNodePosition(
-                    node,
-                    nodeArray,
-                    updatedNodes,
-                    newBorderNodePosition,
-                    nodeLookup
-                  );
-                  if (newXYPosition) {
-                    node.position = newXYPosition;
+                if (node.data.isBorderNode) {
+                  if (!node.data.movedByUser) {
+                    const newBorderNodePosition = convertPositionToBorderNodePosition(targetPosition);
+                    const newXYPosition = computeBorderNodeXYPositionFromBorderNodePosition(
+                      node,
+                      nodeArray,
+                      updatedNodes,
+                      newBorderNodePosition,
+                      nodeLookup
+                    );
+                    if (newXYPosition) {
+                      node.position = newXYPosition;
+                    }
+                    node.data = {
+                      ...node.data,
+                      borderNodePosition: newBorderNodePosition,
+                      connectionHandles: targetConnectionHandles,
+                    };
+                  } else {
+                    const borderNodeConnectionHandles = getUpdatedConnectionHandle(
+                      targetNode,
+                      convertBorderNodePositionToPosition(node.data.borderNodePosition),
+                      targetHandle,
+                      'target'
+                    );
+                    node.data = { ...node.data, connectionHandles: borderNodeConnectionHandles };
                   }
-                  node.data = { ...node.data, borderNodePosition: convertPositionToBorderNodePosition(targetPosition) };
+                } else {
+                  node.data = { ...node.data, connectionHandles: targetConnectionHandles };
                 }
-                node.data = { ...node.data, connectionHandles: targetConnectionHandles };
               }
             }
             return [...updatedNodes, node];