FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/workflow/custom-connection-line.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react'
+import type { ConnectionLineComponentProps } from 'reactflow'
+import {
+  Position,
+  getSimpleBezierPath,
+} from 'reactflow'
+
+const CustomConnectionLine = ({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) => {
+  const [
+    edgePath,
+  ] = getSimpleBezierPath({
+    sourceX: fromX,
+    sourceY: fromY,
+    sourcePosition: Position.Right,
+    targetX: toX,
+    targetY: toY,
+    targetPosition: Position.Left,
+  })
+
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke='#D0D5DD'
+        strokeWidth={2}
+        d={edgePath}
+      />
+      <rect
+        x={toX}
+        y={toY - 4}
+        width={2}
+        height={8}
+        fill='#2970FF'
+      />
+    </g>
+  )
+}
+
+export default memo(CustomConnectionLine)