Canvas should fit into view on click Center icon at toolbar

src/components/Graph/index.tsx

@@ -43,11 +43,15 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
 const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) => {
   const setGraphValue = useGraph(state => state.setGraphValue);
   const setConfig = useConfig(state => state.setConfig);
+  const canvasRef = React.useRef(null);
+  const setCanvasRef = useConfig(state => state.setCanvasRef);
   const loading = useGraph(state => state.loading);
   const layout = useConfig(state => state.layout);
   const nodes = useGraph(state => state.nodes);
   const edges = useGraph(state => state.edges);
 
+  
+
   const [size, setSize] = React.useState({
     width: 2000,
     height: 2000,
@@ -87,6 +91,10 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
     if (input) input.blur();
   }, []);
 
+  React.useEffect(()=>{
+    setCanvasRef(canvasRef)
+  })
+
   if (nodes.length > 8_000) return <ErrorView />;
 
   return (
@@ -127,6 +135,7 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
             readonly={true}
             dragEdge={null}
             dragNode={null}
+            ref={canvasRef}
             fit={true}
             node={props => <CustomNode {...props} onClick={handleNodeClick} />}
             edge={props => (

src/hooks/store/useConfig.tsx

@@ -2,9 +2,10 @@ import { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
 import { CanvasDirection } from "reaflow";
 import { defaultJson } from "src/constants/data";
 import create from "zustand";
-
+import {MutableRefObject} from "react";
 interface ConfigActions {
   setJson: (json: string) => void;
+  setCanvasRef: (canvas: MutableRefObject<HTMLCanvasElement | null> ) => void;
   setConfig: (key: keyof Config, value: unknown) => void;
   getJson: () => string;
   zoomIn: () => void;
@@ -15,6 +16,7 @@ interface ConfigActions {
 const initialStates = {
   json: defaultJson,
   cursorMode: "move" as "move" | "navigation",
+  canvas: undefined as MutableRefObject<HTMLCanvasElement | null> | undefined,
   layout: "RIGHT" as CanvasDirection,
   expand: true,
   hideEditor: false,
@@ -29,6 +31,7 @@ const useConfig = create<Config & ConfigActions>()((set, get) => ({
   ...initialStates,
   getJson: () => get().json,
   setJson: (json: string) => set({ json }),
+  setCanvasRef: (canvas: MutableRefObject<HTMLCanvasElement | null> ) => set({ canvas }),
   zoomIn: () => {
     const zoomPanPinch = get().zoomPanPinch;
     if (zoomPanPinch) {
@@ -51,7 +54,9 @@ const useConfig = create<Config & ConfigActions>()((set, get) => ({
   },
   centerView: () => {
     const zoomPanPinch = get().zoomPanPinch;
-    if (zoomPanPinch) zoomPanPinch.centerView(0.4);
+    const canvas = get().canvas
+    if(zoomPanPinch && canvas && canvas.current)
+      zoomPanPinch.zoomToElement(canvas.current["containerRef"].current)
   },
   setConfig: (setting: keyof Config, value: unknown) => set({ [setting]: value }),
 }));