fix: workflow fixview padding & context menu position (#6169)

packages/web/components/common/Icon/constants.ts

@@ -262,7 +262,7 @@ export const iconPaths = {
   'core/dataset/yuqueDatasetColor': () => import('./icons/core/dataset/yuqueDatasetColor.svg'),
   'core/dataset/yuqueDatasetColor': () => import('./icons/core/dataset/yuqueDatasetColor.svg'),
   'core/dataset/yuqueDatasetOutline': () => import('./icons/core/dataset/yuqueDatasetOutline.svg'),
   'core/dataset/yuqueDatasetOutline': () => import('./icons/core/dataset/yuqueDatasetOutline.svg'),
   'core/modules/basicNode': () => import('./icons/core/modules/basicNode.svg'),
   'core/modules/basicNode': () => import('./icons/core/modules/basicNode.svg'),
-  'core/modules/fixview': () => import('./icons/core/modules/fixview.svg'),
+  'core/modules/fitView': () => import('./icons/core/modules/fitView.svg'),
   'core/modules/flowLight': () => import('./icons/core/modules/flowLight.svg'),
   'core/modules/flowLight': () => import('./icons/core/modules/flowLight.svg'),
   'core/modules/previewLight': () => import('./icons/core/modules/previewLight.svg'),
   'core/modules/previewLight': () => import('./icons/core/modules/previewLight.svg'),
   'core/modules/systemPlugin': () => import('./icons/core/modules/systemPlugin.svg'),
   'core/modules/systemPlugin': () => import('./icons/core/modules/systemPlugin.svg'),

projects/app/src/pageComponents/app/detail/Workflow/components/SearchButton.tsx

@@ -64,7 +64,7 @@ const SearchButton = (props: ButtonProps) => {
       const searchedNode = searchResult[searchIndex] ?? searchResult[0];
       const searchedNode = searchResult[searchIndex] ?? searchResult[0];
 
 
       if (searchedNode) {
       if (searchedNode) {
-        fitView({ nodes: [searchedNode], padding: 0.4 });
+        fitView({ nodes: [searchedNode], padding: 0.6 });
       }
       }
 
 
       return nodes.map((node) => ({
       return nodes.map((node) => ({

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

@@ -226,7 +226,7 @@ const ContextMenu = () => {
     });
     });
 
 
     setTimeout(() => {
     setTimeout(() => {
-      fitView();
+      fitView({ padding: 0.3 });
     });
     });
   }, [fitView, getParentNodeSizeAndPosition, setEdges, setNodes]);
   }, [fitView, getParentNodeSizeAndPosition, setEdges, setNodes]);
 
 
@@ -302,9 +302,9 @@ const ContextMenu = () => {
   );
   );
 
 
   return (
   return (
-    <Box position="relative">
+    <Box>
       <Box
       <Box
-        position="absolute"
+        position={'fixed'}
         top={`${menu.top - 6}px`}
         top={`${menu.top - 6}px`}
         left={`${menu.left + 10}px`}
         left={`${menu.left + 10}px`}
         width={0}
         width={0}
@@ -312,18 +312,17 @@ const ContextMenu = () => {
         borderLeft="6px solid transparent"
         borderLeft="6px solid transparent"
         borderRight="6px solid transparent"
         borderRight="6px solid transparent"
         borderBottom="6px solid white"
         borderBottom="6px solid white"
-        zIndex={2}
+        zIndex={10}
         filter="drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.1))"
         filter="drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.1))"
       />
       />
       <Box
       <Box
-        position={'absolute'}
+        position={'fixed'}
         top={menu.top}
         top={menu.top}
         left={menu.left}
         left={menu.left}
         bg={'white'}
         bg={'white'}
         w={'120px'}
         w={'120px'}
         rounded={'md'}
         rounded={'md'}
         boxShadow={'0px 2px 4px 0px #A1A7B340'}
         boxShadow={'0px 2px 4px 0px #A1A7B340'}
-        className="context-menu"
         color={'myGray.600'}
         color={'myGray.600'}
         p={1}
         p={1}
         zIndex={10}
         zIndex={10}

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

@@ -197,11 +197,11 @@ const FlowController = React.memo(function FlowController() {
           {/* fit view */}
           {/* fit view */}
           <MyTooltip label={t('common:page_center')}>
           <MyTooltip label={t('common:page_center')}>
             <ControlButton
             <ControlButton
-              onClick={() => fitView()}
+              onClick={() => fitView({ padding: 0.3 })}
               style={buttonStyle}
               style={buttonStyle}
               className={`custom-workflow-fix_view ${styles.customControlButton}`}
               className={`custom-workflow-fix_view ${styles.customControlButton}`}
             >
             >
-              <MyIcon name={'core/modules/fixview'} />
+              <MyIcon name={'core/modules/fitView'} />
             </ControlButton>
             </ControlButton>
           </MyTooltip>
           </MyTooltip>
         </Panel>
         </Panel>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/hooks/useWorkflow.tsx

@@ -828,7 +828,7 @@ export const useWorkflow = () => {
       e.preventDefault();
       e.preventDefault();
 
 
       setMenu({
       setMenu({
-        top: e.clientY - 64,
+        top: e.clientY + 6,
         left: e.clientX - 12
         left: e.clientX - 12
       });
       });
     },
     },

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

@@ -135,6 +135,7 @@ const Workflow = () => {
         <ReactFlow
         <ReactFlow
           ref={reactFlowWrapperCallback}
           ref={reactFlowWrapperCallback}
           fitView
           fitView
+          fitViewOptions={{ padding: 0.3 }}
           nodes={nodes}
           nodes={nodes}
           edges={edges}
           edges={edges}
           minZoom={minZoom}
           minZoom={minZoom}

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/NodeCard.tsx

@@ -135,8 +135,7 @@ const NodeCard = (props: Props) => {
     setTimeout(() => {
     setTimeout(() => {
       fitView({
       fitView({
         nodes: [{ id: nodeId }],
         nodes: [{ id: nodeId }],
-        padding: 0.3,
-        duration: 300
+        padding: 0.3
       });
       });
     }, 100);
     }, 100);
   }, [onChangeNode, setPresentationMode, fitView, nodeId]);
   }, [onChangeNode, setPresentationMode, fitView, nodeId]);

projects/app/src/pageComponents/app/detail/WorkflowComponents/context/workflowUtilsContext.tsx

@@ -196,19 +196,9 @@ export const WorkflowUtilsProvider = ({ children }: { children: ReactNode }) =>
         // View move to the node that failed
         // View move to the node that failed
         fitView({
         fitView({
           nodes: nodes.filter((node) => checkResults.includes(node.data.nodeId)),
           nodes: nodes.filter((node) => checkResults.includes(node.data.nodeId)),
-          padding: 0.3,
-          duration: 300
+          padding: 0.3
         });
         });
 
 
-        setTimeout(() => {
-          const viewport = getViewport();
-          setViewport({
-            x: viewport.x,
-            y: viewport.y + 36,
-            zoom: viewport.zoom
-          });
-        }, 300);
-
         toast({
         toast({
           status: 'warning',
           status: 'warning',
           title: t('common:core.workflow.Check Failed')
           title: t('common:core.workflow.Check Failed')