fix: 120 type errors

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

@@ -52,7 +52,7 @@
 
     if (event.key === "Enter") {
       if (activeNodeId && position) {
-        graph.createNode({ type: activeNodeId, position });
+        graph.createNode({ type: activeNodeId, position, props: {} });
         position = null;
       }
       return;

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { Hst } from "@histoire/plugin-svelte";
-  export let Hst: Hst;
-  import Background from "./Background.svelte";
-  import { Canvas } from "@threlte/core";
-  import Camera from "../Camera.svelte";
-  let width = globalThis.innerWidth || 100;
-  let height = globalThis.innerHeight || 100;
-
-  let cameraPosition: [number, number, number] = [0, 1, 0];
-</script>
-
-<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
-
-<Hst.Story>
-  <Canvas shadows={false}>
-    <Camera bind:position={cameraPosition} />
-
-    <Background {cameraPosition} {width} {height} />
-  </Canvas>
-</Hst.Story>

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

@@ -11,7 +11,7 @@ import { fastHashString } from "@nodes/utils";
 import { SvelteMap } from "svelte/reactivity";
 import EventEmitter from "./helpers/EventEmitter";
 import { createLogger } from "./helpers/index";
-import throttle from "./helpers/throttle";
+import throttle from "$lib/helpers/throttle";
 import { HistoryManager } from "./history-manager";
 
 const logger = createLogger("graph-manager");
@@ -24,7 +24,7 @@ const clone =
 
 function areSocketsCompatible(
   output: string | undefined,
-  inputs: string | string[] | undefined,
+  inputs: string | (string | undefined)[] | undefined,
 ) {
   if (Array.isArray(inputs) && output) {
     return inputs.includes(output);
@@ -99,7 +99,6 @@ export class GraphManager extends EventEmitter<{
 
   private lastSettingsHash = 0;
   setSettings(settings: Record<string, unknown>) {
-    console.log("GraphManager.setSettings", settings);
     let hash = fastHashString(JSON.stringify(settings));
     if (hash === this.lastSettingsHash) return;
     this.lastSettingsHash = hash;
@@ -154,7 +153,7 @@ export class GraphManager extends EventEmitter<{
 
   private _init(graph: Graph) {
     const nodes = new Map(
-      graph.nodes.map((node) => {
+      graph.nodes.map((node: Node) => {
         const nodeType = this.registry.getNode(node.type);
         if (nodeType) {
           node.tmp = {

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

@@ -23,8 +23,6 @@
     invalidate();
   });
 
-  $effect(() => console.log({ nodes }));
-
   const graphState = getGraphState();
 
   const isNodeInView = getContext<(n: NodeType) => boolean>("isNodeInView");
@@ -50,8 +48,6 @@
     }),
   );
 
-  const nodeArray = $derived(Array.from(nodes.values()));
-
   onMount(() => {
     for (const node of nodes.values()) {
       if (node?.tmp?.ref) {
@@ -86,9 +82,9 @@
     style:transform={`scale(${cameraPosition[2] * 0.1})`}
     class:hovering-sockets={graphState.activeSocket}
   >
-    {#each nodeArray as node, i (node.id)}
+    {#each nodes.values() as node (node.id)}
       <Node
-        bind:node={nodeArray[i]}
+        {node}
         inView={cameraPosition && isNodeInView(node)}
         z={cameraPosition[2]}
       />

app/src/lib/graph-interface/helpers/EventEmitter.ts

@@ -1,15 +1,15 @@
-import throttle from './throttle.js';
+import throttle from "$lib/helpers/throttle";
 
 type EventMap = Record<string, unknown>;
 type EventKey<T extends EventMap> = string & keyof T;
 type EventReceiver<T> = (params: T, stuff?: Record<string, unknown>) => unknown;
 
-
-export default class EventEmitter<T extends EventMap = { [key: string]: unknown }> {
+export default class EventEmitter<
+  T extends EventMap = { [key: string]: unknown },
+> {
   index = 0;
   public eventMap: T = {} as T;
-  constructor() {
-  }
+  constructor() {}
 
   private cbs: { [key: string]: ((data?: unknown) => unknown)[] } = {};
   private cbsOnce: { [key: string]: ((data?: unknown) => unknown)[] } = {};
@@ -29,7 +29,11 @@ export default class EventEmitter<T extends EventMap = { [key: string]: unknown
     }
   }
 
-  public on<K extends EventKey<T>>(event: K, cb: EventReceiver<T[K]>, throttleTimer = 0) {
+  public on<K extends EventKey<T>>(
+    event: K,
+    cb: EventReceiver<T[K]>,
+    throttleTimer = 0,
+  ) {
     if (throttleTimer > 0) cb = throttle(cb, throttleTimer);
     const cbs = Object.assign(this.cbs, {
       [event]: [...(this.cbs[event] || []), cb],
@@ -38,7 +42,7 @@ export default class EventEmitter<T extends EventMap = { [key: string]: unknown
 
     // console.log('New EventEmitter ', this.constructor.name);
     return () => {
-      cbs[event]?.splice(cbs[event].indexOf(cb), 1);
+      this.cbs[event]?.splice(cbs[event].indexOf(cb), 1);
     };
   }
 
@@ -48,10 +52,17 @@ export default class EventEmitter<T extends EventMap = { [key: string]: unknown
    * @param {function} cb Listener, gets called everytime the event is emitted
    * @returns {function} Returns a function which removes the listener when called
    */
-  public once<K extends EventKey<T>>(event: K, cb: EventReceiver<T[K]>): () => void {
-    this.cbsOnce[event] = [...(this.cbsOnce[event] || []), cb];
+  public once<K extends EventKey<T>>(
+    event: K,
+    cb: EventReceiver<T[K]>,
+  ): () => void {
+    const cbsOnce = Object.assign(this.cbsOnce, {
+      [event]: [...(this.cbsOnce[event] || []), cb],
+    });
+    this.cbsOnce = cbsOnce;
+
     return () => {
-      this.cbsOnce[event].splice(this.cbsOnce[event].indexOf(cb), 1);
+      cbsOnce[event]?.splice(cbsOnce[event].indexOf(cb), 1);
     };
   }
 

app/src/lib/graph-interface/helpers/throttle.ts

@@ -1,20 +0,0 @@
-export default <R, A extends any[]>(
-  fn: (...args: A) => R,
-  delay: number
-): ((...args: A) => R) => {
-  let wait = false;
-
-  return (...args: A) => {
-    if (wait) return undefined;
-
-    const val = fn(...args);
-
-    wait = true;
-
-    setTimeout(() => {
-      wait = false;
-    }, delay);
-
-    return val;
-  }
-};

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

@@ -2,23 +2,22 @@ import { create, type Delta } from "jsondiffpatch";
 import type { Graph } from "@nodes/types";
 import { createLogger, clone } from "./helpers/index.js";
 
-
 const diff = create({
   objectHash: function (obj, index) {
     if (obj === null) return obj;
-    if ("id" in obj) return obj.id;
+    if ("id" in obj) return obj.id as string;
+    if ("_id" in obj) return obj._id as string;
     if (Array.isArray(obj)) {
-      return obj.join("-")
+      return obj.join("-");
     }
-    return obj?.id || obj._id || '$$index:' + index;
-  }
-})
+    return "$$index:" + index;
+  },
+});
 
-const log = createLogger("history")
+const log = createLogger("history");
 log.mute();
 
 export class HistoryManager {
-
   index: number = -1;
   history: Delta[] = [];
   private initialState: Graph | undefined;
@@ -27,26 +26,25 @@ export class HistoryManager {
   private opts = {
     debounce: 400,
     maxHistory: 100,
-  }
+  };
 
   constructor({ maxHistory = 100, debounce = 100 } = {}) {
     this.history = [];
     this.index = -1;
     this.opts.debounce = debounce;
     this.opts.maxHistory = maxHistory;
-    globalThis["_history"] = this;
   }
 
   save(state: Graph) {
     if (!this.state) {
       this.state = clone(state);
       this.initialState = this.state;
-      log.log("initial state saved")
+      log.log("initial state saved");
     } else {
       const newState = state;
       const delta = diff.diff(this.state, newState);
       if (delta) {
-        log.log("saving state")
+        log.log("saving state");
         // Add the delta to history
         if (this.index < this.history.length - 1) {
           // Clear the history after the current index if new changes are made
@@ -62,7 +60,7 @@ export class HistoryManager {
         }
         this.state = newState;
       } else {
-        log.log("no changes")
+        log.log("no changes");
       }
     }
   }
@@ -76,7 +74,7 @@ export class HistoryManager {
 
   undo() {
     if (this.index === -1 && this.initialState) {
-      log.log("reached start, loading initial state")
+      log.log("reached start, loading initial state");
       return clone(this.initialState);
     } else {
       const delta = this.history[this.index];
@@ -96,7 +94,7 @@ export class HistoryManager {
       this.state = nextState;
       return clone(nextState);
     } else {
-      log.log("reached end")
+      log.log("reached end");
     }
   }
 }

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

@@ -41,6 +41,7 @@
   const height = getNodeHeight?.(node.type);
 
   $effect(() => {
+    if (!node?.tmp) node.tmp = {};
     node.tmp.mesh = meshRef;
   });
 

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

@@ -27,9 +27,7 @@
   const zOffset = (node.tmp?.random || 0) * 0.5;
   const zLimit = 2 - zOffset;
 
-  const type = node?.tmp?.type;
-
-  const parameters = Object.entries(type?.inputs || {}).filter(
+  const parameters = Object.entries(node?.tmp?.type?.inputs || {}).filter(
     (p) =>
       p[1].type !== "seed" && !("setting" in p[1]) && p[1]?.hidden !== true,
   );

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

@@ -11,7 +11,7 @@
   };
 
   const {
-    node,
+    node = $bindable(),
     input,
     id,
     elementId = `input-${Math.random().toString(36).substring(7)}`,

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

@@ -82,7 +82,7 @@
   class:disabled={!graphState?.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
-    <div class="content" class:disabled={graph.inputSockets?.has(socketId)}>
+    <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
       {#if inputType.label !== ""}
         <label for={elementId}>{input.label || id}</label>
       {/if}