diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.tsx index 55e15f9a03..a964a6a14a 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.tsx @@ -16,7 +16,7 @@ import { DiagramPaletteContextProviderProps, DiagramPaletteContextProviderState, DiagramPaletteContextValue, - ToolSectionWithLastTool, + PaletteWithLastTool, } from './DiagramPaletteContext.types'; import { GQLTool } from './Palette.types'; @@ -50,25 +50,22 @@ export const DiagramPaletteContextProvider = ({ children }: DiagramPaletteContex } }, [state.isOpened]); - const getLastToolInvoked = (toolSectionId: string): GQLTool | null => { + const getLastToolInvoked = (paletteId: string): GQLTool | null => { return ( - state.lastToolsInvoked.find( - (toolSectionWithDefaultTool) => toolSectionWithDefaultTool.toolSectionId === toolSectionId - )?.lastTool || null + state.lastToolsInvoked.find((toolSectionWithDefaultTool) => toolSectionWithDefaultTool.paletteId === paletteId) + ?.lastTool || null ); }; - const setLastToolInvoked = (toolSectionId: string, tool: GQLTool) => { - const lastToolsInvoked: ToolSectionWithLastTool[] = state.lastToolsInvoked; - if (lastToolsInvoked.some((toolSectionWithLastTool) => toolSectionWithLastTool.toolSectionId === toolSectionId)) { + const setLastToolInvoked = (paletteId: string, tool: GQLTool) => { + const lastToolsInvoked: PaletteWithLastTool[] = state.lastToolsInvoked; + if (lastToolsInvoked.some((toolSectionWithLastTool) => toolSectionWithLastTool.paletteId === paletteId)) { lastToolsInvoked.splice( - lastToolsInvoked.findIndex( - (toolSectionWithLastTool) => toolSectionWithLastTool.toolSectionId === toolSectionId - ), + lastToolsInvoked.findIndex((toolSectionWithLastTool) => toolSectionWithLastTool.paletteId === paletteId), 1 ); } - lastToolsInvoked.push({ toolSectionId: toolSectionId, lastTool: tool }); + lastToolsInvoked.push({ paletteId, lastTool: tool }); }; return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.types.ts index 3682be927d..976e6ef00e 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPaletteContext.types.ts @@ -19,8 +19,8 @@ export interface DiagramPaletteContextValue { isOpened: boolean; showDiagramPalette: (x: number, y: number) => void; hideDiagramPalette: () => void; - getLastToolInvoked: (toolSectionId: string) => GQLTool | null; - setLastToolInvoked: (toolSectionId: string, tool: GQLTool) => void; + getLastToolInvoked: (paletteId: string) => GQLTool | null; + setLastToolInvoked: (paletteId: string, tool: GQLTool) => void; } export interface DiagramPaletteContextProviderProps { @@ -31,10 +31,10 @@ export interface DiagramPaletteContextProviderState { x: number | null; y: number | null; isOpened: boolean; - lastToolsInvoked: ToolSectionWithLastTool[]; + lastToolsInvoked: PaletteWithLastTool[]; } -export interface ToolSectionWithLastTool { - toolSectionId: string; +export interface PaletteWithLastTool { + paletteId: string; lastTool: GQLTool; } diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list-item/ToolListItem.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list-item/ToolListItem.tsx new file mode 100644 index 0000000000..613aaa5e4b --- /dev/null +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list-item/ToolListItem.tsx @@ -0,0 +1,69 @@ +/******************************************************************************* + * 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 { IconOverlay } from '@eclipse-sirius/sirius-components-core'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Tooltip from '@mui/material/Tooltip'; +import { makeStyles } from 'tss-react/mui'; +import { GQLTool } from '../Palette.types'; +import { usePaletteEntryTooltip } from '../usePaletteEntryTooltip'; +import { ToolListItemProps } from './ToolListItem.types'; +const useStyle = makeStyles()((theme) => ({ + toolListContainer: { + display: 'grid', + overflowY: 'auto', + overflowX: 'hidden', + gridTemplateColumns: '100%', + }, + toolList: { + gridRowStart: 1, + gridColumnStart: 1, + width: '100%', + padding: 0, + }, + listItemText: { + '& .MuiListItemText-primary': { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, + listItemButton: { + paddingTop: 0, + paddingBottom: 0, + }, + listItemIcon: { + minWidth: 0, + marginRight: theme.spacing(2), + }, +})); +export const ToolListItem = ({ tool, onToolClick }: ToolListItemProps) => { + const { classes } = useStyle(); + const { tooltipEnterDelay, tooltipPlacement } = usePaletteEntryTooltip(); + const handleToolClick = (event: React.MouseEvent, tool: GQLTool) => { + event.stopPropagation(); + onToolClick(tool); + }; + return ( + + handleToolClick(event, tool)}> + + + + + + + ); +}; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list-item/ToolListItem.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list-item/ToolListItem.types.ts new file mode 100644 index 0000000000..1d3937d201 --- /dev/null +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list-item/ToolListItem.types.ts @@ -0,0 +1,18 @@ +/******************************************************************************* + * 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 { GQLTool } from '../Palette.types'; +export interface ToolListItemProps { + tool: GQLTool; + onToolClick: (tool: GQLTool) => void; +} diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteSearchResult.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteSearchResult.tsx index 3b426c2b53..111672952b 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteSearchResult.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteSearchResult.tsx @@ -24,8 +24,8 @@ import { useEffect, useMemo, useState } from 'react'; import { makeStyles } from 'tss-react/mui'; import { isSingleClickOnDiagramElementTool, isToolSection } from '../Palette'; import { GQLPaletteEntry, GQLSingleClickOnDiagramElementTool, GQLTool } from '../Palette.types'; +import { usePaletteEntryTooltip } from '../usePaletteEntryTooltip'; import { HighlightedLabelProps, PaletteSearchResultProps } from './PaletteSearchResult.types'; -import { usePaletteEntryTooltip } from './usePaletteEntryTooltip'; const convertToToolList = (entry: GQLPaletteEntry): GQLSingleClickOnDiagramElementTool[] => { if (isSingleClickOnDiagramElementTool(entry)) { diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolList.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolList.tsx index a6fe8159af..0b2c506ad5 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolList.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolList.tsx @@ -10,25 +10,29 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { IconOverlay } from '@eclipse-sirius/sirius-components-core'; import NavigateNextIcon from '@mui/icons-material/NavigateNext'; import Box from '@mui/material/Box'; import Divider from '@mui/material/Divider'; import List from '@mui/material/List'; import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import Slide from '@mui/material/Slide'; import Tooltip from '@mui/material/Tooltip'; import React, { useState } from 'react'; import { makeStyles } from 'tss-react/mui'; import { isPaletteDivider, isSingleClickOnDiagramElementTool, isToolSection } from '../Palette'; -import { GQLPaletteEntry, GQLTool, GQLToolSection } from '../Palette.types'; +import { GQLPaletteEntry, GQLToolSection } from '../Palette.types'; +import { ToolListItem } from '../tool-list-item/ToolListItem'; +import { useDiagramPalette } from '../useDiagramPalette'; +import { usePaletteEntryTooltip } from '../usePaletteEntryTooltip'; import { PaletteToolListProps, PaletteToolListStateValue } from './PaletteToolList.types'; import { PaletteToolSectionList } from './PaletteToolSectionList'; -import { usePaletteEntryTooltip } from './usePaletteEntryTooltip'; const useStyle = makeStyles()((theme) => ({ + container: { + display: 'grid', + gridTemplateRows: `repeat(2,min-content) 1fr`, + }, toolListContainer: { display: 'grid', overflowY: 'auto', @@ -70,11 +74,6 @@ export const PaletteToolList = ({ palette, onToolClick }: PaletteToolListProps) setState((prevState) => ({ ...prevState, toolSection })); }; - const handleToolClick = (event: React.MouseEvent, tool: GQLTool) => { - event.stopPropagation(); - onToolClick(tool); - }; - const onBackToMainList = (event: React.MouseEvent) => { event.stopPropagation(); setState((prevState) => ({ ...prevState, toolSection: null })); @@ -85,25 +84,7 @@ export const PaletteToolList = ({ palette, onToolClick }: PaletteToolListProps) const convertPaletteEntry = (paletteEntry: GQLPaletteEntry): JSX.Element | null => { let jsxElement: JSX.Element | null = null; if (isSingleClickOnDiagramElementTool(paletteEntry)) { - jsxElement = ( - - handleToolClick(event, paletteEntry)}> - - - - - - - ); + jsxElement = ; } else if (isToolSection(paletteEntry)) { jsxElement = ( + + + + ) : null; + const containerRef = React.useRef(null); return ( - - {palette.paletteEntries.filter(isToolSection).map((entry) => ( + + {lastUsedTool} + + {palette.paletteEntries.filter(isToolSection).map((entry) => ( + +
+ +
+
+ ))} -
- -
+ + {palette?.paletteEntries.map(convertPaletteEntry)} +
- ))} - - - {palette?.paletteEntries.map(convertPaletteEntry)} - - +
); }; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.tsx index d9309adfb5..c8a7c9d1b9 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.tsx @@ -10,14 +10,13 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { IconOverlay } from '@eclipse-sirius/sirius-components-core'; import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'; import List from '@mui/material/List'; import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import Tooltip from '@mui/material/Tooltip'; import { makeStyles } from 'tss-react/mui'; +import { ToolListItem } from '../tool-list-item/ToolListItem'; import { PaletteToolSectionListProps } from './PaletteToolSectionList.types'; const useStyle = makeStyles()((theme) => ({ @@ -71,15 +70,8 @@ export const PaletteToolSectionList = ({
- {toolSection?.tools.map((tool) => ( - - onToolClick(event, tool)}> - - - - - - + {toolSection.tools.map((tool) => ( + ))} ); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.types.ts index b956b67ea7..81e3f86e4d 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/PaletteToolSectionList.types.ts @@ -13,7 +13,7 @@ import { GQLTool, GQLToolSection } from '../Palette.types'; export interface PaletteToolSectionListProps { - onToolClick: (event: React.MouseEvent, tool: GQLTool) => void; + onToolClick: (tool: GQLTool) => void; onBackToMainList: (event: React.MouseEvent) => void; toolSection: GQLToolSection; tooltipDelay?: number; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/useDiagramPalette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/useDiagramPalette.types.ts index 524011a4ef..5b998841f3 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/useDiagramPalette.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/useDiagramPalette.types.ts @@ -21,6 +21,6 @@ export interface UseDiagramPaletteValue { showDiagramPalette: (x: number, y: number) => void; onDiagramBackgroundClick: (event: React.MouseEvent) => void; onDiagramElementClick: () => void; - getLastToolInvoked: (toolSectionId: string) => GQLTool | null; - setLastToolInvoked: (toolSectionId: string, tool: GQLTool) => void; + getLastToolInvoked: (paletteId: string) => GQLTool | null; + setLastToolInvoked: (paletteId: string, tool: GQLTool) => void; } 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 index abf6aa87e2..5915c9e719 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePalette.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePalette.tsx @@ -46,6 +46,7 @@ import { GQLUpdateCollapsingStateVariables, } from './Palette.types'; +import { useDiagramPalette } from './useDiagramPalette'; import { UsePaletteProps, UsePaletteValue } from './usePalette.types'; const ToolFields = gql` @@ -316,6 +317,8 @@ export const usePalette = ({ showDialog(tool.dialogDescriptionId, targetObjectId, onConfirm); }; + const { setLastToolInvoked } = useDiagramPalette(); + const handleToolClick = (tool: GQLTool) => { switch (tool.id) { case 'edit': @@ -345,6 +348,9 @@ export const usePalette = ({ } break; } + if (palette) { + setLastToolInvoked(palette.id, tool); + } }; return { handleToolClick, palette }; }; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/usePaletteEntryTooltip.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePaletteEntryTooltip.ts similarity index 100% rename from packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/usePaletteEntryTooltip.ts rename to packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePaletteEntryTooltip.ts diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/usePaletteEntryTooltip.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePaletteEntryTooltip.types.ts similarity index 100% rename from packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-list/usePaletteEntryTooltip.types.ts rename to packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/usePaletteEntryTooltip.types.ts