[3647] Add support for diagram style with background customization

Bug: #3647
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

Author: frouene

CHANGELOG.adoc

@@ -109,6 +109,7 @@ The key bindings are visible in the palette next to the tool name.
 A key binding needs to contain at least one of `Control`, `Alt`, or `Meta` to be executed by the frontend.
 - https://github.com/eclipse-sirius/sirius-web/issues/3488[#3488] [diagram] Restore auto-layout support for diagrams
 - https://github.com/eclipse-sirius/sirius-web/issues/5062[#5062] [sirius-web] Add new "views explorer" view
+- https://github.com/eclipse-sirius/sirius-web/issues/3647[#3647] [diagram] Add support for diagram style with background customization
 
 
 === Improvements
@@ -2222,7 +2223,7 @@ As a result, the following maven modules have been deleted: `sirius-web-sample-a
 
 * The `String` attribute `org.eclipse.sirius.components.collaborative.diagrams.dto.InvokeSingleClickOnDiagramElementToolInput#selectedObjectId` has been replaced by the attribute `variables` of type `List<ToolVariable>`
 - https://github.com/eclipse-sirius/sirius-web/issues/3437[#3437] [core] Migrate frontend to MUI 5, if you contributed React componenent that use MUI, you should upgrade them to use MUI 5.
-- https://github.com/eclipse-sirius/sirius-web/issues/2204[#2204] [core] Added `getStyledLabel` in `IDefaultLabelService` and `IObjectService`, you must implement this method if you have custom implementation of these interface.
+- https://github.com/eclipse-sirius/sirius-web/issues/2204[#2204] [core] Add `getStyledLabel` in `IDefaultLabelService` and `IObjectService`, you must implement this method if you have custom implementation of these interface.
 - https://github.com/eclipse-sirius/sirius-web/issues/3815[#3815] [core] Make child creation descriptions locale independent
 - https://github.com/eclipse-sirius/sirius-web/issues/3976[#3976] [core] Remove the configuration object used to create representation event processors.
 
@@ -2265,12 +2266,11 @@ The ids used to create a subscription is also changed, refer to [ADR-159] for mo
 - https://github.com/eclipse-sirius/sirius-web/issues/3821[#3821] [sirius-web] Allow to filter resources in `RewriteProxiesEventHandler`.
 Introduce new `IRewriteProxiesResourceFilter` interface, to register resource filter for `RewriteProxiesEventHandler`.
 - https://github.com/eclipse-sirius/sirius-web/issues/3570[#3570] [diagram] Add max width expression in the View DSL for labels
-- https://github.com/eclipse-sirius/sirius-web/issues/2204[#2204] [core] Added `getStyledLabel` in `IDefaultLabelService` and `IObjectService` that can be used to display styled string in the explorer for example.
+- https://github.com/eclipse-sirius/sirius-web/issues/2204[#2204] [core] Add `getStyledLabel` in `IDefaultLabelService` and `IObjectService` that can be used to display styled string in the explorer for example.
 +
 image:doc/screenshots/treeItemLabelStyled.jpg[StyledString, 70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/3963[#3963] [core] Add support for optional GraphQLCodeRegistry post-processing/transformation.
 
-
 === Improvements
 
 - https://github.com/eclipse-sirius/sirius-web/issues/3744[#3744] [diagram] Add support for helper lines during multi selection move
@@ -2374,8 +2374,7 @@ More existing APIs will be migrated to this new common pattern.
 - https://github.com/eclipse-sirius/sirius-web/issues/3616[#3616] [diagram] Fix potential exceptions due to duplicate keys in diagram event processing
 - https://github.com/eclipse-sirius/sirius-web/issues/3624[#3624] [diagram] Fix an issue where the header separator does not fill the entire width of the node
 - https://github.com/eclipse-sirius/sirius-web/issues/3531[#3531] [diagram] Fix unnecessary edges label re render
-- https://github.com/eclipse-sirius/sirius-web/issues/3650[#3650] [diagram] Fix potential NPE in DiagramNavigator and Node toString method
-- https://github.com/eclipse-sirius/sirius-web/issues/3649[#3649] [sirius-web] Restore support for Related elements view icons
+- https://github.com/eclipse-sirius/sirius-web/issues/3650[#3650] [diagram] Fix potential NPE in DiagramNavigator and Node toString method- https://github.com/eclipse-sirius/sirius-web/issues/3649[#3649] [sirius-web] Restore support for Related elements view icons
 - https://github.com/eclipse-sirius/sirius-web/issues/3630[#3630] [sirius-web] Restore support for the deletion of dangling representations
 - https://github.com/eclipse-sirius/sirius-web/issues/3666[#3666] [core] Enable EMF's intrinsicIDToEObjectMap for JSON resources to support languages which use modeled identifiers (e.g. SysMLv2).
 - https://github.com/eclipse-sirius/sirius-web/issues/3664[#3664] [core] The Default.svg image is no longer displayed with the new architecture.

integration-tests-playwright/playwright/e2e/diagrams/diagram.spec.ts

@@ -66,3 +66,59 @@ test.describe('diagram', () => {
     await expect(page.locator('.react-flow__minimap')).toBeAttached();
   });
 });
