feat: add snapToGrid and showGrid settings

app/src/lib/graph-interface/background/Background.frag

@@ -67,27 +67,27 @@ void main(void) {
 
 
     //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 m1 = grid(ux, uy, divisions*4.0, thickness*4.0) * 0.9;
+    float m2 = grid(ux, uy, divisions*16.0, thickness*16.0) * 0.5;
     float xsmall = max(m1, m2);
     
-    float s3 = circle_grid(ux, uy, cz/1.6, 1.0) * 0.2;
+    float s3 = circle_grid(ux, uy, cz/1.6, 1.0) * 0.5;
     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 c1 = grid(ux, uy, divisions, thickness) * 0.6;
+    float c2 = grid(ux, uy, divisions*2.0, thickness) * 0.5;
     float small = max(c1, c2);
 
-    float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.2;
+    float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.5;
     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 c3 = grid(ux, uy, divisions/8.0, thickness/8.0) * 0.5;
+    float c4 = grid(ux, uy, divisions/2.0, thickness/4.0) * 0.4;
     float large = max(c3, c4);
 
-    float s2 = circle_grid(ux, uy, cz*20.0, 1.0) * 0.2;
+    float s2 = circle_grid(ux, uy, cz*20.0, 1.0) * 0.4;
     large = max(large, s2);
 
     float c = mix(large, small, min(nz*2.0+0.05, 1.0));

app/src/lib/graph-interface/background/Background.svelte

@@ -53,7 +53,7 @@
       }}
       uniforms.camPos.value={cameraPosition}
       uniforms.backgroundColor.value={$colors.layer0}
-      uniforms.lineColor.value={$colors.layer2}
+      uniforms.lineColor.value={$colors.outline}
       uniforms.zoomLimits.value={[minZoom, maxZoom]}
       uniforms.dimensions.value={[width, height]}
     />

app/src/lib/graph-interface/graph/Graph.svelte

@@ -25,6 +25,11 @@
 
   export let graph: GraphManager;
 
+  export let settings = {
+    snapToGrid: true,
+    showGrid: true,
+  };
+
   let keymap =
     getContext<ReturnType<typeof createKeyMap>>("keymap") || createKeyMap([]);
 
@@ -320,8 +325,10 @@
 
       if (event.ctrlKey) {
         const snapLevel = getSnapLevel();
-        newX = snapToGrid(newX, 5 / snapLevel);
-        newY = snapToGrid(newY, 5 / snapLevel);
+        if (settings.snapToGrid) {
+          newX = snapToGrid(newX, 5 / snapLevel);
+          newY = snapToGrid(newY, 5 / snapLevel);
+        }
       }
 
       if (!node.tmp.isMoving) {
@@ -667,15 +674,20 @@
     if (activeNode?.tmp?.isMoving) {
       activeNode.tmp = activeNode.tmp || {};
       activeNode.tmp.isMoving = false;
-      const snapLevel = getSnapLevel();
-      activeNode.position[0] = snapToGrid(
-        activeNode?.tmp?.x ?? activeNode.position[0],
-        5 / snapLevel,
-      );
-      activeNode.position[1] = snapToGrid(
-        activeNode?.tmp?.y ?? activeNode.position[1],
-        5 / snapLevel,
-      );
+      if (settings.snapToGrid) {
+        const snapLevel = getSnapLevel();
+        activeNode.position[0] = snapToGrid(
+          activeNode?.tmp?.x ?? activeNode.position[0],
+          5 / snapLevel,
+        );
+        activeNode.position[1] = snapToGrid(
+          activeNode?.tmp?.y ?? activeNode.position[1],
+          5 / snapLevel,
+        );
+      } else {
+        activeNode.position[0] = activeNode?.tmp?.x ?? activeNode.position[0];
+        activeNode.position[1] = activeNode?.tmp?.y ?? activeNode.position[1];
+      }
       const nodes = [
         ...[...($selectedNodes?.values() || [])].map((id) => graph.getNode(id)),
       ] as NodeType[];
@@ -796,11 +808,9 @@
           const wrapper = createWasmWrapper(buffer);
           const definition = wrapper.get_definition();
           const res = NodeDefinitionSchema.parse(definition);
-          console.log(wrapper, res);
         }
       };
       reader.readAsArrayBuffer(files[0]);
-      console.log({ files });
     }
   }
 
@@ -858,7 +868,9 @@
   <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
     <Camera bind:camera position={cameraPosition} />
 
-    <Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
+    {#if settings?.showGrid !== false}
+      <Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
+    {/if}
 
     {#if boxSelection && mouseDown}
       <BoxSelection

app/src/lib/graph-interface/graph/Wrapper.svelte

@@ -18,6 +18,9 @@
   export const keymap = createKeyMap([]);
   setContext("keymap", keymap);
 
+  export let showGrid = false;
+  export let snapToGrid = false;
+
   const updateSettings = debounce((s) => {
     manager.setSettings(s);
   }, 200);
@@ -43,4 +46,4 @@
   const dispatch = createEventDispatcher();
 </script>
 
-<GraphEl graph={manager} />
+<GraphEl graph={manager} settings={{ showGrid, snapToGrid }} />