Revert "fix(Visualization): Initial node isn't always centered (kaoto…

…-archive#1010)"

This reverts commit a408a13.

src/components/Visualization.tsx

@@ -32,14 +32,13 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
   // `nodes` is an array of UI-specific objects that represent
   // the Integration.Steps model visually, while `edges` connect them
   const defaultViewport: Viewport = {
-    x: 0,
-    y: 0,
+    x: window.innerWidth / 2,
+    y: window.innerHeight / 2 - 160,
     zoom: 1.2,
   };
-
   const [isPanelExpanded, setIsPanelExpanded] = useState(false);
   const [, setReactFlowInstance] = useState(null);
-  const reactFlowWrapperRef = useRef<HTMLDivElement>(null);
+  const reactFlowWrapper = useRef(null);
   const [selectedStep, setSelectedStep] = useState<IStepProps>({
     maxBranches: 0,
     minBranches: 0,
@@ -56,42 +55,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
   const { nodes, setNodes, onNodesChange, edges, setEdges, onEdgesChange, deleteNode } =
     useVisualizationStore();
 
-  /**
-   * Center first node if it is the initial `add a step `
-   * node into react flow viewport.
-   */
-  useEffect(() => {
-    const isAddStepPlaceholder = containsAddStepPlaceholder(nodes);
-
-    if (isAddStepPlaceholder) {
-      const reactFlowWrapper = reactFlowWrapperRef.current;
-
-      let reactFlowWrapperRect;
-
-      if (reactFlowWrapper) {
-        reactFlowWrapperRect = reactFlowWrapper.getBoundingClientRect();
-      }
-
-      if (
-        nodes[0]?.width &&
-        nodes[0]?.height &&
-        reactFlowWrapperRect?.width &&
-        reactFlowWrapperRect?.height
-      ) {
-        const firstNodeWidth = nodes[0].width;
-        const firstNodeHeight = nodes[0].height;
-        const reactFlowWrapperRectWidth = reactFlowWrapperRect.width;
-        const reactFlowWrapperRectHeight = reactFlowWrapperRect.height;
-
-        nodes[0].position.x = (reactFlowWrapperRectWidth / 2 - firstNodeWidth / 2) * 0.8;
-        nodes[0].position.y = (reactFlowWrapperRectHeight / 2 - firstNodeHeight / 2) * 0.8;
-      }
-    }
-  });
-
-  /**
-   * Initial loading of visualization steps
-   */
+  // initial loading of visualization steps
   useEffect(() => {
     const { stepNodes, stepEdges } = buildNodesAndEdges(integrationJson.steps);
 
@@ -295,7 +259,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
         <div
           className="reactflow-wrapper"
           data-testid={'react-flow-wrapper'}
-          ref={reactFlowWrapperRef}
+          ref={reactFlowWrapper}
           style={{
             width: window.innerWidth,
             height: window.innerHeight - 77,
@@ -304,8 +268,8 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
           <ReactFlow
             nodes={nodes}
             edges={edges}
-            edgeTypes={edgeTypes}
             defaultViewport={defaultViewport}
+            edgeTypes={edgeTypes}
             nodeTypes={nodeTypes}
             onDragOver={onDragOver}
             onNodeClick={onNodeClick}