From f1d44a4c87166dbcb66ca28a9697681348086861 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Tue, 5 Mar 2024 14:15:05 +0800
Subject: [PATCH] zoom in out

---
 .../components/workflow/help-line/index.tsx   | 37 ++++++++++++++++++
 .../components/workflow/help-line/types.ts    |  6 +++
 web/app/components/workflow/hooks.ts          | 38 ++++++-------------
 web/app/components/workflow/index.tsx         |  3 ++
 .../workflow/operator/zoom-in-out.tsx         | 25 ++++++++----
 web/app/components/workflow/store.ts          |  5 ++-
 6 files changed, 77 insertions(+), 37 deletions(-)
 create mode 100644 web/app/components/workflow/help-line/index.tsx
 create mode 100644 web/app/components/workflow/help-line/types.ts

diff --git a/web/app/components/workflow/help-line/index.tsx b/web/app/components/workflow/help-line/index.tsx
new file mode 100644
index 0000000000..b188dce5a0
--- /dev/null
+++ b/web/app/components/workflow/help-line/index.tsx
@@ -0,0 +1,37 @@
+import { useStore } from '../store'
+import type { HelpLinePosition } from './types'
+
+const HelpLineBase = ({
+  top,
+  right,
+  bottom,
+  left,
+}: HelpLinePosition) => {
+  return (
+    <div
+      className='absolute w-[1px] bg-primary-300 z-[9]'
+      style={{ top, right, bottom, left }}
+    />
+  )
+}
+
+const HelpLine = () => {
+  const helpLine = useStore(state => state.helpLine)
+
+  return (
+    <>
+      {
+        helpLine?.bottom && (
+          <HelpLineBase {...helpLine} />
+        )
+      }
+      {
+        helpLine?.right && (
+          <HelpLineBase {...helpLine} />
+        )
+      }
+    </>
+  )
+}
+
+export default HelpLine
diff --git a/web/app/components/workflow/help-line/types.ts b/web/app/components/workflow/help-line/types.ts
new file mode 100644
index 0000000000..a96d4c089b
--- /dev/null
+++ b/web/app/components/workflow/help-line/types.ts
@@ -0,0 +1,6 @@
+export type HelpLinePosition = {
+  top: number
+  right?: number
+  bottom?: number
+  left: number
+}
diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index 8e1d169032..5dc79ff82d 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -78,18 +78,7 @@ export const useWorkflow = () => {
 
     const nodes = getNodes()
 
-    const newNodes = produce(nodes, (draft) => {
-      const currentNode = draft.find(n => n.id === node.id)!
-
-      currentNode.position = node.position
-    })
-
-    setNodes(newNodes)
-
-    const showVerticalHelpLine = nodes.find((n) => {
-      if (n.id === node.id)
-        return false
-
+    const showVerticalHelpLineNodes = nodes.filter((n) => {
       if (
         n.position.x === node.position.x
         || n.position.x + n.width! === node.position.x
@@ -99,10 +88,7 @@ export const useWorkflow = () => {
 
       return false
     })
-    const showHorizontalHelpLine = nodes.find((n) => {
-      if (n.id === node.id)
-        return false
-
+    const showHorizontalHelpLineNodes = nodes.filter((n) => {
       if (
         n.position.y === node.position.y
         || n.position.y === node.position.y + node.height!
@@ -114,15 +100,13 @@ export const useWorkflow = () => {
       return false
     })
 
-    if (showVerticalHelpLine || showHorizontalHelpLine) {
-      setHelpLine({
-        x: showVerticalHelpLine ? node.position.x : undefined,
-        y: showHorizontalHelpLine ? node.position.y : undefined,
-      })
-    }
-    else {
-      setHelpLine()
-    }
+    const newNodes = produce(nodes, (draft) => {
+      const currentNode = draft.find(n => n.id === node.id)!
+
+      currentNode.position = node.position
+    })
+
+    setNodes(newNodes)
   }, [store])
 
   const handleNodeDragStop = useCallback<NodeDragHandler>(() => {
@@ -306,7 +290,7 @@ export const useWorkflow = () => {
       draft.push(newEdge)
     })
     setEdges(newEdges)
-  }, [store])
+  }, [store, nodesInitialData])
 
   const handleNodeChange = useCallback((currentNodeId: string, nodeType: BlockEnum, sourceHandle?: string) => {
     const {
@@ -357,7 +341,7 @@ export const useWorkflow = () => {
       })
       setEdges(newEdges)
     }
-  }, [store])
+  }, [store, nodesInitialData])
 
   const handleEdgeEnter = useCallback<EdgeMouseHandler>((_, edge) => {
     const {
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 85895c7de1..0f09c5ab8d 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -28,6 +28,7 @@ import CustomEdge from './custom-edge'
 import CustomConnectionLine from './custom-connection-line'
 import Panel from './panel'
 import Features from './features'
+import HelpLine from './help-line'
 import { useStore } from './store'
 import {
   fetchWorkflowDraft,
@@ -80,6 +81,7 @@ const Workflow: FC<WorkflowProps> = memo(({
       {
         showFeaturesPanel && <Features />
       }
+      <HelpLine />
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -98,6 +100,7 @@ const Workflow: FC<WorkflowProps> = memo(({
         multiSelectionKeyCode={null}
         connectionLineComponent={CustomConnectionLine}
         deleteKeyCode={null}
+        nodeDragThreshold={1}
       >
         <Background
           gap={[14, 14]}
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 89744eb405..c0ad2db199 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -5,7 +5,10 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useReactFlow } from 'reactflow'
+import {
+  useReactFlow,
+  useViewport,
+} from 'reactflow'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -16,7 +19,13 @@ import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 
 const ZoomInOut: FC = () => {
   const { t } = useTranslation()
-  const reactFlow = useReactFlow()
+  const {
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    fitView,
+  } = useReactFlow()
+  const { zoom } = useViewport()
   const [open, setOpen] = useState(false)
 
   const ZOOM_IN_OUT_OPTIONS = [
@@ -50,19 +59,19 @@ const ZoomInOut: FC = () => {
 
   const handleZoom = (type: string) => {
     if (type === 'in')
-      reactFlow.zoomIn()
+      zoomIn()
 
     if (type === 'out')
-      reactFlow.zoomOut()
+      zoomOut()
 
     if (type === 'fit')
-      reactFlow.fitView()
+      fitView()
 
     if (type === 'to50')
-      reactFlow.zoomTo(0.5)
+      zoomTo(0.5)
 
     if (type === 'to100')
-      reactFlow.zoomTo(1)
+      zoomTo(1)
   }
 
   return (
@@ -78,7 +87,7 @@ const ZoomInOut: FC = () => {
           ${open && 'bg-gray-50'}
         `}>
           <SearchLg className='mr-1 w-4 h-4' />
-          100%
+          <div className='w-[34px]'>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
           <ChevronDown className='ml-1 w-4 h-4' />
         </div>
       </PortalToFollowElemTrigger>
diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts
index 28d2e17ced..96915eb2a2 100644
--- a/web/app/components/workflow/store.ts
+++ b/web/app/components/workflow/store.ts
@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import type { HelpLinePosition } from './help-line/types'
 
 type State = {
   mode: string
@@ -6,7 +7,7 @@ type State = {
   showFeaturesPanel: boolean
   runStaus: string
   isDragging: boolean
-  helpLine?: { x?: number; y?: number }
+  helpLine?: HelpLinePosition
 }
 
 type Action = {
@@ -14,7 +15,7 @@ type Action = {
   setShowFeaturesPanel: (showFeaturesPanel: boolean) => void
   setRunStaus: (runStaus: string) => void
   setIsDragging: (isDragging: boolean) => void
-  setHelpLine: (helpLine?: { x?: number; y?: number }) => void
+  setHelpLine: (helpLine?: HelpLinePosition) => void
 }
 
 export const useStore = create<State & Action>(set => ({