feat: optimize deselect of nodes

frontend/src/lib/components/graph/Graph.svelte

@@ -30,6 +30,7 @@
   const maxZoom = 40;
   let mousePosition = [0, 0];
   let mouseDown: null | [number, number] = null;
+  let mouseDownId = -1;
   let boxSelection = false;
   let loaded = false;
   const cameraDown = [0, 0];
@@ -285,7 +286,7 @@
     }
 
     // here we are handling dragging of nodes
-    if ($activeNodeId !== -1) {
+    if ($activeNodeId !== -1 && mouseDownId !== -1) {
       const node = graph.getNode($activeNodeId);
       if (!node || event.buttons !== 1) return;
 
@@ -380,6 +381,7 @@
     cameraDown[1] = cameraPosition[1];
 
     const clickedNodeId = getNodeIdFromEvent(event);
+    mouseDownId = clickedNodeId;
 
     // if we clicked on a node
     if (clickedNodeId !== -1) {
@@ -431,13 +433,39 @@
   }
 
   function handleKeyDown(event: KeyboardEvent) {
-    const bodyIsFocused = document.activeElement === document.body;
+    const bodyIsFocused =
+      document.activeElement === document.body ||
+      document?.activeElement?.id === "graph";
 
     if (event.key === "Escape") {
       $activeNodeId = -1;
       $selectedNodes?.clear();
       $selectedNodes = $selectedNodes;
-      document?.activeElement.blur();
+      (document.activeElement as HTMLElement)?.blur();
+    }
+
+    if (event.key === ".") {
+      const average = [0, 0];
+      for (const node of $nodes.values()) {
+        average[0] += node.position.x;
+        average[1] += node.position.y;
+      }
+      average[0] /= $nodes.size;
+      average[1] /= $nodes.size;
+
+      const camX = cameraPosition[0];
+      const camY = cameraPosition[1];
+      const camZ = cameraPosition[2];
+
+      const ease = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
+
+      animate(500, (a: number) => {
+        setCameraTransform(
+          lerp(camX, average[0], ease(a)),
+          lerp(camY, average[1], ease(a)),
+          lerp(camZ, 2, ease(a)),
+        );
+      });
     }
 
     if (event.key === "a" && event.ctrlKey) {

frontend/src/lib/components/graph/GraphView.svelte

@@ -11,7 +11,6 @@
   export let edges: Writable<EdgeType[]>;
 
   export let cameraPosition = [0, 0, 4];
-  $: console.log(cameraPosition[2]);
 
   const isNodeInView = getContext<(n: NodeType) => boolean>("isNodeInView");
 

frontend/src/lib/elements/Details.svelte

@@ -12,6 +12,7 @@
   details {
     padding: 1em;
     color: white;
+    background-color: #202020;
     outline: solid 0.1px white;
     border-radius: 2px;
     font-weight: 300;

frontend/src/routes/+page.svelte

@@ -5,6 +5,8 @@
   import { MemoryRuntimeExecutor } from "$lib/runtime-executor";
   import { MemoryNodeRegistry } from "$lib/node-registry";
   import { LinearSRGBColorSpace } from "three";
+  import Details from "$lib/elements/Details.svelte";
+  import { JsonView } from "@zerodevx/svelte-json-view";
 
   const nodeRegistry = new MemoryNodeRegistry();
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
@@ -23,29 +25,26 @@
   });
 
   let debug: undefined;
-
-  // onMount(async () => {
-  //   try {
-  //     const res = await invoke("greet", { name: "Dude" });
-  //     console.log({ res });
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  //
-  //   try {
-  //     const res2 = await invoke("run_nodes", {});
-  //     console.log({ res2 });
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  // });
 </script>
 
-<!-- <div class="wrapper"> -->
+<div class="wrapper">
-<!--   <Details> -->
+  <Details>
-<!--     <JsonView json={debug} /> -->
+    <button
-<!--   </Details> -->
+      on:click={() => graphManager.load(graphManager.createTemplate("tree", 5))}
-<!-- </div> -->
+      >load tree</button
+    >
+    <br />
+    <br />
+    <button
+      on:click={() =>
+        graphManager.load(graphManager.createTemplate("grid", 5, 5))}
+      >load grid</button
+    >
+    <br />
+    <br />
+    <JsonView json={debug} />
+  </Details>
+</div>
 
 <div id="canvas-wrapper">
   <Canvas
@@ -64,6 +63,13 @@
     height: 100vh;
   }
 
+  .wrapper {
+    position: absolute;
+    z-index: 100;
+    top: 10px;
+    left: 10px;
+  }
+
   :global(html) {
     background: rgb(13, 19, 32);
     background: linear-gradient(