+
+test.describe('diagram', () => {
+  let projectId;
+  test.beforeEach(async ({ page, request }) => {
+    const project = await new PlaywrightProject(request).createProject('diagram-list', 'papaya-empty');
+    projectId = project.projectId;
+
+    await page.goto(`/projects/${projectId}/edit`);
+    const playwrightExplorer = new PlaywrightExplorer(page);
+    await playwrightExplorer.uploadDocument('diagramPapayaClassNode.xml');
+    await playwrightExplorer.expand('diagramPapayaClassNode.xml');
+    await playwrightExplorer.expand('Project');
+    await playwrightExplorer.expand('Component');
+
+    await playwrightExplorer.createRepresentation('Component', 'Class Diagram', 'diagram');
+  });
+
+  test.afterEach(async ({ request }) => {
+    await new PlaywrightProject(request).deleteProject(projectId);
+  });
+
+  test('when a diagram has a conditional style, then the style is changed after triggering the condition', async ({
+    page,
+  }) => {
+    await expect(page.getByTestId('rf__wrapper')).toBeAttached();
+    const playwrightExplorer = new PlaywrightExplorer(page);
+    await playwrightExplorer.expand('Package');
+    await page.waitForFunction(
+      () => {
+        const div = document.querySelector('[data-testid="rf__background"]');
+        if (!div) {
+          return false;
+        }
+
+        const background = window.getComputedStyle(div).getPropertyValue('background');
+        return background.includes('Drag and drop elements to get started');
+      },
+      { timeout: 2000 }
+    );
+
+    await (await playwrightExplorer.getTreeItemLabel('NewClass')).dragTo(page.getByTestId('rf__wrapper'));
+
+    await page.waitForFunction(
+      () => {
+        const div = document.querySelector('[data-testid="rf__background"]');
+        if (!div) {
+          return false;
+        }
+
+        const background = window.getComputedStyle(div).getPropertyValue('background');
+        return background.startsWith('rgb(255, 255, 255) none repeat scroll 0% 0% ');
+      },
+      { timeout: 2000 }
+    );
+  });
+});

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/main/resources/schema/diagram.graphqls

@@ -34,9 +34,14 @@ type Diagram implements Representation {
   targetObjectId: ID!
   nodes: [Node!]!
   edges: [Edge!]!
+  style: DiagramStyle!
   layoutData: DiagramLayoutData!
 }
 
