[releng] Bump to @xyflow/react 12.8.2

Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>

Author: mcharfadi

CHANGELOG.adoc

@@ -39,6 +39,7 @@ The code responsible for the import has been refactor with:
 - [releng] Remove the dependency to xstate
 - [releng] Switch to AQL 8.1.0 from https://download.eclipse.org/acceleo/updates/releases/4.2/R202510230846/[Acceleo 4.2.0].
 This also includes an update from ANTLR 4.10.1 to 4.13.2.
+- [releng] Switch to @xyflow/react 12.8.2
 
 
 === Bug fixes

package-lock.json

@@ -42,7 +42,7 @@
     "react-draggable": "4.4.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@xyflow/react": "12.6.0",
+    "@xyflow/react": "12.8.2",
     "tss-react": "4.9.16",
     "react-resizable-panels": "3.0.2"
   },
@@ -67,7 +67,7 @@
     "prettier": "2.7.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@xyflow/react": "12.6.0",
+    "@xyflow/react": "12.8.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "tss-react": "4.9.16",
     "react-resizable-panels": "3.0.2",

packages/diagrams/frontend/sirius-components-diagrams/package.json

@@ -24,9 +24,9 @@ export const useAdjustSize = (): UseAdjustSizeValue => {
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
 
   const adjustSize = (nodeId: string): void => {
-    const nodes: Node<NodeData, string>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];
-    const targetedNode: Node<NodeData, string> | undefined = nodes.find((node) => node.id === nodeId);
-    const childNodes: Node<NodeData, string>[] | [] = nodes
+    const nodes: Node<NodeData, string | undefined>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];
+    const targetedNode: Node<NodeData, string | undefined> | undefined = nodes.find((node) => node.id === nodeId);
+    const childNodes: Node<NodeData, string | undefined>[] | [] = nodes
       .filter((node) => node.parentId === nodeId)
       .map((node) => {
         node.data.resizedByUser = true;

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx

@@ -26,8 +26,8 @@ import {
   getDefaultOrMinHeight,
   getDefaultOrMinWidth,
   getEastBorderNodeFootprintHeight,
-  getInsideLabelWidthConstraint,
   getHeaderHeightFootprint,
+  getInsideLabelWidthConstraint,
   getNorthBorderNodeFootprintWidth,
   getSouthBorderNodeFootprintWidth,
   getWestBorderNodeFootprintHeight,
@@ -135,7 +135,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler<ListNodeData> {
     const northBorderNodeFootprintWidth = getNorthBorderNodeFootprintWidth(visibleNodes, borderNodes, previousDiagram);
     const southBorderNodeFootprintWidth = getSouthBorderNodeFootprintWidth(visibleNodes, borderNodes, previousDiagram);
 
-    const previousNode: Node<NodeData, string> | undefined = (previousDiagram?.nodes ?? []).find(
+    const previousNode: Node<NodeData, string | undefined> | undefined = (previousDiagram?.nodes ?? []).find(
       (previouseNode) => previouseNode.id === node.id
     );
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/ListNodeLayoutHandler.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023, 2024 Obeo.
+ * Copyright (c) 2023, 2025 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
@@ -16,8 +16,8 @@ import { NodeData } from '../DiagramRenderer.types';
 import { defaultHeight, defaultWidth } from './layoutParams';
 
 export const computePreviousPosition = (
-  previousNode: Node<NodeData, string> | undefined,
-  node: Node<NodeData, string>
+  previousNode: Node<NodeData, string | undefined> | undefined,
+  node: Node<NodeData, string | undefined>
 ): XYPosition | null => {
   let previousPosition: XYPosition | null = null;
   if (node.data.isNew) {
@@ -50,8 +50,8 @@ export const computePreviousPosition = (
 };
 
 export const computePreviousSize = (
-  previousNode: Node<NodeData, string> | undefined,
-  node: Node<NodeData, string>
+  previousNode: Node<NodeData, string | undefined> | undefined,
+  node: Node<NodeData, string | undefined>
 ): Dimensions => {
   let previousDimensions: Dimensions;
   const nodeDefaultHeight: number = node.data.defaultHeight ?? defaultHeight;

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/bounds.ts

@@ -93,7 +93,7 @@ export const findBorderNodePosition = (
 
 export const getNewlyAddedBorderNodePosition = (
   newlyAddedNode: Node<NodeData, DiagramNodeType>,
-  parentNode: Node<NodeData, string> | undefined,
+  parentNode: Node<NodeData, string | undefined> | undefined,
   referencePosition: GQLReferencePosition
 ): void => {
   if (parentNode) {

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layoutBorderNodes.ts

@@ -251,7 +251,7 @@ const getRightMostSibling = (
 };
 
 export const setBorderNodesPosition = (
-  borderNodes: Node<NodeData, string>[],
+  borderNodes: Node<NodeData, string | undefined>[],
   nodeToLayout: Node<NodeData>,
   previousDiagram: RawDiagram | null,
   calculateCustomNodeBorderNodePosition?:

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layoutNode.ts

@@ -33,8 +33,13 @@ function reverseOrdreMap<K, V>(map: Map<K, V>): Map<K, V> {
   return new Map<K, V>(reversedNodes);
 }
 
-const getSubNodes = (nodes: Node<NodeData, string>[]): Map<string, Node<NodeData, string>[]> => {
-  const subNodes: Map<string, Node<NodeData, string>[]> = new Map<string, Node<NodeData, string>[]>();
+const getSubNodes = (
+  nodes: Node<NodeData, string | undefined>[]
+): Map<string, Node<NodeData, string | undefined>[]> => {
+  const subNodes: Map<string, Node<NodeData, string | undefined>[]> = new Map<
+    string,
+    Node<NodeData, string | undefined>[]
+  >();
   for (const node of nodes.filter((n) => !n.hidden)) {
     const parentNodeId: string = node.parentId ?? 'root';
     if (!subNodes.has(parentNodeId)) {
@@ -168,10 +173,10 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
   };
 
   const applyElkOnSubNodes = async (
-    subNodes: Map<string, Node<NodeData, string>[]>,
-    allNodes: Node<NodeData, string>[]
-  ): Promise<Node<NodeData, string>[]> => {
-    let layoutedAllNodes: Node<NodeData, string>[] = [];
+    subNodes: Map<string, Node<NodeData, string | undefined>[]>,
+    allNodes: Node<NodeData, string | undefined>[]
+  ): Promise<Node<NodeData, string | undefined>[]> => {
+    let layoutedAllNodes: Node<NodeData, string | undefined>[] = [];
     const parentNodeWithNewSize: Node<NodeData>[] = [];
     const edges: Edge<EdgeData>[] = getEdges();
     for (const [parentNodeId, nodes] of subNodes) {
@@ -231,10 +236,10 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
   };
 
   const arrangeAll = async (): Promise<void> => {
-    const nodes: Node<NodeData, string>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];
-    const subNodes: Map<string, Node<NodeData, string>[]> = reverseOrdreMap(getSubNodes(nodes));
-    await applyElkOnSubNodes(subNodes, nodes).then(async (nodes: Node<NodeData, string>[]) => {
-      const laidOutNodesWithElk: Node<NodeData, string>[] = nodes.reverse();
+    const nodes: Node<NodeData, string | undefined>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];
+    const subNodes: Map<string, Node<NodeData, string | undefined>[]> = reverseOrdreMap(getSubNodes(nodes));
+    await applyElkOnSubNodes(subNodes, nodes).then(async (nodes: Node<NodeData, string | undefined>[]) => {
+      const laidOutNodesWithElk: Node<NodeData, string | undefined>[] = nodes.reverse();
       laidOutNodesWithElk.filter((laidOutNode) => {
         const parentNode = nodes.find((node) => node.id === laidOutNode.parentId);
         return !parentNode || !isListData(parentNode);
@@ -258,7 +263,7 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
       };
       const layoutPromise = new Promise<void>((resolve) => {
         layout(diagramToLayout, diagramToLayout, null, (laidOutDiagram) => {
-          const overlapFreeLaidOutNodes: Node<NodeData, string>[] = resolveNodeOverlap(
+          const overlapFreeLaidOutNodes: Node<NodeData, string | undefined>[] = resolveNodeOverlap(
             laidOutDiagram.nodes.filter((n) => !n.data.isBorderNode),
             'horizontal'
           ) as Node<NodeData, DiagramNodeType>[];

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023, 2024 Obeo.
+ * Copyright (c) 2023, 2025 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,8 +14,8 @@
 import { NodeProps } from '@xyflow/react';
 import { ComponentType } from 'react';
 
-export type DiagramNodeType = string;
+export type DiagramNodeType = string | undefined;
 
 export type DiagramNodeTypes = {
-  [key in DiagramNodeType]: ComponentType<NodeProps>;
+  [key in DiagramNodeType as string]: ComponentType<NodeProps>;
 };