[3981] Fix Cleanup

Bug: #3981
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>

CHANGELOG.adoc

@@ -31,6 +31,8 @@
 
 - https://github.com/eclipse-sirius/sirius-web/issues/4110[#4110] [form] Add layout capabilities for form widgets
 - https://github.com/eclipse-sirius/sirius-web/issues/4177[#4177] [table] Add table representation support
+- https://github.com/eclipse-sirius/sirius-web/issues/3990[#3990] [diagram] The palette can now be dragged
+- https://github.com/eclipse-sirius/sirius-web/issues/3981[#3981] [diagram] The palette palette sections are showed as list
 
 === Improvements
 

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

@@ -17,7 +17,6 @@
  *
  * @author fbarbin
  */
-
 public interface IPaletteEntry {
 
     String id();

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

@@ -58,12 +58,12 @@ export type { NodeContextValue } from './renderer/node/NodeContext.types';
 export { NodeTypeContribution } from './renderer/node/NodeTypeContribution';
 export type { DiagramNodeType } from './renderer/node/NodeTypes.types';
 export { DiagramElementPalette } from './renderer/palette/DiagramElementPalette';
+export type { DiagramPaletteToolComponentProps } from './renderer/palette/extensions/DiagramPaletteTool.types';
 export type {
   DiagramPaletteToolContributionComponentProps,
   DiagramPaletteToolContributionProps,
-} from './renderer/palette/DiagramPaletteToolContribution.types';
-export type { DiagramPaletteToolComponentProps } from './renderer/palette/tool/DiagramPaletteTool.types';
-export { diagramPaletteToolExtensionPoint } from './renderer/palette/tool/DiagramPaletteToolExtensionPoints';
+} from './renderer/palette/extensions/DiagramPaletteToolContribution.types';
+export { diagramPaletteToolExtensionPoint } from './renderer/palette/extensions/DiagramPaletteToolExtensionPoints';
 export type { GQLToolVariable, GQLToolVariableType } from './renderer/palette/usePalette.types';
 export type { DiagramPanelActionProps } from './renderer/panel/DiagramPanel.types';
 export { diagramPanelActionExtensionPoint } from './renderer/panel/DiagramPanelExtensionPoints';

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

@@ -52,7 +52,6 @@ export const DiagramElementPalette = memo(
           diagramElementId={diagramElementId}
           targetObjectId={targetObjectId}
           onDirectEditClick={handleDirectEditClick}
-          hideableDiagramElement
         />
       </PalettePortal>
     ) : null;

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

@@ -11,31 +11,26 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { DataExtension, useData } from '@eclipse-sirius/sirius-components-core';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
-import { Edge, Node, useReactFlow, useStoreApi, useViewport, XYPosition } from '@xyflow/react';
+import { Edge, Node, useStoreApi, useViewport, XYPosition } from '@xyflow/react';
 import React, { useEffect, useState } from 'react';
 import Draggable, { DraggableData } from 'react-draggable';
 import { makeStyles } from 'tss-react/mui';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import {
-  DiagramPaletteToolContributionComponentProps,
-  DiagramPaletteToolContributionProps,
-} from './DiagramPaletteToolContribution.types';
-import {
+  GQLPalette,
   GQLPaletteDivider,
   GQLPaletteEntry,
   GQLSingleClickOnDiagramElementTool,
   GQLToolSection,
   PaletteProps,
   PaletteStyleProps,
 } from './Palette.types';
-import { PaletteQuickAccessToolBar } from './tool-list/PaletteQuickAccessToolBar';
+import { PaletteQuickAccessToolBar } from './quick-access-tool/PaletteQuickAccessToolBar';
 import { PaletteToolList } from './tool-list/PaletteToolList';
