[3392] Prevents edge from passing through another node

Bug: #3392 Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com> (cherry picked from commit 56c9f3a) Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
eclipse-sirius · May 13, 2024 · 92de925 · 92de925
1 parent be265b5
commit 92de925
Show file tree

Hide file tree

Showing 16 changed files with 409 additions and 159 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -74,6 +74,7 @@ Accordingly, `IObjectSearchService` and `IIdentityService` now handle actual `IE
 - Move to docker compose v2 for our GitHub Actions workflow.
 - [test] Switch to ArchUnit 1.3.0 to restore architectural tests which were failing recently
 - https://github.com/eclipse-sirius/sirius-web/issues/3277[#3277] [gantt] Move to @ObeoNetwork/gantt-task-react 0.4.9 to benefit for enhancements
+- https://github.com/eclipse-sirius/sirius-web/issues/3392[#3392] [diagrams] Add dependency to @tisoap/react-flow-smart-edge 3.0.0
 
 === Bug fixes
 
@@ -155,6 +156,7 @@ They still support returning an `java.time.Instant` object directly.
 - https://github.com/eclipse-sirius/sirius-web/issues/3391[#3391] [diagram] Accept gradient for node background
 - https://github.com/eclipse-sirius/sirius-web/issues/3435[#3435] [diagram] Extract diagram style from useDropNode
 - https://github.com/eclipse-sirius/sirius-web/issues/3453[#3453] [diagram] Memoizing edges and nodes style
+- https://github.com/eclipse-sirius/sirius-web/issues/3392[#3392] [diagram] Prevent edge from passing through another node
 
 == v2024.3.0
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/edges.cy.ts b/integration-tests/cypress/e2e/project/diagrams/edges.cy.ts
@@ -42,8 +42,8 @@ describe('Diagram - edges', () => {
           explorer.expand('Entity1 Node');
           details.openReferenceWidgetOptions('Reused Child Node Descriptions');
           details.selectReferenceWidgetOption('Entity2 Node');
-          details.getTextField('Default Width Expression').type('300{enter}');
-          details.getTextField('Default Height Expression').type('300{enter}');
+          details.getTextField('Default Width Expression').type('290{enter}');
+          details.getTextField('Default Height Expression').type('290{enter}');
         });
       })
     );
@@ -83,7 +83,9 @@ describe('Diagram - edges', () => {
           .eq(0)
           .invoke('attr', 'd')
           .then((dValue) => {
-            expect(diagram.roundSvgPathData(dValue ?? '')).to.equal('M150.00L150.00Q150.00L88.00Q83.00L83.00L83.00');
+            expect(diagram.roundSvgPathData(dValue ?? '')).to.equal(
+              'M140.00L140.00L140.00L120.00L100.00L80.00L80.00L80.00'
+          );
           });
       });
     });

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/package.json b/packages/diagrams/frontend/sirius-components-diagrams/package.json
@@ -34,6 +34,7 @@
     "@eclipse-sirius/sirius-components-core": "*",
     "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.11.3",
+    "@tisoap/react-flow-smart-edge": "3.0.0",
     "elkjs": "0.8.2",
     "graphql": "16.8.0",
     "html-to-image": "1.11.11",

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts
@@ -23,7 +23,7 @@ import {
   ListLayoutStrategy,
 } from '../graphql/subscription/nodeFragment.types';
 import { Diagram, EdgeLabel, NodeData } from '../renderer/DiagramRenderer.types';
-import { MultiLabelEdgeData } from '../renderer/edge/MultiLabelEdge.types';
+import { EdgeWrapperData } from '../renderer/edge/EdgeWrapper.types';
 import { RawDiagram } from '../renderer/layout/layout.types';
 import { computeBorderNodeExtents, computeBorderNodePositions } from '../renderer/layout/layoutBorderNodes';
 import { layoutHandles } from '../renderer/layout/layoutHandles';
@@ -142,7 +142,7 @@ export const convertDiagram = (
   const edges: Edge[] = gqlDiagram.edges.map((gqlEdge) => {
     const sourceNode: Node<NodeData> | undefined = nodeId2node.get(gqlEdge.sourceId);
     const targetNode: Node<NodeData> | undefined = nodeId2node.get(gqlEdge.targetId);
-    const data: MultiLabelEdgeData = {
+    const data: EdgeWrapperData = {
       targetObjectId: gqlEdge.targetObjectId,
       targetObjectKind: gqlEdge.targetObjectKind,
       targetObjectLabel: gqlEdge.targetObjectLabel,

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.types.ts
@@ -14,7 +14,7 @@
 import { Edge, Node } from 'reactflow';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagramRefreshedEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
-import { MultiLabelEdgeData } from './edge/MultiLabelEdge.types';
+import { EdgeWrapperData } from './edge/EdgeWrapper.types';
 import { ConnectionHandle } from './handles/ConnectionHandles.types';
 import { DiagramNodeType } from './node/NodeTypes.types';
 
@@ -25,7 +25,7 @@ export interface DiagramRendererProps {
 export interface Diagram {
   metadata: DiagramMetadata;
   nodes: Node<NodeData, DiagramNodeType>[];
-  edges: Edge<MultiLabelEdgeData>[];
+  edges: Edge<EdgeWrapperData>[];
 }
 
 export interface DiagramMetadata {

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/EdgeLayout.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/EdgeLayout.ts
@@ -22,7 +22,7 @@ import {
   GetUpdatedConnectionHandlesParameters,
   NodeCenter,
 } from './EdgeLayout.types';
-import { isDescendantOf } from '../layout/layoutNode';
+import { isDescendantOf, isDescendantOfId } from '../layout/layoutNode';
 
 export const getUpdatedConnectionHandles: GetUpdatedConnectionHandlesParameters = (
   sourceNode,
@@ -103,7 +103,9 @@ const getParameters: GetParameters = (movingNode, nodeA, nodeB, visiblesNodes) =
   }
   const horizontalDifference = Math.abs(centerA.x - centerB.x);
   const verticalDifference = Math.abs(centerA.y - centerB.y);
-  const isDescendant = isDescendantOf(nodeB, nodeA, (nodeId) => visiblesNodes.find((node) => node.id === nodeId));
+  const isDescendant = nodeA.data.isBorderNode
+    ? isDescendantOfId(nodeA.parentNode ?? '', nodeB, (nodeId) => visiblesNodes.find((node) => node.id === nodeId))
+    : isDescendantOf(nodeB, nodeA, (nodeId) => visiblesNodes.find((node) => node.id === nodeId));
   let position: Position;
   if (horizontalDifference > verticalDifference) {
     if (isDescendant) {

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/EdgeTypes.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/EdgeTypes.ts
@@ -12,8 +12,8 @@
  *******************************************************************************/
 
 import { DiagramEdgeTypes } from './EdgeTypes.types';
-import { MultiLabelEdge } from './MultiLabelEdge';
+import { EdgeWrapper } from './EdgeWrapper';
 
 export const edgeTypes: DiagramEdgeTypes = {
-  multiLabelEdge: MultiLabelEdge,
+  multiLabelEdge: EdgeWrapper,
 };