Skip to content

Commit 166c085

Browse files
frouenefrouene
committed
[6300] Make the arrange-all button remember the last layout configuration
Bug: #6300 Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
1 parent b46b683 commit 166c085

File tree

8 files changed

+54
-28
lines changed

8 files changed

+54
-28
lines changed

‎CHANGELOG.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ Trees defined via the view DSL can alternatively provide a tooltip expression vi
153153
- https://github.com/eclipse-sirius/sirius-web/issues/6287[#6287] [sirius-web] Add a cancel button to the _New Project_ creation page.
154154
- https://github.com/eclipse-sirius/sirius-web/issues/6267[#6267] [sirius-web] Allow customizing the content of the Views Explorer via delegates.
155155
- https://github.com/eclipse-sirius/sirius-web/issues/6268[#6268] [sirius-web] Allow customizing the labels of the Views Explorer via delegates.
156-
156+
- https://github.com/eclipse-sirius/sirius-web/issues/6300[#6300] [diagram] Make the arrange-all button remember the last layout configuration
157157

158158

159159
== 2026.1.0

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ test.describe('diagram - arrange all', () => {
4444

4545
await expect(page.getByTestId('FreeForm - Wifi')).not.toBeInViewport();
4646

47-
await page.getByTestId('arrange-all-menu').click();
48-
await page.getByTestId('arrange-all-elk-layered').click();
47+
await page.getByTestId('arrange-all-main-button').click();
4948

5049
await expect(page.getByTestId('FreeForm - Wifi')).toBeInViewport();
5150
});
@@ -75,8 +74,7 @@ test.describe('diagram - arrange all', () => {
7574
await playwrightExplorer.select('diagram');
7675
await expect(page.getByTestId('rf__wrapper')).toBeAttached();
7776

78-
await page.getByTestId('arrange-all-menu').click();
79-
await page.getByTestId('arrange-all-elk-layered').click();
77+
await page.getByTestId('arrange-all-main-button').click();
8078

8179
const sourceNode = new PlaywrightNode(page, 'source');
8280
const targetNode = new PlaywrightNode(page, 'target');
@@ -98,8 +96,7 @@ test.describe('diagram - arrange all', () => {
9896
await playwrightExplorer.select('diagram');
9997
await expect(page.getByTestId('rf__wrapper')).toBeAttached();
10098

101-
await page.getByTestId('arrange-all-menu').click();
102-
await page.getByTestId('arrange-all-elk-layered').click();
99+
await page.getByTestId('arrange-all-main-button').click();
103100

104101
await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error
105102
});
@@ -111,7 +108,7 @@ test.describe('diagram - arrange all', () => {
111108
await playwrightExplorer.select('diagram');
112109
await expect(page.getByTestId('rf__wrapper')).toBeAttached();
113110

114-
await page.getByTestId('arrange-all-menu').click();
111+
await page.getByTestId('arrange-all-menu-toggle').click();
115112
await page.getByTestId('arrange-all-elk-rect-packing').click();
116113

117114
await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error

‎integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -298,8 +298,7 @@ test.describe('diagram - drag and drop', () => {
298298
page,
299299
}) => {
300300
await expect(page.getByTestId('rf__wrapper')).toBeAttached();
301-
await page.getByTestId('arrange-all-menu').click();
302-
await page.getByTestId('arrange-all-elk-layered').click();
301+
await page.getByTestId('arrange-all-main-button').click();
303302

304303
const parentNode = new PlaywrightNode(page, 'Description', 'List');
305304
const parentNodePositionInitial = await parentNode.getReactFlowXYPosition('Description');

‎integration-tests-playwright/playwright/e2e/diagrams/edge-label.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ test.describe('edge-label', () => {
3636
test('when an edge has a center label, then the label does not stick the edge path', async ({ page }) => {
3737
await expect(page.getByTestId('rf__wrapper')).toBeAttached();
3838

39-
await page.getByTestId('arrange-all-menu').click();
39+
await page.getByTestId('arrange-all-menu-toggle').click();
4040
await page.getByTestId('arrange-all-elk-rect-packing').click();
4141

4242
const playwrightEdge = new PlaywrightEdge(page);

‎integration-tests-playwright/playwright/e2e/diagrams/label.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -416,8 +416,7 @@ test.describe('diagram - label', () => {
416416
});
417417

418418
test('when dragging a center edge label, then no offset apply on the drop position', async ({ page }) => {
419-
await page.getByTestId('arrange-all-menu').click();
420-
await page.getByTestId('arrange-all-elk-layered').click();
419+
await page.getByTestId('arrange-all-main-button').click();
421420
const rootNode = new PlaywrightNode(page, 'Root', 'List');
422421
await rootNode.waitForAnimationToFinish();
423422
await expect(page.getByTestId('rf__wrapper')).toBeAttached();

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.tsx‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import ListItemText from '@mui/material/ListItemText';
2020
import Menu from '@mui/material/Menu';
2121
import MenuItem from '@mui/material/MenuItem';
2222
import Tooltip from '@mui/material/Tooltip';
23-
import { LayoutOptions } from 'elkjs/lib/elk-api';
23+
import { Theme, useTheme } from '@mui/material/styles';
2424
import { useEffect, useRef, useState } from 'react';
2525
import { useTranslation } from 'react-i18next';
2626
import { useArrangeAll } from '../layout/arrange-all/useArrangeAll';
@@ -32,20 +32,23 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => {
3232
const [state, setState] = useState<ArrangeAllButtonState>({
3333
arrangeAllInProgress: false,
3434
arrangeAllMenuOpen: false,
35+
lastUsedLayout: null,
3536
});
3637
const anchorArrangeMenuRef = useRef<HTMLButtonElement | null>(null);
3738

3839
const { arrangeAll } = useArrangeAll();
3940
const { t } = useTranslation('sirius-components-diagrams', { keyPrefix: 'arrangeAllButton' });
4041
const { layoutConfigurations } = useLayoutConfigurations();
42+
const theme: Theme = useTheme();
4143

42-
const handleArrangeAll = (layoutOptions: LayoutOptions) => {
44+
const handleArrangeAll = (layoutConfiguration: LayoutConfiguration) => {
4345
setState((prevState) => ({
4446
...prevState,
4547
arrangeAllMenuOpen: false,
4648
arrangeAllInProgress: true,
49+
lastUsedLayout: layoutConfiguration,
4750
}));
48-
arrangeAll(layoutOptions).then(() =>
51+
arrangeAll(layoutConfiguration.layoutOptions).then(() =>
4952
setState((prevState) => ({
5053
...prevState,
5154
arrangeAllInProgress: false,
@@ -58,42 +61,68 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => {
5861
...prevState,
5962
arrangeAllMenuOpen: !prevState.arrangeAllMenuOpen,
6063
}));
64+
6165
const onCloseMenu = () =>
6266
setState((prevState) => ({
6367
...prevState,
6468
arrangeAllMenuOpen: false,
6569
}));
6670

71+
const handleMainButtonClick = () => {
72+
if (state.lastUsedLayout) {
73+
handleArrangeAll(state.lastUsedLayout);
74+
} else if (layoutConfigurations[0]) {
75+
handleArrangeAll(layoutConfigurations[0]);
76+
}
77+
};
78+
6779
useEffect(() => {
6880
const timeout = setTimeout(() => {
6981
const urlParams = new URLSearchParams(window.location.search);
7082
if (urlParams.has('arrangeAll') && urlParams.get('arrangeAll') === 'true' && layoutConfigurations[0]) {
71-
handleArrangeAll(layoutConfigurations[0].layoutOptions);
83+
handleArrangeAll(layoutConfigurations[0]);
7284
}
7385
}, 500);
7486

7587
return () => clearTimeout(timeout);
7688
}, []);
7789

90+
const getMainButtonIcon = () => {
91+
if (state.arrangeAllInProgress) {
92+
return <CircularProgress size={theme.spacing(2)} data-testid="arrange-all-circular-loading" />;
93+
}
94+
if (state.lastUsedLayout) {
95+
return state.lastUsedLayout.icon;
96+
}
97+
if (layoutConfigurations[0]) {
98+
return layoutConfigurations[0].icon;
99+
}
100+
return <AccountTreeIcon />;
101+
};
102+
78103
return (
79104
<>
80105
<Tooltip title={t('arrangeMenu')}>
81-
<span>
106+
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
82107
<IconButton
83108
size="small"
84109
aria-label={t('arrangeMenu')}
85-
onClick={handleMenuToggle}
86-
data-testid="arrange-all-menu"
110+
onClick={handleMainButtonClick}
111+
data-testid="arrange-all-main-button"
87112
ref={anchorArrangeMenuRef}
88113
disabled={disabled || state.arrangeAllInProgress}>
89-
{state.arrangeAllInProgress ? (
90-
<CircularProgress size="24px" data-testid="arrange-all-circular-loading" />
91-
) : (
92-
<AccountTreeIcon />
93-
)}
114+
{getMainButtonIcon()}
115+
</IconButton>
116+
<IconButton
117+
size="small"
118+
aria-label={t('openMenu')}
119+
onClick={handleMenuToggle}
120+
data-testid="arrange-all-menu-toggle"
121+
disabled={disabled || state.arrangeAllInProgress}
122+
style={{ marginLeft: -theme.spacing(1), padding: theme.spacing(0.5) }}>
94123
<KeyboardArrowDownIcon />
95124
</IconButton>
96-
</span>
125+
</div>
97126
</Tooltip>
98127
{state.arrangeAllMenuOpen && !state.arrangeAllInProgress ? (
99128
<Menu
@@ -107,7 +136,7 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => {
107136
key={layoutConfiguration.id}
108137
disabled={disabled}
109138
data-testid={`arrange-all-${layoutConfiguration.id}`}
110-
onClick={() => handleArrangeAll(layoutConfiguration.layoutOptions)}>
139+
onClick={() => handleArrangeAll(layoutConfiguration)}>
111140
<ListItemIcon>{layoutConfiguration.icon}</ListItemIcon>
112141
<ListItemText primary={layoutConfiguration.label} />
113142
</MenuItem>

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
* Contributors:
1111
* Obeo - initial API and implementation
1212
*******************************************************************************/
13+
import { LayoutConfiguration } from '../layout/arrange-all/useLayoutConfigurations.types';
1314

1415
export interface ArrangeAllButtonProps {
1516
disabled: boolean;
@@ -18,4 +19,5 @@ export interface ArrangeAllButtonProps {
1819
export interface ArrangeAllButtonState {
1920
arrangeAllInProgress: boolean;
2021
arrangeAllMenuOpen: boolean;
22+
lastUsedLayout: LayoutConfiguration | null;
2123
}

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/DiagramToolbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const DiagramToolbar = memo(({ diagramToolbar }: DiagramToolbarProps) =>
125125

126126
return (
127127
<>
128-
<Panel position="top-left">
128+
<Panel position="top-left" data-testid="diagram-toolbar">
129129
<Paper style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
130130
<Box
131131
ref={collapsibleContentRef}

0 commit comments

Comments
 (0)