[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

@@ -117,6 +117,7 @@ A key binding needs to contain at least one of `Control`, `Alt`, or `Meta` to be
 - https://github.com/eclipse-sirius/sirius-web/issues/5982[#5982] [tree] Add the ability to trigger context menu entries using key bindings.
 As for diagram tools, it is now possible to add `KeyBinding` instances to context menu entries in trees.
 Note that for the moment, only entries that aren't overridden in the frontend can be triggered with key bindings, although it is possible to define key bindings for any entry.
+- https://github.com/eclipse-sirius/sirius-web/issues/3647[#3647] [diagram] Add support for diagram style with background customization
 
 
 === Improvements
@@ -2230,7 +2231,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.
 
@@ -2273,12 +2274,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
@@ -2382,8 +2382,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

@@ -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
@@ -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

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2025 Obeo.
+ * Copyright (c) 2022, 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
@@ -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

@@ -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
@@ -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();
     }
 
@@ -64,14 +66,14 @@ public EdgeDescription getEdgeDescription(String edgeDescriptionId, NodeDescript
         Function<VariableManager, List<Element>> targetProvider = variableManager -> List.of();
 
         Function<VariableManager, EdgeStyle> edgeStyleProvider = variableManager ->
-            EdgeStyle.newEdgeStyle()
-                .size(2)
-                .lineStyle(LineStyle.Dash_Dot)
-                .sourceArrow(ArrowStyle.InputArrowWithDiamond)
-                .targetArrow(ArrowStyle.None)
-                .color("rgb(1, 2, 3)")
-                .edgeType(EdgeType.Manhattan)
-                .build();
+                EdgeStyle.newEdgeStyle()
+                        .size(2)
+                        .lineStyle(LineStyle.Dash_Dot)
+                        .sourceArrow(ArrowStyle.InputArrowWithDiamond)
+                        .targetArrow(ArrowStyle.None)
+                        .color("rgb(1, 2, 3)")
+                        .edgeType(EdgeType.Manhattan)
+                        .build();
 
         Function<VariableManager, String> idProvider = variableManager -> variableManager.get(VariableManager.SELF, String.class).orElse(null);
 

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;
         }