[2614] Remember the last tool invoked in a tool section

Bug: #2614
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

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
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPaletteContext.tsx

@@ -16,14 +16,18 @@ import {
   DiagramPaletteContextProviderProps,
   DiagramPaletteContextProviderState,
   DiagramPaletteContextValue,
+  ToolSectionWithLastTool,
 } from './DiagramPaletteContext.types';
+import { GQLTool } from './Palette.types';
 
 const defaultValue: DiagramPaletteContextValue = {
   x: null,
   y: null,
   isOpened: false,
   hideDiagramPalette: () => {},
   showDiagramPalette: () => {},
+  getLastToolInvoked: () => null,
+  setLastToolInvoked: () => {},
 };
 
 export const DiagramPaletteContext = React.createContext<DiagramPaletteContextValue>(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 (
     <DiagramPaletteContext.Provider
       value={{
@@ -51,6 +77,8 @@ export const DiagramPaletteContextProvider = ({ children }: DiagramPaletteContex
         isOpened: state.isOpened,
         showDiagramPalette: showPalette,
         hideDiagramPalette: hidePalette,
+        getLastToolInvoked,
+        setLastToolInvoked,
       }}>
       {children}
     </DiagramPaletteContext.Provider>

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;
 }

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<HTMLDivElement | null>(null);
   return (
     <>

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<DiagramPaletteContextValue>(DiagramPaletteContext);
   const { domNode } = useStoreApi().getState();
   const element = domNode?.getBoundingClientRect();
@@ -45,5 +45,7 @@ export const useDiagramPalette = (): UseDiagramPaletteValue => {
     hideDiagramPalette,
     showDiagramPalette,
     onDiagramBackgroundClick,
+    getLastToolInvoked,
+    setLastToolInvoked,
   };
 };

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useDiagramPalette.types.ts

@@ -11,11 +11,15 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { GQLTool } from './Palette.types';
+
 export interface UseDiagramPaletteValue {
   x: number | null;
   y: number | null;
   isOpened: boolean;
   hideDiagramPalette: () => void;
   showDiagramPalette: (x: number, y: number) => void;
   onDiagramBackgroundClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
+  getLastToolInvoked: (toolSectionId: string) => GQLTool | null;
+  setLastToolInvoked: (toolSectionId: string, tool: GQLTool) => void;
 }