[2682] Fix the synchronization of selection between explorer and diagram

Bug: #2682
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -142,6 +142,7 @@ The only way to export diagram as SVG image is to use the ReactFlow toolbar loca
 - https://github.com/eclipse-sirius/sirius-web/issues/2728[#2728] [diagram] Prevents unnecessary rerenders in DiagramPanel
 - https://github.com/eclipse-sirius/sirius-web/issues/2683[#2683] [diagram] Hide diagram element palette when the element itself is moved.
 - https://github.com/eclipse-sirius/sirius-web/issues/2689[#2689] [diagram] Fix the borderNode moves that is no longer anchored to its parent.
+- https://github.com/eclipse-sirius/sirius-web/issues/2682[#2682] [diagram] Fix an error in diagram selection that can lead to a node remaining selected in the diagram but not in the explorer.
 
 === New Features
 

integration-tests/cypress/e2e/project/react-flow/diagram.reactflow.cy.js

@@ -103,4 +103,19 @@ describe('/projects/:projectId/edit - Diagram', () => {
     cy.getByTestId('representation-tab-Topography1__REACT_FLOW').should('have.attr', 'data-testselected', 'true');
     cy.getByTestId('representation-tab-Topography2__REACT_FLOW').should('have.attr', 'data-testselected', 'false');
   });
+
+  it('diagram selection is synchronized with the explorer', () => {
+    cy.getByTestId('robot').dblclick();
+    cy.getByTestId('Robot').dblclick();
+    cy.createRepresentationFromExplorer('Robot', 'Topography');
+    // Wait for the diagram to be render
+    cy.getByTestId('Image - Wifi').should('exist');
+    cy.getByTestId('Central_Unit').dblclick();
+    cy.getByTestId('DSP').click();
+    cy.get('div.react-flow__node.selected').findByTestId('Image - DSP').should('exist');
+    cy.get('div.react-flow__node.selected').findByTestId('Image - Motion_Engine').should('not.exist');
+    cy.getByTestId('Motion_Engine').click();
+    cy.get('div.react-flow__node.selected').findByTestId('Image - DSP').should('not.exist');
+    cy.get('div.react-flow__node.selected').findByTestId('Image - Motion_Engine').should('exist');
+  });
 });

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/selection/useDiagramSelection.tsx

@@ -77,7 +77,6 @@ export const useDiagramSelection = (
         .map((node) => node.id)
         .includes(firstNodeIdMatchingWorkbenchSelection);
       if (!isAlreadySelected) {
-        reactFlowState.unselectNodesAndEdges();
         reactFlowState.addSelectedNodes([firstNodeIdMatchingWorkbenchSelection]);
 
         const selectedNodes = reactFlowState
@@ -96,7 +95,6 @@ export const useDiagramSelection = (
         .includes(firstEdgeIdMatchingWorkbenchSelection);
 
       if (!isAlreadySelected) {
-        reactFlowState.unselectNodesAndEdges();
         reactFlowState.addSelectedEdges([firstEdgeIdMatchingWorkbenchSelection]);
 
         const selectedEdges = reactFlowState.edges.filter((edge) => firstEdgeIdMatchingWorkbenchSelection === edge.id);