[3868] Make path of edges editable

Bug: #3868 Signed-off-by: Florian ROUËNÉ <[email protected]>
eclipse-sirius · Oct 10, 2024 · 778dcc8 · 778dcc8
1 parent 23d3986
commit 778dcc8
Show file tree

Hide file tree

Showing 23 changed files with 381 additions and 46 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -44,6 +44,8 @@ This allows an error to be displayed when there is a problem during uploading
 - [releng] Switch to Spring Boot 3.3.3
 - https://github.com/eclipse-sirius/sirius-web/issues/3846[#3846] [core] Migrate the frontend to `react 18.3.1`, `react-dom 18.3.1`, `react-router-dom 6.26.0`, `@xstate/react: 3.0.0` and `@ObeoNetwork/gantt-task-react 0.6.0`
 - https://github.com/eclipse-sirius/sirius-web/issues/3840[#3840] [diagram] Migrate to ReactFlow 12
+- https://github.com/eclipse-sirius/sirius-web/issues/3868[#3868] [diagram] Add dependency to `react-draggable 4.4.6`
+- https://github.com/eclipse-sirius/sirius-web/issues/3868[#3868] [diagram] Add dependency to `svg-path-parser 1.1.0`
 
 
 === Bug fixes
@@ -74,6 +76,7 @@ The new endpoints are:
 description (optional).
 ** deleteProject (`POST /api/rest/projects/{projectId}`): Delete the project with the given id (projectId).
 ** updateProject (`PUT /projects/{projectId}`): Update the project with the given id (projectId).
+- https://github.com/eclipse-sirius/sirius-web/issues/3868[#3868] [diagram] Make path of edges editable
 
 === Improvements
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/...main/java/org/eclipse/sirius/components/collaborative/diagrams/DiagramEventProcessor.java b/...main/java/org/eclipse/sirius/components/collaborative/diagrams/DiagramEventProcessor.java
@@ -32,6 +32,7 @@
 import org.eclipse.sirius.components.collaborative.diagrams.api.IDiagramInput;
 import org.eclipse.sirius.components.collaborative.diagrams.api.IDiagramInputReferencePositionProvider;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.DiagramRefreshedEventPayload;
+import org.eclipse.sirius.components.collaborative.diagrams.dto.EdgeLayoutDataInput;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.LayoutDiagramInput;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.NodeLayoutDataInput;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.ReferencePosition;
@@ -46,6 +47,7 @@
 import org.eclipse.sirius.components.diagrams.Diagram;
 import org.eclipse.sirius.components.diagrams.description.DiagramDescription;
 import org.eclipse.sirius.components.diagrams.layoutdata.DiagramLayoutData;
+import org.eclipse.sirius.components.diagrams.layoutdata.EdgeLayoutData;
 import org.eclipse.sirius.components.diagrams.layoutdata.NodeLayoutData;
 import org.eclipse.sirius.components.representations.IRepresentation;
 import org.slf4j.Logger;
@@ -141,7 +143,14 @@ public void handle(One<IPayload> payloadSink, Many<ChangeDescription> changeDesc
                                 (oldValue, newValue) -> newValue
                         ));
 
-                var layoutData = new DiagramLayoutData(nodeLayoutData, Map.of(), Map.of());
+                var edgeLayoutData = layoutDiagramInput.diagramLayoutData().edgeLayoutData().stream()
+                        .collect(Collectors.toMap(
+                                EdgeLayoutDataInput::id,
+                                edgeLayoutDataInput -> new EdgeLayoutData(edgeLayoutDataInput.id(), edgeLayoutDataInput.bendingPoints()),
+                                (oldValue, newValue) -> newValue
+                        ));
+
+                var layoutData = new DiagramLayoutData(nodeLayoutData, edgeLayoutData, Map.of());
                 var laidOutDiagram = Diagram.newDiagram(diagram)
                         .layoutData(layoutData)
                         .build();
