format json on change

src/hooks/useFocusNode.tsx

@@ -39,12 +39,13 @@ export const useFocusNode = () => {
 
       const newPositionX =
         (ref.offsetLeft - x) * newScale +
-        ref.clientWidth / 10 -
-        matchedNode.getBoundingClientRect().width / 10;
+        ref.clientWidth / 4 -
+        matchedNode.getBoundingClientRect().width / 4;
+
       const newPositionY =
         (ref.offsetLeft - y) * newScale +
-        ref.clientHeight / 10 -
-        matchedNode.getBoundingClientRect().height / 10;
+        ref.clientHeight / 4 -
+        matchedNode.getBoundingClientRect().height / 4;
 
       highlightMatchedNodes(matchedNodes, selectedNode);
       setNodeCount(matchedNodes.length);

src/store/useJson.tsx

@@ -84,8 +84,8 @@ const useJson = create<JsonStates & JsonActions>()((set, get) => ({
     }
   },
   setJson: json => {
-    useGraph.getState().setGraph(json);
-    set({ json, hasChanges: true });
+    useGraph.getState().setGraph(json);    
+    set({ json: JSON.stringify(JSON.parse(json), null, 2), hasChanges: true });
   },
   saveJson: async (isNew = true) => {
     try {