feat: tweak some stuff

frontend/src/lib/components/Camera.svelte

@@ -30,8 +30,11 @@
       controls.target0.copy(target0);
       controls.position0.copy(position0);
       controls.zoom0 = zoom0;
-      controls.reset();
+    } else {
+      controls.zoom0 = 30;
     }
+
+    controls.reset();
   };
 
   const saveControls = () => {

frontend/src/lib/components/Edge.svelte

@@ -31,10 +31,10 @@
       last_from_x = new_x;
       last_from_y = new_y;
     }
-    curve.v0.set(from.position.x + 5, from.position.y + 0.67);
-    curve.v1.set(from.position.x + 7, from.position.y + 0.67);
-    curve.v2.set(to.position.x - 2, to.position.y + 2.55);
-    curve.v3.set(to.position.x, to.position.y + 2.55);
+    curve.v0.set(from.position.x + 5, from.position.y + 0.65);
+    curve.v1.set(from.position.x + 7, from.position.y + 0.65);
+    curve.v2.set(to.position.x - 2, to.position.y + 2.5);
+    curve.v3.set(to.position.x, to.position.y + 2.5);
     points = curve.getPoints(samples).map((p) => new Vector3(p.x, 0, p.y));
   }
 
@@ -46,22 +46,22 @@
 
 <T.Mesh
   position.x={from.position.x + 5}
-  position.z={from.position.y + 0.67}
+  position.z={from.position.y + 0.65}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
 >
   <T.CircleGeometry args={[0.1, 32]} />
-  <T.MeshBasicMaterial color={0xffffff} />
+  <T.MeshBasicMaterial color={0x555555} />
 </T.Mesh>
 
 <T.Mesh
   position.x={to.position.x}
-  position.z={to.position.y + 2.55}
+  position.z={to.position.y + 2.5}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
 >
   <T.CircleGeometry args={[0.1, 32]} />
-  <T.MeshBasicMaterial color={0xffffff} />
+  <T.MeshBasicMaterial color={0x555555} />
 </T.Mesh>
 
 <T.Mesh position.y={0.5}>

frontend/src/lib/components/Graph.svelte

@@ -47,12 +47,9 @@
       (event.clientY - mouseDownY) / cameraPosition[2];
 
     if (event.ctrlKey) {
-      const targets = [1, 2, 4, 8];
-      const index = Math.floor(
-        ((cameraPosition[2] - 4) / (150 - 4)) * targets.length * 0.999,
-      );
-      newX = snapToGrid(newX, 5 / targets[index]);
-      newY = snapToGrid(newY, 5 / targets[index]);
+      const snapLevel = getSnapLevel();
+      newX = snapToGrid(newX, 5 / snapLevel);
+      newY = snapToGrid(newY, 5 / snapLevel);
     }
     node.position.x = newX;
     node.position.y = newY;
@@ -74,8 +71,31 @@
     node.tmp.downY = node.position.y;
   }
 
+  function getSnapLevel() {
+    const z = cameraPosition[2];
+    if (z > 66) {
+      return 8;
+    } else if (z > 55) {
+      return 4;
+    } else if (z > 11) {
+      return 2;
+    } else {
+    }
+    return 1;
+  }
+
   function handleMouseUp() {
     mouseDown = false;
+
+    const node = graph.getNode(activeNodeId);
+
+    if (!node) return;
+    const snapLevel = getSnapLevel();
+    node.position.x = snapToGrid(node.position.x, 5 / snapLevel);
+    node.position.y = snapToGrid(node.position.y, 5 / snapLevel);
+
+    graph.nodes = [...graph.nodes];
+    edges = [...edges];
   }
 </script>
 

frontend/src/lib/components/NodeHeader.svelte

@@ -42,7 +42,7 @@
     height="100"
     preserveAspectRatio="none"
     style={`
-      --path: path("${createPath({ depth: 5, height: 27 })}");
+      --path: path("${createPath({ depth: 5, height: 27, y: 48.2 })}");
       --hover-path: path("${createPath({ depth: 8, height: 24 })}");
     `}
   >

frontend/src/lib/components/NodeParameter.svelte

@@ -55,7 +55,7 @@
     height="100"
     preserveAspectRatio="none"
     style={`
-      --path: path("${createPath({ depth: 5, height: 15 })}");
+      --path: path("${createPath({ depth: 5, height: 15, y: 48.2 })}");
       --hover-path: path("${createPath({ depth: 8, height: 24 })}");
     `}
   >