[web] Update to "@xyflow/react beta 13

sroussey · Apr 9, 2024 · 7d9d689 · 7d9d689
1 parent 21cb29b
commit 7d9d689
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 18 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sroussey/xyflow-react": "^12.0.0-beta.13",
+    "@xyflow/react": "^12.0.0-next.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@uiw/react-codemirror": "^4.21.25",

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { ReactFlowProvider } from "@sroussey/xyflow-react";
+import { ReactFlowProvider } from "@xyflow/react";
 import { RunGraphFlow } from "./RunGraphFlow";
 import { JsonEditor } from "./JsonEditor";
 import {

diff --git a/packages/web/src/RunGraphFlow.tsx b/packages/web/src/RunGraphFlow.tsx
@@ -8,9 +8,9 @@ import {
   useNodesInitialized,
   useReactFlow,
   Edge,
-} from "@sroussey/xyflow-react";
+} from "@xyflow/react";
 
-import "@sroussey/xyflow-react/dist/base.css";
+import "@xyflow/react/dist/base.css";
 import "./RunGraphFlow.css";
 import { TurboNodeData, SingleNode, CompoundNode } from "./TurboNode";
 import TurboEdge from "./TurboEdge";
@@ -39,7 +39,7 @@ function sortNodes(nodes: Node<TurboNodeData>[]): Node<TurboNodeData>[] {
 
   // Group nodes by parent ID
   nodes.forEach((node) => {
-    const parent = node.parentNode || "###root###";
+    const parent = node.parentId || "###root###";
     if (!parentMap.has(parent)) {
       parentMap.set(parent, []);
     }
@@ -82,7 +82,7 @@ function convertGraphToNodes(graph: TaskGraph): Node<TurboNodeData>[] {
       const subNodes = convertGraphToNodes(node.subGraph).map((n) => {
         return {
           ...n,
-          parentNode: node.config.id as string,
+          parentId: node.config.id as string,
           extent: "parent",
           selectable: false,
           connectable: false,
@@ -95,7 +95,7 @@ function convertGraphToNodes(graph: TaskGraph): Node<TurboNodeData>[] {
   return nodes;
 }
 
-function listenToNode(task: Task, setNodes: Dispatch<SetStateAction<Node<TurboNodeData>[]>>) {
+function listenToTask(task: Task, setNodes: Dispatch<SetStateAction<Node<TurboNodeData>[]>>) {
   task.on("progress", (progress, progressText) => {
     setNodes((nds) =>
       nds.map((nd) => {
@@ -175,14 +175,14 @@ function listenToNode(task: Task, setNodes: Dispatch<SetStateAction<Node<TurboNo
           (n) =>
             ({
               ...n,
-              parentNode: task.config.id as string,
+              parentId: task.config.id as string,
               extent: "parent",
               selectable: false,
               connectable: false,
             }) as Node<TurboNodeData>
         );
         listenToGraphNodes(task.subGraph, setNodes);
-        let returnNodes = nodes.filter((n) => n.parentNode !== task.config.id); // remove old children
+        let returnNodes = nodes.filter((n) => n.parentId !== task.config.id); // remove old children
         returnNodes = [...returnNodes, ...children]; // add new children
         returnNodes = sortNodes(returnNodes); // sort all nodes (parent, children, parent, children, ...)
         return returnNodes;
@@ -197,7 +197,7 @@ function listenToGraphNodes(
 ) {
   const nodes = graph.getNodes();
   for (const node of nodes) {
-    listenToNode(node, setNodes);
+    listenToTask(node, setNodes);
   }
 }
 
@@ -222,7 +222,7 @@ export const RunGraphFlow: React.FC<{
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const graphRef = useRef<TaskGraph | null>(null);
 
-  const initialized = useNodesInitialized() && !nodes.some((n) => !n.computed);
+  const initialized = useNodesInitialized() && !nodes.some((n) => !n.measured);
   const { fitView } = useReactFlow();
 
   useEffect(() => {

diff --git a/packages/web/src/TurboEdge.tsx b/packages/web/src/TurboEdge.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { EdgeProps, getBezierPath } from "@sroussey/xyflow-react";
+import { EdgeProps, getBezierPath } from "@xyflow/react";
 
 export default function CustomEdge({
   id,

diff --git a/packages/web/src/TurboNode.tsx b/packages/web/src/TurboNode.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { Handle, NodeProps, Position, Node } from "@sroussey/xyflow-react";
+import { Handle, NodeProps, Position, Node } from "@xyflow/react";
 import { FiCloud, FiCloudLightning } from "react-icons/fi";
 
 export type TurboNodeData = {

diff --git a/packages/web/src/layout.ts b/packages/web/src/layout.ts
@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from "@sroussey/xyflow-react";
+import { Edge, Node, Position } from "@xyflow/react";
 import { DirectedAcyclicGraph } from "@sroussey/typescript-graph";
 
 type PositionXY = {
@@ -105,11 +105,11 @@ export class GraphPipelineLayout<T extends Node> implements LayoutOptions {
   }
 
   protected getNodeHeight(node: T): number {
-    return Math.max(node.computed?.height, this.nodeHeightMin);
+    return Math.max(node.measured?.height, this.nodeHeightMin);
   }
 
   protected getNodeWidth(node: T): number {
-    return Math.max(node.computed?.width, this.nodeWidthMin);
+    return Math.max(node.measured?.width, this.nodeWidthMin);
   }
 
   public getNodePosition(nodeIdentity: string): PositionXY | undefined {
@@ -154,7 +154,7 @@ export function computeLayout(
   nodes = nodes.filter((node) => !node.hidden);
 
   const topLevelNodes = nodes.filter(
-    (node) => node.parentNode === undefined || node.parentNode === parentId
+    (node) => node.parentId === undefined || node.parentId === parentId
   );
 
   topLevelNodes.forEach((node) => {
@@ -184,7 +184,7 @@ export function computeLayout(
   });
 
   for (const node of topLevelNodes) {
-    const children = nodes.filter((n) => n.parentNode === node.id);
+    const children = nodes.filter((n) => n.parentId === node.id);
 
     if (children.length > 0) {
       const childNodes = computeLayout(