Skip to content

Commit 0673622

Browse files
mcharfadimcharfadi
committed
[3981] Fix Cleanup
Bug: #3981 Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
1 parent 189fa10 commit 0673622

32 files changed

+356
-384
lines changed

‎CHANGELOG.adoc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131

3232
- https://github.com/eclipse-sirius/sirius-web/issues/4110[#4110] [form] Add layout capabilities for form widgets
3333
- https://github.com/eclipse-sirius/sirius-web/issues/4177[#4177] [table] Add table representation support
34+
- https://github.com/eclipse-sirius/sirius-web/issues/3990[#3990] [diagram] The palette can now be dragged
35+
- https://github.com/eclipse-sirius/sirius-web/issues/3981[#3981] [diagram] The palette palette sections are showed as list
3436

3537
=== Improvements
3638

‎packages/diagrams/backend/sirius-components-collaborative-diagrams/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/IPaletteEntry.java

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
*
1818
* @author fbarbin
1919
*/
20-
2120
public interface IPaletteEntry {
2221

2322
String id();

‎packages/diagrams/frontend/sirius-components-diagrams/src/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,12 @@ export type { NodeContextValue } from './renderer/node/NodeContext.types';
5858
export { NodeTypeContribution } from './renderer/node/NodeTypeContribution';
5959
export type { DiagramNodeType } from './renderer/node/NodeTypes.types';
6060
export { DiagramElementPalette } from './renderer/palette/DiagramElementPalette';
61+
export type { DiagramPaletteToolComponentProps } from './renderer/palette/extensions/DiagramPaletteTool.types';
6162
export type {
6263
DiagramPaletteToolContributionComponentProps,
6364
DiagramPaletteToolContributionProps,
64-
} from './renderer/palette/DiagramPaletteToolContribution.types';
65-
export type { DiagramPaletteToolComponentProps } from './renderer/palette/tool/DiagramPaletteTool.types';
66-
export { diagramPaletteToolExtensionPoint } from './renderer/palette/tool/DiagramPaletteToolExtensionPoints';
65+
} from './renderer/palette/extensions/DiagramPaletteToolContribution.types';
66+
export { diagramPaletteToolExtensionPoint } from './renderer/palette/extensions/DiagramPaletteToolExtensionPoints';
6767
export type { GQLToolVariable, GQLToolVariableType } from './renderer/palette/usePalette.types';
6868
export type { DiagramPanelActionProps } from './renderer/panel/DiagramPanel.types';
6969
export { diagramPanelActionExtensionPoint } from './renderer/panel/DiagramPanelExtensionPoints';

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export const DiagramElementPalette = memo(
5252
diagramElementId={diagramElementId}
5353
targetObjectId={targetObjectId}
5454
onDirectEditClick={handleDirectEditClick}
55-
hideableDiagramElement
5655
/>
5756
</PalettePortal>
5857
) : null;

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

Lines changed: 31 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,26 @@
1111
* Obeo - initial API and implementation
1212
*******************************************************************************/
1313

14-
import { DataExtension, useData } from '@eclipse-sirius/sirius-components-core';
1514
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
1615
import Box from '@mui/material/Box';
1716
import Divider from '@mui/material/Divider';
1817
import Paper from '@mui/material/Paper';
19-
import { Edge, Node, useReactFlow, useStoreApi, useViewport, XYPosition } from '@xyflow/react';
18+
import { Edge, Node, useStoreApi, useViewport, XYPosition } from '@xyflow/react';
2019
import React, { useEffect, useState } from 'react';
2120
import Draggable, { DraggableData } from 'react-draggable';
2221
import { makeStyles } from 'tss-react/mui';
2322
import { EdgeData, NodeData } from '../DiagramRenderer.types';
2423
import {
25-
DiagramPaletteToolContributionComponentProps,
26-
DiagramPaletteToolContributionProps,
27-
} from './DiagramPaletteToolContribution.types';
28-
import {
24+
GQLPalette,
2925
GQLPaletteDivider,
3026
GQLPaletteEntry,
3127
GQLSingleClickOnDiagramElementTool,
3228
GQLToolSection,
3329
PaletteProps,
3430
PaletteStyleProps,
3531
} from './Palette.types';
36-
import { PaletteQuickAccessToolBar } from './tool-list/PaletteQuickAccessToolBar';
32+
import { PaletteQuickAccessToolBar } from './quick-access-tool/PaletteQuickAccessToolBar';
3733
import { PaletteToolList } from './tool-list/PaletteToolList';
38-
import { diagramPaletteToolExtensionPoint } from './tool/DiagramPaletteToolExtensionPoints';
3934
import { usePalette } from './usePalette';
4035

