[2509] Fix graphical DnD on high-depth level in some cases

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

CHANGELOG.adoc

@@ -45,7 +45,8 @@ For example, Diagram & Form domains are not root domains because `DiagramDescrip
 - https://github.com/eclipse-sirius/sirius-web/issues/2487[#2487] [form] Fix an issue that prevents an error when using values not in the option list in a reference widget modal transfert.
 - https://github.com/eclipse-sirius/sirius-web/issues/1712[#1712] [diagram] Fix an issue that triggers direct label edition even if there is no corresponding tool.
 Note that double-clicking no longer triggers a direct edit.
--https://github.com/eclipse-sirius/sirius-web/issues/2498[#2498] [diagram] Fix an issue that prevents tool name to be displayed on multi lines in react flow diagram palette.
+- https://github.com/eclipse-sirius/sirius-web/issues/2498[#2498] [diagram] Fix an issue that prevents tool name to be displayed on multi lines in react flow diagram palette.
+- https://github.com/eclipse-sirius/sirius-web/issues/2509[#2509] [diagram] Fix an issue that prevents using graphical DnD in deep node in some cases.
 
 === New Features
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/dropNode/useDropNode.tsx

@@ -80,6 +80,17 @@ const isErrorPayload = (payload: GQLDropNodePayload): payload is GQLErrorPayload
 const isSuccessPayload = (payload: GQLDropNodePayload): payload is GQLSuccessPayload =>
   payload.__typename === 'SuccessPayload';
 
+const getNodeDepth = (node: Node<NodeData>, intersections: Node<NodeData>[]): number => {
+  let nodeDepth = 0;
+
+  let nodeHierarchy: Node<NodeData> | undefined = node;
+  while (nodeHierarchy) {
+    nodeDepth++;
+    nodeHierarchy = intersections.find((node) => node.id === nodeHierarchy?.parentNode);
+  }
+  return nodeDepth;
+};
+
 const useDropNodeMutation = () => {
   const { diagramId, editingContextId } = useContext<DiagramContextValue>(DiagramContext);
   const { addErrorMessage, addMessages } = useMultiToast();
@@ -170,18 +181,11 @@ export const useDropNode = (): UseDropNodeValue => {
 
   const onNodeDrag: NodeDragHandler = (_event, node) => {
     if (draggedNode && !draggedNode.data.isBorderNode) {
-      const intersections = getIntersectingNodes(node)
-        .filter((intersectingNode) => !isDescendantOf(draggedNode, intersectingNode, getNodeById))
-        .sort((n1, n2) => {
-          if (n1.parentNode === n2.id) {
-            return -1;
-          } else if (n2.parentNode === n1.id) {
-            return 1;
-          } else {
-            return 0;
-          }
-        });
-      const newParentId = intersections[0]?.id || null;
+      const intersections = getIntersectingNodes(node);
+      const newParentId =
+        [...intersections]
+          .filter((intersectingNode) => !isDescendantOf(draggedNode, intersectingNode, getNodeById))
+          .sort((n1, n2) => getNodeDepth(n2, intersections) - getNodeDepth(n1, intersections))[0]?.id || null;
       setDropData({
         initialParentId: node.parentNode || null,
         draggedNodeId: node.id,