fix: Fix the issue of the homepage legend not being centered

Author: xwj02155382

packages/studio-importor/src/app/graph-canvas/useInteractive.ts

@@ -142,22 +142,21 @@ const useInteractive: any = () => {
       //   onDoubleClick();
       // }
       // 布局
-      const graph = createStaticForceLayout(fakeSnapshot(nodes), fakeSnapshot(edges));
       if (!hasLayouted) {
-        updateStore(draft => {
-          draft.hasLayouted = true;
-          draft.nodes = graph.nodes;
-          draft.edges = graph.edges;
-        });
-      }
-      if(hasLayouted){
+        const graph = createStaticForceLayout(fakeSnapshot(nodes), fakeSnapshot(edges));
         if (timerRef.current) {
           clearTimeout(timerRef.current);
         }
-        timerRef.current = setTimeout(() => {
+        const timerId = setTimeout(() => {
           const bbox = getBBox(graph.nodes);
           fitBounds(bbox, { duration: 300 });
         }, 300);
+        timerRef.current = timerId;
+        updateStore(draft => {
+          draft.hasLayouted = true;
+          draft.nodes = graph.nodes;
+          draft.edges = graph.edges;
+        });
       }
     }
   }, [nodes, edges, hasLayouted]);
@@ -172,9 +171,11 @@ const useInteractive: any = () => {
 
   const onReactFlowInit = reactFlowInstance => {
     if (reactFlowInstance) {
+      setTimeout(()=>{
         const allNodes = reactFlowInstance.toObject().nodes;
         const bbox = getNodesBounds(allNodes);
         fitBounds(bbox, { duration: 600 });
+      },300)
     }
   };