feat: improve help view

app/package.json

@@ -16,11 +16,11 @@
     "@threlte/core": "^7.3.0",
     "@threlte/extras": "^8.11.2",
     "@threlte/flex": "^1.0.2",
-    "@types/three": "^0.163.0",
+    "@types/three": "^0.164.0",
     "@unocss/reset": "^0.59.4",
     "comlink": "^4.4.1",
     "jsondiffpatch": "^0.6.0",
-    "three": "^0.163.0"
+    "three": "^0.164.1"
   },
   "devDependencies": {
     "@iconify-json/tabler": "^1.1.110",
@@ -32,7 +32,7 @@
     "@zerodevx/svelte-json-view": "^1.0.9",
     "internal-ip": "^8.0.0",
     "svelte": "^4.2.15",
-    "svelte-check": "^3.6.9",
+    "svelte-check": "^3.7.0",
     "three-inspect": "^0.4.5",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
@@ -41,6 +41,6 @@
     "vite-plugin-comlink": "^4.0.3",
     "vite-plugin-glsl": "^1.3.0",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^1.5.1"
+    "vitest": "^1.5.2"
   }
 }

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

@@ -1,16 +1,17 @@
 <script lang="ts">
-  import type { Node, NodeRegistry } from "@nodes/types";
+  import type { NodeDefinition, NodeRegistry } from "@nodes/types";
   import { onMount } from "svelte";
 
   let mx = 0;
   let my = 0;
 
-  let node: Node | undefined = undefined;
+  let node: NodeDefinition | undefined = undefined;
   let input: string | undefined = undefined;
 
   let wrapper: HTMLDivElement;
 
   export let registry: NodeRegistry;
