[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

@@ -34,7 +34,7 @@
 
 === New Features
 
-
+- https://github.com/eclipse-sirius/sirius-web/issues/3647[#3647] [diagram] Add support for diagram style with background customization
 
 
 === Improvements

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