Merge pull request #12 from clarkmcc/xyflow-upgrade

Updating to xyflow

README.md

@@ -18,7 +18,7 @@ _Note: This project is still in development and the API is likely to change._
 ## Getting Started
 
 ```
-npm install reactflow @clarkmcc/ngraph 
+npm install @xyflow/react @clarkmcc/ngraph 
 ```
 
 ## Credits

lib/NodeGraphEditor.tsx

@@ -10,12 +10,12 @@ import {
   useNodesState,
   useReactFlow,
   useStoreApi,
-} from 'reactflow'
+} from '@xyflow/react'
 import {
   GraphConfigProvider,
   useGraphConfig,
 } from './context/GraphConfigContext'
-import 'reactflow/dist/style.css'
+import '@xyflow/react/dist/style.css'
 import { useBuildGraphConfig, useNodeTypes } from './hooks/config'
 import {
   forwardRef,

lib/NodeGraphEditorCustomInput.stories.tsx

@@ -7,7 +7,7 @@ import {
   Edge,
   Node,
   ReactFlowProvider,
-} from 'reactflow'
+} from '@xyflow/react'
 import { useBuildGraphConfig } from './hooks/config.ts'
 import { NodeInputField } from './components/NodeInputField.tsx'
 import { InputProps } from './config.ts'

lib/NodeGraphEditorCustomNode.stories.tsx

@@ -10,7 +10,7 @@ import {
   Node,
   Position,
   ReactFlowProvider,
-} from 'reactflow'
+} from '@xyflow/react'
 import { NodeContainer } from './components/NodeContainer'
 import { useFocusBlur } from './hooks/focus'
 import { Handle } from './components/Handle'

lib/NodeGraphEditorInputGroups.stories.tsx

@@ -7,7 +7,7 @@ import {
   Edge,
   Node,
   ReactFlowProvider,
-} from 'reactflow'
+} from '@xyflow/react'
 import { useBuildGraphConfig } from './hooks/config.ts'
 import { InputProps } from './config.ts'
 import { Wheel } from '@uiw/react-color'

lib/clipboard.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, ReactFlowState } from 'reactflow'
+import { Edge, Node, ReactFlowState } from '@xyflow/react'
 import { Dispatch, SetStateAction } from 'react'
 import { nanoid } from 'nanoid'
 
