diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts index bec4edb915..02dd1c3d56 100644 --- a/web/app/components/workflow/hooks/use-nodes-interactions.ts +++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { useCallback, useRef } from 'react' import produce from 'immer' import type { NodeDragHandler, @@ -29,17 +29,17 @@ export const useNodesInteractions = () => { const store = useStoreApi() const nodesInitialData = useNodesInitialData() const { handleSyncWorkflowDraft } = useNodesSyncDraft() + const dragNodeStartPosition = useRef({ x: 0, y: 0 } as { x: number; y: number }) - const handleNodeDragStart = useCallback(() => { + const handleNodeDragStart = useCallback((_, node) => { const { runningStatus, - setIsDragging, } = useStore.getState() if (runningStatus) return - setIsDragging(true) + dragNodeStartPosition.current = { x: node.position.x, y: node.position.y } }, []) const handleNodeDrag = useCallback((e, node: Node) => { @@ -147,10 +147,9 @@ export const useNodesInteractions = () => { setNodes(newNodes) }, [store]) - const handleNodeDragStop = useCallback(() => { + const handleNodeDragStop = useCallback((_, node) => { const { runningStatus, - setIsDragging, setHelpLineHorizontal, setHelpLineVertical, } = useStore.getState() @@ -158,10 +157,12 @@ export const useNodesInteractions = () => { if (runningStatus) return - setIsDragging(false) - setHelpLineHorizontal() - setHelpLineVertical() - handleSyncWorkflowDraft() + const { x, y } = dragNodeStartPosition.current + if (!(x === node.position.x && y === node.position.y)) { + setHelpLineHorizontal() + setHelpLineVertical() + handleSyncWorkflowDraft() + } }, [handleSyncWorkflowDraft]) const handleNodeEnter = useCallback((_, node) => { @@ -236,10 +237,9 @@ export const useNodesInteractions = () => { const handleNodeClick = useCallback((_, node) => { const { runningStatus, - isDragging, } = useStore.getState() - if (runningStatus || isDragging) + if (runningStatus) return handleNodeSelect(node.id) diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts index 2d8af249d8..524f135970 100644 --- a/web/app/components/workflow/store.ts +++ b/web/app/components/workflow/store.ts @@ -18,7 +18,6 @@ type State = { workflowRunId: string showRunHistory: boolean showFeaturesPanel: boolean - isDragging: boolean helpLineHorizontal?: HelpLineHorizontalPosition helpLineVertical?: HelpLineVerticalPosition toolsets: CollectionWithExpanded[] @@ -37,7 +36,6 @@ type Action = { setWorkflowRunId: (workflowRunId: string) => void setShowRunHistory: (showRunHistory: boolean) => void setShowFeaturesPanel: (showFeaturesPanel: boolean) => void - setIsDragging: (isDragging: boolean) => void setHelpLineHorizontal: (helpLineHorizontal?: HelpLineHorizontalPosition) => void setHelpLineVertical: (helpLineVertical?: HelpLineVerticalPosition) => void setToolsets: (toolsets: CollectionWithExpanded[]) => void @@ -62,8 +60,6 @@ export const useStore = create(set => ({ setShowRunHistory: showRunHistory => set(() => ({ showRunHistory })), showFeaturesPanel: false, setShowFeaturesPanel: showFeaturesPanel => set(() => ({ showFeaturesPanel })), - isDragging: false, - setIsDragging: isDragging => set(() => ({ isDragging })), helpLineHorizontal: undefined, setHelpLineHorizontal: helpLineHorizontal => set(() => ({ helpLineHorizontal })), helpLineVertical: undefined,