From 62137298195364dd16833b61f39a036c74ea942f Mon Sep 17 00:00:00 2001 From: Pierre-Charles David Date: Wed, 22 Nov 2023 10:44:17 +0100 Subject: [PATCH] [2614] Remember the last tool invoked in a tool section Bug: https://github.com/eclipse-sirius/sirius-web/issues/2614 Signed-off-by: Pierre-Charles David --- CHANGELOG.adoc | 1 + .../palette/DiagramPaletteContext.tsx | 28 +++++++++++++++++++ .../palette/DiagramPaletteContext.types.ts | 10 +++++++ .../palette/tool-section/ToolSection.tsx | 9 ++++-- .../renderer/palette/useDiagramPalette.tsx | 4 ++- .../palette/useDiagramPalette.types.ts | 4 +++ 6 files changed, 53 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index b7fc6f6229..f34f1b01cb 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -110,6 +110,7 @@ It uses our algorithm instead of elk.js to perform the arrange-all. - https://github.com/eclipse-sirius/sirius-web/issues/2601[#2601] [emf] Fix an issue in `EditingContextCrossReferenceAdapter` where references to moved objects were lost. - https://github.com/eclipse-sirius/sirius-web/issues/2582[#2582] [diagram] Fix a delay in renderer of palette tools between the one from _getPalette_ backend call and the one declared in frontend. - https://github.com/eclipse-sirius/sirius-web/issues/2615[#2615] [diagram] Fix the `useDropNode` lifecycle. +- https://github.com/eclipse-sirius/sirius-web/issues/2614[#2614] [diagram] Tool sections now correctly remember the last of their tool invoked and default to that. === New Features diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.tsx index c171077522..6ffc909fad 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.tsx @@ -16,7 +16,9 @@ import { DiagramPaletteContextProviderProps, DiagramPaletteContextProviderState, DiagramPaletteContextValue, + ToolSectionWithLastTool, } from './DiagramPaletteContext.types'; +import { GQLTool } from './Palette.types'; const defaultValue: DiagramPaletteContextValue = { x: null, @@ -24,6 +26,8 @@ const defaultValue: DiagramPaletteContextValue = { isOpened: false, hideDiagramPalette: () => {}, showDiagramPalette: () => {}, + getLastToolInvoked: () => null, + setLastToolInvoked: () => {}, }; export const DiagramPaletteContext = React.createContext(defaultValue); @@ -33,6 +37,7 @@ export const DiagramPaletteContextProvider = ({ children }: DiagramPaletteContex x: null, y: null, isOpened: false, + lastToolsInvoked: [], }); const showPalette = useCallback((x: number, y: number) => { @@ -43,6 +48,27 @@ export const DiagramPaletteContextProvider = ({ children }: DiagramPaletteContex setState((prevState) => ({ ...prevState, x: null, y: null, isOpened: false })); }, []); + const getLastToolInvoked = (toolSectionId: string): GQLTool | null => { + return ( + state.lastToolsInvoked.find( + (toolSectionWithDefaultTool) => toolSectionWithDefaultTool.toolSectionId === toolSectionId + )?.lastTool || null + ); + }; + + const setLastToolInvoked = (toolSectionId: string, tool: GQLTool) => { + const lastToolsInvoked: ToolSectionWithLastTool[] = state.lastToolsInvoked; + if (lastToolsInvoked.some((toolSectionWithLastTool) => toolSectionWithLastTool.toolSectionId === toolSectionId)) { + lastToolsInvoked.splice( + lastToolsInvoked.findIndex( + (toolSectionWithLastTool) => toolSectionWithLastTool.toolSectionId === toolSectionId + ), + 1 + ); + } + lastToolsInvoked.push({ toolSectionId: toolSectionId, lastTool: tool }); + }; + return ( {children} diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.types.ts index 40445d641d..02ce1db2e9 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.types.ts @@ -11,12 +11,16 @@ * Obeo - initial API and implementation *******************************************************************************/ +import { GQLTool } from './Palette.types'; + export interface DiagramPaletteContextValue { x: number | null; y: number | null; isOpened: boolean; showDiagramPalette: (x: number, y: number) => void; hideDiagramPalette: () => void; + getLastToolInvoked: (toolSectionId: string) => GQLTool | null; + setLastToolInvoked: (toolSectionId: string, tool: GQLTool) => void; } export interface DiagramPaletteContextProviderProps { @@ -27,4 +31,10 @@ export interface DiagramPaletteContextProviderState { x: number | null; y: number | null; isOpened: boolean; + lastToolsInvoked: ToolSectionWithLastTool[]; +} + +export interface ToolSectionWithLastTool { + toolSectionId: string; + lastTool: GQLTool; } diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/tool-section/ToolSection.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/tool-section/ToolSection.tsx index 4c00fc5f75..31e7997167 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/tool-section/ToolSection.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/tool-section/ToolSection.tsx @@ -18,6 +18,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { useCallback, useRef } from 'react'; import { Tool } from '../../Tool'; import { GQLSingleClickOnDiagramElementTool, GQLTool } from '../Palette.types'; +import { useDiagramPalette } from '../useDiagramPalette'; import { ToolSectionProps } from './ToolSection.types'; const useToolSectionStyles = makeStyles(() => ({ @@ -46,14 +47,16 @@ const isSingleClickOnDiagramElementTool = (tool: GQLTool): tool is GQLSingleClic export const ToolSection = ({ toolSection, onToolClick, toolSectionExpandId, onExpand }: ToolSectionProps) => { const tools = toolSection.tools.filter(isSingleClickOnDiagramElementTool); + const { getLastToolInvoked, setLastToolInvoked } = useDiagramPalette(); const classes = useToolSectionStyles(); const onActiveTool = useCallback( (tool) => { onToolClick(tool); + setLastToolInvoked(toolSection.id, tool); }, - [onToolClick] + [onToolClick, setLastToolInvoked, toolSection.id] ); let caretContent: JSX.Element | undefined; @@ -67,7 +70,9 @@ export const ToolSection = ({ toolSection, onToolClick, toolSectionExpandId, onE /> ); } - const defaultTool: GQLTool | undefined = tools[0]; + + const defaultTool: GQLTool | undefined = getLastToolInvoked(toolSection.id) || tools[0]; + const anchorRef = useRef(null); return ( <> diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.tsx index 4e78ed3de7..a936246be4 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.tsx @@ -25,7 +25,7 @@ const computePalettePosition = (event: MouseEvent | React.MouseEvent, bounds?: D }; export const useDiagramPalette = (): UseDiagramPaletteValue => { - const { x, y, isOpened, hideDiagramPalette, showDiagramPalette } = + const { x, y, isOpened, hideDiagramPalette, showDiagramPalette, getLastToolInvoked, setLastToolInvoked } = useContext(DiagramPaletteContext); const { domNode } = useStoreApi().getState(); const element = domNode?.getBoundingClientRect(); @@ -45,5 +45,7 @@ export const useDiagramPalette = (): UseDiagramPaletteValue => { hideDiagramPalette, showDiagramPalette, onDiagramBackgroundClick, + getLastToolInvoked, + setLastToolInvoked, }; }; diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.types.ts index 89a1c39e37..9584339b53 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.types.ts @@ -11,6 +11,8 @@ * Obeo - initial API and implementation *******************************************************************************/ +import { GQLTool } from './Palette.types'; + export interface UseDiagramPaletteValue { x: number | null; y: number | null; @@ -18,4 +20,6 @@ export interface UseDiagramPaletteValue { hideDiagramPalette: () => void; showDiagramPalette: (x: number, y: number) => void; onDiagramBackgroundClick: (event: React.MouseEvent) => void; + getLastToolInvoked: (toolSectionId: string) => GQLTool | null; + setLastToolInvoked: (toolSectionId: string, tool: GQLTool) => void; }