[2689] Fix the borderNode moves that is no longer anchored to its parent

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

CHANGELOG.adoc

@@ -130,6 +130,7 @@ It uses our algorithm instead of elk.js to perform the arrange-all.
 Make some border node transparent when the node is in a list node in the convert engine.
 - https://github.com/eclipse-sirius/sirius-web/issues/2646[#2646] [diagram] Fix an issue where the palette was re rendering too much.
 - https://github.com/eclipse-sirius/sirius-web/issues/2685[#2685] [diagram] Fix direct edit of edge labels with F2.
+- https://github.com/eclipse-sirius/sirius-web/issues/2689[#2689] [diagram] Fix the borderNode moves that is no longer anchored to its parent.
 
 === New Features
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts

@@ -26,6 +26,7 @@ import { IconLabelNodeConverterHandler } from './IconLabelNodeConverterHandler';
 import { ImageNodeConverterHandler } from './ImageNodeConverterHandler';
 import { ListNodeConverterHandler } from './ListNodeConverterHandler';
 import { RectangleNodeConverterHandler } from './RectangleNodeConverterHandler';
+import { computeBorderNodeExtents } from '../renderer/layout/layoutBorderNodes';
 
 const nodeDepth = (nodeId2node: Map<string, Node>, nodeId: string): number => {
   const node = nodeId2node.get(nodeId);
@@ -218,6 +219,7 @@ export const convertDiagram = (
     edges,
   };
   layoutHandles(rawDiagram);
+  computeBorderNodeExtents(rawDiagram.nodes);
 
   return {
     metadata: {

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

@@ -13,6 +13,7 @@
 import { CoordinateExtent, Node } from 'reactflow';
 import { BorderNodePositon, NodeData } from '../DiagramRenderer.types';
 import { borderNodeOffset } from './layoutParams';
+import { DiagramNodeType } from '../node/NodeTypes.types';
 
 export const isEastBorderNode = (borderNode: Node<NodeData>): boolean => {
   return borderNode.data.isBorderNode && borderNode.data.borderNodePosition === BorderNodePositon.EAST;
@@ -28,15 +29,26 @@ export const isSouthBorderNode = (borderNode: Node<NodeData>): boolean => {
 };
 
 export const getBorderNodeExtent = (
-  nodeParent: Node<NodeData>,
-  borderNorde: Node<NodeData>
+  parentNode: Node<NodeData>,
+  borderNode: Node<NodeData>
 ): CoordinateExtent | 'parent' => {
   let coordinateExtent: CoordinateExtent | 'parent' = 'parent';
-  if (nodeParent.width && nodeParent.height && borderNorde.height && borderNorde.width) {
+  if (parentNode.width && parentNode.height && borderNode.height && borderNode.width) {
     coordinateExtent = [
-      [0 - borderNorde.width + borderNodeOffset, 0 - borderNorde.height + borderNodeOffset],
-      [nodeParent.width - borderNodeOffset, nodeParent.height - borderNodeOffset],
+      [0 - borderNode.width + borderNodeOffset, 0 - borderNode.height + borderNodeOffset],
+      [parentNode.width - borderNodeOffset, parentNode.height - borderNodeOffset],
     ];
   }
   return coordinateExtent;
 };
+
+export const computeBorderNodeExtents = (nodes: Node<NodeData, DiagramNodeType>[]): void => {
+  nodes
+    .filter((node) => node.data.isBorderNode)
+    .forEach((borderNode) => {
+      const parentNode = nodes.find((node) => node.id === borderNode.parentNode);
+      if (parentNode) {
+        borderNode.extent = getBorderNodeExtent(parentNode, borderNode);
+      }
+    });
+};