feat: make some shit more prettier

frontend/src/lib/components/Background.frag

@@ -42,6 +42,10 @@ float circle_grid(float x, float y, float divisions, float circleRadius) {
     return circle;
 }
 
+float lerp(float a, float b,float t) {
+    return a * (1.0 - t) + b * t;
+}
+
 void main(void) {
     float divisions = 0.1/cz;
     float thickness = 0.05/cz;
@@ -52,23 +56,35 @@ void main(void) {
     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;
+
+    //extra small grid
+    float m1 = grid(ux, uy, divisions*4.0, thickness*4.0) * 0.1;
+    float m2 = grid(ux, uy, divisions*16.0, thickness*16.0) * 0.03;
+    float xsmall = max(m1, m2);
+    
+    float s3 = circle_grid(ux, uy, cz/1.6, 1.0) * 0.2;
+    xsmall = max(xsmall, s3);
+
+    // small grid
+    float c1 = grid(ux, uy, divisions, thickness) * 0.2;
     float c2 = grid(ux, uy, divisions*2.0, thickness) * 0.1;
     float small = max(c1, c2);
 
     float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.2;
     small = max(small, s1);
 
+    // large grid
+    float c3 = grid(ux, uy, divisions/8.0, thickness/8.0) * 0.1;
+    float c4 = grid(ux, uy, divisions/2.0, thickness/4.0) * 0.05;
+    float large = max(c3, c4);
 
-    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;
+    float s2 = circle_grid(ux, uy, cz*20.0, 1.0) * 0.2;
     large = max(large, s2);
 
-    float c = large;
+    float c = mix(large, small, min(nz*2.0+0.05, 1.0));
+    c = mix(c, xsmall, max(min((nz-0.3)/0.7, 1.0), 0.0));
 
+    //c = xsmall;
 
     gl_FragColor = vec4(c, c, c, 1.0);
 }

frontend/src/lib/components/Background.svelte

@@ -41,10 +41,10 @@
         cz: {
           value: 30,
         },
-        minz: {
+        minZ: {
           value: minZoom,
         },
-        maxz: {
+        maxZ: {
           value: maxZoom,
         },
         height: {

frontend/src/lib/components/Camera.svelte

@@ -17,6 +17,7 @@
     position[0] = camera.position.x;
     position[1] = camera.position.z;
     position[2] = camera.zoom;
+
     saveControls();
   }
 

frontend/src/lib/components/Edge.svelte

@@ -7,7 +7,7 @@
   export let from: Node;
   export let to: Node;
 
-  let samples = 20;
+  let samples = 25;
 
   const curve = new CubicBezierCurve(
     new Vector2(from.position.x + 20, from.position.y),
@@ -31,10 +31,10 @@
       last_from_x = new_x;
       last_from_y = new_y;
     }
-    curve.v0.set(from.position.x + 5, from.position.y + 5 / 8);
-    curve.v1.set(from.position.x + 7, from.position.y + 5 / 8);
+    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 + 0.2, to.position.y + 2.55);
+    curve.v3.set(to.position.x, to.position.y + 2.55);
     points = curve.getPoints(samples).map((p) => new Vector3(p.x, 0, p.y));
   }
 
@@ -44,7 +44,27 @@
   }
 </script>
 
-<T.Mesh>
-  <MeshLineGeometry {points} />
-  <MeshLineMaterial width={1} attenuate={false} color={0xffffff} />
+<T.Mesh
+  position.x={from.position.x + 5}
+  position.z={from.position.y + 0.67}
+  position.y={0.8}
+  rotation.x={-Math.PI / 2}
+>
+  <T.CircleGeometry args={[0.1, 32]} />
+  <T.MeshBasicMaterial color={0xffffff} />
+</T.Mesh>
+
+<T.Mesh
+  position.x={to.position.x}
+  position.z={to.position.y + 2.55}
+  position.y={0.8}
+  rotation.x={-Math.PI / 2}
+>
+  <T.CircleGeometry args={[0.1, 32]} />
+  <T.MeshBasicMaterial color={0xffffff} />
+</T.Mesh>
+
+<T.Mesh position.y={0.5}>
+  <MeshLineGeometry {points} />
+  <MeshLineMaterial width={1} attenuate={false} color={0x555555} />
 </T.Mesh>

frontend/src/lib/components/Graph.svelte

@@ -47,8 +47,12 @@
       (event.clientY - mouseDownY) / cameraPosition[2];
 
     if (event.ctrlKey) {
-      newX = snapToGrid(newX, 2.5);
-      newY = snapToGrid(newY, 2.5);
+      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]);
     }
     node.position.x = newX;
     node.position.y = newY;

frontend/src/lib/components/NodeHeader.svelte

@@ -42,7 +42,7 @@
     height="100"
     preserveAspectRatio="none"
     style={`
-      --path: path("${createPath({ depth: 3, height: 15 })}");
+      --path: path("${createPath({ depth: 5, height: 27 })}");
       --hover-path: path("${createPath({ depth: 8, height: 24 })}");
     `}
   >
@@ -80,6 +80,8 @@
     stroke-width: 0.2px;
     transition: 0.2s;
     fill: #060606;
+    stroke: #777;
+    stroke-width: 0.1;
     d: var(--path);
   }
 
@@ -87,7 +89,7 @@
     font-size: 0.5em;
     display: flex;
     align-items: center;
-    padding-left: 2px;
+    padding-left: 5px;
     height: 100%;
   }
 

frontend/src/lib/components/NodeParameter.svelte

@@ -45,7 +45,7 @@
   <div class="content">
     <label>{label}</label>
 
-    <input type="number" bind:value />
+    <div class="input">input</div>
   </div>
 
   <svg
@@ -59,12 +59,7 @@
       --hover-path: path("${createPath({ depth: 8, height: 24 })}");
     `}
   >
-    <path
-      vector-effect="non-scaling-stroke"
-      fill="none"
-      stroke="white"
-      stroke-width="0.1"
-    ></path>
+    <path vector-effect="non-scaling-stroke"></path>
   </svg>
 </div>
 
@@ -91,6 +86,15 @@
     box-sizing: border-box;
   }
 
+  .input {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 2px;
+    font-size: 0.5em;
+    padding: 2px 2px;
+    background: #111;
+  }
+
   label {
     font-size: 0.5em;
   }
@@ -111,6 +115,8 @@
     stroke-width: 0.2px;
     transition: 0.2s;
     fill: #060606;
+    stroke: #777;
+    stroke-width: 0.1;
     d: var(--path);
   }