From cdf6fa9eab914ab2ca98ca4b9732fdea3be22416 Mon Sep 17 00:00:00 2001 From: Florian Barbin Date: Tue, 10 Sep 2024 22:39:00 +0200 Subject: [PATCH] [3990] Make the diagram contextual palette draggable Bug: https://github.com/eclipse-sirius/sirius-web/issues/3990 Signed-off-by: Florian Barbin --- CHANGELOG.adoc | 2 + package-lock.json | 3 + .../sirius-components-diagrams/package.json | 6 +- .../src/renderer/palette/Palette.tsx | 98 +++++++++++-------- 4 files changed, 64 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 36fd5935adb..6a238ce5287 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -132,6 +132,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 index f76651d0f8c..3d0daf0df04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7999,6 +7999,7 @@ "prettier": "2.7.1", "react": "17.0.2", "react-dom": "17.0.2", + "react-draggable": "^4.4.6", "reactflow": "11.10.1", "rollup-plugin-peer-deps-external": "2.2.4", "tss-react": "4.9.7", @@ -8017,6 +8018,7 @@ "pathfinding": "0.4.18", "react": "17.0.2", "react-dom": "17.0.2", + "react-draggable": "^4.4.6", "reactflow": "11.10.1", "tss-react": "4.9.7" } @@ -8968,6 +8970,7 @@ "prettier": "2.7.1", "react": "17.0.2", "react-dom": "17.0.2", + "react-draggable": "^4.4.6", "reactflow": "11.10.1", "rollup-plugin-peer-deps-external": "2.2.4", "tss-react": "4.9.7", diff --git a/packages/diagrams/frontend/sirius-components-diagrams/package.json b/packages/diagrams/frontend/sirius-components-diagrams/package.json index 0bcc267d6d4..d40c98b959f 100644 --- 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 index 6e6bfe42f98..503ea5bf420 100644 --- 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,21 @@ 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, Divider } from '@mui/material'; 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,8 +67,8 @@ 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: { @@ -74,12 +76,19 @@ const usePaletteStyle = makeStyles()((theme) => ({ 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 +474,44 @@ export const Palette = ({ } return ( - - {palette?.tools.filter(isSingleClickOnDiagramElementTool).map((tool) => ( - - ))} - {palette?.toolSections.map((toolSection) => ( - - ))} - {paletteToolComponents.map(({ Component: PaletteToolComponent }, index) => ( - - ))} - {hideableDiagramElement ? ( - <> - - - - - - {pinUnpinTool} - {adjustSizeTool} - - ) : null} - + + + + + + {palette?.tools.filter(isSingleClickOnDiagramElementTool).map((tool) => ( + + ))} + {palette?.toolSections.map((toolSection) => ( + + ))} + {paletteToolComponents.map(({ Component: PaletteToolComponent }, index) => ( + + ))} + {hideableDiagramElement ? ( + <> + + + + + + {pinUnpinTool} + {adjustSizeTool} + + ) : null} + + + ); };