feat: migrate some more stuff to svelte-5, mainly app settings

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

@@ -21,11 +21,10 @@
   import HelpView from "../HelpView.svelte";
   import FileSaver from "file-saver";
   import { Canvas } from "@threlte/core";
+  import { getGraphManager } from "./context.js";
 
   const state = getGraphState();
 
-  export let manager: GraphManager;
-
   export let snapToGrid = true;
   export let showGrid = true;
   export let showHelp = false;
@@ -33,7 +32,8 @@
   let keymap =
     getContext<ReturnType<typeof createKeyMap>>("keymap") || createKeyMap([]);
 
-  setContext("graphManager", manager);
+  const manager = getGraphManager();
+
   const status = manager.status;
   const nodes = manager.nodes;
   const edges = manager.edges;
@@ -965,6 +965,7 @@
 <style>
   .graph-wrapper {
     position: relative;
+    z-index: 0;
     transition: opacity 0.3s ease;
     height: 100%;
   }

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

@@ -8,6 +8,9 @@
   import { createKeyMap } from "$lib/helpers/createKeyMap";
   import { GraphState } from "./state.svelte";
 
+  const state = new GraphState();
+  setContext("graphState", state);
+
   type Props = {
     graph: Graph;
     registry: NodeRegistry;
@@ -38,10 +41,9 @@
   }: Props = $props();
 
   export const keymap = createKeyMap([]);
-  export const manager = new GraphManager(registry);
 
-  const state = new GraphState();
-  setContext("graphState", state);
+  export const manager = new GraphManager(registry);
+  setContext("graphManager", manager);
 
   $effect(() => {
     if (state.activeNodeId !== -1) {
@@ -75,4 +77,4 @@
   manager.load(graph);
 </script>
 
-<GraphEl {manager} bind:showGrid bind:snapToGrid bind:showHelp />
+<GraphEl bind:showGrid bind:snapToGrid bind:showHelp />

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

@@ -18,7 +18,6 @@ let lastStyle = "";
 
 function updateColors() {
   if (!("getComputedStyle" in globalThis)) return;
-  console.log("updateColors")
   const style = getComputedStyle(document.body.parentElement!);
   let hash = "";
   for (const v of variables) {

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

@@ -8,12 +8,7 @@ export function getGraphState() {
 export class GraphState {
 
   activeNodeId = $state(-1);
-
   selectedNodes = $state(new Set<number>());
-  clearSelection() {
-    this.selectedNodes = new Set();
-  }
-
   activeSocket = $state<Socket | null>(null);
   hoveredSocket = $state<Socket | null>(null);
   possibleSockets = $state<Socket[]>([]);
@@ -21,6 +16,10 @@ export class GraphState {
     this.possibleSockets.map((s) => `${s.node.id}-${s.index}`),
   ));
 
+  clearSelection() {
+    this.selectedNodes = new Set();
+  }
+
 }
 
 export { colors } from "./colors";