Skip to content

Commit b8f1359

Browse files
mcharfadimcharfadi
committed
[releng] Bump to @xyflow/react 12.8.2
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
1 parent e20af00 commit b8f1359

39 files changed

+175
-224
lines changed

‎CHANGELOG.adoc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@
1313

1414
=== Breaking changes
1515

16+
- [releng] Since the bump to `@xyflow/react 12.8.2`, all functions that previously took `Node<NodeData, DiagramNodeType>` as a `parameter` now take `Node<NodeData>`, this should be noticeable on downstream project using custom INodeLayoutHandler.
17+
1618

1719
=== Dependency update
1820

1921
- [releng] Switch to https://github.com/spring-projects/spring-boot/releases/tag/v3.5.4[Spring Boot 3.5.4]
2022
- [releng] Switch to vite 7.1.1 and @vitejs/plugin-react 5.0.0
2123
- [releng] Switch to vitest 3.2.4 and @vitest/coverage-v8 3.2.4
2224
- [releng] Switch to @types/node 22.16.0 to match the version of node that we are using
25+
- [releng] Switch to to @xyflow/react 12.8.2
2326

2427

2528
=== Bug fixes

‎package-lock.json‎

Lines changed: 20 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"react-dom": "18.3.1",
4545
"xstate": "4.32.1",
4646
"@xstate/react": "3.0.0",
47-
"@xyflow/react": "12.6.0",
47+
"@xyflow/react": "12.8.2",
4848
"tss-react": "4.9.16",
4949
"react-resizable-panels": "3.0.2"
5050
},
@@ -71,7 +71,7 @@
7171
"prettier": "2.7.1",
7272
"react": "18.3.1",
7373
"react-dom": "18.3.1",
74-
"@xyflow/react": "12.6.0",
74+
"@xyflow/react": "12.8.2",
7575
"rollup-plugin-peer-deps-external": "2.2.4",
7676
"tss-react": "4.9.16",
7777
"react-resizable-panels": "3.0.2",

