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/help-line/index.tsx

@@ -0,0 +1,72 @@
+import { memo } from 'react'
+import { useViewport } from 'reactflow'
+import { useStore } from '../store'
+import type {
+  HelpLineHorizontalPosition,
+  HelpLineVerticalPosition,
+} from './types'
+
+const HelpLineHorizontal = memo(({
+  top,
+  left,
+  width,
+}: HelpLineHorizontalPosition) => {
+  const { x, y, zoom } = useViewport()
+
+  return (
+    <div
+      className='absolute h-[1px] bg-primary-300 z-[9]'
+      style={{
+        top: top * zoom + y,
+        left: left * zoom + x,
+        width: width * zoom,
+      }}
+    />
+  )
+})
+HelpLineHorizontal.displayName = 'HelpLineBase'
+
+const HelpLineVertical = memo(({
+  top,
+  left,
+  height,
+}: HelpLineVerticalPosition) => {
+  const { x, y, zoom } = useViewport()
+
+  return (
+    <div
+      className='absolute w-[1px] bg-primary-300 z-[9]'
+      style={{
+        top: top * zoom + y,
+        left: left * zoom + x,
+        height: height * zoom,
+      }}
+    />
+  )
+})
+HelpLineVertical.displayName = 'HelpLineVertical'
+
+const HelpLine = () => {
+  const helpLineHorizontal = useStore(s => s.helpLineHorizontal)
+  const helpLineVertical = useStore(s => s.helpLineVertical)
+
+  if (!helpLineHorizontal && !helpLineVertical)
+    return null
+
+  return (
+    <>
+      {
+        helpLineHorizontal && (
+          <HelpLineHorizontal {...helpLineHorizontal} />
+        )
+      }
+      {
+        helpLineVertical && (
+          <HelpLineVertical {...helpLineVertical} />
+        )
+      }
+    </>
+  )
+}
+
+export default memo(HelpLine)

web/app/components/workflow/help-line/types.ts

@@ -0,0 +1,11 @@
+export type HelpLineHorizontalPosition = {
+  top: number
+  left: number
+  width: number
+}
+
+export type HelpLineVerticalPosition = {
+  top: number
+  left: number
+  height: number
+}