[1305] Fix update of the default tools of the palette's tool sections

Bug: #1305 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · May 31, 2023 · c30dd77 · c30dd77
1 parent 390180f
commit c30dd77
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 100 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -52,6 +52,7 @@ It will start by improving a bit performances since diagrams were persisted twic
 - https://github.com/eclipse-sirius/sirius-components/issues/1952[#1952] [view] Fix a regression introduced in 2023.4.0 where View-based Forms could no longer be instantiated
 - https://github.com/eclipse-sirius/sirius-components/issues/1968[#1968] [sirius-web] Fix a regression introduced with the feature 1907, where for the papaya studio, colors are only searched in the first _ColorPalette_.
 - https://github.com/eclipse-sirius/sirius-components/issues/1991[#1991] [form] Fix an issue where widgets from different groups share the same ID.
+- https://github.com/eclipse-sirius/sirius-components/issues/1305[#1305] [diagram] Fix an issue where the default tools of the palette's tool sections where not updated.
 
 === New Features
 

diff --git a/integration-tests/cypress/e2e/project/edit/diagram-contextual-palette.cy.js b/integration-tests/cypress/e2e/project/edit/diagram-contextual-palette.cy.js
@@ -40,4 +40,31 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('Diagram').click();
     cy.getByTestId('visibilitySection').should('not.exist');
   });
+
+  it('test default tool is updated', () => {
+    cy.getByTestId('Diagram').click(5, 5);
+    cy.getByTestId('Composite Processor - Tool').should('exist');
+    cy.getByTestId('Data Source - Tool').should('not.exist');
+    cy.getByTestId('expand').click();
+    cy.getByTestId('Composite Processor - Tool').should('exist');
+    cy.getByTestId('Data Source - Tool').should('exist');
+    cy.getByTestId('Data Source - Tool').click();
+    cy.getByTestId('Diagram').within(() => {
+      cy.getByTestId('Image - DataSource2').should('exist');
+    });
+
+    cy.getByTestId('Diagram').click(5, 5);
+    cy.getByTestId('Composite Processor - Tool').should('not.exist');
+    cy.getByTestId('Data Source - Tool').should('exist');
+    cy.getByTestId('expand').click();
+    cy.getByTestId('Composite Processor - Tool').should('exist');
+    cy.getByTestId('Data Source - Tool').should('exist');
+    cy.getByTestId('Composite Processor - Tool').click();
+    cy.getByTestId('Diagram').within(() => {
+      cy.getByTestId('Rectangle - Processor3').should('exist');
+    });
+    cy.getByTestId('Diagram').click(5, 5);
+    cy.getByTestId('Composite Processor - Tool').should('exist');
+    cy.getByTestId('Data Source - Tool').should('not.exist');
+  });
 });
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/palette/ContextualPalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/palette/ContextualPalette.tsx
@@ -15,7 +15,7 @@ import { Toast } from '@eclipse-sirius/sirius-components-core';
 import { makeStyles } from '@material-ui/core/styles';
 import { useMachine } from '@xstate/react';
 import { useCallback, useEffect } from 'react';
-import { EditLabelAction, isWithEditableLabel, SModelElement } from 'sprotty';
+import { EditLabelAction, SModelElement, isWithEditableLabel } from 'sprotty';
 import { GQLDeletionPolicy } from '../representation/DiagramRepresentation.types';
 import { BorderNode, Diagram, Edge, Node, ViewModifier } from '../sprotty/Diagram.types';
 import { HIDE_CONTEXTUAL_TOOLBAR_ACTION } from '../sprotty/DiagramServer';
