Merge pull request #203 from dogukanuhn/main

Canvas should fit into view on click Center icon at toolbar

src/components/Graph/index.tsx

@@ -41,6 +41,7 @@ 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 loading = useGraph(state => state.loading);
@@ -71,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);
@@ -94,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}
@@ -114,6 +119,7 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
           }}
         >
           <Canvas
+            className="jsoncrack-canvas"
             nodes={nodes}
             edges={edges}
             maxWidth={size.width}

src/hooks/store/useConfig.tsx

@@ -51,7 +51,8 @@ const useConfig = create<Config & ConfigActions>()((set, get) => ({
   },
   centerView: () => {
     const zoomPanPinch = get().zoomPanPinch;
-    if (zoomPanPinch) zoomPanPinch.centerView(0.4);
+    const canvas = document.querySelector(".jsoncrack-canvas") as HTMLElement;
+    if (zoomPanPinch && canvas) zoomPanPinch.zoomToElement(canvas);
   },
   setConfig: (setting: keyof Config, value: unknown) => set({ [setting]: value }),
 }));