-import { diagramPaletteToolExtensionPoint } from './tool/DiagramPaletteToolExtensionPoints';
 import { usePalette } from './usePalette';
 
 const usePaletteStyle = makeStyles<PaletteStyleProps>()((theme, props) => ({
@@ -78,18 +73,40 @@ const computeDraggableBounds = (bounds?: DOMRect): XYPosition => {
 const paletteWidth = 200;
 const paletteHeight = 275;
 
+const getPaletteToolCount = (palette: GQLPalette): number => {
+  return (
+    palette.paletteEntries.filter(isSingleClickOnDiagramElementTool).length +
+    palette.quickAccessTools.filter(isSingleClickOnDiagramElementTool).length +
+    palette.paletteEntries
+      .filter(isToolSection)
+      .filter((toolSection) => toolSection.tools.filter(isSingleClickOnDiagramElementTool).length > 0).length
+  );
+};
+
+const computePaletteLocation = (
+  paletteX: number,
+  paletteY: number,
+  viewportWidth: number,
+  viewportHeight: number
+): XYPosition => {
+  return {
+    x: paletteX + paletteWidth < viewportWidth ? paletteX : viewportWidth - paletteWidth,
+    y: paletteY + paletteHeight < viewportHeight ? paletteY : viewportHeight - paletteHeight,
+  };
+};
+
 export const Palette = ({
   x: paletteX,
   y: paletteY,
   diagramElementId,
   targetObjectId,
   onDirectEditClick,
-  hideableDiagramElement,
 }: PaletteProps) => {
-  const { getNodes, getEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
-  const { domNode } = useStoreApi().getState();
+  const { domNode, nodeLookup, edgeLookup } = useStoreApi<Node<NodeData>, Edge<EdgeData>>().getState();
   const { x: viewportWidth, y: viewportHeight } = computeDraggableBounds(domNode?.getBoundingClientRect());
 
+  const diagramElement = nodeLookup.get(diagramElementId) || edgeLookup.get(diagramElementId);
+
   const [controlledPosition, setControlledPosition] = useState<XYPosition>({ x: 0, y: 0 });
   let x: number = 0;
   let y: number = 0;
@@ -99,35 +116,16 @@ export const Palette = ({
     y = (paletteY - viewportY) / viewportZoom;
   }
   const { handleToolClick, palette } = usePalette({ x, y, diagramElementId, onDirectEditClick, targetObjectId });
+
   useEffect(() => {
     const paletteLocation: XYPosition = computePaletteLocation(paletteX, paletteY, viewportWidth, viewportHeight);
     setControlledPosition(paletteLocation);
   }, [paletteX, paletteY, viewportWidth, viewportHeight]);
 
-  const paletteToolData: DataExtension<DiagramPaletteToolContributionProps[]> = useData(
-    diagramPaletteToolExtensionPoint
-  );
-
-  const diagramElement: Node<NodeData> | Edge<EdgeData> | undefined =
-    getEdges().find((edge) => edge.id === diagramElementId) ?? getNodes().find((node) => node.id === diagramElementId);
-
-  const paletteToolComponents: React.ComponentType<DiagramPaletteToolContributionComponentProps>[] = diagramElement
-    ? paletteToolData.data.filter((data) => data.canHandle(diagramElement)).map((data) => data.component)
-    : [];
-
-  const toolCount =
-    (palette
-      ? palette.paletteEntries.filter(isSingleClickOnDiagramElementTool).length +
-        palette.quickAccessTools.filter(isSingleClickOnDiagramElementTool).length +
-        palette.paletteEntries
-          .filter(isToolSection)
-          .filter((toolSection) => toolSection.tools.filter(isSingleClickOnDiagramElementTool).length > 0).length
-      : 0) +
-    (hideableDiagramElement ? (diagramElement ? 3 : 1) : 0) +
-    paletteToolComponents.length;
   const { classes } = usePaletteStyle({ paletteWidth: `${paletteWidth}px`, paletteHeight: `${paletteHeight}px` });
 
-  const shouldRender = palette && (diagramElement || (!diagramElement && toolCount > 0));
+  const shouldRender = palette && (getPaletteToolCount(palette) > 0 || !!diagramElement);
+
   if (!shouldRender) {
     return null;
   }
@@ -163,26 +161,12 @@ export const Palette = ({
         <PaletteQuickAccessToolBar
           diagramElementId={diagramElementId}
           onToolClick={handleToolClick}
-          diagramElement={diagramElement ?? null}
           quickAccessTools={palette.quickAccessTools}
-          paletteToolComponents={paletteToolComponents}
           x={x}
           y={y}
-          hideableDiagramElement={hideableDiagramElement}
         />
         <PaletteToolList palette={palette} onToolClick={handleToolClick} />
       </Paper>
     </Draggable>
   );
 };
-const computePaletteLocation = (
-  paletteX: number,
-  paletteY: number,
-  viewportWidth: number,
-  viewportHeight: number
-): XYPosition => {
-  return {
-    x: paletteX + paletteWidth < viewportWidth ? paletteX : viewportWidth - paletteWidth,
-    y: paletteY + paletteHeight < viewportHeight ? paletteY : viewportHeight - paletteHeight,
-  };
-};

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

@@ -36,7 +36,6 @@ export interface PaletteProps {
   diagramElementId: string;
   targetObjectId: string;
   onDirectEditClick: () => void;
-  hideableDiagramElement?: boolean;
 }
 
 export interface PaletteStyleProps {

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.tsx → packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/contexts/DiagramPaletteContext.tsx

@@ -12,13 +12,13 @@
  *******************************************************************************/
 
 import React, { useCallback, useState } from 'react';
+import { GQLTool } from '../Palette.types';
 import {
   DiagramPaletteContextProviderProps,
   DiagramPaletteContextProviderState,
   DiagramPaletteContextValue,
   ToolSectionWithLastTool,
 } from './DiagramPaletteContext.types';
-import { GQLTool } from './Palette.types';
 
 const defaultValue: DiagramPaletteContextValue = {
   x: null,

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.types.ts → packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/contexts/DiagramPaletteContext.types.ts

@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { GQLTool } from './Palette.types';
+import { GQLTool } from '../Palette.types';
 
 export interface DiagramPaletteContextValue {
   x: number | null;

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteToolContribution.types.ts → packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolContribution.types.ts

@@ -12,7 +12,7 @@
  *******************************************************************************/
 
 import { Edge, Node } from '@xyflow/react';
-import { EdgeData, NodeData } from '../DiagramRenderer.types';
+import { EdgeData, NodeData } from '../../DiagramRenderer.types';
 
 export interface DiagramPaletteToolContributionProps {
   canHandle: (element: Node<NodeData> | Edge<EdgeData>) => boolean;

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool/DiagramPaletteToolExtensionPoints.ts → packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolExtensionPoints.ts

@@ -12,7 +12,7 @@
  *******************************************************************************/
 
 import { DataExtensionPoint } from '@eclipse-sirius/sirius-components-core';
-import { DiagramPaletteToolContributionProps } from '../DiagramPaletteToolContribution.types';
+import { DiagramPaletteToolContributionProps } from './DiagramPaletteToolContribution.types';
 
 export const diagramPaletteToolExtensionPoint: DataExtensionPoint<Array<DiagramPaletteToolContributionProps>> = {
   identifier: 'diagramPalette#tool',

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

@@ -41,8 +41,8 @@ import { useDistributeElements } from '../../layout/useDistributeElements';
 import { ListNodeData } from '../../node/ListNode.types';
 import { usePinDiagramElements } from '../../pin/usePinDiagramElements';
 import { PalettePortal } from '../PalettePortal';
-import { PaletteTool } from '../PaletteTool';
 import { GroupPaletteProps, GroupPaletteSectionTool, GroupPaletteState } from './GroupPalette.types';
+import { PaletteTool } from './PaletteTool';
 
 const usePaletteStyle = makeStyles()((theme) => ({
   palette: {

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

@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import AdjustIcon from '@mui/icons-material/Adjust';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { makeStyles } from 'tss-react/mui';
+import { useAdjustSize } from '../../adjust-size/useAdjustSize';
+import { AdjustSizeToolProps } from './AdjustSizeTool.types';
+
+const useStyle = makeStyles()((theme) => ({
+  toolIcon: {
+    width: theme.spacing(4.5),
+    color: theme.palette.text.primary,
+  },
+}));
+
+export const AdjustSizeTool = ({ diagramElementId }: AdjustSizeToolProps) => {
+  const { classes } = useStyle();
+  const { adjustSize } = useAdjustSize();
+  return (
+    <Tooltip title="Adjust size" key={'tooltip_adjust_element_tool'}>
+      <IconButton
+        className={classes.toolIcon}
+        size="small"
+        aria-label="Adjust element"
+        onClick={() => adjustSize(diagramElementId)}
+        data-testid="adjust-element">
+        <AdjustIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2024 Obeo.
+ * Copyright (c) 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -10,15 +10,6 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { GQLTool, GQLToolSection } from '../Palette.types';
-
-export interface ToolSectionProps {
-  toolSection: GQLToolSection;
-  onToolClick: (tool: GQLTool) => void;
-  toolSectionExpandId: string | null;
-  onExpand: (toolSectionId: string | null) => void;
-}
-
-export interface ToolSectionState {
-  expanded: boolean;
+export interface AdjustSizeToolProps {
+  diagramElementId: string;
 }

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

@@ -0,0 +1,58 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import TonalityIcon from '@mui/icons-material/Tonality';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { makeStyles } from 'tss-react/mui';
+import { useFadeDiagramElements } from '../../fade/useFadeDiagramElements';
+import { FadeElementToolProps } from './FadeElementTool.types';
+
+const useStyle = makeStyles()((theme) => ({
+  toolIcon: {
+    width: theme.spacing(4.5),
+    color: theme.palette.text.primary,
+  },
+}));
+
+export const FadeElementTool = ({ diagramElementId, isFaded }: FadeElementToolProps) => {
+  const { classes } = useStyle();
+  const { fadeDiagramElements } = useFadeDiagramElements();
+  if (isFaded) {
+    return (
+      <Tooltip title="Unfade element" key={'tooltip_unfade_element_tool'}>
+        <IconButton
+          className={classes.toolIcon}
+          size="small"
+          aria-label="Unfade element"
+          onClick={() => fadeDiagramElements([diagramElementId], false)}
+          data-testid="Fade-element">
+          <TonalityIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    );
+  } else {
+    return (
+      <Tooltip title="Fade element" key={'tooltip_fade_element_tool'}>
+        <IconButton
+          className={classes.toolIcon}
+          size="small"
+          aria-label="Fade element"
+          onClick={() => fadeDiagramElements([diagramElementId], true)}
+          data-testid="Fade-element">
+          <TonalityIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    );
+  }
+};

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

@@ -0,0 +1,16 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+export interface FadeElementToolProps {
+  diagramElementId: string;
+  isFaded: boolean;
+}