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

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

@@ -29,16 +29,22 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
 
   private _nodes: Map<number, Node> = new Map();
   nodes: Writable<Map<number, Node>> = writable(new Map());
-  settingTypes: Record<string, NodeInput> = {};
-  settings: Record<string, unknown> = {};
+
   private _edges: Edge[] = [];
   edges: Writable<Edge[]> = writable([]);
 
+  settingTypes: Record<string, NodeInput> = {};
+  settings: Record<string, unknown> = {};
+
   currentUndoGroup: number | null = null;
 
   inputSockets: Writable<Set<string>> = writable(new Set());
 
   history: HistoryManager = new HistoryManager();
+  execute = throttle(() => {
+    if (this.loaded === false) return;
+    this.emit("result", this.serialize());
+  }, 10);
 
   constructor(public registry: NodeRegistry) {
     super();
@@ -53,7 +59,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
       }
       this.inputSockets.set(s);
     });
-    this.execute = throttle(() => this._execute(), 10);
   }
 
   serialize(): Graph {
@@ -67,7 +72,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     const edges = this._edges.map(edge => [edge[0].id, edge[1], edge[2].id, edge[3]]) as Graph["edges"];
     const serialized = { id: this.graph.id, settings: this.settings, nodes, edges };
     logger.groupEnd();
-    console.log({ serialized });
 
     return clone(serialized);
   }
@@ -86,11 +90,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
   }
 
 
-  execute() { }
-  _execute() {
-    if (this.loaded === false) return;
-    this.emit("result", this.serialize());
-  }
 
   getNodeDefinitions() {
     return this.registry.getAllNodes();
@@ -111,9 +110,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     return [...nodes.values()];
   }
 
-
   getEdgesBetweenNodes(nodes: Node[]): [number, number, number, string][] {
-
     const edges = [];
     for (const node of nodes) {
       const children = node.tmp?.children || [];

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";

app/src/lib/graph-interface/node/NodeHTML.svelte

@@ -3,7 +3,6 @@
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
   import { getContext, onMount } from "svelte";
-  import Page from "../../../routes/+page.svelte";
   export let isActive = false;
   export let isSelected = false;
   export let inView = true;

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -26,8 +26,8 @@
   const aspectRatio = 0.25;
 
   const path = createNodePath({
-    depth: 7,
-    height: 40,
+    depth: 5,
+    height: 29,
     y: 50,
     cornerTop,
     rightBump,

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -59,9 +59,9 @@
     aspectRatio,
   });
   const pathDisabled = createNodePath({
-    depth: 0,
-    height: 15,
-    y: 50,
+    depth: 4.5,
+    height: 14,
+    y: 50.5,
     cornerBottom,
     leftBump,
     aspectRatio,
@@ -80,7 +80,7 @@
   class="wrapper"
   data-node-type={node.type}
   data-node-input={id}
-  class:disabled={!graphState.possibleSocketIds.has(socketId)}
+  class:disabled={!graphState?.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
     <div class="content" class:disabled={$inputSockets?.has(socketId)}>