From a74bd0cf16e6449c4731d940ff10d940e1ea072d Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Wed, 6 Mar 2024 20:03:12 +0100
Subject: [PATCH] feat: tweak some stuff

---
 frontend/src/lib/components/Camera.svelte     |  5 ++-
 frontend/src/lib/components/Edge.svelte       | 16 +++++-----
 frontend/src/lib/components/Graph.svelte      | 32 +++++++++++++++----
 frontend/src/lib/components/NodeHeader.svelte |  2 +-
 .../src/lib/components/NodeParameter.svelte   |  2 +-
 5 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/Camera.svelte b/frontend/src/lib/components/Camera.svelte
index 9d91475..78c4444 100644
--- a/frontend/src/lib/components/Camera.svelte
+++ b/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 = () => {
diff --git a/frontend/src/lib/components/Edge.svelte b/frontend/src/lib/components/Edge.svelte
index 2f7811a..3d36d30 100644
--- a/frontend/src/lib/components/Edge.svelte
+++ b/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}>
diff --git a/frontend/src/lib/components/Graph.svelte b/frontend/src/lib/components/Graph.svelte
index 467e1a4..28460f8 100644
--- a/frontend/src/lib/components/Graph.svelte
+++ b/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>
 
diff --git a/frontend/src/lib/components/NodeHeader.svelte b/frontend/src/lib/components/NodeHeader.svelte
index 7e48722..9b3e686 100644
--- a/frontend/src/lib/components/NodeHeader.svelte
+++ b/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 })}");
     `}
   >
diff --git a/frontend/src/lib/components/NodeParameter.svelte b/frontend/src/lib/components/NodeParameter.svelte
index a072d4f..4dcfc0e 100644
--- a/frontend/src/lib/components/NodeParameter.svelte
+++ b/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 })}");
     `}
   >