refactor(react): separate user nodes and indernal nodes

examples/react/src/examples/FloatingEdges/FloatingEdge.tsx

@@ -5,8 +5,8 @@ import { getEdgeParams } from './utils';
 
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   const { sourceNode, targetNode } = useStore((s) => {
-    const sourceNode = s.nodes.find((n) => n.id === source);
-    const targetNode = s.nodes.find((n) => n.id === target);
+    const sourceNode = s.nodeLookup.get(source);
+    const targetNode = s.nodeLookup.get(target);
 
     return { sourceNode, targetNode };
   });

examples/react/src/examples/FloatingEdges/utils.ts

@@ -1,4 +1,4 @@
-import { Position, XYPosition, Node, Edge } from '@xyflow/react';
+import { Position, XYPosition, Node, Edge, InternalNode } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
@@ -56,7 +56,7 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
 }
 
 // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: Node, target: Node) {
+export function getEdgeParams(source: InternalNode, target: InternalNode) {
   const sourceIntersectionPoint = getNodeIntersection(source, target);
   const targetIntersectionPoint = getNodeIntersection(target, source);