fix: workflow edge curvature (#3488)

langgenius · Apr 15, 2024 · 58cbda2 · 58cbda2
1 parent d965b91
commit 58cbda2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/web/app/components/workflow/custom-connection-line.tsx b/web/app/components/workflow/custom-connection-line.tsx
@@ -2,19 +2,20 @@ import { memo } from 'react'
 import type { ConnectionLineComponentProps } from 'reactflow'
 import {
   Position,
-  getSimpleBezierPath,
+  getBezierPath,
 } from 'reactflow'
 
 const CustomConnectionLine = ({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) => {
   const [
     edgePath,
-  ] = getSimpleBezierPath({
+  ] = getBezierPath({
     sourceX: fromX,
     sourceY: fromY,
     sourcePosition: Position.Right,
     targetX: toX,
     targetY: toY,
     targetPosition: Position.Left,
+    curvature: 0.16,
   })
 
   return (

diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
@@ -9,7 +9,7 @@ import {
   BaseEdge,
   EdgeLabelRenderer,
   Position,
-  getSimpleBezierPath,
+  getBezierPath,
 } from 'reactflow'
 import {
   useNodesExtraData,
@@ -38,13 +38,14 @@ const CustomEdge = ({
     edgePath,
     labelX,
     labelY,
-  ] = getSimpleBezierPath({
+  ] = getBezierPath({
     sourceX: sourceX - 8,
     sourceY,
     sourcePosition: Position.Right,
     targetX: targetX + 8,
     targetY,
     targetPosition: Position.Left,
+    curvature: 0.16,
   })
   const [open, setOpen] = useState(false)
   const { handleNodeAdd } = useNodesInteractions()