@@ -41,11 +41,11 @@ import {
 import {
   ContextualPaletteContext,
   ContextualPaletteEvent,
-  contextualPaletteMachine,
   HandleToolSectionsResultEvent,
   HideToastEvent,
   SchemaValue,
   ShowToastEvent,
+  contextualPaletteMachine,
 } from './ContextualPaletteMachine';
 import closeImagePath from './icons/close.svg';
 import connectorImagePath from './icons/connector.svg';
@@ -216,6 +216,7 @@ export const ContextualPalette = ({
   diagramElement,
   diagramServer,
   renameable,
+  defaultTools,
   invokeTool,
   invokeConnectorTool,
   invokeDelete,
@@ -415,7 +416,7 @@ export const ContextualPalette = ({
   const props: ContextualPaletteStyleProps = { toolSectionsCount };
   const classes = useContextualPaletteStyle(props);
 
-  const toolSectionElements: JSX.Element[] = toolSections.map((toolSection) => {
+  const toolSectionElements: JSX.Element[] = toolSections.map((toolSection: GQLToolSection) => {
     const handleToolClick = (tool: GQLTool) => {
       if (tool.id === 'edit') {
         invokeLabelEdit();
@@ -428,13 +429,17 @@ export const ContextualPalette = ({
       } else if (tool.id === 'collapse') {
         updateCollapsingState(GQLCollapsingState.COLLAPSED);
       } else {
-        invokeTool(tool);
+        invokeTool(tool, toolSection);
       }
     };
 
+    const defaultToolId: string | undefined = defaultTools.find(
+      (ts) => ts.toolSectionId === toolSection.id
+    )?.defaultToolId;
+
     return (
       <div className={classes.toolSection} key={diagramElementId + toolSection.id}>
-        <ToolSection toolSection={toolSection} onToolClick={handleToolClick} />
+        <ToolSection toolSection={toolSection} defaultToolId={defaultToolId} onToolClick={handleToolClick} />
       </div>
     );
   });

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/palette/ContextualPalette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/palette/ContextualPalette.types.ts
@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { SModelElement } from 'sprotty';
-import { GQLDeletionPolicy } from '../representation/DiagramRepresentation.types';
+import { GQLDeletionPolicy, ToolSectionWithDefaultTool } from '../representation/DiagramRepresentation.types';
 import { DiagramServer } from '../sprotty/DiagramServer';
 
 export interface ContextualPaletteProps {
@@ -20,7 +20,8 @@ export interface ContextualPaletteProps {
   diagramElement: SModelElement;
   diagramServer: DiagramServer;
   renameable: boolean;
-  invokeTool: (tool: GQLTool) => void;
+  defaultTools: ToolSectionWithDefaultTool[];
+  invokeTool: (tool: GQLTool, toolSection: GQLToolSection) => void;
   invokeConnectorTool: (toolSections: GQLToolSection[]) => void;
   invokeDelete: (deletionPolicy: GQLDeletionPolicy) => void | null;
   invokeClose: () => void;
@@ -80,6 +81,7 @@ export interface GQLTool {
 export interface GQLSingleClickOnDiagramElementTool extends GQLTool {
   appliesToDiagramRoot: boolean;
   selectionDescriptionId: string;
+  targetDescriptions: GQLDiagramElementDescription[];
 }
 
 export interface GQLSingleClickOnTwoDiagramElementsTool extends GQLTool {
@@ -91,6 +93,9 @@ export interface GQLSingleClickOnTwoDiagramElementsCandidate {
   targets: GQLNodeDescription[];
 }
 
+export interface GQLDiagramElementDescription {
+  id: string;
+}
 export interface GQLNodeDescription {
   id: string;
 }

diff --git a/...ges/diagrams/frontend/sirius-components-diagrams/src/palette/tool-section/ToolSection.tsx b/...ges/diagrams/frontend/sirius-components-diagrams/src/palette/tool-section/ToolSection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2022 Obeo.
+ * Copyright (c) 2019, 2023 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,6 +13,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useCallback, useState } from 'react';
+import { GQLTool } from '../ContextualPalette.types';
 import { Tool } from '../tool/Tool';
 import { ToolSectionProps } from './ToolSection.types';
 
@@ -68,7 +69,7 @@ const useToolSectionStyles = makeStyles(() => ({
  *
  * @hmarchadour
  */
-export const ToolSection = ({ toolSection, onToolClick }: ToolSectionProps) => {
+export const ToolSection = ({ toolSection, defaultToolId, onToolClick }: ToolSectionProps) => {
   const { tools } = toolSection;
   const initialState = {
     expanded: false,
@@ -125,10 +126,16 @@ export const ToolSection = ({ toolSection, onToolClick }: ToolSectionProps) => {
       </>
     );
   }
+  let defaultTool: GQLTool;
+  if (defaultToolId && toolSection.tools.some((tool) => tool.id === defaultToolId)) {
+    defaultTool = toolSection.tools.find((tool) => tool.id === defaultToolId);
+  } else {
+    defaultTool = tools[0];
+  }
   return (
     <>
       <div className={classes.toolSection}>
-        <Tool tool={tools[0]} thumbnail onClick={() => onToolClick(tools[0])} />
+        <Tool tool={defaultTool} thumbnail onClick={() => onToolClick(defaultTool)} />
         {caretContent}
       </div>
       {toolChoiceContent}

diff --git a/...iagrams/frontend/sirius-components-diagrams/src/palette/tool-section/ToolSection.types.ts b/...iagrams/frontend/sirius-components-diagrams/src/palette/tool-section/ToolSection.types.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022 Obeo.
+ * Copyright (c) 2022, 2023 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
@@ -14,5 +14,6 @@ import { GQLTool, GQLToolSection } from '../ContextualPalette.types';
 
 export interface ToolSectionProps {
   toolSection: GQLToolSection;
+  defaultToolId?: string;
   onToolClick: (tool: GQLTool) => void;
 }
diff --git a/...diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx b/...diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
@@ -32,6 +32,7 @@ import { ContextualPalette } from '../palette/ContextualPalette';
 import {
   GQLSingleClickOnDiagramElementTool,
   GQLSingleClickOnTwoDiagramElementsTool,
+  GQLTool,
   GQLToolSection,
 } from '../palette/ContextualPalette.types';
 import { BorderNode, Diagram, Edge, Node } from '../sprotty/Diagram.types';
@@ -89,7 +90,6 @@ import {
   GQLUpdateNodePositionVariables,
   Menu,
   Palette,
-  Tool,
 } from './DiagramRepresentation.types';
 import {
   CloseSelectionDialogEvent,
@@ -131,7 +131,12 @@ import {
   updateNodeBoundsOp,
   updateNodePositionOp,
 } from './operations';
-import { atLeastOneSingleClickOnTwoDiagramElementsTool, canInvokeTool } from './toolServices';
+import {
+  atLeastOneSingleClickOnTwoDiagramElementsTool,
+  canInvokeTool,
+  isSingleClickOnDiagramElementTool,
+  isSingleClickOnTwoDiagramElementsTool,
+} from './toolServices';
 
 const useDiagramRepresentationStyle = makeStyles(() => ({
   container: {
@@ -352,7 +357,7 @@ export const DiagramRepresentation = ({
     diagramServer,
     diagram,
     diagramDescription,
-    toolSections,
+    defaultTools,
     contextualPalette,
     contextualMenu,
     activeTool,
@@ -732,7 +737,7 @@ export const DiagramRepresentation = ({
       }
       return cursor;
     };
-    const setActiveTool = (tool: Tool | null) => {
+    const setActiveTool = (tool: GQLTool | null) => {
       const setActiveToolEvent: SetActiveToolEvent = { type: 'SET_ACTIVE_TOOL', activeTool: tool };
       dispatch(setActiveToolEvent);
     };
@@ -778,7 +783,7 @@ export const DiagramRepresentation = ({
         onSelectElement,
         getCursorOn,
         setActiveTool,
-        toolSections,
+        defaultTools,
         setContextualPalette,
         setContextualMenu,
         updateRoutingPointsListener,
@@ -798,7 +803,7 @@ export const DiagramRepresentation = ({
     moveElement,
     resizeElement,
     editLabelMutation,
-    toolSections,
+    defaultTools,
     selection,
     editingContextId,
     representationId,
@@ -1056,8 +1061,8 @@ export const DiagramRepresentation = ({
         deleteElements([element], deletionPolicy);
     }
 
-    const invokeToolFromContextualPalette = (tool) => {
-      if (tool.__typename === 'SingleClickOnTwoDiagramElementsTool') {
+    const invokeToolFromContextualPalette = (tool: GQLTool, toolSection: GQLToolSection) => {
+      if (isSingleClickOnTwoDiagramElementsTool(tool)) {
         const setActiveToolEvent: SetActiveToolEvent = { type: 'SET_ACTIVE_TOOL', activeTool: tool };
         dispatch(setActiveToolEvent);
         const setContextualPaletteEvent: SetContextualPaletteEvent = {
@@ -1072,7 +1077,7 @@ export const DiagramRepresentation = ({
           sourceElement: { element, position: { ...palettePosition } },
         };
         diagramServer.actionDispatcher.dispatch(action);
-      } else if (tool.__typename === 'SingleClickOnDiagramElementTool') {
+      } else if (isSingleClickOnDiagramElementTool(tool)) {
         if (tool.selectionDescriptionId) {
           const showSelectionDialogEvent: ShowSelectionDialogEvent = {
             type: 'SHOW_SELECTION_DIALOG',
@@ -1085,7 +1090,11 @@ export const DiagramRepresentation = ({
           diagramServer.actionDispatcher.dispatch(sourceElementAction);
         }
       }
-      const setDefaultToolEvent: SetDefaultToolEvent = { type: 'SET_DEFAULT_TOOL', defaultTool: tool };
+      const setDefaultToolEvent: SetDefaultToolEvent = {
+        type: 'SET_DEFAULT_TOOL',
+        defaultTool: tool,
+        toolSection: toolSection,
+      };
       dispatch(setDefaultToolEvent);
     };
     const invokeConnectorToolFromContextualPalette = (toolSections: GQLToolSection[]) => {
@@ -1121,6 +1130,7 @@ export const DiagramRepresentation = ({
           diagramElement={element}
           diagramServer={diagramServer}
           renameable={renameable}
+          defaultTools={defaultTools}
           invokeTool={invokeToolFromContextualPalette}
           invokeConnectorTool={invokeConnectorToolFromContextualPalette}
           invokeDelete={invokeDeleteFromContextualPalette}
@@ -1136,7 +1146,7 @@ export const DiagramRepresentation = ({
       left: canvasBounds.x + 'px',
       top: canvasBounds.y + 'px',
     };
-    const invokeToolFromContextualMenu = (tool: Tool) => {
+    const invokeToolFromContextualMenu = (tool: GQLTool) => {
       invokeTool(tool, sourceElement.id, targetElement.id, startPosition, endPosition);
     };
     contextualMenuContent = (

diff --git a/...ams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.types.ts b/...ams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.types.ts
@@ -10,6 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { GQLTool } from '../palette/ContextualPalette.types';
 import { Node } from '../sprotty/Diagram.types';
 
 export type CursorValue = 'pointer' | 'copy' | 'not-allowed';
@@ -71,47 +72,14 @@ export interface Menu {
   canvasBounds: Bounds;
   sourceElement: Node;
   targetElement: Node;
-  tools: Tool[];
+  tools: GQLTool[];
   startPosition: Position | null;
   endPosition: Position | null;
 }
 
-export interface ToolSection {
-  id: string;
-  label: string;
-  imageURL: string;
-  tools: Tool[];
-  defaultTool: Tool | null;
-}
-
-export interface Tool {
-  id: string;
-  label: string;
-  imageURL: string;
-  __typename: string;
-}
-
-export interface SingleClickOnDiagramElementTool extends Tool {
-  appliesToDiagramRoot: boolean;
-  selectionDescriptionId: string;
-  targetDescriptions: DiagramElementDescription[];
-}
-
-export interface SingleClickOnTwoDiagramElementsTool extends Tool {
-  candidates: SingleClickOnTwoDiagramElementsCandidate[];
-}
-
-export interface SingleClickOnTwoDiagramElementsCandidate {
-  sources: NodeDescription[];
-  targets: NodeDescription[];
-}
-
-export interface DiagramElementDescription {
-  id: string;
-}
-
-export interface NodeDescription extends DiagramElementDescription {
-  id: string;
+export interface ToolSectionWithDefaultTool {
+  toolSectionId: string;
+  defaultToolId: string;
 }
 
 export interface GQLViewer {