From 28c3c5e78e4b1faf5baa376a42bea74fcd660c51 Mon Sep 17 00:00:00 2001
From: Pierre-Charles David <pierre-charles.david@obeo.fr>
Date: Wed, 15 Nov 2023 10:36:25 +0100
Subject: [PATCH] [2571] Make sure edges are drawn up to the border of their
 target node

Bug: https://github.com/eclipse-sirius/sirius-web/issues/2571
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
---
 CHANGELOG.adoc                                    |  1 +
 .../src/renderer/connector/useConnector.tsx       | 15 +++++++++++++--
 .../src/renderer/edge/EdgeLayout.ts               |  2 +-
 .../handles/ConnectionCreationHandles.tsx         |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 9d66e70d24..f68894005b 100644
--- a/CHANGELOG.adoc
+++ b/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
 
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx
index 450f906c73..bd201d978c 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx
+++ b/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();
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/EdgeLayout.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/EdgeLayout.ts
index b5c7eeb3df..70c057f99a 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/EdgeLayout.ts
+++ b/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) {
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionCreationHandles.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionCreationHandles.tsx
index 6f0b196267..581bd22282 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionCreationHandles.tsx
+++ b/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)}