feat: init

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -4,3 +4,4 @@ node_modules/
 # Added by cargo
 
 /target
+.direnv/

app/.env

@@ -0,0 +1 @@
+PUBLIC_ANALYTIC_SCRIPT=""

app/src/app.html

@@ -5,7 +5,6 @@
   <meta charset="utf-8" />
   <link rel="icon" href="%sveltekit.assets%/svelte.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script defer src="https://umami.max-richter.dev/script.js" data-website-id="585c442b-0524-4874-8955-f9853b44b17e"></script>
   %sveltekit.head%
   <title>Nodes</title>
   <script>

app/src/lib/config.ts

@@ -0,0 +1,2 @@
+import { PUBLIC_ANALYTIC_SCRIPT } from "$env/static/public";
+export const ANALYTIC_SCRIPT = PUBLIC_ANALYTIC_SCRIPT;

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -1,8 +1,8 @@
 import type { NodeInstance, Socket } from "@nodarium/types";
 import { getContext, setContext } from "svelte";
-import { SvelteSet } from "svelte/reactivity";
+import { SvelteMap, SvelteSet } from "svelte/reactivity";
 import type { GraphManager } from "./graph-manager.svelte";
-import type { OrthographicCamera } from "three";
+import type { Mesh, OrthographicCamera, Vector3 } from "three";
 
 
 const graphStateKey = Symbol("graph-state");
