Skip to content

Commit 4841f57

Browse files
hmusovicCFhmusovicCF
committed
Bump reactflow version to v12
1 parent cb92677 commit 4841f57

22 files changed

+176
-337
lines changed

Diff for: ‎.storybook/preview.js

+1-1
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 = {

Diff for: ‎.vscode/settings.json

+1-1
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"

Diff for: ‎package.json

+3-3
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",

Diff for: ‎src/SmartBezierEdge/index.tsx

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
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 const SmartBezierEdge: React.FC<EdgeProps<DefaultEdgeDataType>> = (
19+
props
20+
) => {
21+
return <SmartBezierEdgeInner {...props} />
22+
}
23+
24+
function SmartBezierEdgeInner<
25+
TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
26+
TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
27+
>(props: EdgeProps<TEdgeDataType>) {
28+
const nodes = useNodes<Node<TNodeDataType>>()
1829

1930
return (
20-
<SmartEdge<EdgeDataType, NodeDataType>
31+
<SmartEdge<TEdgeDataType, TNodeDataType>
2132
{...props}
2233
options={BezierConfiguration}
2334
nodes={nodes}

Diff for: ‎src/SmartEdge/SmartEdge.types.ts

+7
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>

Diff for: ‎src/SmartEdge/index.tsx

+20-8
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,38 @@
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> {
15-
nodes: Node<NodeDataType>[]
20+
export interface SmartEdgeProps<
21+
TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
22+
TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
23+
> extends EdgeProps<TEdgeDataType> {
24+
nodes: Node<TNodeDataType>[]
1625
options: SmartEdgeOptions
1726
}
1827

19-
export function SmartEdge<EdgeDataType = unknown, NodeDataType = unknown>({
28+
export function SmartEdge<
29+
TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
30+
TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
31+
>({
2032
nodes,
2133
options,
2234
...edgeProps
23-
}: SmartEdgeProps<EdgeDataType, NodeDataType>) {
35+
}: SmartEdgeProps<TEdgeDataType, TNodeDataType>) {
2436
const {
2537
sourceX,
2638
sourceY,

Diff for: ‎src/SmartStepEdge/index.tsx

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
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 const SmartStepEdge: React.FC<EdgeProps<DefaultEdgeDataType>> = (
22+
props
23+
) => {
24+
return <SmartStepEdgeInner {...props} />
25+
}
26+
27+
function SmartStepEdgeInner<
28+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
29+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
30+
>(props: EdgeProps<EdgeDataType>) {
31+
const nodes = useNodes<Node<NodeDataType>>()
2132

2233
return (
2334
<SmartEdge<EdgeDataType, NodeDataType>

Diff for: ‎src/SmartStraightEdge/index.tsx

+16-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
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,
1317
generatePath: pathfindingAStarNoDiagonal,
1418
fallback: StraightEdge
1519
}
1620

17-
export function SmartStraightEdge<
18-
EdgeDataType = unknown,
19-
NodeDataType = unknown
21+
export const SmartStraightEdge: React.FC<EdgeProps<DefaultEdgeDataType>> = (
22+
props
23+
) => {
24+
return <SmartStraightEdgeInner {...props} />
25+
}
26+
27+
function SmartStraightEdgeInner<
28+
EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
29+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
2030
>(props: EdgeProps<EdgeDataType>) {
21-
const nodes = useNodes<NodeDataType>()
31+
const nodes = useNodes<Node<NodeDataType>>()
2232

2333
return (
2434
<SmartEdge<EdgeDataType, NodeDataType>

Diff for: ‎src/functions/createGrid.ts

+1-1
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

Diff for: ‎src/functions/drawSvgPath.ts

+1-1
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

Diff for: ‎src/functions/generatePath.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import {
1111
Util,
1212
DiagonalMovement
1313
} from 'pathfinding'
14+
import type { XYPosition } from '@xyflow/react'
1415
import type { Grid } from 'pathfinding'
15-
import type { XYPosition } from 'reactflow'
1616

1717
/**
1818
* Takes source and target {x, y} points, together with an grid representation

Diff for: ‎src/functions/getBoundingBoxes.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { roundUp, roundDown } from './utils'
2-
import type { Node, XYPosition } from 'reactflow'
2+
import type { Node, XYPosition } from '@xyflow/react'
3+
import type { DefaultNodeDataType } from 'SmartEdge/SmartEdge.types'
34

45
export type NodeBoundingBox = {
56
id: string
@@ -33,7 +34,9 @@ export type GraphBoundingBox = {
3334
* @param roundTo Everything will be rounded to this nearest integer
3435
* @returns Graph and nodes bounding boxes.
3536
*/
36-
export const getBoundingBoxes = <NodeDataType = unknown>(
37+
export const getBoundingBoxes = <
38+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
39+
>(
3740
nodes: Node<NodeDataType>[],
3841
nodePadding = 2,
3942
roundTo = 2
@@ -44,12 +47,11 @@ export const getBoundingBoxes = <NodeDataType = unknown>(
4447
let yMin = Number.MAX_SAFE_INTEGER
4548

4649
const nodeBoxes: NodeBoundingBox[] = nodes.map((node) => {
47-
const width = Math.max(node.width || 0, 1)
48-
const height = Math.max(node.height || 0, 1)
50+
const { width = 1, height = 1 } = node.measured || {}
4951

5052
const position: XYPosition = {
51-
x: node.positionAbsolute?.x || 0,
52-
y: node.positionAbsolute?.y || 0
53+
x: node.position.x || 0,
54+
y: node.position.y || 0
5355
}
5456

5557
const topLeft: XYPosition = {

Diff for: ‎src/functions/guaranteeWalkablePath.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import type { Position, XYPosition } from '@xyflow/react'
12
import type { Grid } from 'pathfinding'
2-
import type { Position, XYPosition } from 'reactflow'
33

44
type Direction = 'top' | 'bottom' | 'left' | 'right'
55

Diff for: ‎src/functions/pointConversion.ts

+1-1
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
* Each bounding box is a collection of X/Y points in a graph, and we

Diff for: ‎src/getSmartEdge/index.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import type {
1111
PathFindingFunction,
1212
SVGDrawFunction
1313
} from '../functions'
14-
import type { Node, EdgeProps } from 'reactflow'
14+
import type { Node, EdgeProps } from '@xyflow/react'
15+
import type { DefaultNodeDataType } from 'SmartEdge/SmartEdge.types'
1516

1617
export type EdgeParams = Pick<
1718
EdgeProps,
@@ -30,7 +31,9 @@ export type GetSmartEdgeOptions = {
3031
generatePath?: PathFindingFunction
3132
}
3233

33-
export type GetSmartEdgeParams<NodeDataType = unknown> = EdgeParams & {
34+
export type GetSmartEdgeParams<
35+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
36+
> = EdgeParams & {
3437
options?: GetSmartEdgeOptions
3538
nodes: Node<NodeDataType>[]
3639
}
@@ -41,7 +44,9 @@ export type GetSmartEdgeReturn = {
4144
edgeCenterY: number
4245
}
4346

44-
export const getSmartEdge = <NodeDataType = unknown>({
47+
export const getSmartEdge = <
48+
NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
49+
>({
4550
options = {},
4651
nodes = [],
4752
sourceX,

Diff for: ‎src/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { SmartBezierEdge } from './SmartBezierEdge'
22

33
export * from './SmartEdge'
4+
export * from './SmartEdge/SmartEdge.types'
45
export * from './SmartBezierEdge'
56
export * from './SmartStepEdge'
67
export * from './SmartStraightEdge'

Diff for: ‎src/stories/CustomLabel.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1+
import { useNodes, BezierEdge } from '@xyflow/react'
12
import React from 'react'
2-
import { useNodes, BezierEdge } from 'reactflow'
33
import { getSmartEdge } from '../getSmartEdge'
4-
import type { EdgeData, NodeData } from './DummyData'
5-
import type { EdgeProps } from 'reactflow'
4+
import type { EdgeProps, Node } from '@xyflow/react'
5+
import type {
6+
DefaultEdgeDataType,
7+
DefaultNodeDataType
8+
} from 'SmartEdge/SmartEdge.types'
69

710
const size = 20
811

9-
export function SmartEdgeCustomLabel(props: EdgeProps<EdgeData>) {
12+
export function SmartEdgeCustomLabel<
13+
TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
14+
TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
15+
>(props: EdgeProps<TEdgeDataType>) {
1016
const {
1117
id,
1218
sourcePosition,
@@ -20,7 +26,7 @@ export function SmartEdgeCustomLabel(props: EdgeProps<EdgeData>) {
2026
markerEnd
2127
} = props
2228

23-
const nodes = useNodes<NodeData>()
29+
const nodes = useNodes<Node<TNodeDataType>>()
2430

2531
const getSmartEdgeResponse = getSmartEdge({
2632
sourcePosition,

0 commit comments

Comments
 (0)