update maxZoom

src/components/Graph/index.tsx

@@ -41,9 +41,8 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
 `;
 
 const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) => {
-  const setConfig = useConfig(state => state.setConfig);
-  const maxZoom = useConfig(state => state.maxZoom);
   const setGraphValue = useGraph(state => state.setGraphValue);
+  const setConfig = useConfig(state => state.setConfig);
   const loading = useGraph(state => state.loading);
   const layout = useConfig(state => state.layout);
   const nodes = useGraph(state => state.nodes);
@@ -72,20 +71,6 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
   const onLayoutChange = React.useCallback(
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
-        let newHeight = 0;
-        let newWidth = 0;
-
-        layout?.children?.forEach(node => {
-          if (node.y + node.height > newHeight) newHeight = node.y + node.height;
-          if (node.x + node.width > newWidth) newWidth = node.x + node.width;
-        });
-
-        if (layout === "LEFT" || layout === "RIGHT") {
-          setConfig("maxZoom", (1380 * 0.6) / newHeight);
-        } else {
-          setConfig("maxZoom", (1380 * 0.6) / newWidth);
-        }
-
         setSize({ width: layout.width + 400, height: layout.height + 400 });
         requestAnimationFrame(() => {
           setTimeout(() => {
@@ -94,7 +79,7 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
         });
       }
     },
-    [setConfig, setGraphValue]
+    [setGraphValue]
   );
 
   const onCanvasClick = React.useCallback(() => {
@@ -109,7 +94,7 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
       {loading && <Loading message="Painting graph..." />}
       <TransformWrapper
         maxScale={2}
-        minScale={maxZoom}
+        minScale={0.25}
         initialScale={0.7}
         wheel={{ step: 0.05 }}
         zoomAnimation={{ animationType: "linear" }}

src/hooks/store/useConfig.tsx

@@ -14,7 +14,6 @@ interface ConfigActions {
 
 const initialStates = {
   json: defaultJson,
-  maxZoom: 0.07,
   cursorMode: "move" as "move" | "navigation",
   layout: "RIGHT" as CanvasDirection,
   expand: true,
@@ -52,7 +51,7 @@ const useConfig = create<Config & ConfigActions>()((set, get) => ({
   },
   centerView: () => {
     const zoomPanPinch = get().zoomPanPinch;
-    if (zoomPanPinch) zoomPanPinch.centerView(get().maxZoom);
+    if (zoomPanPinch) zoomPanPinch.centerView(0.4);
   },
   setConfig: (setting: keyof Config, value: unknown) => set({ [setting]: value }),
 }));