[fix] Revert 3392 Prevents edge from passing through another node

Signed-off-by: Michaël Charfadi <[email protected]>

CHANGELOG.adoc

@@ -67,7 +67,6 @@ 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
 
@@ -139,7 +138,6 @@ They still support returning an `java.time.Instant` object directly.
 - https://github.com/eclipse-sirius/sirius-web/issues/3279[#3279] [core] Image URLs are now sanitized in a similar manner in all datafetchers, as a result absolute URLs to external images are better supported and a leading slash is now required anymore.
 - https://github.com/eclipse-sirius/sirius-web/issues/3296[#3296] [diagram] Add a hook `useStore` to retrieve local `setNodes`, `setEdges`, `onEdgesChange` and `onNodesChange`, this hook is used to align how nodes and edges are manipulated during processing of ReactFlow events.
 - https://github.com/eclipse-sirius/sirius-web/issues/3397[#3397] [diagram] Add helper lines when resizing nodes
-- https://github.com/eclipse-sirius/sirius-web/issues/3392[#3392] [diagram] Prevent edge from passing through another node
 
 == v2024.3.0
 

integration-tests/cypress/e2e/project/diagrams/edges.cy.ts

@@ -22,37 +22,37 @@ describe('Diagram - edges', () => {
     let domainName: string = '';
 
     before(() =>
-      new Studio().createStudioProject().then((createdProjectData) => {
-        studioProjectId = createdProjectData.projectId;
-        new Project().visit(createdProjectData.projectId);
-        const explorer = new Explorer();
-        explorer.expand('DomainNewModel');
-        cy.get('[title="domain::Domain"]').then(($div) => {
-          domainName = $div.data().testid;
-          explorer.expand(`${domainName}`);
-          explorer.createObject('Entity1', 'Relation');
-          const details = new Details();
-          details.getCheckBox('Containment').check();
-          details.openReferenceWidgetOptions('Target Type');
-          details.selectReferenceWidgetOption('Entity2');
+        new Studio().createStudioProject().then((createdProjectData) => {
+          studioProjectId = createdProjectData.projectId;
+          new Project().visit(createdProjectData.projectId);
+          const explorer = new Explorer();
+          explorer.expand('DomainNewModel');
+          cy.get('[title="domain::Domain"]').then(($div) => {
+            domainName = $div.data().testid;
+            explorer.expand(`${domainName}`);
+            explorer.createObject('Entity1', 'Relation');
+            const details = new Details();
+            details.getCheckBox('Containment').check();
+            details.openReferenceWidgetOptions('Target Type');
+            details.selectReferenceWidgetOption('Entity2');
 
-          explorer.expand('ViewNewModel');
-          explorer.expand('View');
-          explorer.expand(`${domainName} Diagram Description`);
-          explorer.expand('Entity1 Node');
-          details.openReferenceWidgetOptions('Reused Child Node Descriptions');
-          details.selectReferenceWidgetOption('Entity2 Node');
-          details.getTextField('Default Width Expression').type('290{enter}');
-          details.getTextField('Default Height Expression').type('290{enter}');
-        });
-      })
+            explorer.expand('ViewNewModel');
+            explorer.expand('View');
+            explorer.expand(`${domainName} Diagram Description`);
+            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}');
+          });
+        })
     );
 
     after(() => cy.deleteProject(studioProjectId));
     context('When we create a new instance project', () => {
       let instanceProjectId: string = '';
 
-      beforeEach(() => {
+      beforeEach(()=> {
         const studio = new Studio();
         studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => {
           instanceProjectId = res.projectId;
@@ -77,16 +77,11 @@ describe('Diagram - edges', () => {
         details.openReferenceWidgetOptions('Linked To');
         details.selectReferenceWidgetOption('Entity2');
         diagram.fitToScreen();
-        diagram.getEdgePaths('diagram').should('have.length', 1);
-        diagram
-          .getEdgePaths('diagram')
-          .eq(0)
-          .invoke('attr', 'd')
-          .then((dValue) => {
-            expect(diagram.roundSvgPathData(dValue ?? '')).to.equal(
-              'M140.00L140.00L140.00L120.00L100.00L80.00L80.00L80.00'
-            );
-          });
+        diagram.getEdgePaths('diagram').should('have.length',1);
+        diagram.getEdgePaths('diagram').eq(0).invoke('attr', 'd')
+            .then((dValue) => {
+             expect(diagram.roundSvgPathData(dValue?? '')).to.equal('M150.00L150.00Q150.00L88.00Q83.00L83.00L83.00');
+            });
       });
     });
   });

packages/diagrams/frontend/sirius-components-diagrams/package.json

@@ -34,7 +34,6 @@
     "@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",

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 { EdgeWrapperData } from '../renderer/edge/EdgeWrapper.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';
@@ -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: EdgeWrapperData = {
+    const data: MultiLabelEdgeData = {
       targetObjectId: gqlEdge.targetObjectId,
       targetObjectKind: gqlEdge.targetObjectKind,
       targetObjectLabel: gqlEdge.targetObjectLabel,

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 { EdgeWrapperData } from './edge/EdgeWrapper.types';
+import { MultiLabelEdgeData } from './edge/MultiLabelEdge.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<EdgeWrapperData>[];
+  edges: Edge<MultiLabelEdgeData>[];
 }
 
 export interface DiagramMetadata {

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/EdgeLayout.ts

@@ -22,7 +22,7 @@ import {
   GetUpdatedConnectionHandlesParameters,
   NodeCenter,
 } from './EdgeLayout.types';
-import { isDescendantOf, isDescendantOfId } from '../layout/layoutNode';
+import { isDescendantOf } from '../layout/layoutNode';
 
 export const getUpdatedConnectionHandles: GetUpdatedConnectionHandlesParameters = (
   sourceNode,
@@ -103,9 +103,7 @@ 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 = nodeA.data.isBorderNode
-    ? isDescendantOfId(nodeA.parentNode ?? '', nodeB, (nodeId) => visiblesNodes.find((node) => node.id === nodeId))
-    : isDescendantOf(nodeB, nodeA, (nodeId) => visiblesNodes.find((node) => node.id === nodeId));
+  const isDescendant = isDescendantOf(nodeB, nodeA, (nodeId) => visiblesNodes.find((node) => node.id === nodeId));
   let position: Position;
   if (horizontalDifference > verticalDifference) {
     if (isDescendant) {

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/EdgeTypes.ts

@@ -12,8 +12,8 @@
  *******************************************************************************/
 
 import { DiagramEdgeTypes } from './EdgeTypes.types';
-import { EdgeWrapper } from './EdgeWrapper';
+import { MultiLabelEdge } from './MultiLabelEdge';
 
 export const edgeTypes: DiagramEdgeTypes = {
-  multiLabelEdge: EdgeWrapper,
+  multiLabelEdge: MultiLabelEdge,
 };