From 818a305206d7cb4a061b147bfc29c8e606e7e23b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20ROU=C3=8BN=C3=89?= Date: Fri, 27 Oct 2023 09:25:48 +0200 Subject: [PATCH] [2509] Fix graphical DnD on high-depth level in some cases MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/2509 Signed-off-by: Florian ROUËNÉ --- CHANGELOG.adoc | 3 +- .../src/renderer/dropNode/useDropNode.tsx | 28 +++++++++++-------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index ff33d96164..7670c25d50 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -45,8 +45,9 @@ 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/2491[2491] [diagram] Fix an issue where multiple tool section could be opened. +- 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 diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/dropNode/useDropNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/dropNode/useDropNode.tsx index 6c030275ef..c7b0e027b5 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/dropNode/useDropNode.tsx +++ b/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, intersections: Node[]): number => { + let nodeDepth = 0; + + let nodeHierarchy: Node | undefined = node; + while (nodeHierarchy) { + nodeDepth++; + nodeHierarchy = intersections.find((node) => node.id === nodeHierarchy?.parentNode); + } + return nodeDepth; +}; + const useDropNodeMutation = () => { const { diagramId, editingContextId } = useContext(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,