Skip to content

Commit df23d88

Browse files
mcharfadigcoutable
mcharfadi
authored and
gcoutable
committed
[5768] Use the DiagramPalette for rendering group tools
Bug: #5768 Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
1 parent e17a530 commit df23d88

28 files changed

+523
-627
lines changed

‎CHANGELOG.adoc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ Downstream applications can now implement the following interfaces:
6464
* `IIndexUpdateServiceDelegate` to customize how the content of the indices is updated
6565
Sirius Web provides a default implementation for all these services, which creates an index per editing context, and indexes all the features of the elements in the editing context (this can be customized by implementing `IIndexEntryProviderDelegate`).
6666
- https://github.com/eclipse-sirius/sirius-web/issues/3486[#3486] [diagram] Do not open delete confirmation dialog when a node/edge is not deletable
67+
- https://github.com/eclipse-sirius/sirius-web/issues/5768[#5768] [diagram] Group tools are now using the same palette as others tools
6768

6869

6970

‎integration-tests-playwright/playwright/e2e/make-same-size.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
* Contributors:
1111
* Obeo - initial API and implementation
1212
*******************************************************************************/
13-
import { test, expect } from '@playwright/test';
14-
import { PlaywrightProject } from '../helpers/PlaywrightProject';
13+
import { expect, test } from '@playwright/test';
1514
import { PlaywrightExplorer } from '../helpers/PlaywrightExplorer';
1615
import { PlaywrightNode } from '../helpers/PlaywrightNode';
16+
import { PlaywrightProject } from '../helpers/PlaywrightProject';
1717