+  let width = 0;
 
   function handleMouseOver(ev: MouseEvent) {
     let target = ev.target as HTMLElement | null;
@@ -18,7 +19,7 @@
     my = ev.clientY;
     if (!target) return;
 
-    const closest = target.closest("[data-node-type]");
+    const closest = target?.closest?.("[data-node-type]");
 
     if (!closest) {
       node = undefined;
@@ -33,7 +34,7 @@
       return;
     }
     node = registry.getNode(nodeType);
-    input = nodeInput;
+    input = nodeInput || undefined;
   }
 
   onMount(() => {
@@ -47,16 +48,35 @@
 <svelte:window on:mousemove={handleMouseOver} />
 
 <div
-  class="help-wrapper"
+  class="help-wrapper p-4"
   class:visible={node}
-  style="--my:{my}px; --mx:{mx}px;"
+  bind:clientWidth={width}
+  style="--my:{my}px; --mx:{Math.min(mx, window.innerWidth - width - 20)}px;"
   bind:this={wrapper}
 >
-  {#if node}
+  <p class="m-0 text-light opacity-40 flex items-center gap-3 mb-4">
+    <span class="i-tabler-help block w-4 h-4"></span>
+    {node?.id.split("/").at(-1) || "Help"}
     {#if input}
-      {input}
-    {:else}
-      {node.id}
+      <span>> {input}</span>
+    {/if}
+  </p>
+  {#if node}
+    <div class="mb-4">
+      {#if input}
+        {node?.inputs?.[input]?.description || input}
+      {:else if node?.meta?.description}
+        {node?.meta?.description}
+      {:else}
+        <div class="text-xs opacity-30 mb-4">{node.id}</div>
+      {/if}
+    </div>
+
+    {#if !input}
+      <div>
+        <span class="i-tabler-arrow-right opacity-30">-></span>
+        {node?.outputs?.map((o) => o).join(", ") ?? "nothing"}
+      </div>
     {/if}
   {/if}
 </div>
@@ -66,13 +86,11 @@
     position: fixed;
     pointer-events: none;
     transform: translate(var(--mx), var(--my));
-    background: red;
-    padding: 10px;
-    top: 0px;
-    left: 0px;
-    width: 50px;
-    height: 50px;
-    border: 1px solid black;
+    background: var(--layer-1);
+    border-radius: 5px;
+    top: 10px;
+    left: 10px;
+    border: 1px solid var(--outline);
     z-index: 1000;
     display: none;
   }

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

@@ -197,7 +197,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
         for (const key in type.inputs) {
           let settingId = type.inputs[key].setting;
           if (settingId) {
-            settingTypes[settingId] = type.inputs[key];
+            settingTypes[settingId] = { __node_type: type.id, __node_input: key, ...type.inputs[key] };
             if (settingValues[settingId] === undefined && "value" in type.inputs[key]) {
               settingValues[settingId] = type.inputs[key].value;
             }

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

@@ -673,6 +673,8 @@
   });
 
   function handleMouseUp(event: MouseEvent) {
+    if (!mouseDown) return;
+
     const activeNode = manager.getNode($activeNodeId);
 
     const clickedNodeId = getNodeIdFromEvent(event);
@@ -870,7 +872,7 @@
   });
 </script>
 
-<svelte:window on:mousemove={handleMouseMove} />
+<svelte:window on:mousemove={handleMouseMove} on:mouseup={handleMouseUp} />
 
 <div
   on:wheel={handleMouseScroll}
@@ -881,7 +883,6 @@
   tabindex="0"
   bind:clientWidth={width}
   bind:clientHeight={height}
-  on:mouseup={handleMouseUp}
   on:dragenter={handleDragEnter}
   on:dragover={handlerDragOver}
   on:dragexit={handleDragEnd}

app/src/lib/node-registry.ts

@@ -36,12 +36,7 @@ export async function getNode(id: `${string}/${string}/${string}`) {
 
   if (!definition) return null;
 
-  const { inputs, outputs } = definition;
-  try {
-    return { id, inputs, outputs }
-  } catch (e) {
-    console.log("Failed to parse input types for node", { id });
-  }
+  return definition;
 
 }
 

app/src/lib/result-viewer/Camera.svelte

@@ -36,7 +36,7 @@
   let isRunning = false;
   const task = useTask(() => {
     let length = center.clone().sub(controls.target).length();
-    if (length < 0.01) {
+    if (length < 0.01 || !centerCamera) {
       isRunning = false;
       task.stop();
       return;

app/src/lib/settings/panels/ActiveNodeSettings.svelte

@@ -2,13 +2,25 @@
   import type { Node, NodeInput } from "@nodes/types";
   import NestedSettings from "./NestedSettings.svelte";
   import { writable } from "svelte/store";
+
   import type { GraphManager } from "$lib/graph-interface/graph-manager";
 
+  export let manager: GraphManager;
+  export let node: Node | undefined;
+
   function filterInputs(inputs: Record<string, NodeInput>) {
     return Object.fromEntries(
-      Object.entries(inputs).filter(([key, value]) => {
-        return value.hidden === true;
-      }),
+      Object.entries(inputs)
+        .filter(([key, value]) => {
+          return value.hidden === true;
+        })
+        .map(([key, value]) => {
+          //@ts-ignore
+          value.__node_type = node?.tmp?.type.id;
+          //@ts-ignore
+          value.__node_input = key;
+          return [key, value];
+        }),
     );
   }
 
@@ -26,14 +38,12 @@
     return writable(store);
   }
 
-  export let manager: GraphManager;
-
-  export let node: Node | undefined;
   let nodeDefinition: Record<string, NodeInput> | undefined;
   $: nodeDefinition = node?.tmp?.type
     ? filterInputs(node.tmp.type.inputs)
     : undefined;
   $: store = node ? createStore(node.props, nodeDefinition) : undefined;
+  $: console.log(nodeDefinition, store);
 
   let lastPropsHash = "";
   function updateNode() {

app/src/lib/settings/panels/NestedSettings.svelte

@@ -27,7 +27,6 @@
   function isNodeInput(v: Input | Nested): v is Input {
     return v && "type" in v;
   }
-  console.log({ settings, store });
 </script>
 
 {#if $store}
@@ -35,7 +34,11 @@
     {@const value = settings[key]}
     <div class="wrapper" class:first-level={depth === 0}>
       {#if value !== undefined && isNodeInput(value)}
-        <div class="input input-{settings[key].type}">
+        <div
+          class="input input-{settings[key].type}"
+          data-node-type={value?.__node_type || null}
+          data-node-input={value?.__node_input || null}
+        >
           {#if value.type === "button"}
             <button on:click={() => value?.callback?.()}
               >{value.label || key}</button