[3243] Add tools to group palette to distribute elements (layouting)

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

CHANGELOG.adoc

@@ -144,6 +144,7 @@ Thanks to this capability, a specifier can easily retrieve a variable overriden
 - https://github.com/eclipse-sirius/sirius-web/issues/3096[#3096] [tree] Tree representations can now support filters
 - https://github.com/eclipse-sirius/sirius-web/issues/3158[#3158] [diagram] Add a new tool to apply adjust-size on diagram node.
 - https://github.com/eclipse-sirius/sirius-web/issues/3201[#3201] [diagram] Add support for tools on multiple diagram elements selection (hide, fade and pin).
+- https://github.com/eclipse-sirius/sirius-web/issues/3243[#3243] [diagram] Add tools to help manual layout on multiple elements
 
 === Improvements
 

integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts

@@ -0,0 +1,105 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { Project } from '../../../pages/Project';
+import { Explorer } from '../../../workbench/Explorer';
+import { Diagram } from '../../../workbench/Diagram';
+import { Flow } from '../../../usecases/Flow';
+
+const projectName = 'Cypress - group palette';
+describe('Diagram - group palette', () => {
+  context('Given a flow project with a robot document', () => {
+    let projectId: string = '';
+    beforeEach(() => {
+      new Flow().createRobotProject(projectName).then((createdProjectData) => {
+        projectId = createdProjectData.projectId;
+        new Project().visit(projectId);
+      });
+      const explorer = new Explorer();
+      explorer.expand('robot');
+      explorer.createRepresentation('Robot', 'Topography', 'diagram');
+    });
+
+    afterEach(() => cy.deleteProject(projectId));
+
+    it('Then the group palette is displayed when using multi selection', () => {
+      const diagram = new Diagram();
+      const explorer = new Explorer();
+      explorer.select('Wifi');
+      explorer.select('Central_Unit', true);
+      diagram.fitToScreen();
+      diagram.getNodes('diagram', 'Wifi').click();
+      diagram.getPalette().should('not.exist');
+      diagram.getGroupPalette().should('exist');
+
+      diagram.getNodes('diagram', 'DSP').click();
+      diagram.getPalette().should('exist');
+      diagram.getGroupPalette().should('not.exist');
+    });
+
+    it('Then the default tools are available', () => {
+      const diagram = new Diagram();
+      const explorer = new Explorer();
+      explorer.select('Wifi');
+      explorer.select('Central_Unit', true);
+      diagram.fitToScreen();
+      diagram.getNodes('diagram', 'Wifi').click();
+      diagram.getGroupPalette().should('exist');
+      diagram.getGroupPalette().findByTestId('Hide elements').should('exist');
+      diagram.getGroupPalette().findByTestId('Fade elements').should('exist');
+      diagram.getGroupPalette().findByTestId('Pin elements').should('exist');
+    });
+
+    it('Then the distribute elements tools are available', () => {
+      const diagram = new Diagram();
+      const explorer = new Explorer();
+      explorer.select('Wifi');
+      explorer.select('Central_Unit', true);
+      diagram.fitToScreen();
+      diagram.getNodes('diagram', 'Wifi').click();
+      diagram.getGroupPalette().should('exist');
+      diagram.getGroupPalette().findByTestId('expand').click();
+      diagram.getGroupPalette().findByTestId('Distribute elements horizontally').should('exist');
+      diagram.getGroupPalette().findByTestId('Distribute elements vertically').should('exist');
+      diagram.getGroupPalette().findByTestId('Align left').should('exist');
+      diagram.getGroupPalette().findByTestId('Align right').should('exist');
+      diagram.getGroupPalette().findByTestId('Align center').should('exist');
+      diagram.getGroupPalette().findByTestId('Align top').should('exist');
+      diagram.getGroupPalette().findByTestId('Align bottom').should('exist');
+      diagram.getGroupPalette().findByTestId('Justify horizontally').should('exist');
+      diagram.getGroupPalette().findByTestId('Justify vertically').should('exist');
+      diagram.getGroupPalette().findByTestId('Arrange in row').should('exist');
+      diagram.getGroupPalette().findByTestId('Arrange in column').should('exist');
+      diagram.getGroupPalette().findByTestId('Arrange in grid').should('exist');
+    });
+
+    it('Then the last distribute elements tool used is memorized', () => {
+      const diagram = new Diagram();
+      const explorer = new Explorer();
+      explorer.select('Wifi');
+      explorer.select('Central_Unit', true);
+      diagram.fitToScreen();
+      diagram.getNodes('diagram', 'Wifi').click();
+      diagram.getGroupPalette().should('exist');
+      diagram.getGroupPalette().findByTestId('Distribute elements horizontally').should('exist');
+      diagram.getGroupPalette().findByTestId('expand').click();
+      diagram.getGroupPalette().findByTestId('Arrange in column').click();
+      diagram.fitToScreen();
+      diagram.getGroupPalette().should('not.exist');
+      diagram.getNodes('diagram', 'Wifi').click();
+      diagram.getGroupPalette().should('exist');
+      diagram.getGroupPalette().findByTestId('Distribute elements horizontally').should('not.exist');
+      diagram.getGroupPalette().findByTestId('Arrange in column').should('exist');
+    });
+  });
+
+});

integration-tests/cypress/workbench/Diagram.ts

@@ -35,6 +35,9 @@ export class Diagram {
     return cy.getByTestId('Palette');
   }
 
+  public getGroupPalette(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.getByTestId('GroupPalette');
+  }
   public getDiagramScale(diagramLabel: string): Cypress.Chainable<number> {
     return this.getDiagram(diagramLabel)
       .find('.react-flow__viewport')

packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalCenterIcon.tsx

@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const AlignHorizontalCenterIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalLeftIcon.tsx

@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const AlignHorizontalLeftIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalRightIcon.tsx

@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const AlignHorizontalRightIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalBottomIcon.tsx

@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const AlignVerticalBottomIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalCenterIcon.tsx

@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const AlignVerticalCenterIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalTopIcon.tsx

@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const AlignVerticalTopIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyHorizontalIcon.tsx

@@ -0,0 +1,30 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const JustifyHorizontalIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      style={{ transform: 'rotate(90deg)' }}
+      {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm4-2v2h12V5H10zm0 14h12v-2H10v2zm0-6h12v-2H10v2z" />
+    </SvgIcon>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyVerticalIcon.tsx

@@ -0,0 +1,29 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const JustifyVerticalIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm4-2v2h12V5H10zm0 14h12v-2H10v2zm0-6h12v-2H10v2z" />
+    </SvgIcon>
+  );
+};