1818
test.describe('diagram - make same size', () => {
1919
let projectId;
@@ -44,17 +44,17 @@ test.describe('diagram - make same size', () => {
4444
const c1Node = new PlaywrightNode(page, 'C1', 'List');
4545
const c2Node = new PlaywrightNode(page, 'C2', 'List');
4646

47-
await c1Node.click();
48-
await c2Node.controlClick();
47+
await c2Node.click();
48+
await c1Node.controlClick();
4949

5050
const c1PositionBefore = await c1Node.getReactFlowXYPosition('C1', false);
5151
const c1SizeBefore = await c1Node.getReactFlowSize('C1', false);
5252
const c2PositionBefore = await c2Node.getReactFlowXYPosition('C2', false);
5353

54-
await c1Node.openPalette();
55-
await expect(page.getByTestId('GroupPalette')).toBeAttached();
56-
await page.getByTestId('GroupPalette').getByTestId('expand').click();
57-
await page.getByTestId('GroupPalette').getByTestId('Make same size').click();
54+
await c2Node.openPalette();
55+
await expect(page.getByTestId('Palette')).toBeAttached();
56+
await page.getByTestId('toolSection-Layout').click();
57+
await page.getByTestId('Palette').getByTestId('tool-Make same size').click();
5858

5959
const c1PositionAfter = await c1Node.getReactFlowXYPosition('C1', false);
6060
const c1SizeAfter = await c1Node.getReactFlowSize('C1', false);

‎integration-tests-playwright/playwright/e2e/palette.spec.ts‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -38,24 +38,18 @@ test.describe('diagram - palette', () => {
3838
await playwrightNode.click();
3939
await playwrightNode2.controlClick();
4040
await playwrightNode2.openPalette();
41-
await expect(page.getByTestId('GroupPalette')).toBeAttached();
42-
await expect(page.getByTestId('GroupPalette').getByTestId('Align left')).toBeAttached();
43-
await expect(page.getByTestId('GroupPalette').getByTestId('Align bottom')).not.toBeAttached();
44-
await page.getByTestId('GroupPalette').getByTestId('expand').click();
45-
await expect(page.getByTestId('GroupPalette').getByTestId('Align bottom')).toBeAttached();
46-
await page.getByTestId('GroupPalette').getByTestId('Align bottom').click();
41+
await expect(page.getByTestId('Palette')).toBeAttached();
42+
await page.getByTestId('toolSection-Layout').click();
43+
await page.getByTestId('Palette').getByTestId('tool-Align bottom').click();
44+
//Check the last tool used is the one proposed as quick tool (disabled until the layout section is using the reworked palette extension point)
45+
//await page.getByTestId('Palette').getByTestId('Align bottom').click();
4746
const playwrightNodeXYPosition = await playwrightNode.getReactFlowXYPosition('undefined', false);
4847
const playwrightNode2XYPosition = await playwrightNode2.getReactFlowXYPosition('CompositeProcessor1', false);
4948
const playwrightNodeSize = await playwrightNode.getReactFlowSize('undefined', false);
5049
const playwrightNode2Size = await playwrightNode2.getReactFlowSize('CompositeProcessor1', false);
5150
expect(playwrightNodeXYPosition.y + playwrightNodeSize.height).toBe(
5251
playwrightNode2XYPosition.y + playwrightNode2Size.height
5352
);
54-
//Check the last tool used is the one proposed as quick tool
55-
await playwrightNode2.openPalette();
56-
await expect(page.getByTestId('GroupPalette')).toBeAttached();
57-
await expect(page.getByTestId('GroupPalette').getByTestId('Align left')).not.toBeAttached();
58-
await expect(page.getByTestId('GroupPalette').getByTestId('Align bottom')).toBeAttached();
5953
});
6054

6155
test('when a node then an edge is selected, we can open the group palette and fade both elements', async ({
@@ -67,12 +61,28 @@ test.describe('diagram - palette', () => {
6761
await playwrightNode.click();
6862
await playwrightEdge.controlClick();
6963
await playwrightEdge.openPalette();
70-
await expect(page.getByTestId('GroupPalette')).toBeAttached();
71-
await page.getByTestId('GroupPalette').getByTestId('Fade elements').click();
64+
await expect(page.getByTestId('Palette')).toBeAttached();
65+
await page.getByTestId('Palette').getByTestId('Fade-element').click();
7266
const edgeStyle = await playwrightEdge.getEdgeStyle();
7367
await expect(edgeStyle).toHaveCSS('opacity', '0.4');
7468
await expect(playwrightNode.nodeStyleLocator).toHaveCSS('opacity', '0.4');
7569
});
70+
71+
test('when several elements are selected with the rectangular selection, we can open the group palette and hide both elements', async ({
72+
page,
73+
}) => {
74+
const playwrightNode = new PlaywrightNode(page, 'DataSource1');
75+
const playwrightNode2 = new PlaywrightNode(page, 'CompositeProcessor1');
76+
const playwrightEdge = new PlaywrightEdge(page);
77+
await playwrightNode.click();
78+
await playwrightNode2.controlClick();
79+
await playwrightNode2.openPalette();
80+
await expect(page.getByTestId('Palette')).toBeAttached();
81+
await page.getByTestId('Palette').getByTestId('Hide-element').click();
82+
await expect(playwrightNode.nodeLocator).not.toBeAttached();
83+
await expect(playwrightNode2.nodeLocator).not.toBeAttached();
84+
await expect(playwrightEdge.edgeLocator).not.toBeAttached();
85+
});
7686
});
7787

7888
test.describe('diagram - palette tool section', () => {

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

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ import { useSynchronizeLayoutData } from './layout/useSynchronizeLayoutData';
7171
import { useMoveChange } from './move/useMoveChange';
7272
import { useNodeType } from './node/useNodeType';
7373
import { DiagramPalette } from './palette/DiagramPalette';
74-
import { GroupPalette } from './palette/group-tool/GroupPalette';
7574
import { useDiagramPalette } from './palette/useDiagramPalette';
7675
import { DiagramPanel } from './panel/DiagramPanel';
7776
import { useReconnectEdge } from './reconnect-edge/useReconnectEdge';
@@ -380,16 +379,8 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
380379

381380
const { isOpened } = useDiagramPalette();
382381
const { onSelectionChange, selectedElementsIds } = useDiagramSelection();
383-
const {
384-
onEdgeContextMenu,
385-
onNodeContextMenu,
386-
onPaneContextMenu,
387-
onSelectionContextMenu,
388-
groupPalettePosition,
389-
groupPaletteRefElementId,
390-
hideGroupPalette,
391-
isGroupPaletteOpened,
392-
} = useOnRightClickElement(selectedElementsIds);
382+
const { onEdgeContextMenu, onNodeContextMenu, onPaneContextMenu, onSelectionContextMenu } =
383+
useOnRightClickElement(selectedElementsIds);
393384

394385
let reactFlowProps: ReactFlowProps<Node<NodeData>, Edge<EdgeData>> = {
395386
nodes: nodes,
@@ -465,16 +456,10 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
465456
onHelperLines={setHelperLinesEnabled}
466457
reactFlowWrapper={ref}
467458
/>
468-
<GroupPalette
469-
x={groupPalettePosition?.x}
470-
y={groupPalettePosition?.y}
471-
isOpened={isGroupPaletteOpened}
472-
refElementId={groupPaletteRefElementId}
473-
hidePalette={hideGroupPalette}
474-
/>
459+
475460
{isOpened ? (
476461
<DiagramPalette
477-
diagramElementId={diagramRefreshedEventPayload.diagram.id}
462+
diagramId={diagramRefreshedEventPayload.diagram.id}
478463
diagramTargetObjectId={diagramRefreshedEventPayload.diagram.targetObjectId}
479464
/>
480465
) : null}

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPalette.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { DiagramToolExecutorContext } from '../tools/DiagramToolExecutorContext'
2323
import { DiagramToolExecutorContextValue } from '../tools/DiagramToolExecutorContext.types';
2424
import { PaletteAppearanceSection } from './appearance/PaletteAppearanceSection';
2525
import { DiagramPaletteProps } from './DiagramPalette.types';
26+
import { GroupPaletteLayoutSection } from './GroupPaletteLayoutSection';
2627
import { Palette } from './Palette';
2728
import { GQLTool } from './Palette.types';
2829
import { PalettePortal } from './PalettePortal';
@@ -31,7 +32,7 @@ import { useDiagramPalette } from './useDiagramPalette';
3132
import { usePaletteContents } from './usePaletteContents';
3233
import { UsePaletteContentValue } from './usePaletteContents.types';
3334

34-
export const DiagramPalette = memo(({ diagramElementId, diagramTargetObjectId }: DiagramPaletteProps) => {
35+
export const DiagramPalette = memo(({ diagramId, diagramTargetObjectId }: DiagramPaletteProps) => {
3536
const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
3637
const { isOpened, x: paletteX, y: paletteY, diagramElementIds, hideDiagramPalette } = useDiagramPalette();
3738
const { executeTool } = useContext<DiagramToolExecutorContextValue>(DiagramToolExecutorContext);
@@ -40,8 +41,9 @@ export const DiagramPalette = memo(({ diagramElementId, diagramTargetObjectId }:
4041
const { getNode, getEdge } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
4142
const { t } = useTranslation('sirius-components-diagrams', { keyPrefix: 'diagramPalette' });
4243

43-
const elementId = diagramElementIds[0] ? diagramElementIds[0] : diagramElementId;
44-
const { palette }: UsePaletteContentValue = usePaletteContents(elementId);
44+
const elementId = diagramElementIds[0] ? diagramElementIds[0] : diagramId;
45+
const shouldSkip = diagramElementIds.length > 1;
46+
let { palette }: UsePaletteContentValue = usePaletteContents(elementId, shouldSkip);
4547

4648
const onKeyDown = useCallback(
4749
(event: React.KeyboardEvent<Element>) => {
@@ -80,7 +82,7 @@ export const DiagramPalette = memo(({ diagramElementId, diagramTargetObjectId }:
8082
}, [diagramElementIds]);
8183

8284
const targetObjectId =
83-
elementId === diagramElementId
85+
elementId === diagramId
8486
? diagramTargetObjectId
8587
: getNode(diagramElementIds[0] || '')?.data.targetObjectId ||
8688
getEdge(diagramElementIds[0] || '')?.data?.targetObjectId ||
@@ -118,6 +120,16 @@ export const DiagramPalette = memo(({ diagramElementId, diagramTargetObjectId }:
118120
/>
119121
);
120122
}
123+
if (diagramElementIds.length > 1) {
124+
sectionComponents.push(
125+
<PaletteExtensionSection
126+
component={GroupPaletteLayoutSection}
127+
id={'layout_section'}
128+
title={'Layout'}
129+
onClose={hideDiagramPalette}
130+
/>
131+
);
132+
}
121133

122134
return sectionComponents;
123135
}, [diagramElementIds.join('-')]);
@@ -126,15 +138,19 @@ export const DiagramPalette = memo(({ diagramElementId, diagramTargetObjectId }:
126138
return null;
127139
}
128140

129-
const shouldRender = palette && isOpened && paletteX && paletteY && !currentlyEditedLabelId;
141+
if (diagramElementIds.length > 1) {
142+
palette = { id: diagramElementIds.join('-'), quickAccessTools: [], paletteEntries: [] };
143+
}
144+
145+
const shouldRender = isOpened && !!paletteX && !!paletteY && !currentlyEditedLabelId;
130146

131-
return shouldRender ? (
147+
return palette && shouldRender ? (
132148
<PalettePortal>
133149
<div onKeyDown={onKeyDown}>
134150
<Palette
135151
x={paletteX}
136152
y={paletteY}
137-
diagramElementId={diagramElementIds[0] || diagramElementId}
153+
diagramElementIds={diagramElementIds.length > 0 ? diagramElementIds : [diagramId]}
138154
palette={palette}
139155
onToolClick={onToolClick}
140156
onClose={hideDiagramPalette}

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPalette.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
*******************************************************************************/
1313

1414
export interface DiagramPaletteProps {
15-
diagramElementId: string;
15+
diagramId: string;
1616
diagramTargetObjectId: string;
1717
}

0 commit comments

Comments
 (0)