@@ -226,17 +235,13 @@ private ReferencePosition getReferencePosition(IInput diagramInput) {
      */
     public boolean shouldRefresh(ChangeDescription changeDescription) {
         Diagram diagram = this.diagramContext.getDiagram();
-        // @formatter:off
         var optionalDiagramDescription = this.representationDescriptionSearchService.findById(this.editingContext, diagram.getDescriptionId())
                 .filter(DiagramDescription.class::isInstance)
                 .map(DiagramDescription.class::cast);
-        // @formatter:on
 
-        // @formatter:off
         return optionalDiagramDescription.flatMap(this.representationRefreshPolicyRegistry::getRepresentationRefreshPolicy)
                 .orElseGet(this::getDefaultRefreshPolicy)
                 .shouldRefresh(changeDescription);
-        // @formatter:on
     }
 
     private IRepresentationRefreshPolicy getDefaultRefreshPolicy() {
@@ -254,10 +259,9 @@ private IRepresentationRefreshPolicy getDefaultRefreshPolicy() {
 
     @Override
     public Flux<IPayload> getOutputEvents(IInput input) {
-        // @formatter:off
         return Flux.merge(
-            this.diagramEventFlux.getFlux(this.currentRevisionId, this.currentRevisionCause),
-            this.subscriptionManager.getFlux(input)
+                this.diagramEventFlux.getFlux(this.currentRevisionId, this.currentRevisionCause),
+                this.subscriptionManager.getFlux(input)
         );
     }
 

diff --git a/...java/org/eclipse/sirius/components/collaborative/diagrams/dto/DiagramLayoutDataInput.java b/...java/org/eclipse/sirius/components/collaborative/diagrams/dto/DiagramLayoutDataInput.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -19,5 +19,6 @@
  *
  * @author sbegaudeau
  */
-public record DiagramLayoutDataInput(List<NodeLayoutDataInput> nodeLayoutData) {
+public record DiagramLayoutDataInput(List<NodeLayoutDataInput> nodeLayoutData, List<EdgeLayoutDataInput> edgeLayoutData) {
+
 }
diff --git a/...va/org/eclipse/sirius/components/collaborative/diagrams/dto/DiagramLayoutDataPayload.java b/...va/org/eclipse/sirius/components/collaborative/diagrams/dto/DiagramLayoutDataPayload.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -14,12 +14,14 @@
 
 import java.util.List;
 
+import org.eclipse.sirius.components.diagrams.layoutdata.EdgeLayoutData;
 import org.eclipse.sirius.components.diagrams.layoutdata.NodeLayoutData;
 
 /**
  * Holds the layout data of the diagram.
  *
  * @author sbegaudeau
  */
-public record DiagramLayoutDataPayload(List<NodeLayoutData> nodeLayoutData) {
+public record DiagramLayoutDataPayload(List<NodeLayoutData> nodeLayoutData, List<EdgeLayoutData> edgeLayoutData) {
+
 }
diff --git a/...components/diagrams/layoutdata/Ratio.java → ...ive/diagrams/dto/EdgeLayoutDataInput.java b/...components/diagrams/layoutdata/Ratio.java → ...ive/diagrams/dto/EdgeLayoutDataInput.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 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
@@ -10,13 +10,17 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+package org.eclipse.sirius.components.collaborative.diagrams.dto;
 
-package org.eclipse.sirius.components.diagrams.layoutdata;
+import java.util.List;
+
+import org.eclipse.sirius.components.diagrams.layoutdata.Position;
 
 /**
- * The position ratio of an element.
+ * Input used to receive edge layout data.
  *
- * @author sbegaudeau
+ * @author frouene
  */
-public record Ratio(double x, double y) {
+public record EdgeLayoutDataInput(String id, List<Position> bendingPoints) {
+
 }
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
@@ -38,6 +38,7 @@ type Diagram implements Representation {
 
 type DiagramLayoutData {
   nodeLayoutData: [NodeLayoutData!]!
+  edgeLayoutData: [EdgeLayoutData!]!
 }
 
 type NodeLayoutData {
@@ -47,6 +48,11 @@ type NodeLayoutData {
   resizedByUser: Boolean!
 }
 
+type EdgeLayoutData {
+  id: ID!
+  bendingPoints: [Position!]!
+}
+
 enum ViewModifier {
   Normal
   Faded
@@ -567,6 +573,7 @@ input LayoutDiagramInput {
 
 input DiagramLayoutDataInput {
   nodeLayoutData: [NodeLayoutDataInput!]!
+  edgeLayoutData: [EdgeLayoutDataInput!]!
 }
 
 input NodeLayoutDataInput {
@@ -576,6 +583,11 @@ input NodeLayoutDataInput {
   resizedByUser: Boolean!
 }
 
+input EdgeLayoutDataInput {
+  id: ID!
+  bendingPoints: [PositionInput!]!
+}
+
 input PositionInput {
   x: Float!
   y: Float!

diff --git a/...sirius/components/diagrams/graphql/datafetchers/diagram/DiagramLayoutDataDataFetcher.java b/...sirius/components/diagrams/graphql/datafetchers/diagram/DiagramLayoutDataDataFetcher.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -26,6 +26,7 @@
  */
 @QueryDataFetcher(type = "Diagram", field = "layoutData")
 public class DiagramLayoutDataDataFetcher implements IDataFetcherWithFieldCoordinates<DiagramLayoutDataPayload> {
+
     @Override
     public DiagramLayoutDataPayload get(DataFetchingEnvironment environment) throws Exception {
         Diagram diagram = environment.getSource();
@@ -34,6 +35,12 @@ public DiagramLayoutDataPayload get(DataFetchingEnvironment environment) throws
                 .values()
                 .stream()
                 .toList();
-        return new DiagramLayoutDataPayload(nodeLayoutData);
+
+        var edgeLayoutData = diagram.getLayoutData()
+                .edgeLayoutData()
+                .values()
+                .stream()
+                .toList();
+        return new DiagramLayoutDataPayload(nodeLayoutData, edgeLayoutData);
     }
 }
diff --git a/...grams/src/main/java/org/eclipse/sirius/components/diagrams/layoutdata/EdgeLayoutData.java b/...grams/src/main/java/org/eclipse/sirius/components/diagrams/layoutdata/EdgeLayoutData.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -21,8 +21,7 @@
  */
 public record EdgeLayoutData(
         String id,
-        Ratio sourceAnchorRelativePosition,
-        Ratio targetAnchorRelativePosition,
-        List<Position> routingPoints
+        List<Position> bendingPoints
 ) {
+
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/package.json b/packages/diagrams/frontend/sirius-components-diagrams/package.json
@@ -38,6 +38,8 @@
     "graphql": "16.8.1",
     "html-to-image": "1.11.11",
     "pathfinding": "0.4.18",
+    "svg-path-parser": "1.1.0",
+    "react-draggable": "4.4.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/react": "18.3.3",
@@ -61,6 +63,8 @@
     "html-to-image": "1.11.11",
     "jsdom": "16.7.0",
     "pathfinding": "0.4.18",
+    "svg-path-parser": "1.1.0",
+    "react-draggable": "4.4.6",
     "prettier": "2.7.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts
@@ -36,6 +36,7 @@ import { ImageNodeConverter } from './ImageNodeConverter';
 import { ListNodeConverter } from './ListNodeConverter';
 import { RectangleNodeConverter } from './RectangleNodeConverter';
 import { convertContentStyle, convertLabelStyle } from './convertLabel';
+import { GQLEdgeLayoutData } from '../renderer/layout/useSynchronizeLayoutData.types';
 
 const nodeDepth = (nodeId2node: Map<string, Node>, nodeId: string): number => {
   const node = nodeId2node.get(nodeId);
@@ -143,13 +144,17 @@ export const convertDiagram = (
   const edges: Edge<EdgeData>[] = gqlDiagram.edges.map((gqlEdge) => {
     const sourceNode: Node<NodeData> | undefined = nodeId2node.get(gqlEdge.sourceId);
     const targetNode: Node<NodeData> | undefined = nodeId2node.get(gqlEdge.targetId);
+    const edgeLayoutData: GQLEdgeLayoutData | undefined = gqlDiagram.layoutData.edgeLayoutData.find(
+      (layoutData) => layoutData.id === gqlEdge.id
+    );
     const data: MultiLabelEdgeData = {
       targetObjectId: gqlEdge.targetObjectId,
       targetObjectKind: gqlEdge.targetObjectKind,
       targetObjectLabel: gqlEdge.targetObjectLabel,
       label: null,
       faded: gqlEdge.state === GQLViewModifier.Faded,
       centerLabelEditable: gqlEdge.centerLabelEditable,
+      bendingPoints: edgeLayoutData?.bendingPoints ?? null,
     };
 
     if (gqlEdge.beginLabel) {

diff --git a/.../diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/diagramFragment.ts b/.../diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/diagramFragment.ts
@@ -30,6 +30,10 @@ fragment diagramFragment on Diagram {
       size { width height }
       resizedByUser
     }
+    edgeLayoutData {
+      id
+      bendingPoints { x y }
+    }
   }
   nodes {
     ...nodeFragment