Skip to content

Commit 5533a86

Browse files
hmusovicCFhmusovicCF
committed
Bump reactflow version to v12
1 parent cb92677 commit 5533a86

File tree

22 files changed

+132
-780
lines changed

22 files changed

+132
-780
lines changed

‎.storybook/preview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import 'reactflow/dist/style.css'
1+
import '@xyflow/react/dist/style.css'
22

33
// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
44
export const parameters = {

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"editor.defaultFormatter": "esbenp.prettier-vscode",
33
"editor.formatOnSave": true,
44
"editor.codeActionsOnSave": {
5-
"source.fixAll.eslint": true
5+
"source.fixAll.eslint": "explicit"
66
},
77
"[html]": {
88
"editor.defaultFormatter": "esbenp.prettier-vscode"

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "@tisoap/react-flow-smart-edge",
3-
"version": "3.0.0",
2+
"name": "@cloudfactory/react-flow-smart-edge",
3+
"version": "1.0.0",
44
"keywords": [
55
"react",
66
"typescript",
@@ -86,6 +86,7 @@
8686
"@types/react-dom": "^18.0.9",
8787
"@typescript-eslint/eslint-plugin": "^6.6.0",
8888
"@typescript-eslint/parser": "^6.6.0",
89+
"@xyflow/react": "^12.3.5",
8990
"chromatic": "^7.1.0",
9091
"concurrently": "^8.2.1",
9192
"dts-cli": "^2.0.3",
@@ -114,7 +115,6 @@
114115
"prettier": "^3.0.3",
115116
"react": "^18.2.0",
116117
"react-dom": "^18.2.0",
117-
"reactflow": "^11.2.0",
118118
"require-from-string": "^2.0.2",
119119
"storybook": "^7.4.0",
120120
"string-width": "^4.2.3",

‎src/SmartBezierEdge/index.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1+
import { useNodes, BezierEdge } from '@xyflow/react'
12
import React from 'react'
2-
import { useNodes, BezierEdge } from 'reactflow'
33
import { SmartEdge } from '../SmartEdge'
44
import { svgDrawSmoothLinePath, pathfindingAStarDiagonal } from '../functions'
55
import type { SmartEdgeOptions } from '../SmartEdge'
6-
import type { EdgeProps } from 'reactflow'
6+
import type { EdgeProps, Node } from '@xyflow/react'
7+
import type {
8+
DefaultEdgeDataType,
9+
DefaultNodeDataType
10+
} from 'SmartEdge/SmartEdge.types'
711

812
const BezierConfiguration: SmartEdgeOptions = {
913
drawEdge: svgDrawSmoothLinePath,
1014
generatePath: pathfindingAStarDiagonal,
1115
fallback: BezierEdge
1216
}
1317

14-
export function SmartBezierEdge<EdgeDataType = unknown, NodeDataType = unknown>(
15-
props: EdgeProps<EdgeDataType>
16-
) {
17-
const nodes = useNodes<NodeDataType>()
18+
export function SmartBezierEdge<
19+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
20+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
21+
>(props: EdgeProps<EdgeDataType>) {
22+
const nodes = useNodes<Node<NodeDataType>>()
1823

1924
return (
2025
<SmartEdge<EdgeDataType, NodeDataType>

‎src/SmartEdge/SmartEdge.types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { Edge } from '@xyflow/react'
2+
3+
export type DefaultEdgeDataType = Edge<
4+
Record<string, unknown>,
5+
string | undefined
6+
>
7+
export type DefaultNodeDataType = Record<string, unknown>

‎src/SmartEdge/index.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
1+
import { BezierEdge, BaseEdge } from '@xyflow/react'
12
import React from 'react'
2-
import { BezierEdge, BaseEdge } from 'reactflow'
33
import { getSmartEdge } from '../getSmartEdge'
4+
import type {
5+
DefaultEdgeDataType,
6+
DefaultNodeDataType
7+
} from './SmartEdge.types'
48
import type { GetSmartEdgeOptions } from '../getSmartEdge'
5-
import type { EdgeProps, Node } from 'reactflow'
9+
import type { EdgeProps, Node, StepEdge, StraightEdge } from '@xyflow/react'
610

7-
export type EdgeElement = typeof BezierEdge
11+
export type EdgeElement =
12+
| typeof BezierEdge
13+
| typeof StepEdge
14+
| typeof StraightEdge
815

916
export type SmartEdgeOptions = GetSmartEdgeOptions & {
1017
fallback?: EdgeElement
1118
}
1219

13-
export interface SmartEdgeProps<EdgeDataType = unknown, NodeDataType = unknown>
14-
extends EdgeProps<EdgeDataType> {
20+
export interface SmartEdgeProps<
21+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
22+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
23+
> extends EdgeProps<EdgeDataType> {
1524
nodes: Node<NodeDataType>[]
1625
options: SmartEdgeOptions
1726
}
1827

19-
export function SmartEdge<EdgeDataType = unknown, NodeDataType = unknown>({
28+
export function SmartEdge<
29+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
30+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
31+
>({
2032
nodes,
2133
options,
2234
...edgeProps

‎src/SmartStepEdge/index.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
1+
import { useNodes, StepEdge } from '@xyflow/react'
12
import React from 'react'
2-
import { useNodes, StepEdge } from 'reactflow'
33
import { SmartEdge } from '../SmartEdge'
44
import {
55
svgDrawStraightLinePath,
66
pathfindingJumpPointNoDiagonal
77
} from '../functions'
88
import type { SmartEdgeOptions } from '../SmartEdge'
9-
import type { EdgeProps } from 'reactflow'
9+
import type { EdgeProps, Node } from '@xyflow/react'
10+
import type {
11+
DefaultEdgeDataType,
12+
DefaultNodeDataType
13+
} from 'SmartEdge/SmartEdge.types'
1014

1115
const StepConfiguration: SmartEdgeOptions = {
1216
drawEdge: svgDrawStraightLinePath,
1317
generatePath: pathfindingJumpPointNoDiagonal,
1418
fallback: StepEdge
1519
}
1620

17-
export function SmartStepEdge<EdgeDataType = unknown, NodeDataType = unknown>(
18-
props: EdgeProps<EdgeDataType>
19-
) {
20-
const nodes = useNodes<NodeDataType>()
21+
export function SmartStepEdge<
22+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
23+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
24+
>(props: EdgeProps<EdgeDataType>) {
25+
const nodes = useNodes<Node<NodeDataType>>()
2126

2227
return (
2328
<SmartEdge<EdgeDataType, NodeDataType>

‎src/SmartStraightEdge/index.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
import { useNodes, StraightEdge } from '@xyflow/react'
12
import React from 'react'
2-
import { useNodes, StraightEdge } from 'reactflow'
33
import { SmartEdge } from '../SmartEdge'
44
import {
55
svgDrawStraightLinePath,
66
pathfindingAStarNoDiagonal
77
} from '../functions'
88
import type { SmartEdgeOptions } from '../SmartEdge'
9-
import type { EdgeProps } from 'reactflow'
9+
import type { EdgeProps, Node } from '@xyflow/react'
10+
import type {
11+
DefaultEdgeDataType,
12+
DefaultNodeDataType
13+
} from 'SmartEdge/SmartEdge.types'
1014

1115
const StraightConfiguration: SmartEdgeOptions = {
1216
drawEdge: svgDrawStraightLinePath,
@@ -15,10 +19,10 @@ const StraightConfiguration: SmartEdgeOptions = {
1519
}
1620

1721
export function SmartStraightEdge<
18-
EdgeDataType = unknown,
19-
NodeDataType = unknown
22+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
23+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
2024
>(props: EdgeProps<EdgeDataType>) {
21-
const nodes = useNodes<NodeDataType>()
25+
const nodes = useNodes<Node<NodeDataType>>()
2226

2327
return (
2428
<SmartEdge<EdgeDataType, NodeDataType>

‎src/functions/createGrid.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
import { graphToGridPoint } from './pointConversion'
77
import { round, roundUp } from './utils'
88
import type { NodeBoundingBox, GraphBoundingBox } from './getBoundingBoxes'
9-
import type { Position } from 'reactflow'
9+
import type { Position } from '@xyflow/react'
1010

1111
export type PointInfo = {
1212
x: number

‎src/functions/drawSvgPath.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { XYPosition } from 'reactflow'
1+
import type { XYPosition } from '@xyflow/react'
22

33
/**
44
* Takes source and target {x, y} points, together with an array of number

0 commit comments

Comments
 (0)