chore(examples): use new api

examples/react/src/examples/DevTools/DevTools/index.tsx

@@ -6,7 +6,7 @@ import ChangeLogger from './ChangeLogger';
 
 import './style.css';
 
-export default function ReactFlowDevTools({ position = 'top-left' }: { position: PanelPosition }) {
+export default function ReactFlowDevTools({ position = 'top-left' }: { position?: PanelPosition }) {
   const [nodeInspectorActive, setNodeInspectorActive] = useState(false);
   const [changeLoggerActive, setChangeLoggerActive] = useState(false);
 

examples/react/src/examples/DevTools/index.tsx

@@ -33,7 +33,7 @@ const initEdges: Edge[] = [
 ];
 
 const BasicFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+  const [nodes, , onNodesChange] = useNodesState(initNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
 
   const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

examples/react/src/examples/EasyConnect/FloatingEdge.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
-import { useStore, getStraightPath, EdgeProps } from '@xyflow/react';
+import { useStore, getStraightPath, EdgeProps, useInternalNode } from '@xyflow/react';
 
 import { getEdgeParams } from './utils.js';
 
 function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) {
-  const sourceNode = useStore(useCallback((store) => store.nodes.find((n) => n.id === source), [source]));
+  const sourceNode = useInternalNode(source);
-  const targetNode = useStore(useCallback((store) => store.nodes.find((n) => n.id === target), [target]));
+  const targetNode = useInternalNode(target);
 
   if (!sourceNode || !targetNode) {
     return null;

examples/react/src/examples/EasyConnect/utils.tsx

@@ -1,22 +1,19 @@
-import { Node, Position, MarkerType, XYPosition } from '@xyflow/react';
+import { Node, Position, MarkerType, XYPosition, InternalNode } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
+function getNodeIntersection(intersectionNode: InternalNode, targetNode: InternalNode) {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
 
-  const {
+  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.measured;
-    width: intersectionNodeWidth,
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute;
-    height: intersectionNodeHeight,
+  const targetPosition = targetNode.internals.positionAbsolute!;
-    positionAbsolute: intersectionNodePosition,
-  } = intersectionNode.measured || {};
-  const targetPosition = targetNode.measured?.positionAbsolute!;
 
   const w = intersectionNodeWidth! / 2;
   const h = intersectionNodeHeight! / 2;
 
-  const x2 = intersectionNodePosition!.x + w;
+  const x2 = intersectionNodePosition.x + w;
-  const y2 = intersectionNodePosition!.y + h;
+  const y2 = intersectionNodePosition.y + h;
   const x1 = targetPosition.x + w;
   const y1 = targetPosition.y + h;
 
@@ -32,8 +29,8 @@ function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
 }
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
-function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
+function getEdgePosition(node: InternalNode, intersectionPoint: XYPosition) {
-  const n = { ...node.measured?.positionAbsolute, ...node };
+  const n = { ...node.internals.positionAbsolute, ...node };
   const nx = Math.round(n.x!);
   const ny = Math.round(n.y!);
   const px = Math.round(intersectionPoint.x);
@@ -56,7 +53,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);