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

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

CHANGELOG.adoc

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

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>
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx

@@ -65,6 +65,7 @@ import { DiagramNodeType } from './node/NodeTypes.types';
 import { useNodeType } from './node/useNodeType';
 import { DiagramPalette } from './palette/DiagramPalette';
 import { GroupPalette } from './palette/group-tool/GroupPalette';
+import { useGroupPalette } from './palette/group-tool/useGroupPalette';
 import { useDiagramElementPalette } from './palette/useDiagramElementPalette';
 import { useDiagramPalette } from './palette/useDiagramPalette';
 import { DiagramPanel } from './panel/DiagramPanel';
@@ -74,7 +75,6 @@ import { useDiagramSelection } from './selection/useDiagramSelection';
 import { useSnapToGrid } from './snap-to-grid/useSnapToGrid';
 
 import 'reactflow/dist/style.css';
-import { useGroupPalette } from './palette/group-tool/useGroupPalette';
 
 const GRID_STEP: number = 10;
 
@@ -100,6 +100,7 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload }: DiagramRendere
     hideGroupPalette,
     position: groupPalettePosition,
     isOpened: isGroupPaletteOpened,
+    refElementId: groupPaletteRefElementId,
   } = useGroupPalette();
 
   const { onConnect, onConnectStart, onConnectEnd } = useConnector();
@@ -259,14 +260,14 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload }: DiagramRendere
 
   const handleDiagramElementCLick = (event: React.MouseEvent<Element, MouseEvent>, element: Node | Edge) => {
     onDiagramElementClick(event, element);
-    onDiagramGroupElementClick(event);
+    onDiagramGroupElementClick(event, element);
   };
 
   const handleSelectionStart = () => {
     closeAllPalettes();
   };
   const handleSelectionEnd = (event: React.MouseEvent<Element, MouseEvent>) => {
-    onDiagramGroupElementClick(event);
+    onDiagramGroupElementClick(event, null);
   };
 
   const { onNodeMouseEnter, onNodeMouseLeave } = useNodeHover();
@@ -340,6 +341,8 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload }: DiagramRendere
         x={groupPalettePosition?.x}
         y={groupPalettePosition?.y}
         isOpened={isGroupPaletteOpened}
+        refElementId={groupPaletteRefElementId}
+        hidePalette={hideGroupPalette}
       />
       <DiagramPalette diagramElementId={diagramRefreshedEventPayload.diagram.id} />
       {diagramDescription.debug ? <DebugPanel reactFlowWrapper={ref} /> : null}