Skip to content

Commit

Permalink
[2371] Improve color management in View
Browse files Browse the repository at this point in the history
Bug: #2371
Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
  • Loading branch information
AxelRICHARD committed Sep 14, 2023
1 parent b03349d commit ba95fc9
Show file tree
Hide file tree
Showing 71 changed files with 1,415 additions and 216 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,11 @@ To illustrate this new feature, we contribute a new tool on the _Papaya Diagram_
- https://github.com/eclipse-sirius/sirius-web/issues/2261[#2261] [diagram] Change the handle used by edges depending on the position of the source and target
- https://github.com/eclipse-sirius/sirius-web/issues/2265[#2265] [diagram] Update the viewport to show the current state of the selection
- https://github.com/eclipse-sirius/sirius-web/issues/2368[#2368] [form] Remove useless reference to the GraphQL version of Google Guava

- https://github.com/eclipse-sirius/sirius-web/issues/2343[#2343] [emf] Add icon for type selection in new object modal.
- https://github.com/eclipse-sirius/sirius-web/issues/2365[#2365] [diagram] Support key down and F2 to enable direct edit on edges on react-flow diagrams.
- https://github.com/eclipse-sirius/sirius-web/issues/2358[#2358] [form] Adds diagnostic messages to the reference widget.
- https://github.com/eclipse-sirius/sirius-web/issues/2371[#2371] [view] Add new default color palettes along with the creation of a view (theme colors, mui colors...).
- https://github.com/eclipse-sirius/sirius-web/issues/2371[#2371] [view] Add new validation rules about colors for View diagrams & forms.