+type DiagramStyle {
+  background: String!
+}
+
 type DiagramLayoutData {
   nodeLayoutData: [NodeLayoutData!]!
   edgeLayoutData: [EdgeLayoutData!]!

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/test/java/org/eclipse/sirius/components/collaborative/diagrams/DiagramEventProcessorTests.java

@@ -31,6 +31,7 @@
 import org.eclipse.sirius.components.core.api.IPayload;
 import org.eclipse.sirius.components.core.api.IRepresentationDescriptionSearchService;
 import org.eclipse.sirius.components.diagrams.Diagram;
+import org.eclipse.sirius.components.diagrams.DiagramStyle;
 import org.eclipse.sirius.components.diagrams.InsideLabel;
 import org.eclipse.sirius.components.diagrams.Node;
 import org.junit.jupiter.api.Test;
@@ -55,6 +56,7 @@ public class DiagramEventProcessorTests {
             .targetObjectId("targetObjectId")
             .nodes(List.of(INITIAL_TEST_NODE))
             .edges(List.of())
+            .style(DiagramStyle.newDiagramStyle().build())
             .build();
 
     private final IDiagramCreationService diagramCreationService = new MockDiagramCreationService(INITIAL_TEST_DIAGRAM);

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/test/java/org/eclipse/sirius/components/collaborative/diagrams/handlers/CreateDiagramEventHandlerTests.java

@@ -33,6 +33,7 @@
 import org.eclipse.sirius.components.core.api.IPayload;
 import org.eclipse.sirius.components.core.api.IRepresentationDescriptionSearchService;
 import org.eclipse.sirius.components.diagrams.Diagram;
+import org.eclipse.sirius.components.diagrams.DiagramStyle;
 import org.eclipse.sirius.components.diagrams.description.DiagramDescription;
 import org.eclipse.sirius.components.representations.Failure;
 import org.eclipse.sirius.components.representations.IRepresentationDescription;
@@ -64,6 +65,7 @@ public Optional<IRepresentationDescription> findById(IEditingContext editingCont
                         .targetObjectIdProvider(variableManager -> "targetObjectId")
                         .dropHandler(variableManager -> new Failure(""))
                         .iconURLsProvider(variableManager -> List.of())
+                        .styleProvider(variableManager -> DiagramStyle.newDiagramStyle().build())
                         .build();
 
                 return Optional.of(diagramDescription);

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/test/java/org/eclipse/sirius/components/collaborative/diagrams/handlers/GetConnectorToolsEventHandlerTests.java

@@ -35,6 +35,7 @@
 import org.eclipse.sirius.components.core.api.IRepresentationDescriptionSearchService;
 import org.eclipse.sirius.components.diagrams.CollapsingState;
 import org.eclipse.sirius.components.diagrams.Diagram;
+import org.eclipse.sirius.components.diagrams.DiagramStyle;
 import org.eclipse.sirius.components.diagrams.HeaderSeparatorDisplayMode;
 import org.eclipse.sirius.components.diagrams.InsideLabel;
 import org.eclipse.sirius.components.diagrams.InsideLabelLocation;
@@ -143,6 +144,7 @@ public void testGetConnectorTools() {
                 .edgeDescriptions(new ArrayList<>())
                 .dropHandler(variableManager -> new Failure(""))
                 .iconURLsProvider(variableManager -> List.of())
+                .styleProvider(variableManager -> DiagramStyle.newDiagramStyle().build())
                 .build();
 
         Node sourceNode = this.getNode(SOURCE_NODE_ID, SOURCE_NODE_TARGET_ID);
@@ -208,6 +210,7 @@ private Diagram getDiagram(String id, List<Node> nodes) {
                 .targetObjectId("diagramTargetObjectId")
                 .nodes(nodes)
                 .edges(List.of())
+                .style(DiagramStyle.newDiagramStyle().build())
                 .build();
     }
 }

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/test/java/org/eclipse/sirius/components/collaborative/diagrams/handlers/GetNodeDescriptionsEventHandlerTests.java

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024, 2025 Obeo.
+ * Copyright (c) 2024, 2026 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
@@ -29,6 +29,7 @@
 import org.eclipse.sirius.components.core.api.IPayload;
 import org.eclipse.sirius.components.core.api.IRepresentationDescriptionSearchService;
 import org.eclipse.sirius.components.diagrams.Diagram;
+import org.eclipse.sirius.components.diagrams.DiagramStyle;
 import org.eclipse.sirius.components.diagrams.description.NodeDescription;
 import org.eclipse.sirius.components.diagrams.layoutdata.DiagramLayoutData;
 import org.eclipse.sirius.components.representations.IRepresentationDescription;
@@ -81,6 +82,7 @@ public Optional<IRepresentationDescription> findById(IEditingContext editingCont
                 }
                 return desc;
             }
+
             @Override
             public Map<String, IRepresentationDescription> findAll(IEditingContext editingContext) {
                 var descriptions = new HashMap<String, IRepresentationDescription>();
@@ -106,6 +108,7 @@ public Map<String, IRepresentationDescription> findAll(IEditingContext editingCo
                 .layoutData(new DiagramLayoutData(Map.of(), Map.of(), Map.of()))
                 .nodes(List.of())
                 .targetObjectId("")
+                .style(DiagramStyle.newDiagramStyle().build())
                 .build();
 
         handler.handle(payloadSink, changeDescriptionSink, editingContext, new DiagramContext(diagram), input);

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/test/java/org/eclipse/sirius/components/collaborative/diagrams/handlers/TestDiagramBuilder.java

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2025 Obeo.
+ * Copyright (c) 2019, 2026 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
@@ -19,6 +19,7 @@
 import org.eclipse.sirius.components.diagrams.ArrowStyle;
 import org.eclipse.sirius.components.diagrams.CollapsingState;
 import org.eclipse.sirius.components.diagrams.Diagram;
+import org.eclipse.sirius.components.diagrams.DiagramStyle;
 import org.eclipse.sirius.components.diagrams.Edge;
 import org.eclipse.sirius.components.diagrams.EdgeStyle;
 import org.eclipse.sirius.components.diagrams.EdgeType;
@@ -54,6 +55,7 @@ public Diagram getDiagram(String id) {
                 .targetObjectId("diagramTargetObjectId")
                 .nodes(List.of())
                 .edges(List.of())
+                .style(DiagramStyle.newDiagramStyle().build())
                 .build();
     }
 

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/test/java/org/eclipse/sirius/components/collaborative/diagrams/handlers/TestDiagramDescriptionBuilder.java

@@ -18,6 +18,7 @@
 import java.util.function.Function;
 
 import org.eclipse.sirius.components.diagrams.ArrowStyle;
+import org.eclipse.sirius.components.diagrams.DiagramStyle;
 import org.eclipse.sirius.components.diagrams.EdgeStyle;
 import org.eclipse.sirius.components.diagrams.EdgeType;
 import org.eclipse.sirius.components.diagrams.FreeFormLayoutStrategy;
@@ -56,6 +57,7 @@ public DiagramDescription getDiagramDescription(String diagramDescriptionId, Lis
                 .edgeDescriptions(edgeDescriptions)
                 .dropHandler(variableManager -> new Failure(""))
                 .iconURLsProvider(variableManager -> List.of())
+                .styleProvider(variableManager -> DiagramStyle.newDiagramStyle().build())
                 .build();
     }
 

packages/diagrams/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/Diagram.java

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2024 Obeo.
+ * Copyright (c) 2019, 2026 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
@@ -28,6 +28,7 @@
  */
 @Immutable
 public final class Diagram implements IRepresentation {
+
     public static final String KIND = IRepresentation.KIND_PREFIX + "?type=Diagram";
 
     private String id;
@@ -44,6 +45,8 @@ public final class Diagram implements IRepresentation {
 
     private DiagramLayoutData layoutData;
 
+    private DiagramStyle style;
+
     private Diagram() {
         // Prevent instantiation
     }
@@ -80,6 +83,10 @@ public DiagramLayoutData getLayoutData() {
         return this.layoutData;
     }
 
+    public DiagramStyle getStyle() {
+        return this.style;
+    }
+
     public static Builder newDiagram(String id) {
         return new Builder(id);
     }
@@ -101,9 +108,10 @@ public String toString() {
      */
     @SuppressWarnings("checkstyle:HiddenField")
     public static final class Builder {
-        private String id;
 
-        private String kind = KIND;
+        private final String id;
+
+        private final String kind = KIND;
 
         private String targetObjectId;
 
@@ -113,6 +121,8 @@ public static final class Builder {
 
         private List<Edge> edges;
 
+        private DiagramStyle style;
+
         private DiagramLayoutData layoutData = new DiagramLayoutData(Map.of(), Map.of(), Map.of());
 
         private Builder(String id) {
@@ -125,6 +135,7 @@ private Builder(Diagram diagram) {
             this.descriptionId = diagram.getDescriptionId();
             this.nodes = diagram.getNodes();
             this.edges = diagram.getEdges();
+            this.style = diagram.getStyle();
             this.layoutData = diagram.getLayoutData();
         }
 
@@ -148,6 +159,11 @@ public Builder edges(List<Edge> edges) {
             return this;
         }
 
+        public Builder style(DiagramStyle style) {
+            this.style = Objects.requireNonNull(style);
+            return this;
+        }
+
         public Builder layoutData(DiagramLayoutData layoutData) {
             this.layoutData = Objects.requireNonNull(layoutData);
             return this;
@@ -161,6 +177,7 @@ public Diagram build() {
             diagram.descriptionId = Objects.requireNonNull(this.descriptionId);
             diagram.nodes = Objects.requireNonNull(this.nodes);
             diagram.edges = Objects.requireNonNull(this.edges);
+            diagram.style = Objects.requireNonNull(this.style);
             diagram.layoutData = Objects.requireNonNull(this.layoutData);
             return diagram;
         }