[3187] Fix borderNode creation to use click position for border place…

…ment

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

CHANGELOG.adoc

@@ -158,6 +158,11 @@ Thanks to this capability, a specifier can easily retrieve a variable overriden
 - https://github.com/eclipse-sirius/sirius-web/issues/3141[#3141] [portal] Make the header of embedded representations sticky so that it (and its icon) are always visible.
 - https://github.com/eclipse-sirius/sirius-web/issues/2713[#2713] [diagram] Enhances resize support for list nodes
 - https://github.com/eclipse-sirius/sirius-web/issues/3120[#3120] [deck] Provide styles customization in the Deck representation
+- https://github.com/eclipse-sirius/sirius-web/issues/3187[#3187] [diagram] BorderNode creation now considers the click position to define the border.
++
+image:doc/screenshots/borderNodeCreationArea.png[BorderNode creation area,50%]
++
+In other scenarios, the default creation position border remains the eastern one.
 
 == v2024.1.0
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layout.tsx

@@ -31,7 +31,7 @@ import { LayoutEngine } from './LayoutEngine';
 import { ILayoutEngine, INodeLayoutHandler } from './LayoutEngine.types';
 import { computePreviousPosition } from './bounds';
 import { RawDiagram } from './layout.types';
-import { isEastBorderNode, isWestBorderNode } from './layoutBorderNodes';
+import { isEastBorderNode, isWestBorderNode, getNewlyAddedBorderNodePosition } from './layoutBorderNodes';
 import { getChildren } from './layoutNode';
 
 const emptyNodeProps = {
@@ -246,6 +246,13 @@ const layoutDiagram = (
       });
     if (newlyAddedNode) {
       newlyAddedNode = { ...newlyAddedNode, position: referencePosition.position };
+      if (newlyAddedNode.data.isBorderNode) {
+        getNewlyAddedBorderNodePosition(
+          newlyAddedNode,
+          allVisibleNodes.find((node) => node.id === newlyAddedNode?.parentNode),
+          referencePosition
+        );
+      }
     }
   }
 

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

@@ -13,7 +13,8 @@
 import { CoordinateExtent, Node, XYPosition } from 'reactflow';
 import { BorderNodePosition, NodeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { borderNodeOffset } from './layoutParams';
+import { borderNodeOffset, borderNodeReferencePositionRatio } from './layoutParams';
+import { GQLReferencePosition } from '../../graphql/subscription/diagramEventSubscription.types';
 
 export const isEastBorderNode = (borderNode: Node<NodeData>): boolean => {
   return borderNode.data.isBorderNode && borderNode.data.borderNodePosition === BorderNodePosition.EAST;
@@ -86,3 +87,21 @@ export const findBorderNodePosition = (
   }
   return null;
 };
+
+export const getNewlyAddedBorderNodePosition = (
+  newlyAddedNode: Node<NodeData, DiagramNodeType>,
+  parentNode: Node<NodeData, string> | undefined,
+  referencePosition: GQLReferencePosition
+): void => {
+  if (parentNode) {
+    if (referencePosition.position.x < (parentNode.width ?? 0) * borderNodeReferencePositionRatio) {
+      newlyAddedNode.data.borderNodePosition = BorderNodePosition.WEST;
+    } else if (referencePosition.position.x > (parentNode.width ?? 0) * (1 - borderNodeReferencePositionRatio)) {
+      newlyAddedNode.data.borderNodePosition = BorderNodePosition.EAST;
+    } else if (referencePosition.position.y < (parentNode.height ?? 0) * borderNodeReferencePositionRatio) {
+      newlyAddedNode.data.borderNodePosition = BorderNodePosition.NORTH;
+    } else if (referencePosition.position.y > (parentNode.height ?? 0) * (1 - borderNodeReferencePositionRatio)) {
+      newlyAddedNode.data.borderNodePosition = BorderNodePosition.SOUTH;
+    }
+  }
+};

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

@@ -22,3 +22,4 @@ export const defaultHeight = 70;
 export const headerVerticalOffset = 25;
 export const labelVerticalPadding = 8;
 export const labelHorizontalPadding = 16;
+export const borderNodeReferencePositionRatio = 0.2;