[3392] Prevents edge from passing through another node

Bug: #3392 Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
eclipse-sirius · Apr 17, 2024 · 6697993 · 6697993
1 parent 05bc084
commit 6697993
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 183 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -57,6 +57,7 @@ This will make the dependency to the old Sirius Web architecture more explicit.
 - Move to docker compose v2 for our GitHub Actions workflow.
 - https://github.com/eclipse-sirius/sirius-web/issues/3277[#3277] [gantt] Move to @ObeoNetwork/gantt-task-react 0.4.8 to benefit for enhancements
 - [test] Switch to ArchUnit 1.2.1 to restore architectural tests which were failing recently
+- https://github.com/eclipse-sirius/sirius-web/issues/3392[#3392] [diagrams] Add dependency to @tisoap/react-flow-smart-edge 3.0.0
 
 === Bug fixes
 
@@ -110,7 +111,7 @@ They still support returning an `java.time.Instant` object directly.
 - https://github.com/eclipse-sirius/sirius-web/issues/3376[#3376] [diagram] Prevent `getToolSection` to be called during multi-selection
 - https://github.com/eclipse-sirius/sirius-web/issues/3377[#3377] [diagram] Only synchronize selection with explorer at the end of the process
 - https://github.com/eclipse-sirius/sirius-web/issues/3359[#3359] Add report on document upload
-
+- https://github.com/eclipse-sirius/sirius-web/issues/3392[#3392] [diagram] Prevents 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
@@ -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('300{enter}');
-            details.getTextField('Default Height Expression').type('300{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('290{enter}');
+          details.getTextField('Default Height Expression').type('290{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,11 +77,16 @@ 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('M150.00L150.00Q150.00L88.00Q83.00L83.00L83.00');
-            });
+        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'
+            );
+          });
       });
     });
   });

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/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) {