From a0dd9bd58a46ce2259d36461387fb507e44f171b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20ROU=C3=8BN=C3=89?= Date: Tue, 11 Feb 2025 14:18:14 +0100 Subject: [PATCH] [4522] Restore contribution of custom tools to the diagram palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/4522 Signed-off-by: Florian ROUËNÉ --- CHANGELOG.adoc | 1 + .../e2e/project/diagrams/custom-tool.cy.ts | 55 ++++++++++++++ integration-tests/cypress/usecases/Papaya.ts | 34 +-------- .../DiagramPaletteToolContribution.types.ts | 4 +- .../quick-access-tool/AdjustSizeTool.tsx | 2 +- .../quick-access-tool/FadeElementTool.tsx | 4 +- .../PaletteQuickAccessToolBar.tsx | 35 ++++----- .../quick-access-tool/PinUnPinTool.tsx | 4 +- .../ResetEditedEdgePathTool.tsx | 2 +- .../src/PapayaExtensionRegistry.tsx | 11 ++- ...PapayaComponentDiagramToolContribution.tsx | 75 +++++++++++++++++++ ...yaComponentLabelDetailToolContribution.tsx | 12 ++- 12 files changed, 177 insertions(+), 62 deletions(-) create mode 100644 integration-tests/cypress/e2e/project/diagrams/custom-tool.cy.ts create mode 100644 packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentDiagramToolContribution.tsx diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index d56b5fbc7a..4a6dd8166f 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -97,6 +97,7 @@ Now they are executed for some data if the data was coming from a studio too. - https://github.com/eclipse-sirius/sirius-web/issues/4557[#4557] [sirius-web] Fix an issue where targetObjectURI was not set in manifest.json during the download of a project - https://github.com/eclipse-sirius/sirius-web/issues/4547[#4547] [vs-code] Adapt the VSCode extension to the use of SemanticData#id as editingContextId - https://github.com/eclipse-sirius/sirius-web/issues/4561[#4561] [sirius-web] Display boolean values properly in the query view +- https://github.com/eclipse-sirius/sirius-web/issues/4522[#4522] [diagram] Fix an issue where custom tools were no longer contributed to the diagram palette === New Features diff --git a/integration-tests/cypress/e2e/project/diagrams/custom-tool.cy.ts b/integration-tests/cypress/e2e/project/diagrams/custom-tool.cy.ts new file mode 100644 index 0000000000..0e99148bf4 --- /dev/null +++ b/integration-tests/cypress/e2e/project/diagrams/custom-tool.cy.ts @@ -0,0 +1,55 @@ +/******************************************************************************* + * Copyright (c) 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 + * https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Obeo - initial API and implementation + *******************************************************************************/ +import { Explorer } from '../../../workbench/Explorer'; +import { Diagram } from '../../../workbench/Diagram'; +import { Papaya } from '../../../usecases/Papaya'; +import { Project } from '../../../pages/Project'; + +describe('Custom tools', () => { + context('Given a papaya blank project', () => { + let projectId: string = ''; + beforeEach(() => { + new Papaya().createPapayaBlankProject().then((createdProjectData) => { + projectId = createdProjectData.projectId; + const project = new Project(); + project.visit(projectId); + const explorer = new Explorer(); + explorer.expandWithDoubleClick('Papaya'); + explorer.expandWithDoubleClick('Project Project'); + explorer.expandWithDoubleClick('Component Component'); + explorer.createRepresentation('Component Component', 'Component Diagram', 'diagram'); + }); + }); + + afterEach(() => cy.deleteProject(projectId)); + + it('Check diagram custom tool exist', () => { + const diagram = new Diagram(); + diagram.getDiagram('diagram').should('exist'); + cy.getByTestId('rf__wrapper').should('exist').rightclick(100, 100).rightclick(100, 100); + diagram.getPalette().should('exist'); + cy.getByTestId('coordinates-tool').should('exist'); + }); + + it('Check diagram element custom tool exist', () => { + const diagram = new Diagram(); + diagram.getDiagram('diagram').should('exist'); + cy.getByTestId('rf__wrapper').should('exist').rightclick(100, 100).rightclick(100, 100); + diagram.getPalette().should('exist'); + cy.getByTestId('tool-New component').should('exist').click(); + diagram.fitToScreen(); + diagram.getNodes('diagram', 'Component').should('exist').rightclick(); + cy.getByTestId('label-detail').should('exist'); + }); + }); +}); diff --git a/integration-tests/cypress/usecases/Papaya.ts b/integration-tests/cypress/usecases/Papaya.ts index a49cf08655..be7435a35d 100644 --- a/integration-tests/cypress/usecases/Papaya.ts +++ b/integration-tests/cypress/usecases/Papaya.ts @@ -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 @@ -10,47 +10,21 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { Project } from '../pages/Project'; -import { isCreateProjectSuccessPayload } from '../support/server/createProjectCommand'; import { isCreateProjectFromTemplateSuccessPayload } from '../support/server/createProjectFromTemplateCommand'; -import { Explorer } from '../workbench/Explorer'; -import { Workbench } from '../workbench/Workbench'; import { CreatedProjectData } from './Papaya.types'; export class Papaya { static readonly PAPAYA_NATURE = 'siriusComponents://nature?kind=papaya'; - public createPapayaStudioProject(): Cypress.Chainable { - return cy.createProjectFromTemplate('papaya-studio-template').then((res) => { + public createPapayaBlankProject(): Cypress.Chainable { + return cy.createProjectFromTemplate('papaya-empty').then((res) => { const payload = res.body.data.createProjectFromTemplate; if (isCreateProjectFromTemplateSuccessPayload(payload)) { const projectId = payload.project.id; const data: CreatedProjectData = { projectId }; return cy.wrap(data); } else { - throw new Error(`The project papaya studio has not been created`); - } - }); - } - - public createPapayaInstanceProject(name: string): Cypress.Chainable { - return cy.createProject(name, [Papaya.PAPAYA_NATURE]).then((res) => { - const payload = res.body.data.createProject; - if (isCreateProjectSuccessPayload(payload)) { - const projectId = payload.project.id; - - new Project().visit(projectId); - - const workbench = new Workbench(); - workbench.performAction('Others...'); - - const explorer = new Explorer(); - explorer.createRootObject('Others...', 'papaya_core', 'Root'); - - const data: CreatedProjectData = { projectId }; - return cy.wrap(data); - } else { - throw new Error(`The project "${name}" has not been created`); + throw new Error(`The project papaya blank has not been created`); } }); } diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolContribution.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolContribution.types.ts index 2a8a42f7c2..4627cfa351 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolContribution.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/extensions/DiagramPaletteToolContribution.types.ts @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright (c) 2023, 2024 Obeo. + * Copyright (c) 2023, 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 @@ -15,7 +15,7 @@ import { Edge, Node } from '@xyflow/react'; import { EdgeData, NodeData } from '../../DiagramRenderer.types'; export interface DiagramPaletteToolContributionProps { - canHandle: (element: Node | Edge) => boolean; + canHandle: (element: Node | Edge | null) => boolean; component: React.ComponentType; } diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/AdjustSizeTool.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/AdjustSizeTool.tsx index 12226c9da5..6b862da3db 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/AdjustSizeTool.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/AdjustSizeTool.tsx @@ -38,7 +38,7 @@ export const AdjustSizeTool = ({ diagramElementId }: AdjustSizeToolProps) => { aria-label="Adjust element" onClick={() => adjustSize(diagramElementId)} data-testid="adjust-element"> - + ); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/FadeElementTool.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/FadeElementTool.tsx index c7dbb4d097..ce7a44212a 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/FadeElementTool.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/FadeElementTool.tsx @@ -39,7 +39,7 @@ export const FadeElementTool = ({ diagramElementId, isFaded }: FadeElementToolPr aria-label="Unfade element" onClick={() => fadeDiagramElements([diagramElementId], false)} data-testid="Fade-element"> - + ); @@ -52,7 +52,7 @@ export const FadeElementTool = ({ diagramElementId, isFaded }: FadeElementToolPr aria-label="Fade element" onClick={() => fadeDiagramElements([diagramElementId], true)} data-testid="Fade-element"> - + ); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PaletteQuickAccessToolBar.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PaletteQuickAccessToolBar.tsx index 42edf623bf..24bc1b6209 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PaletteQuickAccessToolBar.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PaletteQuickAccessToolBar.tsx @@ -26,6 +26,7 @@ import { PaletteQuickAccessToolBarProps } from './PaletteQuickAccessToolBar.type import { PinUnPinTool } from './PinUnPinTool'; import { ResetEditedEdgePathTool } from './ResetEditedEdgePathTool'; import { Tool } from './Tool'; + const isPinnable = (diagramElement: Node | Edge): diagramElement is Node => { return !!diagramElement.data && 'pinned' in diagramElement.data; }; @@ -94,25 +95,25 @@ export const PaletteQuickAccessToolBar = ({ quickAccessToolComponents.push( ); + } - const paletteToolData: DataExtension = useData( - diagramPaletteToolExtensionPoint - ); + const paletteToolData: DataExtension = useData( + diagramPaletteToolExtensionPoint + ); - paletteToolData.data - .filter((data) => data.canHandle(diagramElement)) - .map((data) => data.component) - .forEach((PaletteToolComponent, index) => - quickAccessToolComponents.push( - - ) - ); - } + paletteToolData.data + .filter((data) => data.canHandle(diagramElement ?? null)) + .map((data) => data.component) + .forEach((PaletteToolComponent, index) => + quickAccessToolComponents.push( + + ) + ); if (quickAccessToolComponents.length > 0) { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PinUnPinTool.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PinUnPinTool.tsx index 4fdb8067d4..ac533ab489 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PinUnPinTool.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/PinUnPinTool.tsx @@ -40,7 +40,7 @@ export const PinUnPinTool = ({ diagramElementId, isPined }: PinUnPinToolProps) = aria-label="Unpin element" onClick={() => pinDiagramElements([diagramElementId], false)} data-testid="Unpin-element"> - + ); @@ -53,7 +53,7 @@ export const PinUnPinTool = ({ diagramElementId, isPined }: PinUnPinToolProps) = aria-label="Pin element" onClick={() => pinDiagramElements([diagramElementId], true)} data-testid="Pin-element"> - + ); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/ResetEditedEdgePathTool.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/ResetEditedEdgePathTool.tsx index 516604771b..034688580a 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/ResetEditedEdgePathTool.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/quick-access-tool/ResetEditedEdgePathTool.tsx @@ -38,7 +38,7 @@ export const ResetEditedEdgePathTool = ({ diagramElementId }: ResetEditedEdgePat aria-label="Reset path" onClick={() => removeEdgeLayoutData(diagramElementId)} data-testid="Reset-path"> - + ); diff --git a/packages/sirius-web/frontend/sirius-web-papaya/src/PapayaExtensionRegistry.tsx b/packages/sirius-web/frontend/sirius-web-papaya/src/PapayaExtensionRegistry.tsx index dd7610d5e3..1f5b3a4ebe 100644 --- a/packages/sirius-web/frontend/sirius-web-papaya/src/PapayaExtensionRegistry.tsx +++ b/packages/sirius-web/frontend/sirius-web-papaya/src/PapayaExtensionRegistry.tsx @@ -29,6 +29,7 @@ import Typography from '@mui/material/Typography'; import { Edge, Node, ReactFlowProps } from '@xyflow/react'; import { PapayaDiagramInformationPanel } from './diagrams/PapayaDiagramInformationPanel'; import { PapayaDiagramLegendPanel } from './diagrams/PapayaDiagramLegendPanel'; +import { PapayaComponentDiagramToolContribution } from './tools/PapayaComponentDiagramToolContribution'; import { PapayaComponentLabelDetailToolContribution } from './tools/PapayaComponentLabelDetailToolContribution'; const papayaExtensionRegistry = new ExtensionRegistry(); @@ -82,13 +83,17 @@ const papayaDiagramPanelExtension: DataExtension papayaExtensionRegistry.putData(diagramRendererReactFlowPropsCustomizerExtensionPoint, papayaDiagramPanelExtension); const diagramPaletteToolContributions: DiagramPaletteToolContributionProps[] = [ { - canHandle: (diagamElement: Node | Edge) => { - return diagamElement.data - ? diagamElement.data.targetObjectKind.startsWith('siriusComponents://semantic?domain=papaya&entity=Component') + canHandle: (diagramElement: Node | Edge | null) => { + return diagramElement?.data + ? diagramElement.data.targetObjectKind.startsWith('siriusComponents://semantic?domain=papaya&entity=Component') : false; }, component: PapayaComponentLabelDetailToolContribution, }, + { + canHandle: (diagramElement: Node | Edge | null) => diagramElement === null, + component: PapayaComponentDiagramToolContribution, + }, ]; papayaExtensionRegistry.putData(diagramPaletteToolExtensionPoint, { identifier: `papaya_${diagramPaletteToolExtensionPoint.identifier}`, diff --git a/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentDiagramToolContribution.tsx b/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentDiagramToolContribution.tsx new file mode 100644 index 0000000000..31867b6567 --- /dev/null +++ b/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentDiagramToolContribution.tsx @@ -0,0 +1,75 @@ +/******************************************************************************* + * Copyright (c) 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 + * https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Obeo - initial API and implementation + *******************************************************************************/ +import { useCurrentProject } from '@eclipse-sirius/sirius-web-application'; +import RadarIcon from '@mui/icons-material/Radar'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import IconButton from '@mui/material/IconButton'; +import { Theme } from '@mui/material/styles'; +import { Fragment, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; + +const useToolStyle = makeStyles()((theme: Theme) => ({ + tool: { + minWidth: theme.spacing(3), + minHeight: theme.spacing(3), + color: theme.palette.text.primary, + padding: 0, + }, +})); + +type Modal = 'dialog'; +export const PapayaComponentDiagramToolContribution = ({ x, y }) => { + const { project } = useCurrentProject(); + const [modal, setModal] = useState(null); + const { classes } = useToolStyle(); + + const onClose = () => { + setModal(null); + }; + + let modalElement: JSX.Element | null = null; + if (modal === 'dialog') { + modalElement = ( + <> + + + + x: {x}, y:{y} + + + + + ); + } + + if (project.natures.filter((nature) => nature.name === 'siriusComponents://nature?kind=papaya').length > 0) { + return ( + + setModal('dialog')} + data-testid="coordinates-tool"> + + + {modalElement} + + ); + } + return null; +}; diff --git a/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentLabelDetailToolContribution.tsx b/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentLabelDetailToolContribution.tsx index de3df7358f..c633e91225 100644 --- a/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentLabelDetailToolContribution.tsx +++ b/packages/sirius-web/frontend/sirius-web-papaya/src/tools/PapayaComponentLabelDetailToolContribution.tsx @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright (c) 2023, 2024 Obeo. + * Copyright (c) 2023, 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 @@ -16,13 +16,17 @@ import Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import IconButton from '@mui/material/IconButton'; +import { Theme } from '@mui/material/styles'; import { Node, useNodes } from '@xyflow/react'; import { Fragment, useState } from 'react'; import { makeStyles } from 'tss-react/mui'; -const useToolStyle = makeStyles()(() => ({ +const useToolStyle = makeStyles()((theme: Theme) => ({ tool: { - width: '36px', + minWidth: theme.spacing(3), + minHeight: theme.spacing(3), + color: theme.palette.text.primary, + padding: 0, }, })); @@ -66,7 +70,7 @@ export const PapayaComponentLabelDetailToolContribution = ({ diagramElementId }: title="Label detail" onClick={() => setModal('dialog')} data-testid="label-detail"> - + {modalElement}