set autoscale & center canvas

src/components/Graph/index.tsx

@@ -41,17 +41,14 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
 `;
 
 const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) => {
+  const [minScale, setMinScale] = React.useState(0.3);
   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,
@@ -75,7 +72,11 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
   const onLayoutChange = React.useCallback(
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
+        const areaSize = layout.width * layout.height;
+
+        setMinScale((1_000_000 * 0.5) / areaSize);
         setSize({ width: layout.width + 400, height: layout.height + 400 });
+
         requestAnimationFrame(() => {
           setTimeout(() => {
             setGraphValue("loading", false);
@@ -91,10 +92,6 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
     if (input) input.blur();
   }, []);
 
-  React.useEffect(()=>{
-    setCanvasRef(canvasRef)
-  })
-
   if (nodes.length > 8_000) return <ErrorView />;
 
   return (
@@ -102,9 +99,9 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
       {loading && <Loading message="Painting graph..." />}
       <TransformWrapper
         maxScale={2}
-        minScale={0.25}
-        initialScale={0.7}
-        wheel={{ step: 0.05 }}
+        minScale={minScale}
+        initialScale={0.4}
+        wheel={{ step: 0.08 }}
         zoomAnimation={{ animationType: "linear" }}
         doubleClick={{ disabled: true }}
         onInit={onInit}
@@ -122,6 +119,7 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
           }}
         >
           <Canvas
+            className="jsoncrack-canvas"
             nodes={nodes}
             edges={edges}
             maxWidth={size.width}
@@ -135,7 +133,6 @@ 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,10 +2,9 @@ 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;
@@ -16,7 +15,6 @@ 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,
@@ -31,7 +29,6 @@ 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) {
@@ -54,9 +51,8 @@ const useConfig = create<Config & ConfigActions>()((set, get) => ({
   },
   centerView: () => {
     const zoomPanPinch = get().zoomPanPinch;
-    const canvas = get().canvas
-    if(zoomPanPinch && canvas && canvas.current)
-      zoomPanPinch.zoomToElement(canvas.current["containerRef"].current)
+    const canvas = document.querySelector(".jsoncrack-canvas") as HTMLElement;
+    if (zoomPanPinch && canvas) zoomPanPinch.zoomToElement(canvas);
   },
   setConfig: (setting: keyof Config, value: unknown) => set({ [setting]: value }),
 }));