Browse Source

fix: workflow edge curvature (#3488)

zxhlyh 1 year ago
parent
commit
58cbda2950

+ 3 - 2
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 (

+ 3 - 2
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()