feat: add active node settings

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

@@ -5,6 +5,7 @@ import EventEmitter from "./helpers/EventEmitter.js";
 import throttle from "./helpers/throttle.js";
 import { createLogger } from "./helpers/index.js";
 import type { NodeInput } from "@nodes/types";
+import { fastHashString } from "@nodes/utils";
 
 const logger = createLogger("graph-manager");
 
@@ -70,7 +71,13 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
   }
 
 
+  private lastSettingsHash = 0;
   setSettings(settings: Record<string, unknown>) {
+
+    let hash = fastHashString(JSON.stringify(settings));
+    if (hash === this.lastSettingsHash) return;
+    this.lastSettingsHash = hash;
+
     this.settings = settings;
     this.save();
     this.execute();

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

@@ -39,10 +39,11 @@
   const edges = graph.edges;
 
   let wrapper: HTMLDivElement;
+  let rect: DOMRect;
   $: rect =
     wrapper && width
       ? wrapper.getBoundingClientRect()
-      : { x: 0, y: 0, width: 0, height: 0 };
+      : ({ x: 0, y: 0, width: 0, height: 0 } as DOMRect);
 
   let camera: OrthographicCamera;
   const minZoom = 1;
@@ -121,10 +122,13 @@
     const height =
       5 +
       10 *
-        Object.keys(node.inputs)
-          .filter((i) => i !== "seed")
-          .filter((p) => node?.inputs && !("setting" in node?.inputs?.[p]))
-          .length;
+        Object.keys(node.inputs).filter(
+          (p) =>
+            p !== "seed" &&
+            node?.inputs &&
+            !("setting" in node?.inputs?.[p]) &&
+            node.inputs[p].hidden !== true,
+        ).length;
     nodeHeightCache[nodeTypeId] = height;
     return height;
   }
@@ -756,7 +760,8 @@
       clickedNodeId === -1 &&
       !boxSelection &&
       cameraDown[0] === cameraPosition[0] &&
-      cameraDown[1] === cameraPosition[1]
+      cameraDown[1] === cameraPosition[1] &&
+      isBodyFocused()
     ) {
       $activeNodeId = -1;
       $selectedNodes?.clear();
@@ -817,7 +822,6 @@
   function handleDragEnter(e: DragEvent) {
     e.preventDefault();
     isDragging = true;
-    console.log(e);
   }
 
   function handlerDragOver(e: DragEvent) {
@@ -840,7 +844,7 @@
   });
 </script>
 
-<svelte:window on:mousemove={handleMouseMove} on:mouseup={handleMouseUp} />
+<svelte:window on:mousemove={handleMouseMove} />
 
 <div
   on:wheel={handleMouseScroll}
@@ -851,6 +855,7 @@
   tabindex="0"
   bind:clientWidth={width}
   bind:clientHeight={height}
+  on:mouseup={handleMouseUp}
   on:dragenter={handleDragEnter}
   on:dragover={handlerDragOver}
   on:drop={handleDrop}

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

@@ -1,17 +1,23 @@
 <script lang="ts">
-  import type { Graph, NodeRegistry } from "@nodes/types";
+  import type { Graph, Node, NodeRegistry } from "@nodes/types";
   import GraphEl from "./Graph.svelte";
   import { GraphManager } from "../graph-manager.js";
   import { createEventDispatcher, setContext } from "svelte";
-  import type { Writable } from "svelte/store";
+  import { type Writable } from "svelte/store";
   import { debounce } from "$lib/helpers";
   import { createKeyMap } from "$lib/helpers/createKeyMap";
+  import { activeNodeId } from "./stores";
 
   export let registry: NodeRegistry;
   export let graph: Graph;
   export let settings: Writable<Record<string, any>> | undefined;
-
   export const manager = new GraphManager(registry);
+  export let activeNode: Node | undefined;
+  $: if ($activeNodeId !== -1) {
+    activeNode = manager.getNode($activeNodeId);
+  } else {
+    activeNode = undefined;
+  }
 
   export const status = manager.status;
 

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

@@ -3,6 +3,7 @@
   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;
@@ -17,9 +18,10 @@
 
   const type = node?.tmp?.type;
 
-  const parameters = Object.entries(type?.inputs || {})
-    .filter((p) => p[1].type !== "seed")
-    .filter((p) => !("setting" in p[1]));
+  const parameters = Object.entries(type?.inputs || {}).filter(
+    (p) =>
+      p[1].type !== "seed" && !("setting" in p[1]) && p[1]?.hidden !== true,
+  );
 
   const updateNodePosition =
     getContext<(n: Node) => void>("updateNodePosition");