fix(examples): use computed attribute

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

@@ -4,8 +4,12 @@ import { Node, Position, MarkerType, XYPosition } from '@xyflow/react';
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode;
-  const intersectionNodePosition = intersectionNode.computed?.positionAbsolute!;
+
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight,
+    positionAbsolute: intersectionNodePosition,
+  } = intersectionNode.computed || {};
   const targetPosition = targetNode.computed?.positionAbsolute!;
 
   const w = intersectionNodeWidth! / 2;

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

@@ -5,11 +5,11 @@ import { Position, XYPosition, Node, Edge } from '@xyflow/react';
 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 {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight,
-    position: intersectionNodePosition,
-  } = intersectionNode;
+  const { position: intersectionNodePosition } = intersectionNode;
+  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.computed ?? {
+    width: 0,
+    height: 0,
+  };
   const targetPosition = targetNode.position;
 
   const w = (intersectionNodeWidth ?? 0) / 2;
@@ -60,6 +60,8 @@ export function getEdgeParams(source: Node, target: Node) {
   const sourceIntersectionPoint = getNodeIntersection(source, target);
   const targetIntersectionPoint = getNodeIntersection(target, source);
 
+  console.log(sourceIntersectionPoint, targetIntersectionPoint);
+
   const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
   const targetPos = getEdgePosition(target, targetIntersectionPoint);
 

examples/react/src/examples/Hidden/index.tsx

@@ -48,8 +48,10 @@ const initialEdges: Edge[] = [
 
 const setHidden = (hidden: boolean) => (els: any[]) =>
   els.map((e: any) => {
-    e.hidden = hidden;
-    return e;
+    return {
+      ...e,
+      hidden,
+    };
   });
 
 const HiddenFlow = () => {