[3840] Bump to ReactFlow 12

Bug: eclipse-sirius#3840 Signed-off-by: Michaël Charfadi <[email protected]>
jerome-obeo · Oct 10, 2024 · 23d3986 · 23d3986
1 parent 8ae9424
commit 23d3986
Show file tree

Hide file tree

Showing 127 changed files with 1,262 additions and 1,208 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -36,11 +36,14 @@ The new option ALWAYS allows the separator to be displayed in every case.
 This allows an error to be displayed when there is a problem during uploading
 - https://github.com/eclipse-sirius/sirius-web/issues/4037[#4037] [trees] The tree item id passed to `ITreeQueryService.findTreeItem` is no longer a UUID but is now a String.
 - https://github.com/eclipse-sirius/sirius-web/issues/4077[#4077] [charts] Remove `interface RepresentationMetadata` from `BarChart.types.ts`.
+- https://github.com/eclipse-sirius/sirius-web/issues/3840[#3840] [diagram] Migrate to ReactFlow 12, if you have components that uses the library then you'll need to update them.
+
 
 === Dependency update
 
 - [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
 
 
 === Bug fixes

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/diagrams/backend/sirius-components-diagrams-layout-server/package.json b/packages/diagrams/backend/sirius-components-diagrams-layout-server/package.json
@@ -29,6 +29,6 @@
     "vite": "4.3.9",
     "vite-plugin-electron": "0.11.2",
     "vite-plugin-electron-renderer": "0.14.1",
-    "reactflow": "11.10.1"
+    "@xyflow/react": "12.1.1"
   }
 }
diff --git a/packages/diagrams/backend/sirius-components-diagrams-layout-server/src/App.tsx b/packages/diagrams/backend/sirius-components-diagrams-layout-server/src/App.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo and others.
+ * Copyright (c) 2023, 2024 Obeo and others.
  * 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,10 +10,9 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { ReactFlow, useEdgesState, useNodesInitialized, useNodesState } from '@xyflow/react';
 import { useEffect, useState } from 'react';
-import { ReactFlow, useEdgesState, useNodesInitialized, useNodesState } from 'reactflow';
 
-import 'reactflow/dist/style.css';
 import './App.css';
 
 export const App = () => {

diff --git a/packages/diagrams/backend/sirius-components-diagrams-layout-server/src/main.tsx b/packages/diagrams/backend/sirius-components-diagrams-layout-server/src/main.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo and others.
+ * Copyright (c) 2023, 2024 Obeo and others.
  * 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,9 +10,9 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { ReactFlowProvider } from '@xyflow/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ReactFlowProvider } from 'reactflow';
 import { App } from './App.tsx';
 import './index.css';
 

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/package.json b/packages/diagrams/frontend/sirius-components-diagrams/package.json
@@ -40,7 +40,9 @@
     "pathfinding": "0.4.18",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "reactflow": "11.10.1",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@xyflow/react": "12.2.1",
     "tss-react": "4.9.7"
   },
   "devDependencies": {
@@ -62,7 +64,7 @@
     "prettier": "2.7.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "reactflow": "11.10.1",
+    "@xyflow/react": "12.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "tss-react": "4.9.7",
     "typescript": "5.4.5",

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/NodeContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/NodeContext.types.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { NodeProps } from 'reactflow';
+import { NodeProps } from '@xyflow/react';
 import { INodeConverter } from '../converter/ConvertEngine.types';
 import { NodeData } from '../renderer/DiagramRenderer.types';
 import { INodeLayoutHandler } from '../renderer/layout/LayoutEngine.types';

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ConvertEngine.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ConvertEngine.types.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node } from 'reactflow';
+import { Node } from '@xyflow/react';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';

diff --git a/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/IconLabelNodeConverter.ts b/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/IconLabelNodeConverter.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from 'reactflow';
+import { Node, XYPosition } from '@xyflow/react';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -27,7 +27,7 @@ import { IconLabelNodeData } from '../renderer/node/IconsLabelNode.types';
 import { GQLDiagramDescription } from '../representation/DiagramRepresentation.types';
 import { IConvertEngine, INodeConverter } from './ConvertEngine.types';
 import { isListLayoutStrategy } from './convertDiagram';
-import { convertOutsideLabels, convertInsideLabel } from './convertLabel';
+import { convertInsideLabel, convertOutsideLabels } from './convertLabel';
 
 const defaultPosition: XYPosition = { x: 0, y: 0 };
 
@@ -98,7 +98,7 @@ const toIconLabelNode = (
   };
 
   if (gqlParentNode) {
-    node.parentNode = gqlParentNode.id;
+    node.parentId = gqlParentNode.id;
   }
 
   const nodeLayoutData = gqlDiagram.layoutData.nodeLayoutData.filter((data) => data.id === id)[0];

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ImageNodeConverter.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ImageNodeConverter.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from 'reactflow';
+import { Node, XYPosition } from '@xyflow/react';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -104,7 +104,7 @@ const toImageNode = (
   };
 
   if (gqlParentNode) {
-    node.parentNode = gqlParentNode.id;
+    node.parentId = gqlParentNode.id;
   }
 
   const nodeLayoutData = gqlDiagram.layoutData.nodeLayoutData.filter((data) => data.id === id)[0];

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ListNodeConverter.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ListNodeConverter.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from 'reactflow';
+import { Node, XYPosition } from '@xyflow/react';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -20,7 +20,7 @@ import {
   GQLRectangularNodeStyle,
   GQLViewModifier,
 } from '../graphql/subscription/nodeFragment.types';
