Merge remote-tracking branch 'origin/main' into feat/arena-runtime

2026-01-23 02:29:09 +01:00
parent 571bb2a5d3 5570d975f5
commit 4006cc2dba
18 changed files with 427 additions and 561 deletions
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { HTML } from "@threlte/extras";
-  import { onMount } from "svelte";
-  import type { NodeInstance, NodeId } from "@nodarium/types";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import type { NodeId, NodeInstance } from '@nodarium/types';
+  import { HTML } from '@threlte/extras';
+  import { onMount } from 'svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';

  type Props = {
    onnode: (n: NodeInstance) => void;
@@ -14,6 +14,7 @@
  const graphState = getGraphState();

  let input: HTMLInputElement;
+  let wrapper: HTMLDivElement;
  let value = $state<string>();
  let activeNodeId = $state<NodeId>();

@@ -22,10 +23,10 @@
    : graph.getNodeDefinitions();

  function filterNodes() {
-    return allNodes.filter((node) => node.id.includes(value ?? ""));
+    return allNodes.filter((node) => node.id.includes(value ?? ''));
  }

-  const nodes = $derived(value === "" ? allNodes : filterNodes());
+  const nodes = $derived(value === '' ? allNodes : filterNodes());
  $effect(() => {
    if (nodes) {
      if (activeNodeId === undefined) {
@@ -39,38 +40,38 @@
    }
  });

-  function handleNodeCreation(nodeType: NodeInstance["type"]) {
+  function handleNodeCreation(nodeType: NodeInstance['type']) {
    if (!graphState.addMenuPosition) return;
    onnode?.({
      id: -1,
      type: nodeType,
      position: [...graphState.addMenuPosition],
      props: {},
-      state: {},
+      state: {}
    });
  }

  function handleKeyDown(event: KeyboardEvent) {
    event.stopImmediatePropagation();

-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
      graphState.addMenuPosition = null;
      return;
    }

-    if (event.key === "ArrowDown") {
+    if (event.key === 'ArrowDown') {
      const index = nodes.findIndex((node) => node.id === activeNodeId);
      activeNodeId = nodes[(index + 1) % nodes.length].id;
      return;
    }

-    if (event.key === "ArrowUp") {
+    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 (event.key === 'Enter') {
      if (activeNodeId && graphState.addMenuPosition) {
        handleNodeCreation(activeNodeId);
      }
@@ -81,6 +82,16 @@
  onMount(() => {
    input.disabled = false;
    setTimeout(() => input.focus(), 50);
+
+    const rect = wrapper.getBoundingClientRect();
+    const deltaY = rect.bottom - window.innerHeight;
+    const deltaX = rect.right - window.innerWidth;
+    if (deltaY > 0) {
+      wrapper.style.marginTop = `-${deltaY + 30}px`;
+    }
+    if (deltaX > 0) {
+      wrapper.style.marginLeft = `-${deltaX + 30}px`;
+    }
  });
 </script>

@@ -89,7 +100,7 @@
  position.z={graphState.addMenuPosition?.[1]}
  transform={false}
 >
-  <div class="add-menu-wrapper">
+  <div class="add-menu-wrapper" bind:this={wrapper}>
    <div class="header">
      <input
        id="add-menu"
@@ -112,7 +123,7 @@
          tabindex="0"
          aria-selected={node.id === activeNodeId}
          onkeydown={(event) => {
-            if (event.key === "Enter") {
+            if (event.key === 'Enter') {
              handleNodeCreation(node.id);
            }
          }}
@@ -125,7 +136,7 @@
            activeNodeId = node.id;
          }}
        >
-          {node.id.split("/").at(-1)}
+          {node.id.split('/').at(-1)}
        </div>
      {/each}
    </div>
@@ -167,6 +178,8 @@
    min-height: none;
    width: 100%;
    color: var(--text-color);
+    max-height: 300px;
+    overflow-y: auto;
  }

  .result {
--- a/app/src/lib/graph-interface/graph-state.svelte.ts
+++ b/app/src/lib/graph-interface/graph-state.svelte.ts
@@ -192,13 +192,13 @@ export class GraphState {
    }
    const height = 5
      + 10
-      * Object.keys(node.inputs).filter(
-        (p) =>
-          p !== 'seed'
-          && node?.inputs
-          && !('setting' in node?.inputs?.[p])
-          && node.inputs[p].hidden !== true
-      ).length;
+        * Object.keys(node.inputs).filter(
+          (p) =>
+            p !== 'seed'
+            && node?.inputs
+            && !('setting' in node?.inputs?.[p])
+            && node.inputs[p].hidden !== true
+        ).length;
    this.nodeHeightCache[nodeTypeId] = height;
    return height;
  }
@@ -338,4 +338,8 @@ export class GraphState {
      && node.position[1] < this.cameraBounds[3]
    );
  }
+
+  openNodePalette() {
+    this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
+  }
 }
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
  import type { Edge, NodeInstance } from "@nodarium/types";
-  import { createKeyMap } from "../../helpers/createKeyMap";
-  import AddMenu from "../components/AddMenu.svelte";
-  import Background from "../background/Background.svelte";
-  import BoxSelection from "../components/BoxSelection.svelte";
-  import EdgeEl from "../edges/Edge.svelte";
-  import NodeEl from "../node/Node.svelte";
-  import Camera from "../components/Camera.svelte";
  import { Canvas } from "@threlte/core";
-  import HelpView from "../components/HelpView.svelte";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
  import { HTML } from "@threlte/extras";
-  import { maxZoom, minZoom } from "./constants";
+  import { createKeyMap } from "../../helpers/createKeyMap";
+  import Background from "../background/Background.svelte";
+  import AddMenu from "../components/AddMenu.svelte";
+  import BoxSelection from "../components/BoxSelection.svelte";
+  import Camera from "../components/Camera.svelte";
+  import HelpView from "../components/HelpView.svelte";
  import Debug from "../debug/Debug.svelte";
+  import EdgeEl from "../edges/Edge.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import NodeEl from "../node/Node.svelte";
+  import { maxZoom, minZoom } from "./constants";
  import { FileDropEventManager } from "./drop.events";
  import { MouseEventManager } from "./mouse.events";

@@ -97,15 +97,15 @@
 </script>

 <svelte:window
-  onmousemove={(ev) => mouseEvents.handleMouseMove(ev)}
-  onmouseup={(ev) => mouseEvents.handleMouseUp(ev)}
+  onmousemove={(ev) => mouseEvents.handleWindowMouseMove(ev)}
+  onmouseup={(ev) => mouseEvents.handleWindowMouseUp(ev)}
 />

 <div
  onwheel={(ev) => mouseEvents.handleMouseScroll(ev)}
  bind:this={graphState.wrapper}
  class="graph-wrapper"
-  style="height: 100%;"
+  style="height: 100%"
  class:is-panning={graphState.isPanning}
  class:is-hovering={graphState.hoveredNodeId !== -1}
  aria-label="Graph"
@@ -115,6 +115,7 @@
  bind:clientHeight={graphState.height}
  onkeydown={(ev) => keymap.handleKeyboardEvent(ev)}
  onmousedown={(ev) => mouseEvents.handleMouseDown(ev)}
+  oncontextmenu={(ev) => mouseEvents.handleContextMenu(ev)}
  {...fileDropEvents.getEventListenerProps()}
 >
  <input
--- a/app/src/lib/graph-interface/graph/mouse.events.ts
+++ b/app/src/lib/graph-interface/graph/mouse.events.ts
@@ -1,7 +1,7 @@
 import { animate, lerp } from '$lib/helpers';
 import { type NodeInstance } from '@nodarium/types';
 import type { GraphManager } from '../graph-manager.svelte';
-import type { GraphState } from '../graph-state.svelte';
+import { type GraphState } from '../graph-state.svelte';
 import { snapToGrid as snapPointToGrid } from '../helpers';
 import { maxZoom, minZoom, zoomSpeed } from './constants';
 import { EdgeInteractionManager } from './edge.events';
@@ -16,7 +16,7 @@ export class MouseEventManager {
    this.edgeInteractionManager = new EdgeInteractionManager(graph, state);
  }

-  handleMouseUp(event: MouseEvent) {
+  handleWindowMouseUp(event: MouseEvent) {
    this.edgeInteractionManager.handleMouseUp();
    this.state.isPanning = false;
    if (!this.state.mouseDown) return;
@@ -151,7 +151,19 @@ export class MouseEventManager {
    this.state.addMenuPosition = null;
  }

+  handleContextMenu(event: MouseEvent) {
+    if (!this.state.addMenuPosition) {
+      event.preventDefault();
+      this.state.openNodePalette();
+    }
+  }
+
  handleMouseDown(event: MouseEvent) {
+    // Right click
+    if (event.button === 2) {
+      return;
+    }
+
    if (this.state.mouseDown) return;
    this.state.edgeEndPosition = null;

@@ -229,7 +241,7 @@ export class MouseEventManager {
    this.state.edgeEndPosition = null;
  }

-  handleMouseMove(event: MouseEvent) {
+  handleWindowMouseMove(event: MouseEvent) {
    let mx = event.clientX - this.state.rect.x;
    let my = event.clientY - this.state.rect.y;

@@ -245,7 +257,7 @@ export class MouseEventManager {
      for (const socket of this.state.possibleSockets) {
        const dist = Math.sqrt(
          (socket.position[0] - this.state.mousePosition[0]) ** 2
-          + (socket.position[1] - this.state.mousePosition[1]) ** 2
+            + (socket.position[1] - this.state.mousePosition[1]) ** 2
        );
        if (dist < smallestDist) {
          smallestDist = dist;
@@ -377,9 +389,9 @@ export class MouseEventManager {
    // Update camera position and zoom level
    this.state.cameraPosition[0] = this.state.mousePosition[0]
      - (this.state.mousePosition[0] - this.state.cameraPosition[0])
-      / zoomRatio;
+        / zoomRatio;
    this.state.cameraPosition[1] = this.state.mousePosition[1]
      - (this.state.mousePosition[1] - this.state.cameraPosition[1])
-      / zoomRatio, this.state.cameraPosition[2] = newZoom;
+        / zoomRatio, this.state.cameraPosition[2] = newZoom;
  }
 }
--- a/app/src/lib/graph-interface/keymaps.ts
+++ b/app/src/lib/graph-interface/keymaps.ts
@@ -59,9 +59,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
    key: 'A',
    shift: true,
    description: 'Add new Node',
-    callback: () => {
-      graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
-    }
+    callback: () => graphState.openNodePalette()
  });

  keymap.addShortcut({
--- a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
+++ b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
@@ -1,147 +1,148 @@
 <script lang="ts" module>
-  let result:
-    | { stdev: number; avg: number; duration: number; samples: number[] }
-    | undefined = $state();
+	let result:
+		| { stdev: number; avg: number; duration: number; samples: number[] }
+		| undefined = $state();
 </script>

 <script lang="ts">
-  import { humanizeDuration } from "$lib/helpers";
-  import { localState } from "$lib/helpers/localState.svelte";
-  import Monitor from "$lib/performance/Monitor.svelte";
-  import { Number } from "@nodarium/ui";
-  import { writable } from "svelte/store";
+	import { humanizeDuration } from '$lib/helpers';
+	import { localState } from '$lib/helpers/localState.svelte';
+	import Monitor from '$lib/performance/Monitor.svelte';
+	import { Number } from '@nodarium/ui';
+	import { writable } from 'svelte/store';

-  function calculateStandardDeviation(array: number[]) {
-    const n = array.length;
-    const mean = array.reduce((a, b) => a + b) / n;
-    return Math.sqrt(
-      array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n,
-    );
-  }
-  type Props = {
-    run: () => Promise<any>;
-  };
+	function calculateStandardDeviation(array: number[]) {
+		const n = array.length;
+		const mean = array.reduce((a, b) => a + b) / n;
+		return Math.sqrt(
+			array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n
+		);
+	}
+	type Props = {
+		run: () => Promise<any>;
+	};

-  const { run }: Props = $props();
+	const { run }: Props = $props();

-  let isRunning = $state(false);
-  let amount = localState<number>("nodes.benchmark.samples", 500);
-  let samples = $state(0);
-  let warmUp = writable(0);
-  let warmUpAmount = 10;
-  let status = "";
+	let isRunning = $state(false);
+	let amount = localState<number>('nodes.benchmark.samples', 500);
+	let samples = $state(0);
+	let warmUp = writable(0);
+	let warmUpAmount = 10;
+	let status = '';

-  const copyContent = async (text?: string | number) => {
-    if (!text) return;
-    if (typeof text !== "string") {
-      text = (Math.floor(text * 100) / 100).toString();
-    }
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
+	const copyContent = async (text?: string | number) => {
+		if (!text) return;
+		if (typeof text !== 'string') {
+			text = (Math.floor(text * 100) / 100).toString();
+		}
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch (err) {
+			console.error('Failed to copy: ', err);
+		}
+	};

-  async function benchmark() {
-    if (isRunning) return;
-    isRunning = true;
-    result = undefined;
-    samples = 0;
-    $warmUp = 0;
+	async function benchmark() {
+		if (isRunning) return;
+		isRunning = true;
+		result = undefined;
+		samples = 0;
+		$warmUp = 0;

-    await new Promise((r) => setTimeout(r, 50));
+		await new Promise((r) => setTimeout(r, 50));

-    // warm up
-    for (let i = 0; i < warmUpAmount; i++) {
-      await run();
-      $warmUp = i + 1;
-    }
+		// warm up
+		for (let i = 0; i < warmUpAmount; i++) {
+			await run();
+			$warmUp = i + 1;
+		}

-    let a = performance.now();
-    let results = [];
+		let a = performance.now();
+		let results = [];

-    // perform run
-    for (let i = 0; i < amount.value; i++) {
-      const a = performance.now();
-      await run();
-      samples = i;
-      const b = performance.now();
-      await new Promise((r) => setTimeout(r, 20));
-      results.push(b - a);
-    }
-    result = {
-      stdev: calculateStandardDeviation(results),
-      samples: results,
-      duration: performance.now() - a,
-      avg: results.reduce((a, b) => a + b) / results.length,
-    };
-  }
+		// perform run
+		for (let i = 0; i < amount.value; i++) {
+			const a = performance.now();
+			await run();
+			samples = i;
+			const b = performance.now();
+			await new Promise((r) => setTimeout(r, 20));
+			results.push(b - a);
+		}
+		result = {
+			stdev: calculateStandardDeviation(results),
+			samples: results,
+			duration: performance.now() - a,
+			avg: results.reduce((a, b) => a + b) / results.length
+		};
+	}
 </script>

 {status}

 <div class="wrapper" class:running={isRunning}>
-  {#if result}
-    <h3>Finished ({humanizeDuration(result.duration)})</h3>
-    <div class="monitor-wrapper">
-      <Monitor points={result.samples} />
-    </div>
-    <label for="bench-avg">Average </label>
-    <button
-      id="bench-avg"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.avg)}
-      >{Math.floor(result.avg * 100) / 100}</button
-    >
-    <i
-      role="button"
-      tabindex="0"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.avg)}>(click to copy)</i
-    >
-    <label for="bench-stdev">Standard Deviation σ</label>
-    <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
-      >{Math.floor(result.stdev * 100) / 100}</button
-    >
-    <i
-      role="button"
-      tabindex="0"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
-    >
-    <div>
-      <button onclick={() => (isRunning = false)}>reset</button>
-    </div>
-  {:else if isRunning}
-    <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
-    <progress value={$warmUp} max={warmUpAmount}
-      >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
-    >
-    <p>Progress ({samples}/{amount.value})</p>
-    <progress value={samples} max={amount.value}
-      >{Math.floor((samples / amount.value) * 100)}%</progress
-    >
-  {:else}
-    <label for="bench-samples">Samples</label>
-    <Number id="bench-sample" bind:value={amount.value} max={1000} />
-    <button onclick={benchmark} disabled={isRunning}> start </button>
-  {/if}
+	{#if result}
+		<h3>Finished ({humanizeDuration(result.duration)})</h3>
+		<div class="monitor-wrapper">
+			<Monitor points={result.samples} />
+		</div>
+		<label for="bench-avg">Average </label>
+		<button
+			id="bench-avg"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.avg)}
+		>
+			{Math.floor(result.avg * 100) / 100}
+		</button>
+		<i
+			role="button"
+			tabindex="0"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.avg)}
+		>(click to copy)</i>
+		<label for="bench-stdev">Standard Deviation σ</label>
+		<button id="bench-stdev" onclick={() => copyContent(result?.stdev)}>
+			{Math.floor(result.stdev * 100) / 100}
+		</button>
+		<i
+			role="button"
+			tabindex="0"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.stdev + '')}
+		>(click to copy)</i>
+		<div>
+			<button onclick={() => (isRunning = false)}>reset</button>
+		</div>
+	{:else if isRunning}
+		<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
+		<progress value={$warmUp} max={warmUpAmount}>
+			{Math.floor(($warmUp / warmUpAmount) * 100)}%
+		</progress>
+		<p>Progress ({samples}/{amount.value})</p>
+		<progress value={samples} max={amount.value}>
+			{Math.floor((samples / amount.value) * 100)}%
+		</progress>
+	{:else}
+		<label for="bench-samples">Samples</label>
+		<Number id="bench-sample" bind:value={amount.value} max={1000} />
+		<button onclick={benchmark} disabled={isRunning}>start</button>
+	{/if}
 </div>

 <style>
-  .wrapper {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-  }
-  .monitor-wrapper {
-    border: solid thin var(--outline);
-    border-bottom: none;
-  }
-  i {
-    opacity: 0.5;
-    font-size: 0.8em;
-  }
+	.wrapper {
+		padding: 1em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+	.monitor-wrapper {
+		border: solid thin var(--outline);
+		border-bottom: none;
+	}
+	i {
+		opacity: 0.5;
+		font-size: 0.8em;
+	}
 </style>