Bump reactflow version to v12

hmusovicCF · hmusovicCF · commit 4841f5776611 · 2025-01-14T10:28:47.000+01:00
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,4 @@
-import 'reactflow/dist/style.css'
+import '@xyflow/react/dist/style.css'
 
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,7 @@
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"[html]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-	"name": "@tisoap/react-flow-smart-edge",
-	"version": "3.0.0",
+	"name": "@cloudfactory/react-flow-smart-edge",
+	"version": "1.0.0",
 	"keywords": [
 		"react",
 		"typescript",
@@ -86,6 +86,7 @@
 		"@types/react-dom": "^18.0.9",
 		"@typescript-eslint/eslint-plugin": "^6.6.0",
 		"@typescript-eslint/parser": "^6.6.0",
+		"@xyflow/react": "^12.3.5",
 		"chromatic": "^7.1.0",
 		"concurrently": "^8.2.1",
 		"dts-cli": "^2.0.3",
@@ -114,7 +115,6 @@
 		"prettier": "^3.0.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"reactflow": "^11.2.0",
 		"require-from-string": "^2.0.2",
 		"storybook": "^7.4.0",
 		"string-width": "^4.2.3",
diff --git a/src/SmartBezierEdge/index.tsx b/src/SmartBezierEdge/index.tsx
@@ -1,23 +1,34 @@
+import { useNodes, BezierEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, BezierEdge } from 'reactflow'
 import { SmartEdge } from '../SmartEdge'
 import { svgDrawSmoothLinePath, pathfindingAStarDiagonal } from '../functions'
 import type { SmartEdgeOptions } from '../SmartEdge'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const BezierConfiguration: SmartEdgeOptions = {
 	drawEdge: svgDrawSmoothLinePath,
 	generatePath: pathfindingAStarDiagonal,
 	fallback: BezierEdge
 }
 
-export function SmartBezierEdge<EdgeDataType = unknown, NodeDataType = unknown>(
-	props: EdgeProps<EdgeDataType>
-) {
-	const nodes = useNodes<NodeDataType>()
+export const SmartBezierEdge: React.FC<EdgeProps<DefaultEdgeDataType>> = (
+	props
+) => {
+	return <SmartBezierEdgeInner {...props} />
+}
+
+function SmartBezierEdgeInner<
+	TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(props: EdgeProps<TEdgeDataType>) {
+	const nodes = useNodes<Node<TNodeDataType>>()
 
 	return (
-		<SmartEdge<EdgeDataType, NodeDataType>
+		<SmartEdge<TEdgeDataType, TNodeDataType>
 			{...props}
 			options={BezierConfiguration}
 			nodes={nodes}
diff --git a/src/SmartEdge/SmartEdge.types.ts b/src/SmartEdge/SmartEdge.types.ts
@@ -0,0 +1,7 @@
+import type { Edge } from '@xyflow/react'
+
+export type DefaultEdgeDataType = Edge<
+	Record<string, unknown>,
+	string | undefined
+>
+export type DefaultNodeDataType = Record<string, unknown>
diff --git a/src/SmartEdge/index.tsx b/src/SmartEdge/index.tsx
@@ -1,26 +1,38 @@
+import { BezierEdge, BaseEdge } from '@xyflow/react'
 import React from 'react'
-import { BezierEdge, BaseEdge } from 'reactflow'
 import { getSmartEdge } from '../getSmartEdge'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from './SmartEdge.types'
 import type { GetSmartEdgeOptions } from '../getSmartEdge'
-import type { EdgeProps, Node } from 'reactflow'
+import type { EdgeProps, Node, StepEdge, StraightEdge } from '@xyflow/react'
 
-export type EdgeElement = typeof BezierEdge
+export type EdgeElement =
+	| typeof BezierEdge
+	| typeof StepEdge
+	| typeof StraightEdge
 
 export type SmartEdgeOptions = GetSmartEdgeOptions & {
 	fallback?: EdgeElement
 }
 
-export interface SmartEdgeProps<EdgeDataType = unknown, NodeDataType = unknown>
-	extends EdgeProps<EdgeDataType> {
-	nodes: Node<NodeDataType>[]
+export interface SmartEdgeProps<
+	TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+> extends EdgeProps<TEdgeDataType> {
+	nodes: Node<TNodeDataType>[]
 	options: SmartEdgeOptions
 }
 
-export function SmartEdge<EdgeDataType = unknown, NodeDataType = unknown>({
+export function SmartEdge<
+	TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>({
 	nodes,
 	options,
 	...edgeProps
-}: SmartEdgeProps<EdgeDataType, NodeDataType>) {
+}: SmartEdgeProps<TEdgeDataType, TNodeDataType>) {
 	const {
 		sourceX,
 		sourceY,
diff --git a/src/SmartStepEdge/index.tsx b/src/SmartStepEdge/index.tsx
@@ -1,23 +1,34 @@
+import { useNodes, StepEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, StepEdge } from 'reactflow'
 import { SmartEdge } from '../SmartEdge'
 import {
 	svgDrawStraightLinePath,
 	pathfindingJumpPointNoDiagonal
 } from '../functions'
 import type { SmartEdgeOptions } from '../SmartEdge'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const StepConfiguration: SmartEdgeOptions = {
 	drawEdge: svgDrawStraightLinePath,
 	generatePath: pathfindingJumpPointNoDiagonal,
 	fallback: StepEdge
 }
 
-export function SmartStepEdge<EdgeDataType = unknown, NodeDataType = unknown>(
-	props: EdgeProps<EdgeDataType>
-) {
-	const nodes = useNodes<NodeDataType>()
+export const SmartStepEdge: React.FC<EdgeProps<DefaultEdgeDataType>> = (
+	props
+) => {
+	return <SmartStepEdgeInner {...props} />
+}
+
+function SmartStepEdgeInner<
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(props: EdgeProps<EdgeDataType>) {
+	const nodes = useNodes<Node<NodeDataType>>()
 
 	return (
 		<SmartEdge<EdgeDataType, NodeDataType>
diff --git a/src/SmartStraightEdge/index.tsx b/src/SmartStraightEdge/index.tsx
@@ -1,24 +1,34 @@
+import { useNodes, StraightEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, StraightEdge } from 'reactflow'
 import { SmartEdge } from '../SmartEdge'
 import {
 	svgDrawStraightLinePath,
 	pathfindingAStarNoDiagonal
 } from '../functions'
 import type { SmartEdgeOptions } from '../SmartEdge'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const StraightConfiguration: SmartEdgeOptions = {
 	drawEdge: svgDrawStraightLinePath,
 	generatePath: pathfindingAStarNoDiagonal,
 	fallback: StraightEdge
 }
 
-export function SmartStraightEdge<
-	EdgeDataType = unknown,
-	NodeDataType = unknown
+export const SmartStraightEdge: React.FC<EdgeProps<DefaultEdgeDataType>> = (
+	props
+) => {
+	return <SmartStraightEdgeInner {...props} />
+}
+
+function SmartStraightEdgeInner<
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
 >(props: EdgeProps<EdgeDataType>) {
-	const nodes = useNodes<NodeDataType>()
+	const nodes = useNodes<Node<NodeDataType>>()
 
 	return (
 		<SmartEdge<EdgeDataType, NodeDataType>
diff --git a/src/functions/createGrid.ts b/src/functions/createGrid.ts
@@ -6,7 +6,7 @@ import {
 import { graphToGridPoint } from './pointConversion'
 import { round, roundUp } from './utils'
 import type { NodeBoundingBox, GraphBoundingBox } from './getBoundingBoxes'
-import type { Position } from 'reactflow'
+import type { Position } from '@xyflow/react'
 
 export type PointInfo = {
 	x: number
diff --git a/src/functions/drawSvgPath.ts b/src/functions/drawSvgPath.ts
@@ -1,4 +1,4 @@
-import type { XYPosition } from 'reactflow'
+import type { XYPosition } from '@xyflow/react'
 
 /**
  * Takes source and target {x, y} points, together with an array of number
diff --git a/src/functions/generatePath.ts b/src/functions/generatePath.ts
@@ -11,8 +11,8 @@ import {
 	Util,
 	DiagonalMovement
 } from 'pathfinding'
+import type { XYPosition } from '@xyflow/react'
 import type { Grid } from 'pathfinding'
-import type { XYPosition } from 'reactflow'
 
 /**
  * Takes source and target {x, y} points, together with an grid representation
diff --git a/src/functions/getBoundingBoxes.ts b/src/functions/getBoundingBoxes.ts
@@ -1,5 +1,6 @@
 import { roundUp, roundDown } from './utils'
-import type { Node, XYPosition } from 'reactflow'
+import type { Node, XYPosition } from '@xyflow/react'
+import type { DefaultNodeDataType } from 'SmartEdge/SmartEdge.types'
 
 export type NodeBoundingBox = {
 	id: string
@@ -33,7 +34,9 @@ export type GraphBoundingBox = {
  * @param roundTo Everything will be rounded to this nearest integer
  * @returns Graph and nodes bounding boxes.
  */
-export const getBoundingBoxes = <NodeDataType = unknown>(
+export const getBoundingBoxes = <
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(
 	nodes: Node<NodeDataType>[],
 	nodePadding = 2,
 	roundTo = 2
@@ -44,12 +47,11 @@ export const getBoundingBoxes = <NodeDataType = unknown>(
 	let yMin = Number.MAX_SAFE_INTEGER
 
 	const nodeBoxes: NodeBoundingBox[] = nodes.map((node) => {
-		const width = Math.max(node.width || 0, 1)
-		const height = Math.max(node.height || 0, 1)
+		const { width = 1, height = 1 } = node.measured || {}
 
 		const position: XYPosition = {
-			x: node.positionAbsolute?.x || 0,
-			y: node.positionAbsolute?.y || 0
+			x: node.position.x || 0,
+			y: node.position.y || 0
 		}
 
 		const topLeft: XYPosition = {
diff --git a/src/functions/guaranteeWalkablePath.ts b/src/functions/guaranteeWalkablePath.ts
@@ -1,5 +1,5 @@
+import type { Position, XYPosition } from '@xyflow/react'
 import type { Grid } from 'pathfinding'
-import type { Position, XYPosition } from 'reactflow'
 
 type Direction = 'top' | 'bottom' | 'left' | 'right'
 
diff --git a/src/functions/pointConversion.ts b/src/functions/pointConversion.ts
@@ -1,4 +1,4 @@
-import type { XYPosition } from 'reactflow'
+import type { XYPosition } from '@xyflow/react'
 
 /**
  * Each bounding box is a collection of X/Y points in a graph, and we
diff --git a/src/getSmartEdge/index.ts b/src/getSmartEdge/index.ts
@@ -11,7 +11,8 @@ import type {
 	PathFindingFunction,
 	SVGDrawFunction
 } from '../functions'
-import type { Node, EdgeProps } from 'reactflow'
+import type { Node, EdgeProps } from '@xyflow/react'
+import type { DefaultNodeDataType } from 'SmartEdge/SmartEdge.types'
 
 export type EdgeParams = Pick<
 	EdgeProps,
@@ -30,7 +31,9 @@ export type GetSmartEdgeOptions = {
 	generatePath?: PathFindingFunction
 }
 
-export type GetSmartEdgeParams<NodeDataType = unknown> = EdgeParams & {
+export type GetSmartEdgeParams<
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+> = EdgeParams & {
 	options?: GetSmartEdgeOptions
 	nodes: Node<NodeDataType>[]
 }
@@ -41,7 +44,9 @@ export type GetSmartEdgeReturn = {
 	edgeCenterY: number
 }
 
-export const getSmartEdge = <NodeDataType = unknown>({
+export const getSmartEdge = <
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>({
 	options = {},
 	nodes = [],
 	sourceX,
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,7 @@
 import { SmartBezierEdge } from './SmartBezierEdge'
 
 export * from './SmartEdge'
+export * from './SmartEdge/SmartEdge.types'
 export * from './SmartBezierEdge'
 export * from './SmartStepEdge'
 export * from './SmartStraightEdge'
diff --git a/src/stories/CustomLabel.tsx b/src/stories/CustomLabel.tsx
@@ -1,12 +1,18 @@
+import { useNodes, BezierEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, BezierEdge } from 'reactflow'
 import { getSmartEdge } from '../getSmartEdge'
-import type { EdgeData, NodeData } from './DummyData'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const size = 20
 
-export function SmartEdgeCustomLabel(props: EdgeProps<EdgeData>) {
+export function SmartEdgeCustomLabel<
+	TEdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	TNodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(props: EdgeProps<TEdgeDataType>) {
 	const {
 		id,
 		sourcePosition,
@@ -20,7 +26,7 @@ export function SmartEdgeCustomLabel(props: EdgeProps<EdgeData>) {
 		markerEnd
 	} = props
 
-	const nodes = useNodes<NodeData>()
+	const nodes = useNodes<Node<TNodeDataType>>()
 
 	const getSmartEdgeResponse = getSmartEdge({
 		sourcePosition,
diff --git a/src/stories/DummyData.ts b/src/stories/DummyData.ts
diff --git a/src/stories/GraphWrapper.tsx b/src/stories/GraphWrapper.tsx
diff --git a/src/stories/SmartEdge.stories.tsx b/src/stories/SmartEdge.stories.tsx
diff --git a/src/stories/SmartEdgeInteractions.stories.tsx b/src/stories/SmartEdgeInteractions.stories.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import 'reactflow/dist/style.css'`
	`1`	`+import '@xyflow/react/dist/style.css'`
`2`	`2`
`3`	`3`	`// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters`
`4`	`4`	`export const parameters = {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { XYPosition } from 'reactflow'`
	`1`	`+import type { XYPosition } from '@xyflow/react'`
`2`	`2`
`3`	`3`	`/**`
`4`	`4`	`* Takes source and target {x, y} points, together with an array of number`