[6342] Remove bending points and custom handles after arrangeAll

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

Author: frouene

CHANGELOG.adoc

@@ -30,6 +30,7 @@
 === Bug fixes
 
 - https://github.com/eclipse-sirius/sirius-web/issues/5436[#5436] [diagram] Prevent custom handles from being lost after importing a project with a diagram representation.
+- https://github.com/eclipse-sirius/sirius-web/issues/6342[#6342] [diagram] Remove bending points and custom handles after an `arrangeAll`
 
 
 === New Features

integration-tests-playwright/playwright/e2e/diagrams/arrange-all.spec.ts

@@ -11,6 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { expect, test } from '@playwright/test';
+import { PlaywrightEdge } from '../../helpers/PlaywrightEdge';
 import { PlaywrightExplorer } from '../../helpers/PlaywrightExplorer';
 import { PlaywrightNode } from '../../helpers/PlaywrightNode';
 import { PlaywrightProject } from '../../helpers/PlaywrightProject';
@@ -117,3 +118,44 @@ test.describe('diagram - arrange all', () => {
     await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error
   });
 });
+
+test.describe('diagram - arrange all', () => {
+  let projectId;
+  test.beforeEach(async ({ page, request }) => {
+    await new PlaywrightProject(request).uploadProject(page, 'projectEdgeWithBendingPointsAndCustomHandles.zip');
+    const playwrightExplorer = new PlaywrightExplorer(page);
+    await playwrightExplorer.expand('Flow');
+    await playwrightExplorer.expand('NewSystem');
+    const url = page.url();
+    const parts = url.split('/');
+    const projectsIndex = parts.indexOf('projects');
+    projectId = parts[projectsIndex + 1];
+  });
+
+  test.afterEach(async ({ request }) => {
+    await new PlaywrightProject(request).deleteProject(projectId);
+  });
+
+  test('when a edge has some bending points and custom handles, then after triggering an arrangeAll they are reset', async ({
+    page,
+  }) => {
+    const playwrightExplorer = new PlaywrightExplorer(page);
+    await playwrightExplorer.select('Topography');
+    await expect(page.getByTestId('rf__wrapper')).toBeAttached();
+
+    const playwrightEdge = new PlaywrightEdge(page);
+
+    await playwrightEdge.openPalette();
+    await expect(page.getByTestId('Reset handles positions - Tool')).toBeAttached();
+    await expect(page.getByTestId('Reset bending points - Tool')).toBeAttached();
+    await playwrightEdge.closePalette();
+
+    await page.getByTestId('arrange-all-menu').click();
+    await page.getByTestId('arrange-all-elk-layered').click();
+
+    await playwrightEdge.openPalette();
+    await expect(page.getByTestId('Reset handles positions - Tool')).not.toBeAttached();
+    await expect(page.getByTestId('Reset bending points - Tool')).not.toBeAttached();
+    await playwrightEdge.closePalette();
+  });
+});

integration-tests-playwright/playwright/resources/projectEdgeWithBendingPointsAndCustomHandles.zip

@@ -10,12 +10,10 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Edge, Node, useReactFlow } from '@xyflow/react';
+import { Edge, Node, useReactFlow, useUpdateNodeInternals } from '@xyflow/react';
 import { LayoutOptions } from 'elkjs/lib/elk-api';
 import { EdgeData, NodeData } from '../../DiagramRenderer.types';
 import { useFitView } from '../../fit-to-screen/useFitView';
-import { DiagramNodeType } from '../../node/NodeTypes.types';
-import { useOverlap } from '../../overlap/useOverlap';
 import { useElkLayout } from '../elk/useElkLayout';
 import { RawDiagram } from '../layout.types';
 import { useLayout } from '../useLayout';
@@ -26,60 +24,49 @@ export const useArrangeAll = (): UseArrangeAllValue => {
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
-  const { resolveNodeOverlap } = useOverlap();
+  const updateNodeInternals = useUpdateNodeInternals();
   const { fitView } = useFitView();
   const { elkLayout } = useElkLayout();
 
   const arrangeAll = async (layoutOptions: LayoutOptions): Promise<void> => {
     await elkLayout(getNodes(), getEdges(), layoutOptions).then(
       async (laidOutNodesWithElk: Node<NodeData, string>[]) => {
-        const laidOutMovedNodeIds = laidOutNodesWithElk
-          .filter((node) => !node.data.isBorderNode && !node.data.pinned)
-          .map((node) => node.id);
-        const edges = getEdges();
-        edges
-          .filter((edge) => laidOutMovedNodeIds.includes(edge.source) || laidOutMovedNodeIds.includes(edge.target))
-          .forEach((edge: Edge<EdgeData, string>) => {
-            if (edge.data?.bendingPoints) {
-              edge.data.bendingPoints = null;
-            }
+        //Removed bending point
+        const edges = getEdges().map((edge: Edge<EdgeData, string>) => {
+          if (edge.data?.bendingPoints) {
+            edge.data.bendingPoints = null;
+          }
+          return edge;
+        });
+        //Removed custom handles for edges
+        const laidOutNodesWithElkWithoutCustomHandles = laidOutNodesWithElk.map((node) => {
+          const handles = node.data.connectionHandles.map((handle) => {
+            return {
+              ...handle,
+              XYPosition: null,
+            };
           });
 
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              connectionHandles: handles,
+            },
+          };
+        });
+
         const diagramToLayout: RawDiagram = {
-          nodes: laidOutNodesWithElk,
-          edges: edges,
+          nodes: laidOutNodesWithElkWithoutCustomHandles,
+          edges,
         };
         const layoutPromise = new Promise<void>((resolve) => {
           layout(diagramToLayout, diagramToLayout, null, 'UNDEFINED', (laidOutDiagram) => {
-            const overlapFreeLaidOutNodes: Node<NodeData, string>[] = resolveNodeOverlap(
-              laidOutDiagram.nodes.filter((n) => !n.data.isBorderNode),
-              'horizontal'
-            ) as Node<NodeData, DiagramNodeType>[];
-            laidOutNodesWithElk.map((node) => {
-              const existingNode = overlapFreeLaidOutNodes.find((laidOutNode) => laidOutNode.id === node.id);
-              if (existingNode) {
-                return {
-                  ...node,
-                  position: existingNode.position,
-                  width: existingNode.width,
-                  height: existingNode.height,
-                  style: {
-                    ...node.style,
-                    width: `${existingNode.width}px`,
-                    height: `${existingNode.height}px`,
-                  },
-                };
-              }
-              return node;
-            });
-            setNodes(laidOutNodesWithElk);
+            setNodes(laidOutDiagram.nodes);
             setEdges(laidOutDiagram.edges);
-            const finalDiagram: RawDiagram = {
-              nodes: laidOutNodesWithElk,
-              edges: laidOutDiagram.edges,
-            };
-            fitView({ duration: 200, nodes: laidOutNodesWithElk });
-            synchronizeLayoutData(crypto.randomUUID(), 'layout', finalDiagram);
+            fitView({ duration: 200, nodes: laidOutDiagram.nodes });
+            updateNodeInternals(laidOutDiagram.nodes.map((node) => node.id));
+            synchronizeLayoutData(crypto.randomUUID(), 'layout', laidOutDiagram);
             resolve();
           });
         });