4136
const usePaletteStyle = makeStyles<PaletteStyleProps>()((theme, props) => ({
@@ -78,18 +73,40 @@ const computeDraggableBounds = (bounds?: DOMRect): XYPosition => {
7873
const paletteWidth = 200;
7974
const paletteHeight = 275;
8075

76+
const getPaletteToolCount = (palette: GQLPalette): number => {
77+
return (
78+
palette.paletteEntries.filter(isSingleClickOnDiagramElementTool).length +
79+
palette.quickAccessTools.filter(isSingleClickOnDiagramElementTool).length +
80+
palette.paletteEntries
81+
.filter(isToolSection)
82+
.filter((toolSection) => toolSection.tools.filter(isSingleClickOnDiagramElementTool).length > 0).length
83+
);
84+
};
85+
86+
const computePaletteLocation = (
87+
paletteX: number,
88+
paletteY: number,
89+
viewportWidth: number,
90+
viewportHeight: number
91+
): XYPosition => {
92+
return {
93+
x: paletteX + paletteWidth < viewportWidth ? paletteX : viewportWidth - paletteWidth,
94+
y: paletteY + paletteHeight < viewportHeight ? paletteY : viewportHeight - paletteHeight,
95+
};
96+
};
97+
8198
export const Palette = ({
8299
x: paletteX,
83100
y: paletteY,
84101
diagramElementId,
85102
targetObjectId,
86103
onDirectEditClick,
87-
hideableDiagramElement,
88104
}: PaletteProps) => {
89-
const { getNodes, getEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
90-
const { domNode } = useStoreApi().getState();
105+
const { domNode, nodeLookup, edgeLookup } = useStoreApi<Node<NodeData>, Edge<EdgeData>>().getState();
91106
const { x: viewportWidth, y: viewportHeight } = computeDraggableBounds(domNode?.getBoundingClientRect());
92107

108+
const diagramElement = nodeLookup.get(diagramElementId) || edgeLookup.get(diagramElementId);
109+
93110
const [controlledPosition, setControlledPosition] = useState<XYPosition>({ x: 0, y: 0 });
94111
let x: number = 0;
95112
let y: number = 0;
@@ -99,35 +116,16 @@ export const Palette = ({
99116
y = (paletteY - viewportY) / viewportZoom;
100117
}
101118
const { handleToolClick, palette } = usePalette({ x, y, diagramElementId, onDirectEditClick, targetObjectId });
119+
102120
useEffect(() => {
103121
const paletteLocation: XYPosition = computePaletteLocation(paletteX, paletteY, viewportWidth, viewportHeight);
104122
setControlledPosition(paletteLocation);
105123
}, [paletteX, paletteY, viewportWidth, viewportHeight]);
106124

107-
const paletteToolData: DataExtension<DiagramPaletteToolContributionProps[]> = useData(
108-
diagramPaletteToolExtensionPoint
109-
);
110-
111-
const diagramElement: Node<NodeData> | Edge<EdgeData> | undefined =
112-
getEdges().find((edge) => edge.id === diagramElementId) ?? getNodes().find((node) => node.id === diagramElementId);
113-
114-
const paletteToolComponents: React.ComponentType<DiagramPaletteToolContributionComponentProps>[] = diagramElement
115-
? paletteToolData.data.filter((data) => data.canHandle(diagramElement)).map((data) => data.component)
116-
: [];
117-
118-
const toolCount =
119-
(palette
120-
? palette.paletteEntries.filter(isSingleClickOnDiagramElementTool).length +
121-
palette.quickAccessTools.filter(isSingleClickOnDiagramElementTool).length +
122-
palette.paletteEntries
123-
.filter(isToolSection)
124-
.filter((toolSection) => toolSection.tools.filter(isSingleClickOnDiagramElementTool).length > 0).length
125-
: 0) +
126-
(hideableDiagramElement ? (diagramElement ? 3 : 1) : 0) +
127-
paletteToolComponents.length;
128125
const { classes } = usePaletteStyle({ paletteWidth: `${paletteWidth}px`, paletteHeight: `${paletteHeight}px` });
129126

130-
const shouldRender = palette && (diagramElement || (!diagramElement && toolCount > 0));
127+
const shouldRender = palette && (getPaletteToolCount(palette) > 0 || !!diagramElement);
128+
131129
if (!shouldRender) {
132130
return null;
133131
}
@@ -163,26 +161,12 @@ export const Palette = ({
163161
<PaletteQuickAccessToolBar
164162
diagramElementId={diagramElementId}
165163
onToolClick={handleToolClick}
166-
diagramElement={diagramElement ?? null}
167164
quickAccessTools={palette.quickAccessTools}
168-
paletteToolComponents={paletteToolComponents}
169165
x={x}
170166
y={y}
171-
hideableDiagramElement={hideableDiagramElement}
172167
/>
173168
<PaletteToolList palette={palette} onToolClick={handleToolClick} />
174169
</Paper>
175170
</Draggable>
176171
);
177172
};
178-
const computePaletteLocation = (
179-
paletteX: number,
180-
paletteY: number,
181-
viewportWidth: number,
182-
viewportHeight: number
183-
): XYPosition => {
184-
return {
185-
x: paletteX + paletteWidth < viewportWidth ? paletteX : viewportWidth - paletteWidth,
186-
y: paletteY + paletteHeight < viewportHeight ? paletteY : viewportHeight - paletteHeight,
187-
};
188-
};

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export interface PaletteProps {
3636
diagramElementId: string;
3737
targetObjectId: string;
3838
onDirectEditClick: () => void;
39-
hideableDiagramElement?: boolean;
4039
}
4140

4241
export interface PaletteStyleProps {

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramElementPaletteContext.tsx renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/contexts/DiagramElementPaletteContext.tsx

File renamed without changes.

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramElementPaletteContext.types.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/contexts/DiagramElementPaletteContext.types.ts

File renamed without changes.

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.tsx renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/contexts/DiagramPaletteContext.tsx

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

1414
import React, { useCallback, useState } from 'react';
15+
import { GQLTool } from '../Palette.types';
1516
import {
1617
DiagramPaletteContextProviderProps,
1718
DiagramPaletteContextProviderState,
1819
DiagramPaletteContextValue,
1920
ToolSectionWithLastTool,
2021
} from './DiagramPaletteContext.types';
21-
import { GQLTool } from './Palette.types';
2222

2323
const defaultValue: DiagramPaletteContextValue = {
2424
x: null,

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.types.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/contexts/DiagramPaletteContext.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
* Obeo - initial API and implementation
1212
*******************************************************************************/
1313

14-
import { GQLTool } from './Palette.types';
14+
import { GQLTool } from '../Palette.types';
1515

1616
export interface DiagramPaletteContextValue {
1717
x: number | null;

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool/DiagramPaletteTool.types.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteTool.types.ts

File renamed without changes.

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteToolContribution.types.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolContribution.types.ts

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

1414
import { Edge, Node } from '@xyflow/react';
15-
import { EdgeData, NodeData } from '../DiagramRenderer.types';
15+
import { EdgeData, NodeData } from '../../DiagramRenderer.types';
1616

1717
export interface DiagramPaletteToolContributionProps {
1818
canHandle: (element: Node<NodeData> | Edge<EdgeData>) => boolean;

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool/DiagramPaletteToolExtensionPoints.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolExtensionPoints.ts

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

1414
import { DataExtensionPoint } from '@eclipse-sirius/sirius-components-core';
15-
import { DiagramPaletteToolContributionProps } from '../DiagramPaletteToolContribution.types';
15+
import { DiagramPaletteToolContributionProps } from './DiagramPaletteToolContribution.types';
1616

1717
export const diagramPaletteToolExtensionPoint: DataExtensionPoint<Array<DiagramPaletteToolContributionProps>> = {
1818
identifier: 'diagramPalette#tool',

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ import { useDistributeElements } from '../../layout/useDistributeElements';
4141
import { ListNodeData } from '../../node/ListNode.types';
4242
import { usePinDiagramElements } from '../../pin/usePinDiagramElements';
4343
import { PalettePortal } from '../PalettePortal';
44-
import { PaletteTool } from '../PaletteTool';
4544
import { GroupPaletteProps, GroupPaletteSectionTool, GroupPaletteState } from './GroupPalette.types';
45+
import { PaletteTool } from './PaletteTool';
4646

4747
const usePaletteStyle = makeStyles()((theme) => ({
4848
palette: {

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PaletteTool.tsx renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/PaletteTool.tsx

File renamed without changes.

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PaletteTool.types.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/PaletteTool.types.ts

File renamed without changes.

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/AdjustSizeTool.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2024 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
14+
import AdjustIcon from '@mui/icons-material/Adjust';
15+
import IconButton from '@mui/material/IconButton';
16+
import Tooltip from '@mui/material/Tooltip';
17+
import { makeStyles } from 'tss-react/mui';
18+
import { useAdjustSize } from '../../adjust-size/useAdjustSize';
19+
import { AdjustSizeToolProps } from './AdjustSizeTool.types';
20+
21+
const useStyle = makeStyles()((theme) => ({
22+
toolIcon: {
23+
width: theme.spacing(4.5),
24+
color: theme.palette.text.primary,
25+
},
26+
}));
27+
28+
export const AdjustSizeTool = ({ diagramElementId }: AdjustSizeToolProps) => {
29+
const { classes } = useStyle();
30+
const { adjustSize } = useAdjustSize();
31+
return (
32+
<Tooltip title="Adjust size" key={'tooltip_adjust_element_tool'}>
33+
<IconButton
34+
className={classes.toolIcon}
35+
size="small"
36+
aria-label="Adjust element"
37+
onClick={() => adjustSize(diagramElementId)}
38+
data-testid="adjust-element">
39+
<AdjustIcon fontSize="small" />
40+
</IconButton>
41+
</Tooltip>
42+
);
43+
};

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-section/ToolSection.types.ts renamed to ‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/AdjustSizeTool.types.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*******************************************************************************
2-
* Copyright (c) 2022, 2024 Obeo.
2+
* Copyright (c) 2024 Obeo.
33
* This program and the accompanying materials
44
* are made available under the terms of the Eclipse Public License v2.0
55
* which accompanies this distribution, and is available at
@@ -10,15 +10,6 @@
1010
* Contributors:
1111
* Obeo - initial API and implementation
1212
*******************************************************************************/
13-
import { GQLTool, GQLToolSection } from '../Palette.types';
14-
15-
export interface ToolSectionProps {
16-
toolSection: GQLToolSection;
17-
onToolClick: (tool: GQLTool) => void;
18-
toolSectionExpandId: string | null;
19-
onExpand: (toolSectionId: string | null) => void;
20-
}
21-
22-
export interface ToolSectionState {
23-
expanded: boolean;
13+
export interface AdjustSizeToolProps {
14+
diagramElementId: string;
2415
}

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/FadeElementTool.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2024 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
14+
import TonalityIcon from '@mui/icons-material/Tonality';
15+
import IconButton from '@mui/material/IconButton';
16+
import Tooltip from '@mui/material/Tooltip';
17+
import { makeStyles } from 'tss-react/mui';
18+
import { useFadeDiagramElements } from '../../fade/useFadeDiagramElements';
19+
import { FadeElementToolProps } from './FadeElementTool.types';
20+
21+
const useStyle = makeStyles()((theme) => ({
22+
toolIcon: {
23+
width: theme.spacing(4.5),
24+
color: theme.palette.text.primary,
25+
},
26+
}));
27+
28+
export const FadeElementTool = ({ diagramElementId, isFaded }: FadeElementToolProps) => {
29+
const { classes } = useStyle();
30+
const { fadeDiagramElements } = useFadeDiagramElements();
31+
if (isFaded) {
32+
return (
33+
<Tooltip title="Unfade element" key={'tooltip_unfade_element_tool'}>
34+
<IconButton
35+
className={classes.toolIcon}
36+
size="small"
37+
aria-label="Unfade element"
38+
onClick={() => fadeDiagramElements([diagramElementId], false)}
39+
data-testid="Fade-element">
40+
<TonalityIcon fontSize="small" />
41+
</IconButton>
42+
</Tooltip>
43+
);
44+
} else {
45+
return (
46+
<Tooltip title="Fade element" key={'tooltip_fade_element_tool'}>
47+
<IconButton
48+
className={classes.toolIcon}
49+
size="small"
50+
aria-label="Fade element"
51+
onClick={() => fadeDiagramElements([diagramElementId], true)}
52+
data-testid="Fade-element">
53+
<TonalityIcon fontSize="small" />
54+
</IconButton>
55+
</Tooltip>
56+
);
57+
}
58+
};

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/FadeElementTool.types.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2024 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
export interface FadeElementToolProps {
14+
diagramElementId: string;
15+
isFaded: boolean;
16+
}

0 commit comments

Comments
 (0)