From f97c894a09f2f7b26afb25971be5ad0936dd7bc0 Mon Sep 17 00:00:00 2001
From: Michael Charfadi <michael.charfadi@obeosoft.com>
Date: Thu, 7 Dec 2023 10:37:51 +0100
Subject: [PATCH] [2760] Reduce edge's label overlap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: https://github.com/eclipse-sirius/sirius-web/issues/2760
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
---
 CHANGELOG.adoc                                  |  1 +
 .../src/converter/convertDiagram.ts             |  4 ++--
 .../src/renderer/edge/MultiLabelEdge.tsx        | 17 +++++++++++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index a8a2cc5c22..8a42b1b0e0 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -106,6 +106,7 @@ It is the responsibility of the drop targets (e.g. a diagram) to validate the dr
 - https://github.com/eclipse-sirius/sirius-web/issues/2718[#2718] Replacing useNodes and useEdges by useReactFlow to imporove performances.
 - https://github.com/eclipse-sirius/sirius-web/issues/2787[#2787] [view] Add the ability to customize the icons of the node tools and edge tools in the View DSL.
 - https://github.com/eclipse-sirius/sirius-web/issues/2784[#2784] [performance] Expand monitoring capabilities.
+- https://github.com/eclipse-sirius/sirius-web/issues/2760[#2760] Begin and end label placement of and edge takes into account handle position.
 
 
 == v2023.12.0
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
index db9c1a4309..dd506248b5 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
@@ -19,6 +19,7 @@ import { GQLNode, GQLNodeStyle, GQLViewModifier } from '../graphql/subscription/
 import { Diagram, Label, NodeData } from '../renderer/DiagramRenderer.types';
 import { MultiLabelEdgeData } from '../renderer/edge/MultiLabelEdge.types';
 import { RawDiagram } from '../renderer/layout/layout.types';
+import { computeBorderNodeExtents, computeBorderNodePositions } from '../renderer/layout/layoutBorderNodes';
 import { layoutHandles } from '../renderer/layout/layoutHandles';
 import { DiagramNodeType } from '../renderer/node/NodeTypes.types';
 import { IConvertEngine, INodeConverterHandler } from './ConvertEngine.types';
@@ -26,7 +27,6 @@ import { IconLabelNodeConverterHandler } from './IconLabelNodeConverterHandler';
 import { ImageNodeConverterHandler } from './ImageNodeConverterHandler';
 import { ListNodeConverterHandler } from './ListNodeConverterHandler';
 import { RectangleNodeConverterHandler } from './RectangleNodeConverterHandler';
-import { computeBorderNodeExtents, computeBorderNodePositions } from '../renderer/layout/layoutBorderNodes';
 
 const nodeDepth = (nodeId2node: Map<string, Node>, nodeId: string): number => {
   const node = nodeId2node.get(nodeId);
@@ -49,7 +49,7 @@ const convertEdgeLabel = (gqlEdgeLabel: GQLLabel): Label => {
     style: {
       position: 'absolute',
       background: 'transparent',
-      padding: 10,
+      padding: 5,
       zIndex: 1001,
       ...convertLabelStyle(gqlEdgeLabel.style),
     },
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx
index 1aa3b3e6b2..bef666f531 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx
@@ -143,6 +143,19 @@ export const MultiLabelEdge = memo(
       );
     }, [selected]);
 
+    const getTranslateFromHandlePositon = (position: Position) => {
+      switch (position) {
+        case Position.Right:
+          return 'translate(2%, -100%)';
+        case Position.Left:
+          return 'translate(-102%, -100%)';
+        case Position.Top:
+          return 'translate(2%, -100%)';
+        case Position.Bottom:
+          return 'translate(2%, 0%)';
+      }
+    };
+
     return (
       <>
         <BaseEdge
@@ -157,7 +170,7 @@ export const MultiLabelEdge = memo(
           {beginLabel && (
             <Label
               diagramElementId={id}
-              transform={`translate(2%, 0%) translate(${sourceX}px,${sourceY}px)`}
+              transform={`${getTranslateFromHandlePositon(sourcePosition)} translate(${sourceX}px,${sourceY}px)`}
               label={beginLabel}
               faded={faded || false}
             />
@@ -168,7 +181,7 @@ export const MultiLabelEdge = memo(
           {endLabel && (
             <Label
               diagramElementId={id}
-              transform={`translate(2%, -100%) translate(${targetX}px,${targetY}px)`}
+              transform={`${getTranslateFromHandlePositon(targetPosition)} translate(${targetX}px,${targetY}px)`}
               label={endLabel}
               faded={faded || false}
             />