@@ -46,6 +46,8 @@ export class GraphState {
   width = $state(100);
   height = $state(100);
 
+  edgeGeometries = new SvelteMap<string, { geo: Mesh, points: Vector3[] }>();
+
   wrapper = $state<HTMLDivElement>(null!);
   rect: DOMRect = $derived(
     (this.wrapper && this.width && this.height) ? this.wrapper.getBoundingClientRect() : new DOMRect(0, 0, 0, 0),
@@ -97,6 +99,14 @@ export class GraphState {
 
   isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT";
 
+  setEdgeGeometry(edgeId: string, edgeGeometry: { geo: Mesh, points: Vector3[] }) {
+    this.edgeGeometries.set(edgeId, edgeGeometry);
+  }
+
+  removeEdgeGeometry(edgeId: string) {
+    this.edgeGeometries.delete(edgeId);
+  }
+
   updateNodePosition(node: NodeInstance) {
     if (
       node.state.x === node.position[0] &&

app/src/lib/graph-interface/graph/events.ts

@@ -112,16 +112,38 @@ export class FileDropEventManager {
 }
 
 
+class EdgeInteractionManager {
+  constructor(
+    private graph: GraphManager,
+    private state: GraphState) { };
+
+  handleMouseDown() {
+    const edges = this.graph.edges;
+    console.log(edges)
+  }
+
+  handleMouseMove() {
+  }
+
+  handleMouseUp() {
+  }
+}
+
+
 export class MouseEventManager {
 
+  edgeInteractionManager: EdgeInteractionManager
 
   constructor(
     private graph: GraphManager,
     private state: GraphState
-  ) { }
+  ) {
 
+    this.edgeInteractionManager = new EdgeInteractionManager(graph, state);
+  }
 
   handleMouseUp(event: MouseEvent) {
+    this.edgeInteractionManager.handleMouseUp();
     this.state.isPanning = false;
     if (!this.state.mouseDown) return;
 
@@ -312,6 +334,7 @@ export class MouseEventManager {
         this.state.activeNodeId = clickedNodeId;
         this.state.clearSelection();
       }
+      this.edgeInteractionManager.handleMouseDown();
     } else if (event.ctrlKey) {
       this.state.boxSelection = true;
     }
@@ -397,6 +420,7 @@ export class MouseEventManager {
 
     // here we are handling dragging of nodes
     if (this.state.activeNodeId !== -1 && this.state.mouseDownNodeId !== -1) {
+      this.edgeInteractionManager.handleMouseMove();
       const node = this.graph.getNode(this.state.activeNodeId);
       if (!node || event.buttons !== 1) return;
 

app/src/lib/performance/BarSplit.svelte

@@ -14,7 +14,10 @@
 <div class="wrapper">
   <div class="bars">
     {#each values as value, i}
-      <div class="bar bg-{colors[i]}" style="width: {(value / total) * 100}%;">
+      <div
+        class="bar bg-{colors[i]}-400"
+        style="width: {(value / total) * 100}%;"
+      >
         {Math.round(value)}ms
       </div>
     {/each}
@@ -22,10 +25,12 @@
 
   <div class="labels mt-2">
     {#each values as _label, i}
-      <div class="text-{colors[i]}">{labels[i]}</div>
+      <div class="text-{colors[i]}-400">{labels[i]}</div>
     {/each}
   </div>
-  <span class="bg-red bg-green bg-blue text-red text-green text-blue"></span>
+  <span
+    class="bg-red-400 bg-green-400 bg-blue-400 text-red-400 text-green-400 text-blue-400"
+  ></span>
 </div>
 
 <style>

app/src/lib/runtime/runtime-executor.ts

@@ -64,7 +64,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
   constructor(
     private registry: NodeRegistry,
-    private cache?: SyncCache<Int32Array>,
+    public cache?: SyncCache<Int32Array>,
   ) {
     this.cache = undefined;
   }

app/src/lib/runtime/worker-runtime-executor-backend.ts

@@ -13,6 +13,22 @@ const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
 const performanceStore = createPerformanceStore();
 executor.perf = performanceStore;
 
+export async function setUseRegistryCache(useCache: boolean) {
+  if (useCache) {
+    nodeRegistry.cache = indexDbCache;
+  } else {
+    nodeRegistry.cache = undefined;
+  }
+}
+
+export async function setUseRuntimeCache(useCache: boolean) {
+  if (useCache) {
+    executor.cache = cache;
+  } else {
+    executor.cache = undefined;
+  }
+}
+
 export async function executeGraph(
   graph: Graph,
   settings: Record<string, unknown>,

app/src/lib/runtime/worker-runtime-executor.ts

@@ -11,5 +11,11 @@ export class WorkerRuntimeExecutor implements RuntimeExecutor {
   async getPerformanceData() {
     return this.worker.getPerformanceData();
   }
+  set useRuntimeCache(useCache: boolean) {
+    this.worker.setUseRuntimeCache(useCache);
+  }
+  set useRegistryCache(useCache: boolean) {
+    this.worker.setUseRegistryCache(useCache);
+  }
 }
 

app/src/lib/settings/app-settings.svelte.ts

@@ -87,6 +87,19 @@ export const AppSettingTypes = {
       label: "Show Graph Source",
       value: false,
     },
+    cache: {
+      title: "Cache",
+      useRuntimeCache: {
+        type: "boolean",
+        label: "Node Results",
+        value: true,
+      },
+      useRegistryCache: {
+        type: "boolean",
+        label: "Node Source",
+        value: true,
+      },
+    },
     stressTest: {
       title: "Stress Test",
       amount: {

app/src/routes/+layout.svelte

@@ -2,7 +2,14 @@
   import "@nodarium/ui/app.css";
   import "../app.css";
   import type { Snippet } from "svelte";
+  import * as config from "$lib/config";
   const { children } = $props<{ children?: Snippet }>();
 </script>
 
 {@render children?.()}
+
+<svelte:head>
+  {#if config.ANALYTIC_SCRIPT}
+    {@html config.ANALYTIC_SCRIPT}
+  {/if}
+</svelte:head>

app/src/routes/+page.svelte

@@ -42,6 +42,25 @@
     appSettings.value.debug.useWorker ? workerRuntime : memoryRuntime,
   );
 
+  $effect(() => {
+    workerRuntime.useRegistryCache =
+      appSettings.value.debug.cache.useRuntimeCache;
+    workerRuntime.useRuntimeCache =
+      appSettings.value.debug.cache.useRegistryCache;
+
+    if (appSettings.value.debug.cache.useRegistryCache) {
+      nodeRegistry.cache = registryCache;
+    } else {
+      nodeRegistry.cache = undefined;
+    }
+
+    if (appSettings.value.debug.cache.useRuntimeCache) {
+      memoryRuntime.cache = runtimeCache;
+    } else {
+      memoryRuntime.cache = undefined;
+    }
+  });
+
   let activeNode = $state<NodeInstance | undefined>(undefined);
   let scene = $state<Group>(null!);
 
@@ -223,7 +242,7 @@
           hidden={!appSettings.value.debug.showGraphJson}
           icon="i-[tabler--code]"
         >
-          <GraphSource {graph} />
+          <GraphSource graph={graph && manager.serialize()} />
         </Panel>
         <Panel
           id="benchmark"

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1768564909,
+        "narHash": "sha256-Kell/SpJYVkHWMvnhqJz/8DqQg2b6PguxVWOuadbHCc=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "e4bae1bd10c9c57b2cf517953ab70060a828ee6f",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,40 @@
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+  };
+
+  outputs = {nixpkgs, ...}: let
+    systems = ["aarch64-darwin" "x86_64-linux"];
+    eachSystem = function:
+      nixpkgs.lib.genAttrs systems (system:
+        function {
+          inherit system;
+          pkgs = nixpkgs.legacyPackages.${system};
+        });
+  in {
+    devShells = eachSystem ({pkgs, ...}: {
+      default = pkgs.mkShellNoCC {
+        packages = [
+          # general deps
+          pkgs.nodejs_24
+          pkgs.pnpm_10
+
+          # wasm/rust stuff
+          pkgs.rustc
+          pkgs.cargo
+          pkgs.rust-analyzer
+          pkgs.rustfmt
+          pkgs.wasm-bindgen-cli
+          pkgs.wasm-pack
+          pkgs.lld
+
+          # frontend
+          pkgs.vscode-langservers-extracted
+          pkgs.typescript-language-server
+          pkgs.prettier
+          pkgs.tailwindcss-language-server
+        ];
+      };
+    });
+  };
+}

packages/registry/src/node-registry-client.ts

@@ -16,7 +16,7 @@ export class RemoteNodeRegistry implements NodeRegistry {
 
   constructor(
     private url: string,
-    private cache?: AsyncCache<ArrayBuffer | string>,
+    public cache?: AsyncCache<ArrayBuffer | string>,
   ) { }
 
   async fetchJson(url: string, skipCache = false) {