Merge branch 'main' of https://github.com/dogukanuhn/jsoncrack.com

README.md

@@ -30,7 +30,7 @@
   </p>
 
   <p align="center">
-      <img width="800" src="./public/jsoncrack-screenshot.webp" alt="preview 1" />
+      <img width="800" src="./public/assets/jsoncrack-screenshot.webp" alt="preview 1" />
   </p>
 
 # JSON Crack (jsoncrack.com)

public/manifest.json

@@ -10,13 +10,13 @@
   "start_url": "/editor",
   "icons": [
     {
-      "src": "/192.png",
+      "src": "/assets/192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
 
     {
-      "src": "/512.png",
+      "src": "/assets/512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

src/components/Graph/ErrorView.tsx

@@ -27,7 +27,7 @@ const StyledInfo = styled.p`
 export const ErrorView = () => (
   <StyledErrorView>
     <img
-      src="assets/undraw_qa_engineers_dg-5-p.svg"
+      src="/assets/undraw_qa_engineers_dg-5-p.svg"
       width="200"
       height="200"
       alt="oops"

src/components/Graph/index.tsx

@@ -13,7 +13,7 @@ import { Loading } from "../Loading";
 import { ErrorView } from "./ErrorView";
 
 interface LayoutProps {
-  isWidget: boolean;
+  isWidget?: boolean;
   openModal: () => void;
   setSelectedNode: (node: [string, string][]) => void;
 }
@@ -40,24 +40,29 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
   }
 `;
 
-const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) => {
-  const [minScale, setMinScale] = React.useState(0.3);
+const GraphComponent = ({
+  isWidget = false,
+  openModal,
+  setSelectedNode,
+}: LayoutProps) => {
+  const [minScale, setMinScale] = React.useState(0.4);
   const setGraphValue = useGraph(state => state.setGraphValue);
   const setConfig = useConfig(state => state.setConfig);
+  const centerView = useConfig(state => state.centerView);
   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,
+    width: 1,
+    height: 1,
   });
 
   const handleNodeClick = React.useCallback(
     (e: React.MouseEvent<SVGElement>, data: NodeData) => {
-      setSelectedNode(data.text);
-      openModal();
+      if (setSelectedNode) setSelectedNode(data.text);
+      if (openModal) openModal();
     },
     [openModal, setSelectedNode]
   );
@@ -73,18 +78,25 @@ const GraphComponent = ({ isWidget, openModal, setSelectedNode }: LayoutProps) =
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
         const areaSize = layout.width * layout.height;
+        const changeRatio = Math.abs(
+          (areaSize * 100) / (size.width * size.height) - 100
+        );
 
-        setMinScale((1_000_000 * 0.5) / areaSize);
+        const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100;
+        const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE;
+
+        setMinScale(scale);
         setSize({ width: layout.width + 400, height: layout.height + 400 });
 
         requestAnimationFrame(() => {
           setTimeout(() => {
             setGraphValue("loading", false);
+            setTimeout(() => changeRatio > 100 && centerView(), 0);
           }, 0);
         });
       }
     },
-    [setGraphValue]
+    [centerView, setGraphValue, size.height, size.width]
   );
 
   const onCanvasClick = React.useCallback(() => {

src/containers/Home/index.tsx

@@ -68,7 +68,7 @@ const PreviewSection = () => (
       <Styles.StyledImage
         width="1200"
         height="863"
-        src="/jsoncrack-screenshot.webp"
+        src="/assets/jsoncrack-screenshot.webp"
         alt="preview"
       />
     </Styles.StyledImageWrapper>

src/pages/_document.tsx

@@ -9,7 +9,7 @@ class MyDocument extends Document {
           <SeoTags
             description="Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly."
             title="JSON Crack - Crack your data into pieces"
-            image="https://jsoncrack.com/jsoncrack.png"
+            image="https://jsoncrack.com/assets/jsoncrack.png"
           />
           <meta name="theme-color" content="#36393E" />
           <link rel="manifest" href="/manifest.json" />

src/pages/_error.tsx

@@ -35,7 +35,7 @@ const NotFound: React.FC = () => {
   return (
     <StyledNotFound>
       <StyledImageWrapper>
-        <img src="/404.svg" alt="not found" width={300} height={400} />
+        <img src="/assets/404.svg" alt="not found" width={300} height={400} />
       </StyledImageWrapper>
       <StyledMessage>WIZARDS BEHIND CURTAINS?</StyledMessage>
       <StyledSubMessage>