[2760] Reduce edge's label overlap

Bug: #2760 Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com> Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
eclipse-sirius · Dec 18, 2023 · f97c894 · f97c894
1 parent 890180e
commit f97c894
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git 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/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts b/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
@@ -19,14 +19,14 @@ 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';
 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/...agrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx b/...agrams/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}
             />