‎packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import { layoutHandles } from '../renderer/layout/layoutHandles';
3434
import { updateHandleViewModifier } from '../renderer/layout/updateHandleViewModifier';
3535
import { GQLEdgeLayoutData } from '../renderer/layout/useSynchronizeLayoutData.types';
3636
import { EdgeAnchorNodeData } from '../renderer/node/EdgeAnchorNode.types';
37-
import { DiagramNodeType } from '../renderer/node/NodeTypes.types';
3837
import { GQLDiagramDescription } from '../representation/DiagramRepresentation.types';
3938
import { IConvertEngine, INodeConverter } from './ConvertEngine.types';
4039
import { IconLabelNodeConverter } from './IconLabelNodeConverter';
@@ -126,7 +125,7 @@ export const convertDiagram = (
126125
edgeType: DiagramEdgeType,
127126
state: ReactFlowState<Node<NodeData>, Edge<EdgeData>>
128127
): Diagram => {
129-
const nodes: Node<NodeData, DiagramNodeType>[] = [];
128+
const nodes: Node<NodeData>[] = [];
130129
const convertEngine: IConvertEngine = {
131130
convertNodes(
132131
gqlDiagram: GQLDiagram,

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.types.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,13 @@ import { GQLLabelStyle } from '../graphql/subscription/labelFragment.types';
1818
import { GQLNodeStyle } from '../graphql/subscription/nodeFragment.types';
1919
import { MultiLabelEdgeData } from './edge/MultiLabelEdge.types';
2020
import { ConnectionHandle } from './handles/ConnectionHandles.types';
21-
import { DiagramNodeType } from './node/NodeTypes.types';
2221

2322
export interface DiagramRendererProps {
2423
diagramRefreshedEventPayload: GQLDiagramRefreshedEventPayload;
2524
}
2625

2726
export interface Diagram {
28-
nodes: Node<NodeData, DiagramNodeType>[];
27+
nodes: Node<NodeData>[];
2928
edges: Edge<MultiLabelEdgeData>[];
3029
}
3130

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { EdgeData, NodeData } from '../DiagramRenderer.types';
1515
import { RawDiagram } from '../layout/layout.types';
1616
import { useLayout } from '../layout/useLayout';
1717
import { useSynchronizeLayoutData } from '../layout/useSynchronizeLayoutData';
18-
import { DiagramNodeType } from '../node/NodeTypes.types';
1918
import { UseAdjustSizeValue } from './useAdjustSize.types';
2019

2120
export const useAdjustSize = (): UseAdjustSizeValue => {
@@ -24,9 +23,9 @@ export const useAdjustSize = (): UseAdjustSizeValue => {
2423
const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
2524

2625
const adjustSize = (nodeId: string): void => {
27-
const nodes: Node<NodeData, string>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];
28-
const targetedNode: Node<NodeData, string> | undefined = nodes.find((node) => node.id === nodeId);
29-
const childNodes: Node<NodeData, string>[] | [] = nodes
26+
const nodes: Node<NodeData>[] = [...getNodes()];
27+
const targetedNode: Node<NodeData> | undefined = nodes.find((node) => node.id === nodeId);
28+
const childNodes: Node<NodeData>[] | [] = nodes
3029
.filter((node) => node.parentId === nodeId)
3130
.map((node) => {
3231
node.data.resizedByUser = true;

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/border/useBorderChange.tsx‎

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*******************************************************************************
2-
* Copyright (c) 2023, 2024 Obeo.
2+
* Copyright (c) 2023, 2025 Obeo.
33
* This program and the accompanying materials
44
* are made available under the terms of the Eclipse Public License v2.0
55
* which accompanies this distribution, and is available at
@@ -18,7 +18,6 @@ import { BorderNodePosition, EdgeData, NodeData } from '../DiagramRenderer.types
1818
import { findBorderNodePosition } from '../layout/layoutBorderNodes';
1919
import { getPositionAbsoluteFromNodeChange } from '../layout/layoutNode';
2020
import { borderNodeOffset } from '../layout/layoutParams';
21-
import { DiagramNodeType } from '../node/NodeTypes.types';
2221
import { UseBorderChangeValue } from './useBorderChange.types';
2322

2423
const isNewPositionInsideIsParent = (
@@ -73,51 +72,51 @@ export const useBorderChange = (): UseBorderChangeValue => {
7372
const movedNode = nodeLookup.get(change.id || '');
7473
if (movedNode && movedNode.data.isBorderNode && movedNodePositionAbsolute) {
7574
const parentNode = nodeLookup.get(movedNode.parentId || '');
75+
if (parentNode) {
76+
const parentLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) =>
77+
nodeLayoutHandler.canHandle(parentNode)
78+
);
7679

77-
const parentLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) =>
78-
nodeLayoutHandler.canHandle(parentNode as Node<NodeData, DiagramNodeType>)
79-
);
80-
if (
81-
parentNode &&
82-
isNewPositionInsideIsParent(movedNodePositionAbsolute, movedNode, parentNode) &&
83-
!parentLayoutHandler?.calculateCustomNodeBorderNodePosition
84-
) {
85-
const nearestBorder = findNearestBorderPosition(movedNodePositionAbsolute, parentNode);
86-
switch (nearestBorder) {
87-
case BorderNodePosition.NORTH:
88-
change.position.y = borderNodeOffset - (movedNode.height ?? 0);
89-
break;
90-
case BorderNodePosition.SOUTH:
91-
change.position.y = (parentNode.height ?? 0) - borderNodeOffset;
92-
break;
93-
case BorderNodePosition.WEST:
94-
change.position.x = borderNodeOffset - (movedNode.width ?? 0);
95-
break;
96-
case BorderNodePosition.EAST:
97-
change.position.x = (parentNode.width ?? 0) - borderNodeOffset;
98-
break;
99-
default: //Invalid position, reset to the initial one
100-
change.position = movedNode.position;
80+
if (
81+
isNewPositionInsideIsParent(movedNodePositionAbsolute, movedNode, parentNode) &&
82+
!parentLayoutHandler?.calculateCustomNodeBorderNodePosition
83+
) {
84+
const nearestBorder = findNearestBorderPosition(movedNodePositionAbsolute, parentNode);
85+
switch (nearestBorder) {
86+
case BorderNodePosition.NORTH:
87+
change.position.y = borderNodeOffset - (movedNode.height ?? 0);
88+
break;
89+
case BorderNodePosition.SOUTH:
90+
change.position.y = (parentNode.height ?? 0) - borderNodeOffset;
91+
break;
92+
case BorderNodePosition.WEST:
93+
change.position.x = borderNodeOffset - (movedNode.width ?? 0);
94+
break;
95+
case BorderNodePosition.EAST:
96+
change.position.x = (parentNode.width ?? 0) - borderNodeOffset;
97+
break;
98+
default: //Invalid position, reset to the initial one
99+
change.position = movedNode.position;
100+
}
101+
}
102+
const oldMovedNode = oldNodes.find((n) => n.id === movedNode.id);
103+
const newPosition = findBorderNodePosition(change.position, movedNode, parentNode);
104+
if (oldMovedNode && oldMovedNode.data.borderNodePosition !== newPosition) {
105+
oldMovedNode.data.borderNodePosition = newPosition;
101106
}
102-
}
103-
104-
const oldMovedNode = oldNodes.find((n) => n.id === movedNode.id);
105-
const newPosition = findBorderNodePosition(change.position, movedNode, parentNode);
106-
if (oldMovedNode && oldMovedNode.data.borderNodePosition !== newPosition) {
107-
oldMovedNode.data.borderNodePosition = newPosition;
108-
}
109107

110-
if (parentLayoutHandler?.calculateCustomNodeBorderNodePosition && parentNode) {
111-
change.position = parentLayoutHandler.calculateCustomNodeBorderNodePosition(
112-
parentNode,
113-
{
114-
x: change.position.x,
115-
y: change.position.y,
116-
width: movedNode.width ?? 0,
117-
height: movedNode.height ?? 0,
118-
},
119-
true
120-
);
108+
if (parentLayoutHandler?.calculateCustomNodeBorderNodePosition && parentNode) {
109+
change.position = parentLayoutHandler.calculateCustomNodeBorderNodePosition(
110+
parentNode,
111+
{
112+
x: change.position.x,
113+
y: change.position.y,
114+
width: movedNode.width ?? 0,
115+
height: movedNode.height ?? 0,
116+
},
117+
true
118+
);
119+
}
121120
}
122121
}
123122
}

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNode.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,15 +171,13 @@ export const useDropNode = (): UseDropNodeValue => {
171171
const computedNode = getDraggableNode(node);
172172

173173
const dropDataEntry: GQLDropNodeCompatibility | undefined = diagramDescription.dropNodeCompatibility.find(
174-
(entry) => entry.droppedNodeDescriptionId === (computedNode as Node<NodeData>).data.descriptionId
174+
(entry) => entry.droppedNodeDescriptionId === computedNode.data.descriptionId
175175
);
176176
const compatibleNodes = getNodes()
177177
.filter(
178178
(candidate) => !candidate.hidden && !isDescendantOf(computedNode, candidate, storeApi.getState().nodeLookup)
179179
)
180-
.filter((candidate) =>
181-
dropDataEntry?.droppableOnNodeTypes.includes((candidate as Node<NodeData>).data.descriptionId)
182-
)
180+
.filter((candidate) => dropDataEntry?.droppableOnNodeTypes.includes(candidate.data.descriptionId))
183181
.map((candidate) => candidate.id);
184182

185183
initializeDrop({

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/SmartStepEdgeWrapper.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import { memo, useContext, useMemo } from 'react';
2525
import { NodeTypeContext } from '../../contexts/NodeContext';
2626
import { NodeTypeContextValue } from '../../contexts/NodeContext.types';
2727
import { EdgeData, NodeData } from '../DiagramRenderer.types';
28-
import { DiagramNodeType } from '../node/NodeTypes.types';
2928
import { getHandleCoordinatesByPosition } from './EdgeLayout';
3029
import { MultiLabelEdge } from './MultiLabelEdge';
3130
import { MultiLabelEdgeData } from './MultiLabelEdge.types';
@@ -102,12 +101,8 @@ export const SmartStepEdgeWrapper = memo((props: EdgeProps<Edge<MultiLabelEdgeDa
102101
return null;
103102
}
104103

105-
const sourceLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) =>
106-
nodeLayoutHandler.canHandle(sourceNode as Node<NodeData, DiagramNodeType>)
107-
);
108-
const targetLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) =>
109-
nodeLayoutHandler.canHandle(targetNode as Node<NodeData, DiagramNodeType>)
110-
);
104+
const sourceLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) => nodeLayoutHandler.canHandle(sourceNode));
105+
const targetLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) => nodeLayoutHandler.canHandle(targetNode));
111106

112107
let { x: sourceX, y: sourceY } = getHandleCoordinatesByPosition(
113108
sourceNode,

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/SmoothStepEdgeWrapper.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import parse from 'svg-path-parser';
2525
import { NodeTypeContext } from '../../contexts/NodeContext';
2626
import { NodeTypeContextValue } from '../../contexts/NodeContext.types';
2727
import { NodeData } from '../DiagramRenderer.types';
28-
import { DiagramNodeType } from '../node/NodeTypes.types';
2928
import { getHandleCoordinatesByPosition } from './EdgeLayout';
3029
import { MultiLabelEdgeData } from './MultiLabelEdge.types';
3130
import { MultiLabelRectilinearEditableEdge } from './rectilinear-edge/MultiLabelRectilinearEditableEdge';
@@ -55,12 +54,8 @@ export const SmoothStepEdgeWrapper = memo((props: EdgeProps<Edge<MultiLabelEdgeD
5554
return null;
5655
}
5756

58-
const sourceLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) =>
59-
nodeLayoutHandler.canHandle(sourceNode as Node<NodeData, DiagramNodeType>)
60-
);
61-
const targetLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) =>
62-
nodeLayoutHandler.canHandle(targetNode as Node<NodeData, DiagramNodeType>)
63-
);
57+
const sourceLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) => nodeLayoutHandler.canHandle(sourceNode));
58+
const targetLayoutHandler = nodeLayoutHandlers.find((nodeLayoutHandler) => nodeLayoutHandler.canHandle(targetNode));
6459

6560
let { x: sourceX, y: sourceY } = getHandleCoordinatesByPosition(
6661
sourceNode,

0 commit comments

Comments
 (0)