[2571] Make sure edges are drawn up to the border of their target node

Bug: #2571
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

CHANGELOG.adoc

@@ -83,6 +83,7 @@ Note that double-clicking no longer triggers a direct edit.
 - https://github.com/eclipse-sirius/sirius-web/issues/2550[#2550] [diagram] Palette is now hidden on viewport or zoom change.
 - https://github.com/eclipse-sirius/sirius-web/issues/2562[#2562] [diagram] Prevent a node to be created on the TOP header of its parent.
 The node will be created below the header.
+- https://github.com/eclipse-sirius/sirius-web/issues/2571[#2562] [diagram] Fix a bug where edges would stop at the new creation handles instead of the border of their target node
 
 === New Features
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx

@@ -13,7 +13,14 @@
 
 import { useTheme } from '@material-ui/core/styles';
 import { useContext } from 'react';
-import { Connection, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams } from 'reactflow';
+import {
+  Connection,
+  OnConnect,
+  OnConnectEnd,
+  OnConnectStart,
+  OnConnectStartParams,
+  useUpdateNodeInternals,
+} from 'reactflow';
 import { useDiagramElementPalette } from '../palette/useDiagramElementPalette';
 import { ConnectorContext } from './ConnectorContext';
 import { ConnectorContextValue } from './ConnectorContext.types';
@@ -33,6 +40,7 @@ export const useConnector = (): UseConnectorValue => {
 
   const theme = useTheme();
   const { hideDiagramElementPalette } = useDiagramElementPalette();
+  const updateNodeInternals = useUpdateNodeInternals();
 
   const newConnectionStyleProvider: NodeStyleProvider = {
     getNodeStyle: (id: string): React.CSSProperties => {
@@ -63,10 +71,13 @@ export const useConnector = (): UseConnectorValue => {
 
   const onConnectStart: OnConnectStart = (
     _event: React.MouseEvent | React.TouchEvent,
-    _params: OnConnectStartParams
+    params: OnConnectStartParams
   ) => {
     hideDiagramElementPalette();
     resetConnection();
+    if (params.nodeId) {
+      updateNodeInternals(params.nodeId);
+    }
   };
 
   const onConnectorContextualMenuClose = () => resetConnection();

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/EdgeLayout.ts

@@ -60,7 +60,7 @@ const getNodeCenter: GetNodeCenter = (node) => {
 
 const getHandleCoordinatesByPosition: GetHandleCoordinatesByPosition = (node, handlePosition) => {
   const handle: HandleElement | undefined = (node[internalsSymbol]?.handleBounds?.source ?? []).find(
-    (handle) => handle.position === handlePosition
+    (handle) => handle.position === handlePosition && !handle.id?.startsWith('creationhandle')
   );
 
   if (handle) {

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

@@ -112,7 +112,7 @@ export const ConnectionCreationHandles = ({ nodeId }: ConnectionCreationHandlesP
         ? Object.values(Position).map((position) => {
             return (
               <Handle
-                id={`handle--${nodeId}--${position}`}
+                id={`creationhandle--${nodeId}--${position}`}
                 type="source"
                 position={position}
                 style={connectionCreationHandleStyle(position, theme, state.isHovered, state.isMouseDown)}