feat: store zoom posiiton in localstorage

frontend/src/lib/components/Background.frag

@@ -47,15 +47,28 @@ void main(void) {
     float thickness = 0.05/cz;
     float delta = 0.1 / 2.0;
 
+    float nz = (cz - minZ) / (maxZ - minZ);
+
     float ux = (vUv.x-0.5) * width + cx*cz;
     float uy = (vUv.y-0.5) * height - cy*cz;
 
     float c1 = grid(ux, uy, divisions, thickness) * 0.1;
     float c2 = grid(ux, uy, divisions*2.0, thickness) * 0.1;
-    float c = max(c1, c2);
+    float small = max(c1, c2);
 
     float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.2;
-    c = max(c, s1);
+    small = max(small, s1);
+
+
+    float c3 = grid(ux, uy, divisions, thickness) * 0.1;
+    float c4 = grid(ux, uy, divisions*2.0, thickness) * 0.1;
+    float large = max(c1, c2);
+
+    float s2 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.2;
+    large = max(large, s2);
+
+    float c = large;
+    
 
     gl_FragColor = vec4(c, c, c, 1.0);
 }

frontend/src/lib/components/Camera.svelte

@@ -17,9 +17,32 @@
     position[0] = camera.position.x;
     position[1] = camera.position.z;
     position[2] = camera.zoom;
+    saveControls();
   }
 
+  const loadControls = () => {
+    if (!controls) return;
+    const stateJSON = localStorage.getItem(`orbitControls`);
+
+    if (stateJSON) {
+      const { target0, position0, zoom0 } = JSON.parse(stateJSON);
+      controls.target0.copy(target0);
+      controls.position0.copy(position0);
+      controls.zoom0 = zoom0;
+      controls.reset();
+    }
+  };
+
+  const saveControls = () => {
+    if (!controls) return;
+    controls.saveState();
+    const { target0, position0, zoom0 } = controls;
+    const state = { target0, position0, zoom0 };
+    localStorage.setItem(`orbitControls`, JSON.stringify(state));
+  };
+
   onMount(() => {
+    loadControls();
     updateProps();
     controls?.addEventListener("change", updateProps);
     return () => {
@@ -28,19 +51,7 @@
   });
 </script>
 
-<T.OrthographicCamera
-  bind:ref={camera}
-  makeDefault
-  position.y={1}
-  zoom={30}
-  on:create={({ ref, cleanup }) => {
-    ref.onBeforeRender = () => {
-      console.log(ref.position);
-    };
-
-    cleanup(() => {});
-  }}
->
+<T.OrthographicCamera bind:ref={camera} position.y={1} makeDefault>
   <OrbitControls
     bind:ref={controls}
     enableZoom={true}

frontend/src/lib/components/Scene.svelte

@@ -17,8 +17,6 @@
 
   let width = globalThis?.innerWidth || 100;
   let height = globalThis?.innerHeight || 100;
-
-  console.log({ graph });
 </script>
 
 <svelte:window bind:innerHeight={height} bind:innerWidth={width} />