fix(react): connectionline example

xyflow · Jul 30, 2024 · a15748c · a15748c
1 parent 8dfcd82
commit a15748c
Show file tree

Hide file tree

Showing 8 changed files with 840 additions and 554 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/reactflow.dev/package.json b/sites/reactflow.dev/package.json
@@ -24,7 +24,7 @@
     "@typeform/embed-react": "^3.9.0",
     "@types/d3-force": "^3.0.9",
     "@types/three": "^0.155.1",
-    "@xyflow/react": "^12.0.0",
+    "@xyflow/react": "^12.0.4",
     "@xyflow/xy-ui": "workspace:*",
     "clsx": "^1.2.1",
     "d3": "^7.9.0",

diff --git a/...w.dev/src/components/example-viewer/example-flows/CustomConnectionLine/ConnectionLine.jsx b/...w.dev/src/components/example-viewer/example-flows/CustomConnectionLine/ConnectionLine.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { useConnection } from '@xyflow/react';
 
 export default ({ fromX, fromY, toX, toY }) => {
-  const { startHandle } = useConnection();
+  const { fromHandle } = useConnection();
 
   return (
     <g>
       <path
         fill="none"
-        stroke={startHandle.handleId}
+        stroke={fromHandle.id}
         strokeWidth={1.5}
         className="animated"
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
@@ -18,7 +18,7 @@ export default ({ fromX, fromY, toX, toY }) => {
         cy={toY}
         fill="#fff"
         r={3}
-        stroke={startHandle.handleId}
+        stroke={fromHandle.id}
         strokeWidth={1.5}
       />
     </g>

diff --git a/....dev/src/components/example-viewer/example-flows/FloatingEdges/FloatingConnectionLine.jsx b/....dev/src/components/example-viewer/example-flows/FloatingEdges/FloatingConnectionLine.jsx
@@ -16,9 +16,13 @@ function FloatingConnectionLine({
 
   const targetNode = {
     id: 'connection-target',
-    width: 1,
-    height: 1,
-    positionAbsolute: { x: toX, y: toY },
+    measured: {
+      width: 1,
+      height: 1,
+    },
+    internals: {
+      positionAbsolute: { x: toX, y: toY },
+    },
   };
 
   const { sx, sy } = getEdgeParams(fromNode, targetNode);

diff --git a/.../reactflow.dev/src/components/example-viewer/example-flows/FloatingEdges/FloatingEdge.jsx b/.../reactflow.dev/src/components/example-viewer/example-flows/FloatingEdges/FloatingEdge.jsx
@@ -1,5 +1,4 @@
-import { useCallback } from 'react';
-import { useStore, getBezierPath, useInternalNode } from '@xyflow/react';
+import { getBezierPath, useInternalNode } from '@xyflow/react';
 
 import { getEdgeParams } from './utils.js';
 

diff --git a/sites/reactflow.dev/src/components/example-viewer/example-flows/FloatingEdges/index.jsx b/sites/reactflow.dev/src/components/example-viewer/example-flows/FloatingEdges/index.jsx
@@ -24,7 +24,6 @@ const edgeTypes = {
 const NodeAsHandleFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
   const onConnect = useCallback(
     (params) =>
       setEdges((eds) =>

diff --git a/sites/svelteflow.dev/package.json b/sites/svelteflow.dev/package.json
@@ -23,7 +23,7 @@
     "@react-three/fiber": "^8.13.7",
     "@stackblitz/sdk": "^1.9.0",
     "@types/three": "^0.155.1",
-    "@xyflow/react": "12.0.0",
+    "@xyflow/react": "12.0.4",
     "@xyflow/svelte": "0.1.10",
     "@xyflow/xy-ui": "workspace:*",
     "clsx": "^1.2.1",

diff --git a/sites/xyflow.com/package.json b/sites/xyflow.com/package.json
@@ -23,7 +23,7 @@
     "@react-three/fiber": "^8.13.7",
     "@stackblitz/sdk": "^1.9.0",
     "@types/three": "^0.155.1",
-    "@xyflow/react": "12.0.0",
+    "@xyflow/react": "12.0.4",
     "@xyflow/xy-ui": "workspace:*",
     "clsx": "^1.2.1",
     "fast-xml-parser": "^4.2.6",