refactor(useConnection): return internal node, add node generic

examples/react/src/examples/Figma/index.tsx

@@ -3,7 +3,19 @@ import { ReactFlow, Background, BackgroundVariant, Node, Edge, SelectionMode, Co
 const MULTI_SELECT_KEY = ['Meta', 'Shift'];
 
 const initialNodes: Node[] = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: (
+        <>
+          <input defaultValue="hallo"></input>
+        </>
+      ),
+    },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },

examples/react/src/examples/FloatingEdges/FloatingConnectionLine.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { getBezierPath, ConnectionLineComponentProps, Node } from '@xyflow/react';
+import { getBezierPath, ConnectionLineComponentProps, Node, InternalNode } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 
@@ -13,7 +13,7 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fr
     width: 1,
     height: 1,
     position: { x: toX, y: toY },
-  } as Node;
+  } as InternalNode;
 
   const { sx, sy } = getEdgeParams(fromNode, targetNode);
 

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

@@ -2,21 +2,19 @@ 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
-function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
-  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-
-  const { position: intersectionNodePosition } = intersectionNode;
+function getNodeIntersection(intersectionNode: InternalNode, targetNode: InternalNode): XYPosition {
+  const { internals: intersectionInternals } = intersectionNode;
   const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.measured ?? {
     width: 0,
     height: 0,
   };
-  const targetPosition = targetNode.position;
+  const targetPosition = targetNode.internals.positionAbsolute;
 
   const w = (intersectionNodeWidth ?? 0) / 2;
   const h = (intersectionNodeHeight ?? 0) / 2;
 
-  const x2 = intersectionNodePosition.x + w;
-  const y2 = intersectionNodePosition.y + h;
+  const x2 = intersectionInternals.positionAbsolute.x + w;
+  const y2 = intersectionInternals.positionAbsolute.y + h;
   const x1 = targetPosition.x + w;
   const y1 = targetPosition.y + h;
 
@@ -92,7 +90,13 @@ export function createElements(): NodesAndEdges {
     const x = 250 * Math.cos(radians) + center.x;
     const y = 250 * Math.sin(radians) + center.y;
 
-    nodes.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
+    const isChild = i === 1;
+    nodes.push({
+      id: `${i}`,
+      data: { label: 'Source' },
+      position: isChild ? { x: 0, y: 0 } : { x, y },
+      parentId: isChild ? '0' : undefined,
+    });
 
     edges.push({
       id: `edge-${i}`,

examples/react/src/examples/UseConnection/index.tsx

@@ -40,7 +40,7 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const UseZoomPanHelperFlow = () => {
+const UseConnectionFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -68,7 +68,7 @@ const UseZoomPanHelperFlow = () => {
 
 const WrappedFlow = () => (
   <ReactFlowProvider>
-    <UseZoomPanHelperFlow />
+    <UseConnectionFlow />
   </ReactFlowProvider>
 );