-import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
+import { BorderNodePosition, NodeData } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
 import { defaultHeight, defaultWidth } from '../renderer/layout/layoutParams';
 import { ListNodeData } from '../renderer/node/ListNode.types';
@@ -119,7 +119,7 @@ const toListNode = (
   };
 
   if (gqlParentNode) {
-    node.parentNode = gqlParentNode.id;
+    node.parentId = gqlParentNode.id;
   }
 
   const nodeLayoutData = gqlDiagram.layoutData.nodeLayoutData.filter((data) => data.id === id)[0];
@@ -144,7 +144,7 @@ const toListNode = (
   return node;
 };
 
-const adaptChildrenBorderNodes = (nodes: Node[], gqlChildrenNodes: GQLNode<GQLNodeStyle>[]): void => {
+const adaptChildrenBorderNodes = (nodes: Node<NodeData>[], gqlChildrenNodes: GQLNode<GQLNodeStyle>[]): void => {
   const visibleChildrenNodes = nodes
     .filter(
       (child) =>
@@ -182,7 +182,7 @@ export class ListNodeConverter implements INodeConverter {
     gqlEdges: GQLEdge[],
     parentNode: GQLNode<GQLNodeStyle> | null,
     isBorderNode: boolean,
-    nodes: Node[],
+    nodes: Node<NodeData>[],
     diagramDescription: GQLDiagramDescription,
     nodeDescriptions: GQLNodeDescription[]
   ) {

diff --git a/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/RectangleNodeConverter.ts b/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/RectangleNodeConverter.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from 'reactflow';
+import { Node, XYPosition } from '@xyflow/react';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -111,7 +111,7 @@ const toRectangularNode = (
   };
 
   if (gqlParentNode) {
-    node.parentNode = gqlParentNode.id;
+    node.parentId = gqlParentNode.id;
   }
 
   const nodeLayoutData = gqlDiagram.layoutData.nodeLayoutData.filter((data) => data.id === id)[0];

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts
@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { Edge, Node } from 'reactflow';
+import { Edge, Node } from '@xyflow/react';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram } from '../graphql/subscription/diagramFragment.types';
 import { GQLLabel } from '../graphql/subscription/labelFragment.types';
@@ -22,7 +22,7 @@ import {
   ILayoutStrategy,
   ListLayoutStrategy,
 } from '../graphql/subscription/nodeFragment.types';
-import { Diagram, EdgeLabel, NodeData } from '../renderer/DiagramRenderer.types';
+import { Diagram, EdgeData, EdgeLabel, NodeData } from '../renderer/DiagramRenderer.types';
 import { DiagramEdgeType } from '../renderer/edge/EdgeTypes.types';
 import { MultiLabelEdgeData } from '../renderer/edge/MultiLabelEdge.types';
 import { RawDiagram } from '../renderer/layout/layout.types';
@@ -41,10 +41,10 @@ const nodeDepth = (nodeId2node: Map<string, Node>, nodeId: string): number => {
   const node = nodeId2node.get(nodeId);
   let depth = 0;
 
-  let parentNode = node?.parentNode ? nodeId2node.get(node.parentNode) : undefined;
+  let parentNode = node?.parentId ? nodeId2node.get(node.parentId) : undefined;
   while (parentNode) {
     depth = depth + 1;
-    parentNode = parentNode.parentNode ? nodeId2node.get(parentNode.parentNode) : undefined;
+    parentNode = parentNode.parentId ? nodeId2node.get(parentNode.parentId) : undefined;
   }
 
   return depth;
@@ -134,13 +134,13 @@ export const convertDiagram = (
     diagramDescription.nodeDescriptions
   );
 
-  const nodeId2node = new Map<string, Node>();
+  const nodeId2node = new Map<string, Node<NodeData>>();
   nodes.forEach((node) => nodeId2node.set(node.id, node));
 
   const nodeId2Depth = new Map<string, number>();
   nodes.forEach((node) => nodeId2Depth.set(node.id, nodeDepth(nodeId2node, node.id)));
   let usedHandles: string[] = [];
-  const edges: Edge[] = gqlDiagram.edges.map((gqlEdge) => {
+  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 data: MultiLabelEdgeData = {
@@ -202,7 +202,7 @@ export const convertDiagram = (
       targetHandle: targetHandle?.id,
       sourceNode: sourceNode,
       targetNode: targetNode,
-      updatable: false,
+      reconnectable: false,
     };
   });
 
@@ -211,14 +211,14 @@ export const convertDiagram = (
     edges,
   };
 
-  const nodeInternals = new Map();
+  const nodeLookUp = new Map();
   nodes.forEach((node) => {
-    nodeInternals.set(node.id, node);
+    nodeLookUp.set(node.id, node);
   });
 
   computeBorderNodeExtents(rawDiagram.nodes);
   computeBorderNodePositions(rawDiagram.nodes);
-  layoutHandles(rawDiagram, diagramDescription, nodeInternals);
+  layoutHandles(rawDiagram, diagramDescription, nodeLookUp);
 
   return {
     nodes: rawDiagram.nodes,

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertHandles.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertHandles.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Position } from 'reactflow';
+import { Position } from '@xyflow/react';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
 import { GQLNode, GQLNodeStyle, GQLViewModifier } from '../graphql/subscription/nodeFragment.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';