@@ -8,7 +8,7 @@ export enum ClipboardItem {
 
 export namespace ClipboardItem {
   export async function copyNodesAndEdges(state: ReactFlowState) {
-    const nodes = state.getNodes().filter((n) => n.selected)
+    const nodes = state.nodes.filter((n) => n.selected)
     const nodeIds = nodes.map((n) => n.id)
 
     // Edges selected because both the source and target nodes are selected

lib/components/Edge.tsx

@@ -7,7 +7,7 @@ import {
   useOnSelectionChange,
   useStoreApi,
   useViewport,
-} from 'reactflow'
+} from '@xyflow/react'
 import { useGraphConfig } from '../context/GraphConfigContext'
 import { GraphConfig } from '../config.ts'
 
@@ -50,10 +50,10 @@ export function Edge({
   const [config] = useGraphConfig()
   const api = useStoreApi()
   const [edgePath] = getBezierPath({
-    sourceX: sourceX - 8,
+    sourceX: sourceX - 20,
     sourceY: sourceY,
     sourcePosition,
-    targetX: targetX + 8,
+    targetX: targetX + 20,
     targetY: targetY,
     targetPosition,
   })
@@ -79,10 +79,7 @@ export function Edge({
   // Determine selection state once initially
   useEffect(() => {
     onSelectionChange({
-      nodes: api
-        .getState()
-        .getNodes()
-        .filter((n) => n.selected),
+      nodes: api.getState().nodes.filter((n) => n.selected),
       edges: [],
     })
   }, [])
@@ -104,7 +101,7 @@ export function Edge({
         // todo:(performance) may need to revisit this if performance becomes a concern
         const valueType = getTargetHandleValueType(
           config,
-          api.getState().getNodes(),
+          api.getState().nodes,
           target,
           targetHandleId,
         )

lib/components/Handle.tsx

@@ -1,12 +1,12 @@
 import { NodeInputConfig, ValueTypeConfig } from '../config'
 import { CSSProperties, memo, useCallback, useMemo, useRef } from 'react'
 import {
-  Connection,
   HandleType,
   Position,
   useStoreApi,
   Handle as FlowHandle,
-} from 'reactflow'
+  IsValidConnection,
+} from '@xyflow/react'
 import { useGraphConfig } from '../context/GraphConfigContext'
 
 type HandleProps = Pick<NodeInputConfig, 'isArray' | 'id'> &
@@ -27,13 +27,13 @@ export const Handle = memo(({ style, ...props }: HandleProps) => {
 
   const api = useStoreApi()
 
-  const isValidConnection = useCallback((connection: Connection) => {
+  const isValidConnection: IsValidConnection = useCallback((connection) => {
     const sourceNodeType = api
       .getState()
-      .nodeInternals.get(connection.source!)?.type
+      .nodeLookup.get(connection.source!)?.type
     const targetNodeType = api
       .getState()
-      .nodeInternals.get(connection.target!)?.type
+      .nodeLookup.get(connection.target!)?.type
 
     const sourceNodeConfig = config.getNodeConfig(sourceNodeType!)
     const targetNodeConfig = config.getNodeConfig(targetNodeType!)
@@ -91,8 +91,6 @@ export const Handle = memo(({ style, ...props }: HandleProps) => {
         justifyContent: 'center',
         alignItems: 'center',
         position: 'absolute',
-        left: props.position === Position.Left ? -8 : undefined,
-        right: props.position === Position.Right ? -8 : undefined,
         zIndex: 1000000,
       }}
     >

lib/components/NodeContainer.tsx

@@ -1,4 +1,4 @@
-import { Node, Position } from 'reactflow'
+import { Node, Position } from '@xyflow/react'
 import { CSSProperties, JSX, ReactElement, useMemo } from 'react'
 import { NodeHeader } from './NodeHeader'
 import {

lib/components/NodeDenseLinkedField.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { Handle } from './Handle.js'
-import { Position } from 'reactflow'
+import { Position } from '@xyflow/react'
 import { NodeInputConfig, ValueTypeConfig } from '../config'
 
 type NodeDenseLinkedFieldProps = NodeInputConfig &

lib/components/NodeDenseOutputField.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import { Handle } from './Handle'
 import { NodeOutputConfig, ValueTypeConfig } from '../config'
-import { Position } from 'reactflow'
+import { Position } from '@xyflow/react'
 
 type NodeDenseOutputFieldProps = NodeOutputConfig &
   Pick<ValueTypeConfig, 'color'>

lib/components/NodeLinkedField.tsx

@@ -2,7 +2,7 @@ import { Handle } from './Handle.js'
 import { Label } from './Label.js'
 import { NodeInputConfig, ValueTypeConfig } from '../config'
 import { memo } from 'react'
-import { Position } from 'reactflow'
+import { Position } from '@xyflow/react'
 
 type NodeLinkedFieldProps = NodeInputConfig &
   Pick<ValueTypeConfig, 'shape' | 'color'>

lib/components/NodeOutputField.tsx

@@ -3,7 +3,7 @@ import { Handle } from './Handle'
 import { Label } from './Label'
 import { NodeOutputConfig } from '../config'
 import { useGraphConfig } from '../context/GraphConfigContext'
-import { Position } from 'reactflow'
+import { Position } from '@xyflow/react'
 
 type NodeOutputFieldProps = NodeOutputConfig
 

lib/hooks/connect.ts

@@ -1,5 +1,5 @@
 import { useGraphConfig } from '../context/GraphConfigContext'
-import { addEdge, Connection, useNodes, useReactFlow } from 'reactflow'
+import { addEdge, Connection, useNodes, useReactFlow } from '@xyflow/react'
 import { useCallback } from 'react'
 
 export function useSocketConnect() {

lib/hooks/node.ts

@@ -6,7 +6,7 @@ import {
   useNodeId,
   useReactFlow,
   useStore,
-} from 'reactflow'
+} from '@xyflow/react'
 import { shallow } from 'zustand/shallow'
 
 const INPUT_GROUPS_FIELD = '__inputGroupsExpanded'
@@ -163,7 +163,7 @@ export function useNodesData<T>(nodeId: string): T {
   return useStore(
     useCallback(
       (s) => {
-        return s.nodeInternals.get(nodeId)?.data || null
+        return s.nodeLookup.get(nodeId)?.data || null
       },
       [nodeId],
     ),

lib/layout/dagre.ts

@@ -1,15 +1,16 @@
-import { Edge, Node, Position } from 'reactflow'
+import { Edge, Node, Position } from '@xyflow/react'
 import { layout, graphlib } from 'dagre'
 
-type LayoutResult = { nodes: Node[]; edges: Edge[] }
-
-export function computeDagreLayout(nodes: Node[], edges: Edge[]): LayoutResult {
+export function computeDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
   const g = new graphlib.Graph()
   g.setDefaultEdgeLabel(() => ({}))
   g.setGraph({ rankdir: 'LR' })
 
   nodes.forEach((node) => {
-    g.setNode(node.id, { width: node.width, height: node.height })
+    g.setNode(node.id, {
+      width: node.computed?.width,
+      height: node.computed?.height,
+    })
   })
 
   edges.forEach((edge) => {
@@ -18,21 +19,19 @@ export function computeDagreLayout(nodes: Node[], edges: Edge[]): LayoutResult {
 
   layout(g)
 
-  nodes.forEach((node) => {
+  return nodes.map((node) => {
     const nodeWithPosition = g.node(node.id)
     node.targetPosition = Position.Left
     node.sourcePosition = Position.Right
 
     // We are shifting the dagre node position (anchor=center center) to the top left
     // so it matches the React Flow node anchor point (top left).
-    if (node.width && node.height) {
+    if (node.computed?.width && node.computed?.height) {
       node.position = {
-        x: nodeWithPosition.x - node.width / 2 + 70,
-        y: nodeWithPosition.y - node.height / 2 + 50,
+        x: nodeWithPosition.x - node.computed?.width / 2 + 70,
+        y: nodeWithPosition.y - node.computed?.height / 2 + 50,
       }
     }
     return node
   })
-
-  return { nodes, edges }
 }

lib/layout/layout.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { computeDagreLayout } from './dagre'
-import { Edge, Instance, Node, useReactFlow } from 'reactflow'
+import { Instance, Node, useReactFlow } from '@xyflow/react'
 
 export enum LayoutEngine {
   Dagre,
@@ -9,19 +9,17 @@ export enum LayoutEngine {
 type LayoutFunc = () => void
 
 export function useLayoutEngine(engine: LayoutEngine): LayoutFunc {
-  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow()
+  const { getNodes, getEdges, setNodes } = useReactFlow()
   return useCallback(() => {
-    const { nodes, edges } = computeLayout(engine, getNodes, getEdges)
-    setNodes(nodes)
-    setEdges(edges)
+    setNodes(computeLayout(engine, getNodes, getEdges))
   }, [engine])
 }
 
 function computeLayout(
   engine: LayoutEngine,
   getNodes: Instance.GetNodes<any>,
   getEdges: Instance.GetEdges<any>,
-): { nodes: Node[]; edges: Edge[] } {
+): Node[] {
   switch (engine) {
     case LayoutEngine.Dagre:
       return computeDagreLayout(getNodes(), getEdges())

lib/node-types.tsx

@@ -7,7 +7,7 @@ import {
   useCallback,
   useMemo,
 } from 'react'
-import { Edge, Node, Position } from 'reactflow'
+import { Edge, Node, Position } from '@xyflow/react'
 import { useNodesEdges } from './hooks/node'
 import {
   GraphConfig,