perf: pan move canvas (#6242)

* perf: pan move canvas

* Update packages/web/i18n/en/workflow.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/index.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/components/FlowController.tsx

@@ -220,10 +220,11 @@ const FlowController = React.memo(function FlowController() {
     canUndo,
     redo,
     canRedo,
-    setWorkflowControlMode,
     presentationMode,
-    fitView,
-    getNodes
+    setWorkflowControlMode,
+    setPresentationMode,
+    getNodes,
+    fitView
   ]);
 
   return Render;

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/index.tsx

@@ -18,7 +18,7 @@ import { EDGE_TYPE, FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/
 import type { NodeProps } from 'reactflow';
 import ReactFlow, { SelectionMode } from 'reactflow';
 import { Box, IconButton, useDisclosure } from '@chakra-ui/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { WorkflowUIContext } from '../context/workflowUIContext';
 
 const NodeSimple = dynamic(() => import('./nodes/NodeSimple'));
@@ -98,6 +98,8 @@ const Workflow = () => {
     onClose: onCloseTemplate
   } = useDisclosure();
 
+  const [movingCanvas, setMovingCanvas] = useState(false);
+
   return (
     <>
       <Box
@@ -172,6 +174,15 @@ const Workflow = () => {
               }
             : {})}
           onNodeDragStop={onNodeDragStop}
+          noWheelClassName={
+            !movingCanvas || workflowControlMode === 'drag' ? 'nowheel' : 'nowheel-moving'
+          }
+          onMoveStart={() => {
+            setMovingCanvas(true);
+          }}
+          onMoveEnd={() => {
+            setMovingCanvas(false);
+          }}
         >
           {!!menu && <ContextMenu />}
           <FlowController />