[3561] Add support for background and border on diagram labels

Bug: #3561 Signed-off-by: Florian ROUËNÉ <[email protected]>
eclipse-sirius · Jun 18, 2024 · c0b3410 · c0b3410
1 parent 3e146f4
commit c0b3410
Show file tree

Hide file tree

Showing 83 changed files with 3,326 additions and 835 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -98,6 +98,7 @@ image:doc/screenshots/insideLabelPositions.png[Inside label positions, 70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/3623[#3623] [form] Remove unused form payload
 - https://github.com/eclipse-sirius/sirius-web/issues/3627[#3627] [form] Remove unused mutation in form
 - https://github.com/eclipse-sirius/sirius-web/issues/3606[#3606] [test] Improve error handling in ExecuteEditingContextFunctionRunner and ExecuteEditingContextFunctionEventHandler
+- https://github.com/eclipse-sirius/sirius-web/issues/3561[#3561] [diagram] Add support for background and border on diagram labels
 
 == v2024.5.0
 

diff --git a/integration-tests/cypress/e2e/project/diagrams/diagram-label.cy.ts b/integration-tests/cypress/e2e/project/diagrams/diagram-label.cy.ts
@@ -552,4 +552,61 @@ describe('Diagram - inside outside labels', () => {
       });
     });
   });