== v2023.8.0

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,13 +132,15 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {

it('display the page of the element selected', () => {
// Creates a second page
cy.getByTestId('New Form Description').click();
cy.getByTestId('New Form Description-more').should('be.enabled').click();
cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
cy.getByTestId('childCreationDescription').click().get('[data-value="Page Description"]').should('exist').click();
cy.getByTestId('create-object').click();
// Adds a widget to the first page
cy.getByTestId('PageDescription').eq(0).dblclick();
cy.getByTestId('GroupDescription').eq(0).click();
cy.getByTestId('GroupDescription-more').eq(0).should('be.enabled').click();
cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
Expand All @@ -150,6 +152,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
cy.getByTestId('create-object').click();
// Adds a widget to the second page
cy.getByTestId('PageDescription').eq(1).dblclick();
cy.getByTestId('GroupDescription').eq(1).click();
cy.getByTestId('GroupDescription-more').eq(1).should('be.enabled').click();
cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click();
cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1);
Expand Down
117 changes: 107 additions & 10 deletions integration-tests/cypress/e2e/project/edit/studio.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ describe('/projects/:projectId/edit - Studio', () => {
cy.get('[data-value="Target Edge End Reconnection Tool"]').should('not.exist');
});

it.only('Check the precondition on tools', () => {
it('Check the precondition on tools', () => {
cy.getByTestId('ViewNewModel').dblclick();
cy.getByTestId('View').dblclick();
cy.get('[data-testid$=" Diagram Description"]').dblclick();
Expand All @@ -127,13 +127,18 @@ describe('/projects/:projectId/edit - Studio', () => {
cy.getByTestId('Name').clear();
cy.getByTestId('Name').type('TestTool');

cy.get('[title="Back to the homepage"]').click();
cy.url().should('eq', Cypress.config().baseUrl + '/projects');
cy.getByTestId('create').click();

cy.url().should('eq', Cypress.config().baseUrl + '/new/project');
cy.getByTestId('name').type('Instance');
cy.getByTestId('create-project').click();
cy.get('[title="Back to the homepage"]')
.click()
.then(() => {
cy.url().should('eq', Cypress.config().baseUrl + '/projects');
});
cy.getByTestId('create')
.click()
.then(() => {
cy.url().should('eq', Cypress.config().baseUrl + '/new/project');
cy.getByTestId('name').type('Instance');
cy.getByTestId('create-project').click();
});

cy.getByTestId('empty').click();
cy.getByTestId('Others...-more').click();
Expand All @@ -152,19 +157,111 @@ describe('/projects/:projectId/edit - Studio', () => {
cy.getByTestId('create-representation').click();
cy.getByTestId('Diagram').should('exist');
cy.getByTestId('Diagram')
.click()
.click('left')
.then(() => {
cy.getByTestId('New Entity1 - Tool').should('exist');
cy.getByTestId('New Entity2 - Tool').should('exist');
cy.getByTestId('TestTool - Tool').should('not.exist');
cy.getByTestId('New Entity1 - Tool').click();
});
cy.getByTestId('Diagram')
.click()
.click('center')
.then(() => {
cy.getByTestId('New Entity1 - Tool').should('exist');
cy.getByTestId('New Entity2 - Tool').should('exist');
cy.getByTestId('TestTool - Tool').should('exist');
});
});

it('Check node style description has default colors', () => {
cy.getByTestId('ViewNewModel').dblclick();
cy.getByTestId('View').dblclick();
cy.get('[data-testid$=" Diagram Description"]').dblclick();
cy.get('[data-testid$=" Diagram Description-more"]').click();
cy.getByTestId('new-object').click();
cy.getByTestId('childCreationDescription').click();
cy.getByTestId('childCreationDescription').get('[data-value="Node Description"]').should('exist').click();
cy.getByTestId('create-object').click();
cy.getByTestId('Node').dblclick();
cy.getByTestId('1').click();
cy.getByTestId('Label Color').findByTestId('reference-value-black').should('exist');
cy.getByTestId('Color').findByTestId('reference-value-white').should('exist');
cy.getByTestId('Border Color').findByTestId('reference-value-black').should('exist');
});

it('Check edge style description has default colors', () => {
cy.getByTestId('ViewNewModel').dblclick();
cy.getByTestId('View').dblclick();
cy.get('[data-testid$=" Diagram Description"]').dblclick();
cy.get('[data-testid$=" Diagram Description-more"]').click();
cy.getByTestId('new-object').click();
cy.getByTestId('childCreationDescription').click();
cy.getByTestId('childCreationDescription').get('[data-value="Edge Description"]').should('exist').click();
cy.getByTestId('create-object').click();
cy.getByTestId('Edge').dblclick();
cy.getByTestId('EdgeStyle').click();

cy.getByTestId('Color').findByTestId('reference-value-black').should('exist');
});

it('Check textfield widget style description has default colors', () => {
cy.getByTestId('ViewNewModel').dblclick();
cy.getByTestId('View-more').click();
cy.getByTestId('new-object').click();
cy.getByTestId('childCreationDescription').click();
cy.getByTestId('childCreationDescription').get('[data-value="Form Description"]').should('exist').click();
cy.getByTestId('create-object').click();
cy.getByTestId('New Form Description').dblclick();
cy.getByTestId('PageDescription').dblclick();
cy.getByTestId('GroupDescription').dblclick();
cy.getByTestId('GroupDescription-more').click();
cy.getByTestId('new-object').click();
cy.getByTestId('childCreationDescription').click();
cy.getByTestId('childCreationDescription')
.get('[data-value="Widgets Textfield Description"]')
.should('exist')
.click();
cy.getByTestId('create-object').click();
cy.getByTestId('TextfieldDescription-more').click();
cy.getByTestId('new-object').click();
cy.getByTestId('childCreationDescription').click();
cy.getByTestId('childCreationDescription')
.get('[data-value="Style Textfield Description Style"]')
.should('exist')
.click();
cy.getByTestId('create-object').click();
cy.getByTestId('TextfieldDescriptionStyle').click();

cy.getByTestId('Background Color').findByTestId('reference-value-transparent').should('exist');
cy.getByTestId('Foreground Color').findByTestId('reference-value-theme.palette.text.primary').should('exist');
});

it('Check default color palettes', () => {
cy.getByTestId('ViewNewModel').dblclick();
cy.getByTestId('View').dblclick();
cy.getByTestId('Theme Colors Palette').dblclick();
cy.getByTestId('theme.palette.primary.main').should('exist');
cy.getByTestId('Special Colors Palette').dblclick();
cy.getByTestId('black').should('exist');
cy.getByTestId('Amber Colors Palette').dblclick();
cy.getByTestId('amber 50').should('exist');
cy.getByTestId('Blue Colors Palette').should('exist');
cy.getByTestId('BlueGrey Colors Palette').should('exist');
cy.getByTestId('Brown Colors Palette').should('exist');
cy.getByTestId('Cyan Colors Palette').should('exist');
cy.getByTestId('DeepOrange Colors Palette').should('exist');
cy.getByTestId('DeepPurple Colors Palette').should('exist');
cy.getByTestId('Green Colors Palette').should('exist');
cy.getByTestId('Grey Colors Palette').should('exist');
cy.getByTestId('Indigo Colors Palette').should('exist');
cy.getByTestId('LightBlue Colors Palette').should('exist');
cy.getByTestId('LightGreen Colors Palette').should('exist');
cy.getByTestId('Lime Colors Palette').should('exist');
cy.getByTestId('Orange Colors Palette').should('exist');
cy.getByTestId('Pink Colors Palette').should('exist');
cy.getByTestId('Purple Colors Palette').should('exist');
cy.getByTestId('Red Colors Palette').should('exist');
cy.getByTestId('Teal Colors Palette').should('exist');
cy.getByTestId('Yellow Colors Palette').should('exist');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/*******************************************************************************
* Copyright (c) 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
* https://www.eclipse.org/legal/epl-2.0/
*
* SPDX-License-Identifier: EPL-2.0
*
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
import {
amber,
blue,
blueGrey,
brown,
common,
cyan,
deepOrange,
deepPurple,
green,
grey,
indigo,
lightBlue,
lightGreen,
lime,
orange,
pink,
purple,
red,
teal,
yellow,
} from '@material-ui/core/colors';
import { Theme } from '@material-ui/core/styles';

const muiColors = {
amber: amber,
blue: blue,
blueGrey: blueGrey,
brown: brown,
common: common,
cyan: cyan,
deepOrange: deepOrange,
deepPurple: deepPurple,
green: green,
grey: grey,
indigo: indigo,
lightBlue: lightBlue,
lightGreen: lightGreen,
lime: lime,
orange: orange,
pink: pink,
purple: purple,
red: red,
teal: teal,
yellow: yellow,
};

export const getCSSColor = (value: string, theme: Theme): string | null => {
let cssColor: string | null = null;
if (value) {
if (value === 'theme.palette.primary.main') {
cssColor = theme.palette.primary.main;
} else if (value === 'theme.palette.primary.light') {
cssColor = theme.palette.primary.light;
} else if (value === 'theme.palette.primary.dark') {
cssColor = theme.palette.primary.dark;
} else if (value === 'theme.palette.secondary.main') {
cssColor = theme.palette.secondary.main;
} else if (value === 'theme.palette.secondary.light') {
cssColor = theme.palette.secondary.light;
} else if (value === 'theme.palette.secondary.dark') {
cssColor = theme.palette.secondary.dark;
} else if (value === 'theme.palette.text.primary') {
cssColor = theme.palette.text.primary;
} else if (value === 'theme.palette.text.disabled') {
cssColor = theme.palette.text.disabled;
} else if (value === 'theme.palette.text.hint') {
cssColor = theme.palette.text.hint;
} else if (value === 'theme.palette.error.main') {
cssColor = theme.palette.error.main;
} else if (value === 'theme.palette.error.light') {
cssColor = theme.palette.error.light;
} else if (value === 'theme.palette.error.dark') {
cssColor = theme.palette.error.dark;
} else {
const colorName: string = value.substring(0, value.indexOf('['));
const colorValue: string = value.substring(value.indexOf('[') + 1, value.length - 1);
if (colorName && colorValue) {
cssColor = muiColors[colorName][colorValue];
}
if (!cssColor) {
cssColor = value;
}
}
}
return cssColor;
};
1 change: 1 addition & 0 deletions packages/core/frontend/sirius-components-core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
export * from './color/getCSSColor';
export * from './contexts/ServerContext';
export * from './contexts/ServerContext.types';
export * from './contexts/ToastContext';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,34 @@
* Obeo - initial API and implementation
*******************************************************************************/

import { ServerContext, ServerContextValue } from '@eclipse-sirius/sirius-components-core';
import { ServerContext, ServerContextValue, getCSSColor } from '@eclipse-sirius/sirius-components-core';
import { Theme, useTheme } from '@material-ui/core/styles';
import { memo, useContext } from 'react';
import { LabelProps } from './Label.types';
import { DiagramDirectEditInput } from './direct-edit/DiagramDirectEditInput';
import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit';

const labelStyle = (style: React.CSSProperties, faded: Boolean, transform: string): React.CSSProperties => {
const labelStyle = (
theme: Theme,
style: React.CSSProperties,
faded: Boolean,
transform: string
): React.CSSProperties => {
return {
...style,
transform,
opacity: faded ? '0.4' : '',
pointerEvents: 'all',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
...style,
color: getCSSColor(String(style.color), theme) || undefined,
};
};

export const Label = memo(({ diagramElementId, label, faded, transform }: LabelProps) => {
const theme: Theme = useTheme();
const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
const { currentlyEditedLabelId, editingKey, setCurrentlyEditedLabelId, resetDirectEdit } = useDiagramDirectEdit();

Expand All @@ -56,7 +64,7 @@ export const Label = memo(({ diagramElementId, label, faded, transform }: LabelP
data-id={label.id}
data-testid={`Label - ${label.text}`}
onDoubleClick={handleDoubleClick}
style={labelStyle(label.style, faded, transform)}
style={labelStyle(theme, label.style, faded, transform)}
className="nopan">
{label.iconURL ? <img src={httpOrigin + label.iconURL} /> : ''}
{label.text}
Expand Down
Loading

0 comments on commit ba95fc9

Please sign in to comment.