[3253] Add a new tool to the group palette to apply same size on mult…

…iple nodes Bug: #3253 Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
eclipse-sirius · Mar 19, 2024 · 5922593 · 5922593
1 parent 91c0285
commit 5922593
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 52 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -149,6 +149,7 @@ Form variables declared in a form description will thus be added in the FormDesc
 - https://github.com/eclipse-sirius/sirius-web/issues/3198[#3198] [form] Add a new variable, `variableManager`, in most interpreted expressions of the form DSL.
 - https://github.com/eclipse-sirius/sirius-web/issues/3243[#3243] [diagram] Add tools to help manual layout on multiple elements
 - https://github.com/eclipse-sirius/sirius-web/issues/2999[#2999] [formdescriptioneditor] Add the support for read-only _Form Description Editors_.
+- https://github.com/eclipse-sirius/sirius-web/issues/3253[#3253] [diagram] Add a new tool to apply same size on multiple nodes
 
 === Improvements
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts b/integration-tests/cypress/e2e/project/diagrams/group-palette.cy.ts
@@ -80,6 +80,7 @@ describe('Diagram - group palette', () => {
       diagram.getGroupPalette().findByTestId('Arrange in row').should('exist');
       diagram.getGroupPalette().findByTestId('Arrange in column').should('exist');
       diagram.getGroupPalette().findByTestId('Arrange in grid').should('exist');
+      diagram.getGroupPalette().findByTestId('Make same size').should('exist');
     });
 
     it('Then the last distribute elements tool used is memorized', () => {

diff --git a/...diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts b/...diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts
@@ -111,7 +111,7 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
             totalSize) /
           numberOfGap;
         const updatedNodes = getNodes().map((node) => {
-          if (!selectedNodeIds.includes(node.id)) {
+          if (!selectedNodeIds.includes(node.id) || node.data.pinned) {
             return node;
           }
 
@@ -152,10 +152,9 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
     return useCallback((selectedNodeIds: string[], refElementId: string | null) => {
       processLayoutTool(
         selectedNodeIds,
-        (selectedNodes, refNode) => {
-          selectedNodes.sort(getComparePositionFn('horizontal'));
+        (_selectedNodes, refNode) => {
           return getNodes().map((node) => {
-            if (!selectedNodeIds.includes(node.id)) {
+            if (!selectedNodeIds.includes(node.id) || node.data.pinned) {
               return node;
             }
             const referencePositionValue: number = (() => {
@@ -223,7 +222,11 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
     (selectedNodes: Node[], selectedNodeIds: string[], refNode: Node): Node[] => {
       const largestWidth: number = selectedNodes.reduce((width, node) => Math.max(width, node.width ?? 0), 0);
       return getNodes().map((node) => {
-        if (!selectedNodeIds.includes(node.id)) {
+        if (
+          !selectedNodeIds.includes(node.id) ||
+          node.data.nodeDescription?.userResizable === false ||
+          node.data.pinned
+        ) {
           return node;
         }
         return {
@@ -246,7 +249,11 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
     (selectedNodes: Node[], selectedNodeIds: string[], refNode: Node): Node[] => {
       const largestHeight: number = selectedNodes.reduce((height, node) => Math.max(height, node.height ?? 0), 0);
       return getNodes().map((node) => {
-        if (!selectedNodeIds.includes(node.id)) {
+        if (
+          !selectedNodeIds.includes(node.id) ||
+          node.data.nodeDescription?.userResizable === false ||
+          node.data.pinned
+        ) {
           return node;
         }
         return {
@@ -270,18 +277,20 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
       selectedNodeIds,
       (selectedNodes, refNode) => {
         let nextXPosition: number = refNode.position.x;
-        const updatedSelectedNodes = selectedNodes.map((node) => {
-          const updatedNode = {
-            ...node,
-            position: {
-              ...node.position,
-              x: nextXPosition,
-              y: refNode.position.y,
-            },
-          };
-          nextXPosition = updatedNode.position.x + (updatedNode.width ?? 0) + arrangeGapBetweenElements;
-          return updatedNode;
-        });
+        const updatedSelectedNodes = selectedNodes
+          .filter((node) => !node.data.pinned)
+          .map((node) => {
+            const updatedNode = {
+              ...node,
+              position: {
+                ...node.position,
+                x: nextXPosition,
+                y: refNode.position.y,
+              },
+            };
+            nextXPosition = updatedNode.position.x + (updatedNode.width ?? 0) + arrangeGapBetweenElements;
+            return updatedNode;
+          });
 
         return getNodes().map((node) => {
           const replacedNode = updatedSelectedNodes.find((updatedSelectedNode) => updatedSelectedNode.id === node.id);
@@ -300,18 +309,20 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
       selectedNodeIds,
       (selectedNodes, refNode) => {
         let nextYPosition: number = refNode.position.y;
-        const updatedSelectedNodes = selectedNodes.map((node) => {
-          const updatedNode = {
-            ...node,
-            position: {
-              ...node.position,
-              x: refNode.position.x,
-              y: nextYPosition,
-            },
-          };
-          nextYPosition = updatedNode.position.y + (updatedNode.height ?? 0) + arrangeGapBetweenElements;
-          return updatedNode;
-        });
+        const updatedSelectedNodes = selectedNodes
+          .filter((node) => !node.data.pinned)
+          .map((node) => {
+            const updatedNode = {
+              ...node,
+              position: {
+                ...node.position,
+                x: refNode.position.x,
+                y: nextYPosition,
+              },
+            };
+            nextYPosition = updatedNode.position.y + (updatedNode.height ?? 0) + arrangeGapBetweenElements;
+            return updatedNode;
+          });
 
         return getNodes().map((node) => {
           const replacedNode = updatedSelectedNodes.find((updatedSelectedNode) => updatedSelectedNode.id === node.id);
@@ -332,28 +343,30 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
         const columnNumber: number = Math.round(Math.sqrt(selectedNodeIds.length));
         let nextXPosition: number = refNode.position.x;
         let nextYPosition: number = refNode.position.y;
-        const updatedSelectedNodes = selectedNodes.map((node, index) => {
-          const columnIndex = index + 1;
-          const updatedNode = {
-            ...node,
-            position: {
-              ...node.position,
-              x: nextXPosition,
-              y: nextYPosition,
-            },
-          };
-          nextXPosition = updatedNode.position.x + (updatedNode.width ?? 0) + arrangeGapBetweenElements;
-          if (columnIndex % columnNumber === 0) {
-            nextXPosition = refNode.position.x;
-            nextYPosition =
-              updatedNode.position.y +
-              arrangeGapBetweenElements +
-              selectedNodes
-                .slice(columnIndex - columnNumber, columnIndex)
-                .reduce((maxHeight, rowNode) => Math.max(maxHeight, rowNode.height ?? 0), 0);
-          }
-          return updatedNode;
-        });
+        const updatedSelectedNodes = selectedNodes
+          .filter((node) => !node.data.pinned)
+          .map((node, index) => {
+            const columnIndex = index + 1;
+            const updatedNode = {
+              ...node,
+              position: {
+                ...node.position,
+                x: nextXPosition,
+                y: nextYPosition,
+              },
+            };
+            nextXPosition = updatedNode.position.x + (updatedNode.width ?? 0) + arrangeGapBetweenElements;
+            if (columnIndex % columnNumber === 0) {
+              nextXPosition = refNode.position.x;
+              nextYPosition =
+                updatedNode.position.y +
+                arrangeGapBetweenElements +
+                selectedNodes
+                  .slice(columnIndex - columnNumber, columnIndex)
+                  .reduce((maxHeight, rowNode) => Math.max(maxHeight, rowNode.height ?? 0), 0);
+            }
+            return updatedNode;
+          });
 
         return getNodes().map((node) => {
           const replacedNode = updatedSelectedNodes.find((updatedSelectedNode) => updatedSelectedNode.id === node.id);
@@ -376,6 +389,31 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
   const distributeAlignBottom = distributeAlign('bottom');
   const distributeAlignMiddle = distributeAlign('middle');
 
+  const makeNodesSameSize = useCallback((selectedNodeIds: string[], refElementId: string | null) => {
+    processLayoutTool(
+      selectedNodeIds,
+      (_selectedNodes, refNode) => {
+        return getNodes().map((node) => {
+          if (!selectedNodeIds.includes(node.id) || node.data.nodeDescription?.userResizable === false) {
+            return node;
+          }
+
+          return {
+            ...node,
+            width: refNode.width,
+            height: refNode.height,
+            data: {
+              ...node.data,
+              resizedByUser: true,
+            },
+          };
+        });
+      },
+      null,
+      refElementId
+    );
+  }, []);
+
   return {
     distributeGapVertically,
     distributeGapHorizontally,
@@ -390,5 +428,6 @@ export const useDistributeElements = (refreshEventPayloadId: string): UseDistrib
     arrangeInRow,
     arrangeInColumn,
     arrangeInGrid,
+    makeNodesSameSize,
   };
 };
diff --git a/...ms/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.types.ts b/...ms/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.types.ts
@@ -25,4 +25,5 @@ export interface UseDistributeElementsValue {
   arrangeInRow: (selectedNodeIds: string[]) => void;
   arrangeInColumn: (selectedNodeIds: string[]) => void;
   arrangeInGrid: (selectedNodeIds: string[]) => void;
+  makeNodesSameSize: (selectedNodeIds: string[], refElementId: string | null) => void;
 }
diff --git a/...rams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx b/...rams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx
@@ -13,6 +13,7 @@
 
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
+import PhotoSizeSelectSmallIcon from '@material-ui/icons/PhotoSizeSelectSmall';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Popper from '@material-ui/core/Popper';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -99,6 +100,7 @@ export const GroupPalette = memo(
       arrangeInRow,
       arrangeInColumn,
       arrangeInGrid,
+      makeNodesSameSize,
     } = useDistributeElements(refreshEventPayloadId);
     const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
     const [state, setState] = useState<GroupPaletteState>({
@@ -201,6 +203,12 @@ export const GroupPalette = memo(
         action: () => arrangeInGrid(selectedElementIds),
         icon: <ViewModuleIcon fontSize="small" />,
       },
+      {
+        id: 'make-same-size',
+        title: 'Make same size',
+        action: () => makeNodesSameSize(selectedElementIds, refElementId),
+        icon: <PhotoSizeSelectSmallIcon fontSize="small" />,
+      },
     ];
     const shouldRender = selectedElementIds.length > 1 && isOpened && x && y;
     if (!shouldRender) {