[3990] Make the diagram contextual palette draggable

Bug: #3990 Signed-off-by: Florian Barbin <[email protected]>
eclipse-sirius · Sep 11, 2024 · 896e2a7 · 896e2a7
1 parent 1c1e14c
commit 896e2a7
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 46 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -159,6 +159,8 @@ A migration participant has been added to automatically keep compatible all diag
 - https://github.com/eclipse-sirius/sirius-web/issues/3932[#3932] [forms] Do not display the 'Delete' button (even disabled) for non-deletable lists
 - https://github.com/eclipse-sirius/sirius-web/issues/3951[#3951] [sirius-web] Provide an error page to redirect users in case of error
 - https://github.com/eclipse-sirius/sirius-web/issues/3974[#3974] [diagram] Add support for `<` and `>` to trigger direct edit
+- https://github.com/eclipse-sirius/sirius-web/issues/3990[#3990] [diagram] Make the diagram contextual palette draggable
+
 
 
 == v2024.7.0

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/package.json b/packages/diagrams/frontend/sirius-components-diagrams/package.json
@@ -32,8 +32,9 @@
   "peerDependencies": {
     "@apollo/client": "3.10.4",
     "@eclipse-sirius/sirius-components-core": "*",
-    "@mui/material": "5.15.19",
     "@mui/icons-material": "5.15.19",
+    "@mui/material": "5.15.19",
+    "react-draggable": "^4.4.6",
     "elkjs": "0.8.2",
     "graphql": "16.8.1",
     "html-to-image": "1.11.11",
@@ -47,8 +48,9 @@
     "@apollo/client": "3.10.4",
     "@eclipse-sirius/sirius-components-core": "*",
     "@eclipse-sirius/sirius-components-tsconfig": "*",
-    "@mui/material": "5.15.19",
     "@mui/icons-material": "5.15.19",
+    "@mui/material": "5.15.19",
+    "react-draggable": "^4.4.6",
     "@rollup/plugin-image": "2.1.1",
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.9",

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx
@@ -13,19 +13,22 @@
 
 import { gql, useMutation, useQuery } from '@apollo/client';
 import {
+  ComponentExtension,
+  useComponents,
   useDeletionConfirmationDialog,
   useMultiToast,
-  useComponents,
-  ComponentExtension,
 } from '@eclipse-sirius/sirius-components-core';
+import AdjustIcon from '@mui/icons-material/Adjust';
+import TonalityIcon from '@mui/icons-material/Tonality';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Tooltip from '@mui/material/Tooltip';
-import { makeStyles } from 'tss-react/mui';
-import AdjustIcon from '@mui/icons-material/Adjust';
-import TonalityIcon from '@mui/icons-material/Tonality';
 import { useCallback, useContext, useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
 import { useReactFlow, useViewport } from 'reactflow';
+import { makeStyles } from 'tss-react/mui';
 import { DiagramContext } from '../../contexts/DiagramContext';
 import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { useDialog } from '../../dialog/useDialog';
@@ -65,21 +68,28 @@ import {
   PaletteState,
 } from './Palette.types';
 import { ToolSection } from './tool-section/ToolSection';
-import { diagramPaletteToolExtensionPoint } from './tool/DiagramPaletteToolExtensionPoints';
 import { DiagramPaletteToolComponentProps } from './tool/DiagramPaletteTool.types';
+import { diagramPaletteToolExtensionPoint } from './tool/DiagramPaletteToolExtensionPoints';
 
 const usePaletteStyle = makeStyles()((theme) => ({
   palette: {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: '2px',
     zIndex: 5,
     position: 'fixed',
+    maxWidth: theme.spacing(45.25),
+  },
+  paletteHeader: {
+    cursor: 'move',
+    width: '100%',
+    height: '24px',
+  },
+  quickAccessTools: {
     display: 'flex',
     flexWrap: 'wrap',
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    maxWidth: theme.spacing(45.25),
   },
   toolIcon: {
     width: theme.spacing(4.5),
@@ -465,41 +475,44 @@ export const Palette = ({
   }
 
   return (
-    <Paper
-      className={classes.palette}
-      style={{ position: 'absolute', left: paletteX, top: paletteY }}
-      data-testid="Palette">
-      {palette?.tools.filter(isSingleClickOnDiagramElementTool).map((tool) => (
-        <Tool tool={tool} onClick={handleToolClick} thumbnail key={tool.id} />
-      ))}
-      {palette?.toolSections.map((toolSection) => (
-        <ToolSection
-          toolSection={toolSection}
-          onToolClick={handleToolClick}
-          key={toolSection.id}
-          onExpand={handleToolSectionExpand}
-          toolSectionExpandId={state.expandedToolSectionId}
-        />
-      ))}
-      {paletteToolComponents.map(({ Component: PaletteToolComponent }, index) => (
-        <PaletteToolComponent x={x} y={y} diagramElementId={diagramElementId} key={index} />
-      ))}
-      {hideableDiagramElement ? (
-        <>
-          <Tooltip title="Fade element">
-            <IconButton
-              className={classes.toolIcon}
-              size="small"
-              aria-label="Fade element"
-              onClick={invokeFadeDiagramElementTool}
-              data-testid="Fade-element">
-              <TonalityIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-          {pinUnpinTool}
-          {adjustSizeTool}
-        </>
-      ) : null}
-    </Paper>
+    <Draggable handle="#tool-palette-header" defaultPosition={{ x: paletteX, y: paletteY }}>
+      <Paper className={classes.palette} data-testid="Palette">
+        <Box id="tool-palette-header" className={classes.paletteHeader}></Box>
+        <Divider />
+        <Box className={classes.quickAccessTools}>
+          {palette?.tools.filter(isSingleClickOnDiagramElementTool).map((tool) => (
+            <Tool tool={tool} onClick={handleToolClick} thumbnail key={tool.id} />
+          ))}
+          {palette?.toolSections.map((toolSection) => (
+            <ToolSection
+              toolSection={toolSection}
+              onToolClick={handleToolClick}
+              key={toolSection.id}
+              onExpand={handleToolSectionExpand}
+              toolSectionExpandId={state.expandedToolSectionId}
+            />
+          ))}
+          {paletteToolComponents.map(({ Component: PaletteToolComponent }, index) => (
+            <PaletteToolComponent x={x} y={y} diagramElementId={diagramElementId} key={index} />
+          ))}
+          {hideableDiagramElement ? (
+            <>
+              <Tooltip title="Fade element">
+                <IconButton
+                  className={classes.toolIcon}
+                  size="small"
+                  aria-label="Fade element"
+                  onClick={invokeFadeDiagramElementTool}
+                  data-testid="Fade-element">
+                  <TonalityIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              {pinUnpinTool}
+              {adjustSizeTool}
+            </>
+          ) : null}
+        </Box>
+      </Paper>
+    </Draggable>
   );
 };
diff --git a/packages/sirius-web/frontend/sirius-web/package.json b/packages/sirius-web/frontend/sirius-web/package.json
@@ -48,7 +48,8 @@
     "reactflow": "11.10.1",
     "subscriptions-transport-ws": "0.11.0",
     "tss-react": "4.9.7",
-    "xstate": "4.32.1"
+    "xstate": "4.32.1",
+    "react-draggable": "4.4.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.14.1",