chore: rename @nodes -> @nodarium for everything

2025-12-01 17:03:14 +01:00
parent e5658b8a7e
commit 1ea544e765
58 changed files with 909 additions and 882 deletions
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { HTML } from "@threlte/extras";
+  import { onMount } from "svelte";
+  import type { Node, NodeType } from "@nodarium/types";
+  import { getGraphManager, getGraphState } from "../graph/state.svelte";
+
+  const graph = getGraphManager();
+  const graphState = getGraphState();
+
+  let input: HTMLInputElement;
+  let value = $state<string>();
+  let activeNodeId = $state<NodeType>();
+
+  const allNodes = graphState.activeSocket
+    ? graph.getPossibleNodes(graphState.activeSocket)
+    : graph.getNodeDefinitions();
+
+  function filterNodes() {
+    return allNodes.filter((node) => node.id.includes(value ?? ""));
+  }
+
+  const nodes = $derived(value === "" ? allNodes : filterNodes());
+  $effect(() => {
+    if (nodes) {
+      if (activeNodeId === undefined) {
+        activeNodeId = nodes?.[0]?.id;
+      } else if (nodes.length) {
+        const node = nodes.find((node) => node.id === activeNodeId);
+        if (!node) {
+          activeNodeId = nodes[0].id;
+        }
+      }
+    }
+  });
+
+  function handleNodeCreation(nodeType: Node["type"]) {
+    if (!graphState.addMenuPosition) return;
+
+    const newNode = graph.createNode({
+      type: nodeType,
+      position: graphState.addMenuPosition,
+      props: {},
+    });
+
+    const edgeInputSocket = graphState.activeSocket;
+    if (edgeInputSocket && newNode) {
+      if (typeof edgeInputSocket.index === "number") {
+        graph.smartConnect(edgeInputSocket.node, newNode);
+      } else {
+        graph.smartConnect(newNode, edgeInputSocket.node);
+      }
+    }
+
+    graphState.activeSocket = null;
+    graphState.addMenuPosition = null;
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    event.stopImmediatePropagation();
+
+    if (event.key === "Escape") {
+      graphState.addMenuPosition = null;
+      return;
+    }
+
+    if (event.key === "ArrowDown") {
+      const index = nodes.findIndex((node) => node.id === activeNodeId);
+      activeNodeId = nodes[(index + 1) % nodes.length].id;
+      return;
+    }
+
+    if (event.key === "ArrowUp") {
+      const index = nodes.findIndex((node) => node.id === activeNodeId);
+      activeNodeId = nodes[(index - 1 + nodes.length) % nodes.length].id;
+      return;
+    }
+
+    if (event.key === "Enter") {
+      if (activeNodeId && graphState.addMenuPosition) {
+        handleNodeCreation(activeNodeId);
+      }
+      return;
+    }
+  }
+
+  onMount(() => {
+    input.disabled = false;
+    setTimeout(() => input.focus(), 50);
+  });
+</script>
+
+<HTML
+  position.x={graphState.addMenuPosition?.[0]}
+  position.z={graphState.addMenuPosition?.[1]}
+  transform={false}
+>
+  <div class="add-menu-wrapper">
+    <div class="header">
+      <input
+        id="add-menu"
+        type="text"
+        aria-label="Search for a node type"
+        role="searchbox"
+        placeholder="Search..."
+        disabled={false}
+        onkeydown={handleKeyDown}
+        bind:value
+        bind:this={input}
+      />
+    </div>
+
+    <div class="content">
+      {#each nodes as node}
+        <div
+          class="result"
+          role="treeitem"
+          tabindex="0"
+          aria-selected={node.id === activeNodeId}
+          onkeydown={(event) => {
+            if (event.key === "Enter") {
+              handleNodeCreation(node.id);
+            }
+          }}
+          onmousedown={() => handleNodeCreation(node.id)}
+          onfocus={() => {
+            activeNodeId = node.id;
+          }}
+          class:selected={node.id === activeNodeId}
+          onmouseover={() => {
+            activeNodeId = node.id;
+          }}
+        >
+          {node.id.split("/").at(-1)}
+        </div>
+      {/each}
+    </div>
+  </div>
+</HTML>
+
+<style>
+  .header {
+    padding: 5px;
+  }
+
+  input {
+    background: var(--layer-0);
+    font-family: var(--font-family);
+    border: none;
+    border-radius: 5px;
+    color: var(--text-color);
+    padding: 0.6em;
+    width: calc(100% - 2px);
+    box-sizing: border-box;
+    font-size: 0.8em;
+    margin-left: 1px;
+    margin-top: 1px;
+  }
+
+  input:focus {
+    outline: solid 2px rgba(255, 255, 255, 0.2);
+  }
+
+  .add-menu-wrapper {
+    position: absolute;
+    background: var(--layer-1);
+    border-radius: 7px;
+    overflow: hidden;
+    border: solid 2px var(--layer-2);
+    width: 150px;
+  }
+  .content {
+    min-height: none;
+    width: 100%;
+    color: var(--text-color);
+  }
+
+  .result {
+    padding: 1em 0.9em;
+    border-bottom: solid 1px var(--layer-2);
+    opacity: 0.7;
+    font-size: 0.9em;
+    cursor: pointer;
+  }
+
+  .result[aria-selected="true"] {
+    background: var(--layer-2);
+    opacity: 1;
+  }
+</style>
--- a/app/src/lib/graph-interface/components/BoxSelection.svelte
+++ b/app/src/lib/graph-interface/components/BoxSelection.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { HTML } from "@threlte/extras";
+
+  type Props = {
+    p1: { x: number; y: number };
+    p2: { x: number; y: number };
+    cameraPosition: [number, number, number];
+  };
+
+  const {
+    p1 = { x: 0, y: 0 },
+    p2 = { x: 0, y: 0 },
+    cameraPosition = [0, 1, 0],
+  }: Props = $props();
+
+  const width = $derived(Math.abs(p1.x - p2.x) * cameraPosition[2]);
+  const height = $derived(Math.abs(p1.y - p2.y) * cameraPosition[2]);
+
+  const x = $derived(Math.max(p1.x, p2.x) - width / cameraPosition[2]);
+  const y = $derived(Math.max(p1.y, p2.y) - height / cameraPosition[2]);
+</script>
+
+<HTML position.x={x} position.z={y} transform={false}>
+  <div
+    class="box-selection"
+    style={`width: ${width}px; height: ${height}px;`}
+  ></div>
+</HTML>
+
+<style>
+  .box-selection {
+    width: 40px;
+    height: 20px;
+    border: solid 2px var(--outline);
+    border-style: dashed;
+    border-radius: 2px;
+  }
+</style>
--- a/app/src/lib/graph-interface/components/Camera.svelte
+++ b/app/src/lib/graph-interface/components/Camera.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { T } from "@threlte/core";
+  import { type OrthographicCamera } from "three";
+  type Props = {
+    camera: OrthographicCamera;
+    position: [number, number, number];
+  };
+
+  let { camera = $bindable(), position }: Props = $props();
+</script>
+
+<T.OrthographicCamera
+  bind:ref={camera}
+  position.x={position[0]}
+  position.y={10}
+  position.z={position[1]}
+  rotation.x={-Math.PI / 2}
+  zoom={position[2]}
+  makeDefault
+/>
--- a/app/src/lib/graph-interface/components/HelpView.svelte
+++ b/app/src/lib/graph-interface/components/HelpView.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { NodeDefinition, NodeRegistry } from "@nodarium/types";
+  import { onMount } from "svelte";
+
+  let mx = $state(0);
+  let my = $state(0);
+
+  let node: NodeDefinition | undefined = $state(undefined);
+  let input: string | undefined = $state(undefined);
+
+  let wrapper: HTMLDivElement;
+  type Props = { registry: NodeRegistry };
+  const { registry }: Props = $props();
+
+  let width = $state(0);
+
+  function handleMouseOver(ev: MouseEvent) {
+    let target = ev.target as HTMLElement | null;
+    mx = ev.clientX;
+    my = ev.clientY;
+    if (!target) return;
+
+    const closest = target?.closest?.("[data-node-type]");
+
+    if (!closest) {
+      node = undefined;
+      return;
+    }
+
+    let nodeType = closest.getAttribute("data-node-type");
+    let nodeInput = closest.getAttribute("data-node-input");
+
+    if (!nodeType) {
+      node = undefined;
+      return;
+    }
+    node = registry.getNode(nodeType);
+    input = nodeInput || undefined;
+  }
+
+  onMount(() => {
+    const style = wrapper.parentElement?.style;
+    style?.setProperty("cursor", "help");
+    return () => {
+      style?.removeProperty("cursor");
+    };
+  });
+</script>
+
+<svelte:window onmousemove={handleMouseOver} />
+
+<div
+  class="help-wrapper p-4"
+  class:visible={node}
+  bind:clientWidth={width}
+  style="--my:{my}px; --mx:{Math.min(mx, window.innerWidth - width - 20)}px;"
+  bind:this={wrapper}
+>
+  <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}
+      <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>
+
+<style>
+  .help-wrapper {
+    position: fixed;
+    pointer-events: none;
+    transform: translate(var(--mx), var(--my));
+    background: var(--layer-1);
+    border-radius: 5px;
+    top: 10px;
+    left: 10px;
+    max-width: 250px;
+    border: 1px solid var(--outline);
+    z-index: 10000;
+    display: none;
+  }
+
+  .visible {
+    display: block;
+  }
+</style>