From ae5ae428b07a679b03ff0802c833b0658caec30f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20ROU=C3=8BN=C3=89?= Date: Tue, 21 May 2024 15:41:25 +0200 Subject: [PATCH] [3480] Fix an error that prevents border color to be properly applied MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/3480 Signed-off-by: Florian ROUËNÉ --- CHANGELOG.adoc | 1 + .../e2e/project/diagrams/node-style.cy.ts | 82 +++++++++++++++++++ .../src/renderer/node/FreeFormNode.tsx | 5 +- 3 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 integration-tests/cypress/e2e/project/diagrams/node-style.cy.ts diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 3c0ed4732e..8eb7a52afb 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -33,6 +33,7 @@ - https://github.com/eclipse-sirius/sirius-web/issues/3517[#3517] [diagram] Prevent edge path for rotatable border node to be inconsistent - https://github.com/eclipse-sirius/sirius-web/issues/2908[#2908] [diagram] Homogenize delete icon - https://github.com/eclipse-sirius/sirius-web/issues/3485[#3485] [diagram] Add a validation error message when background value is missing +- https://github.com/eclipse-sirius/sirius-web/issues/3480[#3480] [diagram] Fix an error that prevents border color to be properly applied === New Features diff --git a/integration-tests/cypress/e2e/project/diagrams/node-style.cy.ts b/integration-tests/cypress/e2e/project/diagrams/node-style.cy.ts new file mode 100644 index 0000000000..875ef1a1e4 --- /dev/null +++ b/integration-tests/cypress/e2e/project/diagrams/node-style.cy.ts @@ -0,0 +1,82 @@ +/******************************************************************************* + * 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 { Project } from '../../../pages/Project'; +import { Studio } from '../../../usecases/Studio'; +import { Explorer } from '../../../workbench/Explorer'; +import { Details } from '../../../workbench/Details'; + +describe('Diagram - node style', () => { + context('Given a studio template', () => { + let studioProjectId: string = ''; + let domainName: string = ''; + + before(() => + new Studio().createStudioProject().then((createdProjectData) => { + studioProjectId = createdProjectData.projectId; + const project = new Project(); + project.visit(createdProjectData.projectId); + project.disableDeletionConfirmationDialog(); + const explorer = new Explorer(); + explorer.expand('DomainNewModel'); + cy.get('[title="domain::Domain"]').then(($div) => { + domainName = $div.data().testid; + const details = new Details(); + explorer.expand('ViewNewModel'); + explorer.expand('View'); + explorer.expand(`${domainName} Diagram Description`); + explorer.expand('Entity1 Node'); + explorer.select('RectangularNodeStyleDescription'); + details.openReferenceWidgetOptions('Border Color'); + details.selectReferenceWidgetOption('orange 500'); + explorer.collapse('Entity1 Node'); + explorer.expand('Entity2 Node'); + explorer.delete('RectangularNodeStyleDescription'); + explorer.createObject('Entity2 Node', 'Style Image'); + explorer.select('ImageNodeStyleDescription'); + details.selectValue('Shape', 'fan'); + details.openReferenceWidgetOptions('Border Color'); + details.selectReferenceWidgetOption('cyan 500'); + }); + }) + ); + + after(() => cy.deleteProject(studioProjectId)); + context('When we create a new instance project', () => { + let instanceProjectId: string = ''; + + beforeEach(() => { + const studio = new Studio(); + studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => { + instanceProjectId = res.projectId; + new Explorer().createRepresentation('Root', `${domainName} Diagram Description`, 'diagram'); + }); + }); + + afterEach(() => cy.deleteProject(instanceProjectId)); + + it('Then check color border is properly applied', () => { + const explorer = new Explorer(); + const details = new Details(); + + explorer.createObject('Root', 'Entity1s Entity1'); + details.getTextField('Name').type('Entity1{Enter}'); + explorer.createObject('Root', 'Entity2s Entity2'); + details.getTextField('Name').should('have.value', ''); + details.getTextField('Name').type('Entity2{Enter}'); + explorer.select('diagram'); + cy.getByTestId('FreeForm - Entity1').invoke('css', 'border-color').should('eq', 'rgb(255, 152, 0)'); + cy.getByTestId('FreeForm - Entity2').invoke('css', 'border-color').should('eq', 'rgb(0, 188, 212)'); + }); + }); + }); +}); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx index 3b6b16a420..8e7673a623 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx @@ -40,6 +40,7 @@ const freeFormNodeStyle = ( height: '100%', opacity: faded ? '0.4' : '', ...style, + borderColor: getCSSColor(String(style.borderColor), theme), }; if (selected || hovered) { freeFormNodeStyle.outline = `${theme.palette.selected} solid 1px`; @@ -47,7 +48,7 @@ const freeFormNodeStyle = ( return freeFormNodeStyle; }; -const imageNodeStyle = ( +const backgroundNodeStyle = ( theme: Theme, style: React.CSSProperties, rotation: string | undefined, @@ -105,7 +106,7 @@ export const FreeFormNode = memo(({ data, id, selected, dragging }: NodeProps imageNodeStyle(theme, data.style, rotation, imageURL), + () => backgroundNodeStyle(theme, data.style, rotation, imageURL), [data.style, rotation, imageURL] );