zoom in out

web/app/components/workflow/help-line/index.tsx

+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

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

+export type HelpLinePosition = {
+  top: number
+  right?: number
+  bottom?: number
+  left: number
+}

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 {

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]}

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>

web/app/components/workflow/store.ts

 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 => ({