[2883] Store in node layout data if a user has resized the node

Bug: #2883 Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
eclipse-sirius · Jan 8, 2024 · 86f0c9d · 86f0c9d
1 parent e9c04b9
commit 86f0c9d
Show file tree

Hide file tree

Showing 24 changed files with 144 additions and 42 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -71,6 +71,7 @@ const nodeTypeRegistry: NodeTypeRegistry = {
 </SiriusWebApplication>
 ```
 - https://github.com/eclipse-sirius/sirius-web/issues/2790[#2790] [diagram] All handles used to resize a node have been updated to be wider, you can update your custom nodes in the same way it's done in the EllipseNode example.
+- https://github.com/eclipse-sirius/sirius-web/issues/2883[#2883] [diagram] Add the attribute `resizedByUser` to reactflow nodes and graphql nodes.
 
 
 === Dependency update
@@ -88,6 +89,7 @@ const nodeTypeRegistry: NodeTypeRegistry = {
 - https://github.com/eclipse-sirius/sirius-web/issues/2826[#2826] [diagram] Fix invalid reference position used for nodes with a depth superior to 2.
 
 === New Features
+
 - https://github.com/eclipse-sirius/sirius-web/issues/2413[#2413] Add a debug mode for React Flow diagrams
 
 - https://github.com/eclipse-sirius/sirius-web/issues/2735[#2735] [gantt] Contribute the first version of the Gantt representation.
@@ -96,6 +98,9 @@ const nodeTypeRegistry: NodeTypeRegistry = {
 - https://github.com/eclipse-sirius/sirius-web/issues/2736[#2736] [gantt] Add a starter project for beans related to task meta-model.
 - https://github.com/eclipse-sirius/sirius-web/issues/2819[#2819] [deck] Contribute the first version of the Deck representation.
 - https://github.com/eclipse-sirius/sirius-web/issues/2765[#2765] [portal] Contribute the first version of the Portal representation.
+- https://github.com/eclipse-sirius/sirius-web/issues/2883[#2883] [diagram] The size of manually resized node does not change anymore, unless it needs to.
++
+The size of nodes that do not have been resized manually tries to fit the node default size.
 
 === Improvements
 

diff --git a/...main/java/org/eclipse/sirius/components/collaborative/diagrams/DiagramEventProcessor.java b/...main/java/org/eclipse/sirius/components/collaborative/diagrams/DiagramEventProcessor.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
@@ -132,7 +132,7 @@ public void handle(One<IPayload> payloadSink, Many<ChangeDescription> changeDesc
                 var nodeLayoutData = layoutDiagramInput.diagramLayoutData().nodeLayoutData().stream()
                         .collect(Collectors.toMap(
                                 NodeLayoutDataInput::id,
-                                nodeLayoutDataInput -> new NodeLayoutData(nodeLayoutDataInput.id(), nodeLayoutDataInput.position(), nodeLayoutDataInput.size())
+                                nodeLayoutDataInput -> new NodeLayoutData(nodeLayoutDataInput.id(), nodeLayoutDataInput.position(), nodeLayoutDataInput.size(), nodeLayoutDataInput.resizedByUser())
                         ));
 
                 var layoutData = new DiagramLayoutData(nodeLayoutData, Map.of(), Map.of());

diff --git a/...in/java/org/eclipse/sirius/components/collaborative/diagrams/dto/NodeLayoutDataInput.java b/...in/java/org/eclipse/sirius/components/collaborative/diagrams/dto/NodeLayoutDataInput.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
@@ -20,5 +20,5 @@
  *
  * @author sbegaudeau
  */
-public record NodeLayoutDataInput(String id, Position position, Size size) {
+public record NodeLayoutDataInput(String id, Position position, Size size, boolean resizedByUser) {
 }
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
@@ -49,6 +49,7 @@ type NodeLayoutData {
   id: ID!
   position: Position!
   size: Size!
+  resizedByUser: Boolean!
 }
 
 enum ViewModifier {
@@ -77,6 +78,7 @@ type Node {
   defaultWidth: Int
   defaultHeight: Int
   labelEditable: Boolean!
+  resizedByUser: Boolean!
 }
 
 type FreeFormLayoutStrategy {
@@ -590,6 +592,7 @@ input NodeLayoutDataInput {
   id: ID!
   position: PositionInput!
   size: SizeInput!
+  resizedByUser: Boolean!
 }
 
 input SizeInput {

diff --git a/...sirius/components/diagrams/graphql/datafetchers/diagram/NodeResizedByUserDataFetcher.java b/...sirius/components/diagrams/graphql/datafetchers/diagram/NodeResizedByUserDataFetcher.java
@@ -0,0 +1,54 @@
+/*******************************************************************************
+ * 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
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ * Obeo - initial API and implementation
+ *******************************************************************************/
+
+package org.eclipse.sirius.components.diagrams.graphql.datafetchers.diagram;
+
+import java.util.Map;
+import java.util.Optional;
+
+import org.eclipse.sirius.components.annotations.spring.graphql.QueryDataFetcher;
+import org.eclipse.sirius.components.diagrams.Diagram;
+import org.eclipse.sirius.components.diagrams.Node;
+import org.eclipse.sirius.components.diagrams.layoutdata.DiagramLayoutData;
+import org.eclipse.sirius.components.diagrams.layoutdata.NodeLayoutData;
+import org.eclipse.sirius.components.graphql.api.IDataFetcherWithFieldCoordinates;
+
+import graphql.schema.DataFetchingEnvironment;
+
+/**
+ * Used to retrieve the resized by user from diagram layout data.
+ *
+ * @author gcoutable
+ */
+@QueryDataFetcher(type = "Node", field = "resizedByUser")
+public class NodeResizedByUserDataFetcher implements IDataFetcherWithFieldCoordinates<Boolean> {
+
+    @Override
+    public Boolean get(DataFetchingEnvironment environment) throws Exception {
+        Node node = environment.getSource();
+        Map<String, Object> localContext = environment.getLocalContext();
+
+        return Optional.ofNullable(localContext.get("diagram"))
+                .filter(Diagram.class::isInstance)
+                .map(Diagram.class::cast)
+                .flatMap(diagram -> this.resizedByUser(diagram, node))
+                .orElse(false);
+    }
+
+    private Optional<Boolean> resizedByUser(Diagram diagram, Node node) {
+        return Optional.of(diagram.getLayoutData())
+                .map(DiagramLayoutData::nodeLayoutData)
+                .map(layoutData -> layoutData.get(node.getId()))
+                .map(NodeLayoutData::resizedByUser);
+    }
+}
diff --git a/.../java/org/eclipse/sirius/components/diagrams/layout/experimental/DiagramLayoutEngine.java b/.../java/org/eclipse/sirius/components/diagrams/layout/experimental/DiagramLayoutEngine.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
@@ -67,7 +67,7 @@ public DiagramLayoutData layout(DiagramLayoutConfiguration diagramLayoutConfigur
         }
 
         Map<String, NodeLayoutData> newNodeLayoutData = new HashMap<>();
-        diagramBoxModel.nodeBoxModels().forEach((nodeId, nodeBoxModel) -> newNodeLayoutData.put(nodeId, new NodeLayoutData(nodeId, nodeBoxModel.bounds().topLeft(), nodeBoxModel.bounds().size())));
+        diagramBoxModel.nodeBoxModels().forEach((nodeId, nodeBoxModel) -> newNodeLayoutData.put(nodeId, new NodeLayoutData(nodeId, nodeBoxModel.bounds().topLeft(), nodeBoxModel.bounds().size(), false)));
 
         return new DiagramLayoutData(newNodeLayoutData, Map.of(), Map.of());
     }

diff --git a/...grams/src/main/java/org/eclipse/sirius/components/diagrams/layoutdata/NodeLayoutData.java b/...grams/src/main/java/org/eclipse/sirius/components/diagrams/layoutdata/NodeLayoutData.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
@@ -20,6 +20,7 @@
 public record NodeLayoutData(
         String id,
         Position position,
-        Size size
+        Size size,
+        boolean resizedByUser
 ) {
 }
diff --git a/...ntend/sirius-components-diagrams-reactflow/src/converter/IconLabelNodeConverterHandler.ts b/...ntend/sirius-components-diagrams-reactflow/src/converter/IconLabelNodeConverterHandler.ts
@@ -46,6 +46,7 @@ const toIconLabelNode = (
     state,
     style,
     labelEditable,
+    resizedByUser,
   } = gqlNode;
 
   const connectionHandles: ConnectionHandle[] = [];
@@ -71,6 +72,7 @@ const toIconLabelNode = (
     labelEditable: labelEditable,
     connectionHandles,
     isNew,
+    resizedByUser,
   };
 
   if (insideLabel) {

diff --git a/.../frontend/sirius-components-diagrams-reactflow/src/converter/ImageNodeConverterHandler.ts b/.../frontend/sirius-components-diagrams-reactflow/src/converter/ImageNodeConverterHandler.ts
@@ -44,6 +44,7 @@ const toImageNode = (
     state,
     style,
     labelEditable,
+    resizedByUser,
   } = gqlNode;
 
   const connectionHandles: ConnectionHandle[] = convertHandles(gqlNode, gqlEdges);
@@ -68,6 +69,7 @@ const toImageNode = (
     positionDependentRotation: style.positionDependentRotation,
     connectionHandles,
     isNew,
+    resizedByUser,
   };
 
   if (insideLabel) {

diff --git a/...s/frontend/sirius-components-diagrams-reactflow/src/converter/ListNodeConverterHandler.ts b/...s/frontend/sirius-components-diagrams-reactflow/src/converter/ListNodeConverterHandler.ts
@@ -54,6 +54,7 @@ const toListNode = (
     state,
     style,
     labelEditable,
+    resizedByUser,
   } = gqlNode;
 
   const connectionHandles: ConnectionHandle[] = convertHandles(gqlNode, gqlEdges);
@@ -91,6 +92,7 @@ const toListNode = (
     areChildNodesDraggable: isListLayoutStrategy(gqlNode.childrenLayoutStrategy)
       ? gqlNode.childrenLayoutStrategy.areChildNodesDraggable
       : true,
+    resizedByUser,
   };
 
   if (insideLabel) {

diff --git a/...ntend/sirius-components-diagrams-reactflow/src/converter/RectangleNodeConverterHandler.ts b/...ntend/sirius-components-diagrams-reactflow/src/converter/RectangleNodeConverterHandler.ts
@@ -50,6 +50,7 @@ const toRectangularNode = (
     state,
     style,
     labelEditable,
+    resizedByUser,
   } = gqlNode;
 
   const connectionHandles: ConnectionHandle[] = convertHandles(gqlNode, gqlEdges);
@@ -79,6 +80,7 @@ const toRectangularNode = (
     labelEditable,
     connectionHandles,
     isNew,
+    resizedByUser,
   };
 
   if (insideLabel) {

diff --git a/...ms/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.ts b/...ms/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.ts
@@ -69,5 +69,6 @@ fragment nodeFragment on Node {
   defaultWidth
   defaultHeight
   labelEditable
+  resizedByUser
 }
 `;
diff --git a/...ntend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts b/...ntend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts
@@ -31,6 +31,7 @@ export interface GQLNode<T extends GQLNodeStyle> {
   defaultWidth: number | null;
   defaultHeight: number | null;
   labelEditable: boolean;
+  resizedByUser: boolean;
 }
 
 export interface ILayoutStrategy {

diff --git a/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts b/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts
@@ -62,6 +62,7 @@ export interface NodeData {
   style: React.CSSProperties;
   connectionHandles: ConnectionHandle[];
   isNew: boolean;
+  resizedByUser: boolean;
 }
 
 export enum BorderNodePosition {

diff --git a/...irius-components-diagrams-reactflow/src/renderer/layout-events/useLayoutOnBoundsChange.ts b/...irius-components-diagrams-reactflow/src/renderer/layout-events/useLayoutOnBoundsChange.ts
@@ -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
@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { Node, NodeChange, useReactFlow } from 'reactflow';
+import { Node, NodeChange, NodeDimensionChange, NodePositionChange, useReactFlow } from 'reactflow';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { useDropNode } from '../dropNode/useDropNode';
 import { RawDiagram } from '../layout/layout.types';
@@ -26,31 +26,51 @@ export const useLayoutOnBoundsChange = (refreshEventPayloadId: string): UseLayou
   const { hasDroppedNodeParentChanged } = useDropNode();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
 
-  const isMoveFinished = (change: NodeChange): boolean => {
+  const isMoveFinished = (change: NodeChange): change is NodePositionChange => {
     return (
       change.type === 'position' &&
       typeof change.dragging === 'boolean' &&
       !change.dragging &&
       !hasDroppedNodeParentChanged()
     );
   };
-  const isResizeFinished = (change: NodeChange): boolean =>
+  const isResizeFinished = (change: NodeChange): change is NodeDimensionChange =>
     change.type === 'dimensions' && typeof change.resizing === 'boolean' && !change.resizing;
 
   const isBoundsChangeFinished = (changes: NodeChange[]): NodeChange | undefined => {
     return changes.find((change) => isMoveFinished(change) || isResizeFinished(change));
   };
 
+  const updateNodeResizeByUserState = (
+    changes: NodeChange[],
+    nodes: Node<NodeData, DiagramNodeType>[]
+  ): Node<NodeData, DiagramNodeType>[] => {
+    return nodes.map((node) => {
+      if (changes.filter(isResizeFinished).find((dimensionChange) => dimensionChange.id === node.id)) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            resizedByUser: true,
+          },
+        };
+      }
+      return node;
+    });
+  };
+
   const layoutOnBoundsChange = (changes: NodeChange[], nodes: Node<NodeData, DiagramNodeType>[]): void => {
     const change = isBoundsChangeFinished(changes);
     if (change) {
+      const updatedNodes = updateNodeResizeByUserState(changes, nodes);
+
       const diagramToLayout: RawDiagram = {
-        nodes,
+        nodes: updatedNodes,
         edges: getEdges(),
       };
 
       layout(diagramToLayout, diagramToLayout, null, (laidOutDiagram) => {
-        nodes.map((node) => {
+        updatedNodes.map((node) => {
           const existingNode = laidOutDiagram.nodes.find((laidoutNode) => laidoutNode.id === node.id);
           if (existingNode) {
             return {
@@ -67,10 +87,10 @@ export const useLayoutOnBoundsChange = (refreshEventPayloadId: string): UseLayou
           }
           return node;
         });
-        setNodes(nodes);
+        setNodes(updatedNodes);
         setEdges(laidOutDiagram.edges);
         const finalDiagram: RawDiagram = {
-          nodes: nodes,
+          nodes: updatedNodes,
           edges: laidOutDiagram.edges,
         };
 

diff --git a/...ontend/sirius-components-diagrams-reactflow/src/renderer/layout/ImageNodeLayoutHandler.ts b/...ontend/sirius-components-diagrams-reactflow/src/renderer/layout/ImageNodeLayoutHandler.ts
@@ -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
@@ -124,7 +124,7 @@ export class ImageNodeLayoutHandler implements INodeLayoutHandler<ImageNodeData>
     const previousNode = (previousDiagram?.nodes ?? []).find((previous) => previous.id === node.id);
     const previousDimensions = computePreviousSize(previousNode, node);
 
-    if (node.data.nodeDescription?.userResizable) {
+    if (node.data.resizedByUser) {
       if (minNodeWith > previousDimensions.width) {
         node.width = minNodeWith;
       } else {

diff --git a/...rontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts b/...rontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts
@@ -83,7 +83,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler<ListNodeData> {
     const previousNode = (previousDiagram?.nodes ?? []).find((previouseNode) => previouseNode.id === node.id);
     const previousDimensions = computePreviousSize(previousNode, node);
 
-    if (node.data.nodeDescription?.userResizable) {
+    if (node.data.resizedByUser) {
       if (minNodeWith > previousDimensions.width) {
         node.width = minNodeWith;
       } else {
@@ -127,7 +127,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler<ListNodeData> {
 
     if (!forceWidth) {
       let previousChildrenContentBoxWidthToConsider: number = 0;
-      if (node.data.nodeDescription?.userResizable) {
+      if (node.data.resizedByUser) {
         previousChildrenContentBoxWidthToConsider = (previousNode?.width ?? 0) - borderWidth * 2;
       }
       const widerWidth = Math.max(
@@ -173,8 +173,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler<ListNodeData> {
     node.width = forceWidth ?? getNodeOrMinWidth(nodeWidth, node);
 
     const minNodeheight = getNodeOrMinHeight(nodeHeight, node);
-    // TODO: rework this.
-    if (node.data.nodeDescription?.userResizable && previousNode) {
+    if (node.data.resizedByUser && previousNode) {
       if (minNodeheight > (previousNode.height ?? 0)) {
         node.height = minNodeheight;
       } else {