diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 50cf099d7d2..e5d178d3755 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -153,7 +153,7 @@ Trees defined via the view DSL can alternatively provide a tooltip expression vi - https://github.com/eclipse-sirius/sirius-web/issues/6287[#6287] [sirius-web] Add a cancel button to the _New Project_ creation page. - https://github.com/eclipse-sirius/sirius-web/issues/6267[#6267] [sirius-web] Allow customizing the content of the Views Explorer via delegates. - https://github.com/eclipse-sirius/sirius-web/issues/6268[#6268] [sirius-web] Allow customizing the labels of the Views Explorer via delegates. - +- https://github.com/eclipse-sirius/sirius-web/issues/6300[#6300] [diagram] Make the arrange-all button remember the last layout configuration == 2026.1.0 diff --git a/integration-tests-playwright/playwright/e2e/diagrams/arrange-all.spec.ts b/integration-tests-playwright/playwright/e2e/diagrams/arrange-all.spec.ts index d409e9dad1e..e7dba6a5820 100644 --- a/integration-tests-playwright/playwright/e2e/diagrams/arrange-all.spec.ts +++ b/integration-tests-playwright/playwright/e2e/diagrams/arrange-all.spec.ts @@ -44,8 +44,7 @@ test.describe('diagram - arrange all', () => { await expect(page.getByTestId('FreeForm - Wifi')).not.toBeInViewport(); - await page.getByTestId('arrange-all-menu').click(); - await page.getByTestId('arrange-all-elk-layered').click(); + await page.getByTestId('arrange-all-main-button').click(); await expect(page.getByTestId('FreeForm - Wifi')).toBeInViewport(); }); @@ -75,8 +74,7 @@ test.describe('diagram - arrange all', () => { await playwrightExplorer.select('diagram'); await expect(page.getByTestId('rf__wrapper')).toBeAttached(); - await page.getByTestId('arrange-all-menu').click(); - await page.getByTestId('arrange-all-elk-layered').click(); + await page.getByTestId('arrange-all-main-button').click(); const sourceNode = new PlaywrightNode(page, 'source'); const targetNode = new PlaywrightNode(page, 'target'); @@ -98,8 +96,7 @@ test.describe('diagram - arrange all', () => { await playwrightExplorer.select('diagram'); await expect(page.getByTestId('rf__wrapper')).toBeAttached(); - await page.getByTestId('arrange-all-menu').click(); - await page.getByTestId('arrange-all-elk-layered').click(); + await page.getByTestId('arrange-all-main-button').click(); await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error }); @@ -111,7 +108,7 @@ test.describe('diagram - arrange all', () => { await playwrightExplorer.select('diagram'); await expect(page.getByTestId('rf__wrapper')).toBeAttached(); - await page.getByTestId('arrange-all-menu').click(); + await page.getByTestId('arrange-all-menu-toggle').click(); await page.getByTestId('arrange-all-elk-rect-packing').click(); await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error diff --git a/integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts b/integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts index c93e42e4d2a..1a0893201a6 100644 --- a/integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts +++ b/integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts @@ -298,8 +298,7 @@ test.describe('diagram - drag and drop', () => { page, }) => { await expect(page.getByTestId('rf__wrapper')).toBeAttached(); - await page.getByTestId('arrange-all-menu').click(); - await page.getByTestId('arrange-all-elk-layered').click(); + await page.getByTestId('arrange-all-main-button').click(); const parentNode = new PlaywrightNode(page, 'Description', 'List'); const parentNodePositionInitial = await parentNode.getReactFlowXYPosition('Description'); diff --git a/integration-tests-playwright/playwright/e2e/diagrams/edge-label.spec.ts b/integration-tests-playwright/playwright/e2e/diagrams/edge-label.spec.ts index db38df846ef..51568446b89 100644 --- a/integration-tests-playwright/playwright/e2e/diagrams/edge-label.spec.ts +++ b/integration-tests-playwright/playwright/e2e/diagrams/edge-label.spec.ts @@ -36,7 +36,7 @@ test.describe('edge-label', () => { test('when an edge has a center label, then the label does not stick the edge path', async ({ page }) => { await expect(page.getByTestId('rf__wrapper')).toBeAttached(); - await page.getByTestId('arrange-all-menu').click(); + await page.getByTestId('arrange-all-menu-toggle').click(); await page.getByTestId('arrange-all-elk-rect-packing').click(); const playwrightEdge = new PlaywrightEdge(page); diff --git a/integration-tests-playwright/playwright/e2e/diagrams/label.spec.ts b/integration-tests-playwright/playwright/e2e/diagrams/label.spec.ts index 77f63a03826..05505677f5c 100644 --- a/integration-tests-playwright/playwright/e2e/diagrams/label.spec.ts +++ b/integration-tests-playwright/playwright/e2e/diagrams/label.spec.ts @@ -416,8 +416,7 @@ test.describe('diagram - label', () => { }); test('when dragging a center edge label, then no offset apply on the drop position', async ({ page }) => { - await page.getByTestId('arrange-all-menu').click(); - await page.getByTestId('arrange-all-elk-layered').click(); + await page.getByTestId('arrange-all-main-button').click(); const rootNode = new PlaywrightNode(page, 'Root', 'List'); await rootNode.waitForAnimationToFinish(); await expect(page.getByTestId('rf__wrapper')).toBeAttached(); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.tsx index d8dc5e9aba6..6ef3a0daca9 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.tsx @@ -20,7 +20,7 @@ import ListItemText from '@mui/material/ListItemText'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import Tooltip from '@mui/material/Tooltip'; -import { LayoutOptions } from 'elkjs/lib/elk-api'; +import { Theme, useTheme } from '@mui/material/styles'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useArrangeAll } from '../layout/arrange-all/useArrangeAll'; @@ -32,20 +32,23 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => { const [state, setState] = useState({ arrangeAllInProgress: false, arrangeAllMenuOpen: false, + lastUsedLayout: null, }); const anchorArrangeMenuRef = useRef(null); const { arrangeAll } = useArrangeAll(); const { t } = useTranslation('sirius-components-diagrams', { keyPrefix: 'arrangeAllButton' }); const { layoutConfigurations } = useLayoutConfigurations(); + const theme: Theme = useTheme(); - const handleArrangeAll = (layoutOptions: LayoutOptions) => { + const handleArrangeAll = (layoutConfiguration: LayoutConfiguration) => { setState((prevState) => ({ ...prevState, arrangeAllMenuOpen: false, arrangeAllInProgress: true, + lastUsedLayout: layoutConfiguration, })); - arrangeAll(layoutOptions).then(() => + arrangeAll(layoutConfiguration.layoutOptions).then(() => setState((prevState) => ({ ...prevState, arrangeAllInProgress: false, @@ -58,42 +61,68 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => { ...prevState, arrangeAllMenuOpen: !prevState.arrangeAllMenuOpen, })); + const onCloseMenu = () => setState((prevState) => ({ ...prevState, arrangeAllMenuOpen: false, })); + const handleMainButtonClick = () => { + if (state.lastUsedLayout) { + handleArrangeAll(state.lastUsedLayout); + } else if (layoutConfigurations[0]) { + handleArrangeAll(layoutConfigurations[0]); + } + }; + useEffect(() => { const timeout = setTimeout(() => { const urlParams = new URLSearchParams(window.location.search); if (urlParams.has('arrangeAll') && urlParams.get('arrangeAll') === 'true' && layoutConfigurations[0]) { - handleArrangeAll(layoutConfigurations[0].layoutOptions); + handleArrangeAll(layoutConfigurations[0]); } }, 500); return () => clearTimeout(timeout); }, []); + const getMainButtonIcon = () => { + if (state.arrangeAllInProgress) { + return ; + } + if (state.lastUsedLayout) { + return state.lastUsedLayout.icon; + } + if (layoutConfigurations[0]) { + return layoutConfigurations[0].icon; + } + return ; + }; + return ( <> - +
- {state.arrangeAllInProgress ? ( - - ) : ( - - )} + {getMainButtonIcon()} + + - +
{state.arrangeAllMenuOpen && !state.arrangeAllInProgress ? ( { key={layoutConfiguration.id} disabled={disabled} data-testid={`arrange-all-${layoutConfiguration.id}`} - onClick={() => handleArrangeAll(layoutConfiguration.layoutOptions)}> + onClick={() => handleArrangeAll(layoutConfiguration)}> {layoutConfiguration.icon} diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.types.ts index 4366e12d63b..33b4da6f91e 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.types.ts @@ -10,6 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ +import { LayoutConfiguration } from '../layout/arrange-all/useLayoutConfigurations.types'; export interface ArrangeAllButtonProps { disabled: boolean; @@ -18,4 +19,5 @@ export interface ArrangeAllButtonProps { export interface ArrangeAllButtonState { arrangeAllInProgress: boolean; arrangeAllMenuOpen: boolean; + lastUsedLayout: LayoutConfiguration | null; } diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/DiagramToolbar.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/DiagramToolbar.tsx index 3a30bbbdf30..06cb97eb9d8 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/DiagramToolbar.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/DiagramToolbar.tsx @@ -125,7 +125,7 @@ export const DiagramToolbar = memo(({ diagramToolbar }: DiagramToolbarProps) => return ( <> - +