+
+  context('Given a view with inside label on rectangular node with background on label style', () => {
+    let studioProjectId: string = '';
+    let domainName: string = '';
+
+    before(() => {
+      cy.createProjectFromTemplate('studio-template').then((res) => {
+        const payload = res.body.data.createProjectFromTemplate;
+        if (isCreateProjectFromTemplateSuccessPayload(payload)) {
+          const projectId = payload.project.id;
+          studioProjectId = projectId;
+
+          const project = new Project();
+          project.visit(projectId);
+          project.disableDeletionConfirmationDialog();
+
+          const explorer = new Explorer();
+          const details = new Details();
+          explorer.getTreeItemByLabel('DomainNewModel').dblclick();
+          cy.get('[title="domain::Domain"]').then(($div) => {
+            domainName = $div.data().testid;
+            explorer.expand('ViewNewModel');
+            explorer.expand('View');
+            explorer.expand(`${domainName} Diagram Description`);
+            explorer.expand('Entity1 Node');
+            explorer.expand('aql:self.name');
+            explorer.select('InsideLabelStyle');
+            details.openReferenceWidgetOptions('Background');
+            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 the label background matches the selected color', () => {
+        const explorer = new Explorer();
+        const details = new Details();
+        explorer.createObject('Root', 'Entity1s Entity1');
+        details.getTextField('Name').type('Entity 1{enter}');
+        cy.getByTestId('Label content - Entity 1').invoke('css', 'background').should('contain', 'rgb(0, 188, 212)');
+      });
+    });
+  });
 });
diff --git a/...sirius/components/compatibility/emf/compatibility/diagrams/EdgeMappingConverterTests.java b/...sirius/components/compatibility/emf/compatibility/diagrams/EdgeMappingConverterTests.java
@@ -31,6 +31,7 @@
 import org.eclipse.sirius.components.diagrams.InsideLabelLocation;
 import org.eclipse.sirius.components.diagrams.LabelOverflowStrategy;
 import org.eclipse.sirius.components.diagrams.LabelTextAlign;
+import org.eclipse.sirius.components.diagrams.LineStyle;
 import org.eclipse.sirius.components.diagrams.Size;
 import org.eclipse.sirius.components.diagrams.description.EdgeDescription;
 import org.eclipse.sirius.components.diagrams.description.InsideLabelDescription;
@@ -101,6 +102,11 @@ private NodeDescription createNodeDescription(String id) {
                 .underlineProvider(variableManager -> false)
                 .strikeThroughProvider(variableManager -> false)
                 .iconURLProvider(variableManager -> List.of())
+                .backgroundProvider(variableManager -> "transparent")
+                .borderColorProvider(variableManager -> "black")
+                .borderRadiusProvider(variableManager -> 0)
+                .borderSizeProvider(variableManager -> 0)
+                .borderStyleProvider(variableManager -> LineStyle.Solid)
                 .build();
 
         InsideLabelDescription insideLabelDescription = InsideLabelDescription.newInsideLabelDescription(id)

diff --git a/...clipse/sirius/components/compatibility/emf/compatibility/diagrams/TestDiagramBuilder.java b/...clipse/sirius/components/compatibility/emf/compatibility/diagrams/TestDiagramBuilder.java
@@ -100,6 +100,10 @@ public Node getNode(String id, boolean withLabel) {
                     .color("#000000")
                     .fontSize(16)
                     .iconURL(List.of())
+                    .background("transparent")
+                    .borderColor("black")
+                    .borderSize(0)
+                    .borderStyle(LineStyle.Solid)
                     .build();
             InsideLabel insideLabel = InsideLabel.newLabel(UUID.randomUUID().toString())
                     .text("text")

diff --git a/...omponents/compatibility/emf/compatibility/operations/CreateViewOperationHandlerTests.java b/...omponents/compatibility/emf/compatibility/operations/CreateViewOperationHandlerTests.java
@@ -203,6 +203,11 @@ private NodeDescription getNodeDescription(String nodeDescriptionId) {
                 .underlineProvider(variableManager -> false)
                 .strikeThroughProvider(variableManager -> false)
                 .iconURLProvider(variableManager -> List.of())
+                .backgroundProvider(variableManager -> "transparent")
+                .borderColorProvider(variableManager -> "black")
+                .borderRadiusProvider(variableManager -> 0)
+                .borderSizeProvider(variableManager -> 0)
+                .borderStyleProvider(variableManager -> LineStyle.Solid)
                 .build();
 
         InsideLabelDescription insideLabelDescription = InsideLabelDescription.newInsideLabelDescription("insideLabelDescriptionId")

diff --git a/...omponents/compatibility/emf/compatibility/operations/DeleteViewOperationHandlerTests.java b/...omponents/compatibility/emf/compatibility/operations/DeleteViewOperationHandlerTests.java
@@ -102,7 +102,16 @@ public void initialize() {
                 .insideLabel(InsideLabel.newLabel(UUID.randomUUID().toString())
                         .text(OperationTestContext.ROOT_PACKAGE_NAME)
                         .insideLabelLocation(InsideLabelLocation.TOP_CENTER)
-                        .style(LabelStyle.newLabelStyle().color("").fontSize(0).iconURL(List.of()).build())
+                        .style(LabelStyle
+                                .newLabelStyle()
+                                .color("")
+                                .fontSize(0)
+                                .iconURL(List.of())
+                                .background("transparent")
+                                .borderColor("black")
+                                .borderSize(0)
+                                .borderStyle(LineStyle.Solid)
+                                .build())
                         .isHeader(false)
                         .displayHeaderSeparator(false)
                         .overflowStrategy(LabelOverflowStrategy.NONE)
@@ -180,6 +189,11 @@ private NodeDescription getNodeDescription(String nodeDescriptionId) {
                 .underlineProvider(variableManager -> false)
                 .strikeThroughProvider(variableManager -> false)
                 .iconURLProvider(variableManager -> List.of())
+                .backgroundProvider(variableManager -> "transparent")
+                .borderColorProvider(variableManager -> "black")
+                .borderRadiusProvider(variableManager -> 0)
+                .borderSizeProvider(variableManager -> 0)
+                .borderStyleProvider(variableManager -> LineStyle.Solid)
                 .build();
 
         InsideLabelDescription insideLabelDescription = InsideLabelDescription.newInsideLabelDescription("insideLabelDescriptionId")

diff --git a/.../org/eclipse/sirius/components/compatibility/diagrams/LabelStyleDescriptionConverter.java b/.../org/eclipse/sirius/components/compatibility/diagrams/LabelStyleDescriptionConverter.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2023 Obeo.
+ * Copyright (c) 2019, 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
@@ -17,6 +17,7 @@
 import java.util.function.Function;
 
 import org.eclipse.sirius.components.core.api.IObjectService;
+import org.eclipse.sirius.components.diagrams.LineStyle;
 import org.eclipse.sirius.components.diagrams.description.LabelStyleDescription;
 import org.eclipse.sirius.components.interpreter.AQLInterpreter;
 import org.eclipse.sirius.components.representations.VariableManager;
@@ -29,6 +30,8 @@
  */
 public class LabelStyleDescriptionConverter {
 
+    private static final String DEFAULT_COLOR = "transparent";
+
     private final AQLInterpreter interpreter;
 
     private final IObjectService objectService;
@@ -67,11 +70,8 @@ public LabelStyleDescription convert(org.eclipse.sirius.viewpoint.description.st
             return 16;
         };
 
-        Function<VariableManager, String> colorProvider = variableManager -> {
-            return new ColorDescriptionConverter(this.interpreter, variableManager.getVariables()).convert(labelStyleDescription.getLabelColor());
-        };
+        Function<VariableManager, String> colorProvider = variableManager -> new ColorDescriptionConverter(this.interpreter, variableManager.getVariables()).convert(labelStyleDescription.getLabelColor());
 
-        // @formatter:off
         return LabelStyleDescription.newLabelStyleDescription()
                 .colorProvider(colorProvider)
                 .fontSizeProvider(fontSizeProvider)
@@ -80,7 +80,11 @@ public LabelStyleDescription convert(org.eclipse.sirius.viewpoint.description.st
                 .underlineProvider(variableManager -> fontFormats.contains(FontFormat.UNDERLINE_LITERAL))
                 .strikeThroughProvider(variableManager -> fontFormats.contains(FontFormat.STRIKE_THROUGH_LITERAL))
                 .iconURLProvider(iconURLProvider)
+                .backgroundProvider(variableManager -> DEFAULT_COLOR)
+                .borderColorProvider(variableManager -> DEFAULT_COLOR)
+                .borderRadiusProvider(variableManager -> 0)
+                .borderSizeProvider(variableManager -> 0)
+                .borderStyleProvider(variableManager -> LineStyle.Solid)
                 .build();
-        // @formatter:on
     }
 }
diff --git a/...ckend/sirius-components-collaborative-diagrams/src/main/resources/schema/diagram.graphqls b/...ckend/sirius-components-collaborative-diagrams/src/main/resources/schema/diagram.graphqls
@@ -163,6 +163,11 @@ type LabelStyle {
   italic: Boolean!
   strikeThrough: Boolean!
   underline: Boolean!
+  borderColor: String!
+  borderRadius: Int!
+  borderSize: Int!
+  borderStyle: LineStyle!
+  background: String!
 }
 
 union INodeStyle = ImageNodeStyle | IconLabelNodeStyle | RectangularNodeStyle

diff --git a/...sirius/components/collaborative/diagrams/handlers/GetConnectorToolsEventHandlerTests.java b/...sirius/components/collaborative/diagrams/handlers/GetConnectorToolsEventHandlerTests.java
@@ -38,6 +38,7 @@
 import org.eclipse.sirius.components.diagrams.LabelOverflowStrategy;
 import org.eclipse.sirius.components.diagrams.LabelStyle;
 import org.eclipse.sirius.components.diagrams.LabelTextAlign;
+import org.eclipse.sirius.components.diagrams.LineStyle;
 import org.eclipse.sirius.components.diagrams.Node;
 import org.eclipse.sirius.components.diagrams.NodeType;
 import org.eclipse.sirius.components.diagrams.Position;
@@ -99,6 +100,10 @@ private Node getNode(String id, String targetObjectId) {
                 .color("#000000")
                 .fontSize(16)
                 .iconURL(List.of())
+                .background("transparent")
+                .borderColor("black")
+                .borderSize(0)
+                .borderStyle(LineStyle.Solid)
                 .build();
         InsideLabel insideLabel = InsideLabel.newLabel(UUID.randomUUID().toString())
                 .text("text")

diff --git a/...nents/collaborative/diagrams/handlers/InitialDirectEditElementLabelEventHandlerTests.java b/...nents/collaborative/diagrams/handlers/InitialDirectEditElementLabelEventHandlerTests.java
@@ -33,6 +33,7 @@
 import org.eclipse.sirius.components.diagrams.LabelOverflowStrategy;
 import org.eclipse.sirius.components.diagrams.LabelStyle;
 import org.eclipse.sirius.components.diagrams.LabelTextAlign;
+import org.eclipse.sirius.components.diagrams.LineStyle;
 import org.eclipse.sirius.components.diagrams.Node;
 import org.eclipse.sirius.components.diagrams.OutsideLabel;
 import org.eclipse.sirius.components.diagrams.OutsideLabelLocation;
@@ -118,6 +119,10 @@ public void testInitialDirectEditElementLabelOnNodeWithoutInsideLabelEventHandle
                 .color("#000000")
                 .fontSize(16)
                 .iconURL(List.of())
+                .background("transparent")
+                .borderColor("black")
+                .borderSize(0)
+                .borderStyle(LineStyle.Solid)
                 .build();
         Node node = new TestDiagramBuilder().getNodeWithOutsideLabels(UUID.randomUUID().toString(), false, List.of(new OutsideLabel(labelId, "text", OutsideLabelLocation.BOTTOM_MIDDLE, labelStyle,
                 LabelOverflowStrategy.NONE, LabelTextAlign.LEFT)));

diff --git a/...llaborative/diagrams/handlers/InvokeSingleClickOnDiagramElementToolEventHandlerTests.java b/...llaborative/diagrams/handlers/InvokeSingleClickOnDiagramElementToolEventHandlerTests.java
@@ -76,30 +76,20 @@
 public class InvokeSingleClickOnDiagramElementToolEventHandlerTests {
 
     private static final String DIAGRAM_ID = "diagramId";
-
     private static final String EDGE_1_ID = "edge1";
-
     private static final String EDGE_DESCRIPTION_ID = "edgeDescriptionId";
-
     private static final String EDITING_CONTEXT_ID = "editingContextId";
-
     private static final String NODE_DESCRIPTION_ID = "nodeDescriptionId";
-
     private static final String NODE_1_ID = "node1";
-
     private static final String OBJECT_1_ID = "object1";
-
     private static final String LINK_1_ID = "link1";
-
     private static final String REPRESENTATION_ID = "representationId";
-
     private static final String SELECTED_OBJECT_ID = "selectedObjectId";
-
     private static final String TOOL_ID = "toolId";
-
     private static final String TOOL_IMAGE_URL = "imageURL";
-
     private static final String TOOL_LABEL = "label";
+    private static final String TRANSPARENT_COLOR_NAME = "transparent";
+    private static final String BLACK_COLOR_NAME = "black";
 
     @Test
     public void testInvokeToolOnDiagram() {
@@ -381,6 +371,10 @@ private Node createNode(String nodeId, String nodeDescriptionId, String targetOb
                 .color("#000001")
                 .fontSize(16)
                 .iconURL(List.of())
+                .background(TRANSPARENT_COLOR_NAME)
+                .borderColor(BLACK_COLOR_NAME)
+                .borderSize(0)
+                .borderStyle(LineStyle.Solid)
                 .build();
         var label = InsideLabel.newLabel(UUID.randomUUID().toString())
                 .text("text")
@@ -420,6 +414,11 @@ private NodeDescription createNodeDescription(String nodeDescriptionId) {
                 .underlineProvider(variableManager -> false)
                 .strikeThroughProvider(variableManager -> false)
                 .iconURLProvider(variableManager -> List.of())
+                .backgroundProvider(variableManager -> TRANSPARENT_COLOR_NAME)
+                .borderColorProvider(variableManager -> BLACK_COLOR_NAME)
+                .borderRadiusProvider(variableManager -> 0)
+                .borderSizeProvider(variableManager -> 0)
+                .borderStyleProvider(variableManager -> LineStyle.Solid)
                 .build();
 
         var insideLabelDescription = InsideLabelDescription.newInsideLabelDescription("insideLabelDescription")
@@ -457,6 +456,10 @@ private Edge createEdge(String edgeId, String edgeDescriptionId, String targetOb
                 .color("#000002")
                 .fontSize(14)
                 .iconURL(List.of())
+                .background(TRANSPARENT_COLOR_NAME)
+                .borderColor(BLACK_COLOR_NAME)
+                .borderSize(0)
+                .borderStyle(LineStyle.Solid)
                 .build();
 
         var label = Label.newLabel(UUID.randomUUID().toString())

diff --git a/...ava/org/eclipse/sirius/components/collaborative/diagrams/handlers/TestDiagramBuilder.java b/...ava/org/eclipse/sirius/components/collaborative/diagrams/handlers/TestDiagramBuilder.java
@@ -112,6 +112,10 @@ private Node getNode(String id, boolean withInsideLabel, List<OutsideLabel> outs
                     .color("#000000")
                     .fontSize(16)
                     .iconURL(List.of())
+                    .background("transparent")
+                    .borderColor("black")
+                    .borderSize(0)
+                    .borderStyle(LineStyle.Solid)
                     .build();
             InsideLabel insideLabel = InsideLabel.newLabel(UUID.randomUUID().toString())
                     .text("text")

diff --git a/...ipse/sirius/components/collaborative/diagrams/handlers/TestDiagramDescriptionBuilder.java b/...ipse/sirius/components/collaborative/diagrams/handlers/TestDiagramDescriptionBuilder.java
@@ -100,6 +100,11 @@ public NodeDescription getNodeDescription(String nodeDescriptionId, Function<Var
                 .underlineProvider(variableManager -> false)
                 .strikeThroughProvider(variableManager -> false)
                 .iconURLProvider(variableManager -> List.of())
+                .backgroundProvider(variableManager -> "transparent")
+                .borderColorProvider(variableManager -> "black")
+                .borderRadiusProvider(variableManager -> 0)
+                .borderSizeProvider(variableManager -> 0)
+                .borderStyleProvider(variableManager -> LineStyle.Solid)
                 .build();
 
         InsideLabelDescription insideLabelDescription = InsideLabelDescription.newInsideLabelDescription("insideLabelDescriptionId")

diff --git a/...rc/main/java/org/eclipse/sirius/components/diagrams/tests/builder/label/LabelBuilder.java b/...rc/main/java/org/eclipse/sirius/components/diagrams/tests/builder/label/LabelBuilder.java
@@ -20,6 +20,7 @@
 import org.eclipse.sirius.components.diagrams.InsideLabelLocation;
 import org.eclipse.sirius.components.diagrams.Label;
 import org.eclipse.sirius.components.diagrams.LabelStyle;
+import org.eclipse.sirius.components.diagrams.LineStyle;
 import org.eclipse.sirius.components.diagrams.Position;
 import org.eclipse.sirius.components.diagrams.Size;
 import org.eclipse.sirius.components.diagrams.components.LabelType;
@@ -31,6 +32,8 @@
  */
 public final class LabelBuilder {
 
+    public static final String DEFAULT_COLOR_TRANSPARENT = "transparent";
+
     public Label basicLabel(String text, LabelType labelType) {
         LabelStyle labelStyle = LabelStyle.newLabelStyle()
                 .color("black")
@@ -40,6 +43,10 @@ public Label basicLabel(String text, LabelType labelType) {
                 .underline(false)
                 .strikeThrough(false)
                 .iconURL(List.of())
+                .background(DEFAULT_COLOR_TRANSPARENT)
+                .borderColor(DEFAULT_COLOR_TRANSPARENT)
+                .borderSize(0)
+                .borderStyle(LineStyle.Solid)
                 .build();
 
         return Label.newLabel(UUID.randomUUID().toString())
@@ -61,6 +68,10 @@ public InsideLabel basicInsideLabel(String text, LabelType labelType, boolean is
                 .underline(false)
                 .strikeThrough(false)
                 .iconURL(List.of())
+                .background(DEFAULT_COLOR_TRANSPARENT)
+                .borderColor(DEFAULT_COLOR_TRANSPARENT)
+                .borderSize(0)
+                .borderStyle(LineStyle.Solid)
                 .build();
 
         return InsideLabel.newLabel(UUID.randomUUID().toString())