feat: make node definitions type safe with zod

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

@@ -11,7 +11,7 @@
   let value: string = "";
   let activeNodeId: string = "";
 
-  const allNodes = graph.getNodeTypes();
+  const allNodes = graph.getNodeDefinitions();
 
   function filterNodes() {
     return allNodes.filter((node) => node.id.includes(value));

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

@@ -51,7 +51,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
       }
       this.inputSockets.set(s);
     });
-    this.execute = throttle(() => this._execute(), 50);
+    this.execute = throttle(() => this._execute(), 10);
   }
 
   serialize(): Graph {
@@ -83,7 +83,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     this.emit("result", this.serialize());
   }
 
-  getNodeTypes() {
+  getNodeDefinitions() {
     return this.registry.getAllNodes();
   }
 
@@ -184,7 +184,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     // load settings
     const settingTypes: Record<string, NodeInput> = {};
     const settingValues = graph.settings || {};
-    const types = this.getNodeTypes();
+    const types = this.getNodeDefinitions();
     for (const type of types) {
       if (type.inputs) {
         for (const key in type.inputs) {

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

@@ -8,6 +8,7 @@
   import Camera from "../Camera.svelte";
   import GraphView from "./GraphView.svelte";
   import type { Node, Node as NodeType, Socket } from "@nodes/types";
+  import { NodeDefinitionSchema } from "@nodes/types";
   import FloatingEdge from "../edges/FloatingEdge.svelte";
   import {
     activeNodeId,
@@ -20,7 +21,7 @@
   import { createKeyMap } from "../../helpers/createKeyMap";
   import BoxSelection from "../BoxSelection.svelte";
   import AddMenu from "../AddMenu.svelte";
-  import { get } from "svelte/store";
+  import { createWasmWrapper } from "@nodes/utils";
 
   export let graph: GraphManager;
 
@@ -759,30 +760,63 @@
     addMenuPosition = null;
   }
 
+  let isDragging = false;
+
   function handleDrop(event: DragEvent) {
+    event.preventDefault();
+    isDragging = false;
     if (!event.dataTransfer) return;
     const nodeId = event.dataTransfer.getData("data/node-id");
-    let mx = event.clientX - rect.x;
-    let my = event.clientY - rect.y;
 
-    let nodeOffsetX = event.dataTransfer.getData("data/node-offset-x");
-    let nodeOffsetY = event.dataTransfer.getData("data/node-offset-y");
-    if (nodeOffsetX && nodeOffsetY) {
-      mx += parseInt(nodeOffsetX);
-      my += parseInt(nodeOffsetY);
-    }
+    if (nodeId) {
+      let mx = event.clientX - rect.x;
+      let my = event.clientY - rect.y;
 
-    const pos = projectScreenToWorld(mx, my);
-    graph.loadNode(nodeId).then(() => {
-      graph.createNode({
-        type: nodeId,
-        props: {},
-        position: pos,
+      let nodeOffsetX = event.dataTransfer.getData("data/node-offset-x");
+      let nodeOffsetY = event.dataTransfer.getData("data/node-offset-y");
+      if (nodeOffsetX && nodeOffsetY) {
+        mx += parseInt(nodeOffsetX);
+        my += parseInt(nodeOffsetY);
+      }
+
+      const pos = projectScreenToWorld(mx, my);
+      graph.loadNode(nodeId).then(() => {
+        graph.createNode({
+          type: nodeId,
+          props: {},
+          position: pos,
+        });
       });
-    });
+    } else if (event.dataTransfer.files.length) {
+      const files = event.dataTransfer.files;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const buffer = e.target?.result;
+        if (buffer) {
+          const wrapper = createWasmWrapper(buffer);
+          const definition = wrapper.get_definition();
+          const res = NodeDefinitionSchema.parse(definition);
+          console.log(wrapper, res);
+        }
+      };
+      reader.readAsArrayBuffer(files[0]);
+      console.log({ files });
+    }
+  }
+
+  function handleDragEnter(e: DragEvent) {
+    e.preventDefault();
+    isDragging = true;
+    console.log(e);
   }
 
   function handlerDragOver(e: DragEvent) {
+    isDragging = true;
+    e.preventDefault();
+  }
+
+  function handleDragEnd(e: DragEvent) {
+    isDragging = false;
     e.preventDefault();
   }
 
@@ -807,11 +841,20 @@
   tabindex="0"
   bind:clientWidth={width}
   bind:clientHeight={height}
+  on:dragenter={handleDragEnter}
   on:dragover={handlerDragOver}
   on:drop={handleDrop}
   on:keydown={keymap.handleKeyboardEvent}
   on:mousedown={handleMouseDown}
 >
+  <input
+    type="file"
+    accept="application/wasm"
+    disabled={!isDragging}
+    on:dragend={handleDragEnd}
+    on:dragleave={handleDragEnd}
+  />
+
   <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
     <Camera bind:camera position={cameraPosition} />
 
@@ -856,4 +899,15 @@
     transition: opacity 0.3s ease;
     height: 100%;
   }
+  input {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: red;
+    opacity: 0.5;
+  }
+  input:disabled {
+    display: none;
+  }
 </style>