[4323] Improve palette style

Bug: #4323 Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Feb 3, 2025 · 2a9ca7f · 2a9ca7f
1 parent f0fe259
commit 2a9ca7f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 47 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -158,6 +158,7 @@ Note that you may need to encode special characters like `[`(by `%5B`) and `]` (
 - https://github.com/eclipse-sirius/sirius-web/issues/4474[#4474] [query] Add EMF Services (eSet, eUnset) for the Query View.
 - https://github.com/eclipse-sirius/sirius-web/issues/4354[#4354] [table] Add support for cursor based pagination in table view DSL
 - https://github.com/eclipse-sirius/sirius-web/issues/4478[#4478] [sirius-web] Provide an API to search custom resource on download document action
+- https://github.com/eclipse-sirius/sirius-web/issues/4323[#4323] [diagram] The palette can now be smaller and have an arrow to close it
 
 
 == v2025.1.0

diff --git a/...ams/frontend/sirius-components-diagrams/src/renderer/direct-edit/useDiagramDirectEdit.tsx b/...ams/frontend/sirius-components-diagrams/src/renderer/direct-edit/useDiagramDirectEdit.tsx
@@ -41,7 +41,7 @@ export const useDiagramDirectEdit = (): UseDiagramDirectEditValue => {
       if (key !== 'F2' && isTextField) {
         return;
       }
-
+      event.preventDefault();
       const validFirstInputChar =
         !event.metaKey && !event.ctrlKey && key.length === 1 && directEditActivationValidCharacters.test(key);
 

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
@@ -11,16 +11,17 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import CloseIcon from '@mui/icons-material/Close';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 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 { Edge, Node, useStoreApi, useViewport, XYPosition } from '@xyflow/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import Draggable, { DraggableData } from 'react-draggable';
 import { makeStyles } from 'tss-react/mui';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
-import { useGroupPalette } from './group-tool/useGroupPalette';
 import {
   GQLPalette,
   GQLPaletteDivider,
@@ -48,14 +49,13 @@ const usePaletteStyle = makeStyles<PaletteStyleProps>()((theme, props) => ({
     zIndex: 5,
     position: 'fixed',
     width: props.paletteWidth,
-    height: props.paletteHeight,
   },
   paletteHeader: {
     cursor: 'move',
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',
     alignItems: 'center',
     backgroundColor: `${theme.palette.secondary.main}08`,
   },
@@ -77,7 +77,6 @@ const computeDraggableBounds = (bounds?: DOMRect): XYPosition => {
 };
 
 const paletteWidth = 200;
-const paletteHeight = 275;
 
 const getPaletteToolCount = (palette: GQLPalette): number => {
   return (
@@ -93,7 +92,8 @@ const computePaletteLocation = (
   paletteX: number,
   paletteY: number,
   viewportWidth: number,
-  viewportHeight: number
+  viewportHeight: number,
+  paletteHeight: number
 ): XYPosition => {
   return {
     x: paletteX + paletteWidth < viewportWidth ? paletteX : viewportWidth - paletteWidth,
@@ -126,9 +126,16 @@ export const Palette = ({
     y = (paletteY - viewportY) / viewportZoom;
   }
   const { handleToolClick, palette } = usePalette({ x, y, diagramElementId, onDirectEditClick, targetObjectId });
+  const paletteHeight = palette ? palette.paletteEntries.length * 30 + 50 : 50;
 
   useEffect(() => {
-    const paletteLocation: XYPosition = computePaletteLocation(paletteX, paletteY, viewportWidth, viewportHeight);
+    const paletteLocation: XYPosition = computePaletteLocation(
+      paletteX,
+      paletteY,
+      viewportWidth,
+      viewportHeight,
+      paletteHeight
+    );
     setState((prevState) => ({ ...prevState, controlledPosition: paletteLocation }));
   }, [paletteX, paletteY, viewportWidth, viewportHeight]);
 
@@ -138,36 +145,32 @@ export const Palette = ({
 
   const { hideDiagramPalette } = useDiagramPalette();
   const { hideDiagramElementPalette } = useDiagramElementPalette();
-  const { hideGroupPalette } = useGroupPalette();
 
+  const store = useStoreApi<Node<NodeData>, Edge<EdgeData>>();
   const closeAllPalettes = useCallback(() => {
     hideDiagramPalette();
     hideDiagramElementPalette();
-    hideGroupPalette();
-  }, [hideDiagramPalette, hideDiagramElementPalette, hideGroupPalette]);
 
-  const store = useStoreApi<Node<NodeData>, Edge<EdgeData>>();
+    //Set the focus from the palette to the node/edge
+    const selectedNode = store.getState().nodes.filter((node) => node.selected);
+    const selectedEdges = store.getState().edges.filter((edge) => edge.selected);
+    if (selectedNode.length + selectedEdges.length === 1) {
+      const selectedElement = selectedNode[0] || selectedEdges[0];
+      if (selectedElement) {
+        let domElement = document.querySelector(`[data-id='${selectedElement.id}']`);
+        if (domElement) {
+          (domElement as HTMLElement).focus();
+        }
+      }
+    }
+  }, [hideDiagramPalette, hideDiagramElementPalette]);
 
   const onKeyDown = useCallback((event: React.KeyboardEvent<Element>) => {
     const { key } = event;
     if (key === 'Escape') {
       // Stop propagating the event in order to keep the node/edge selected
       event.stopPropagation();
-
       closeAllPalettes();
-
-      //Set the focus from the palette to the node/edge
-      const selectedNode = store.getState().nodes.filter((node) => node.selected);
-      const selectedEdges = store.getState().edges.filter((edge) => edge.selected);
-      if (selectedNode.length + selectedEdges.length === 1) {
-        const selectedElement = selectedNode[0] || selectedEdges[0];
-        if (selectedElement) {
-          let domElement = document.querySelector(`[data-id='${selectedElement.id}']`);
-          if (domElement) {
-            (domElement as HTMLElement).focus();
-          }
-        }
-      }
     }
   }, []);
 
@@ -209,6 +212,9 @@ export const Palette = ({
         tabIndex={0}>
         <Box id="tool-palette-header" className={classes.paletteHeader}>
           <DragIndicatorIcon />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={closeAllPalettes}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
         </Box>
         <Divider />
         <PaletteQuickAccessToolBar

diff --git a/...-components-diagrams/src/renderer/palette/quick-access-tool/PaletteQuickAccessToolBar.tsx b/...-components-diagrams/src/renderer/palette/quick-access-tool/PaletteQuickAccessToolBar.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 2025 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
@@ -13,7 +13,6 @@
 
 import { DataExtension, useData } from '@eclipse-sirius/sirius-components-core';
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
 import { Edge, Node, useStoreApi } from '@xyflow/react';
 import { makeStyles } from 'tss-react/mui';
 import { EdgeData, NodeData } from '../../DiagramRenderer.types';
@@ -35,7 +34,7 @@ const isBendable = (diagramElement: Node<NodeData> | Edge<EdgeData>): diagramEle
   return !!diagramElement.data && 'bendingPoints' in diagramElement.data && !!diagramElement.data.bendingPoints;
 };
 
-const useStyle = makeStyles()(() => ({
+const useStyle = makeStyles()((theme) => ({
   quickAccessTools: {
     display: 'flex',
     flexWrap: 'nowrap',
@@ -44,6 +43,9 @@ const useStyle = makeStyles()(() => ({
     alignItems: 'center',
     overflowX: 'auto',
   },
+  quickAccessToolContainer: {
+    width: theme.spacing(3.5),
+  },
 }));
 
 export const PaletteQuickAccessToolBar = ({
@@ -54,15 +56,10 @@ export const PaletteQuickAccessToolBar = ({
   y,
 }: PaletteQuickAccessToolBarProps) => {
   const { classes } = useStyle();
-
+  const quickAccessToolComponents: JSX.Element[] = [];
   const { nodeLookup, edgeLookup } = useStoreApi<Node<NodeData>, Edge<EdgeData>>().getState();
   const diagramElement = nodeLookup.get(diagramElementId) || edgeLookup.get(diagramElementId);
 
-  const quickAccessToolComponents: JSX.Element[] = [];
-  quickAccessTools.forEach((tool) =>
-    quickAccessToolComponents.push(<Tool tool={tool} onClick={onToolClick} thumbnail key={'tool_' + tool.id} />)
-  );
-
   if (diagramElement) {
     if (isPinnable(diagramElement)) {
       quickAccessToolComponents.push(
@@ -109,16 +106,18 @@ export const PaletteQuickAccessToolBar = ({
           />
         )
       );
-  }
 
-  if (quickAccessToolComponents.length > 0) {
-    return (
-      <>
-        <Box className={classes.quickAccessTools}>{quickAccessToolComponents}</Box>
-        <Divider />
-      </>
+    quickAccessTools.forEach((tool) =>
+      quickAccessToolComponents.push(<Tool tool={tool} onClick={onToolClick} thumbnail key={'tool_' + tool.id} />)
     );
-  } else {
-    return null;
   }
+  return (
+    <Box className={classes.quickAccessTools}>
+      {quickAccessToolComponents.map((quickAcessTool, index) => (
+        <div className={classes.quickAccessToolContainer} key={'quickAccessToolContainer' + index}>
+          {quickAcessTool}
+        </div>
+      ))}
+    </Box>
+  );
 };
diff --git a/...tend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.tsx b/...tend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.tsx
@@ -16,6 +16,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from 'tss-react/mui';
+import { isSingleClickOnDiagramElementTool } from '../Palette';
 import { ToolListItem } from '../tool-list-item/ToolListItem';
 import { PaletteToolSectionListProps } from './PaletteToolSectionList.types';
 
@@ -69,7 +70,7 @@ export const PaletteToolSectionList = ({ toolSection, onToolClick, onBackToMainL
           <ListItemText className={classes.sectionTitleListItemText} primary={toolSection.label} />
         </ListItemButton>
       </Tooltip>
-      {toolSection.tools.map((tool) => (
+      {toolSection.tools.filter(isSingleClickOnDiagramElementTool).map((tool) => (
         <ToolListItem onToolClick={onToolClick} tool={tool} key={tool.id} />
       ))}
     </List>

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePalette.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 2025 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

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx
@@ -28,7 +28,7 @@ import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Tooltip from '@mui/material/Tooltip';
 import { Edge, Node, Panel, useNodesInitialized, useReactFlow } from '@xyflow/react';
-import { memo, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { DiagramContext } from '../../contexts/DiagramContext';
 import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { HelperLinesIcon } from '../../icons/HelperLinesIcon';
@@ -41,6 +41,9 @@ import { useFadeDiagramElements } from '../fade/useFadeDiagramElements';
 import { useFullscreen } from '../fullscreen/useFullscreen';
 import { useHideDiagramElements } from '../hide/useHideDiagramElements';
 import { useArrangeAll } from '../layout/useArrangeAll';
+import { useGroupPalette } from '../palette/group-tool/useGroupPalette';
+import { useDiagramElementPalette } from '../palette/useDiagramElementPalette';
+import { useDiagramPalette } from '../palette/useDiagramPalette';
 import { usePinDiagramElements } from '../pin/usePinDiagramElements';
 import { DiagramPanelActionProps, DiagramPanelProps, DiagramPanelState } from './DiagramPanel.types';
 import { diagramPanelActionExtensionPoint } from './DiagramPanelExtensionPoints';
@@ -68,6 +71,15 @@ export const DiagramPanel = memo(
     );
 
     const { getNodes, getEdges, zoomIn, zoomOut, fitView } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
+    const { hideDiagramPalette } = useDiagramPalette();
+    const { hideDiagramElementPalette } = useDiagramElementPalette();
+    const { hideGroupPalette } = useGroupPalette();
+
+    const closeAllPalettes = useCallback(() => {
+      hideDiagramPalette();
+      hideDiagramElementPalette();
+      hideGroupPalette();
+    }, [hideDiagramPalette, hideDiagramElementPalette, hideGroupPalette]);
 
     const getAllElementsIds = () => [...getNodes().map((elem) => elem.id), ...getEdges().map((elem) => elem.id)];
     const getSelectedNodes = () => getNodes().filter((node) => node.selected);
@@ -266,7 +278,9 @@ export const DiagramPanel = memo(
               </span>
             </Tooltip>
             {diagramPanelActionComponents.map(({ Component: DiagramPanelActionComponent }, index) => (
-              <DiagramPanelActionComponent editingContextId={editingContextId} diagramId={diagramId} key={index} />
+              <div onClick={closeAllPalettes}>
+                <DiagramPanelActionComponent editingContextId={editingContextId} diagramId={diagramId} key={index} />
+              </div>
             ))}
           </Paper>
         </Panel>