feat: add vec3 to stem

2024-04-18 13:16:33 +02:00
parent 815152d23c
commit 32426ac045
31 changed files with 563 additions and 327 deletions
--- a/app/src/lib/graph-interface/node/NodeInput.svelte
+++ b/app/src/lib/graph-interface/node/NodeInput.svelte
@ -6,13 +6,12 @@
  export let node: Node;
  export let input: NodeInput;
  export let id: string;
-  export let label: string | undefined;

  const graph = getGraphManager();

  let value = node?.props?.[id] ?? input.value;

-  let elementId = Math.random().toString(36).substring(7);
+  export let elementId: string = `input-${Math.random().toString(36).substring(7)}`;

  $: if (node?.props?.[id] !== value) {
    node.props = { ...node.props, [id]: value };
@ -21,5 +20,4 @@
  }
 </script>

-<label for="input-{elementId}">{label || id}</label>
 <Input id="input-{elementId}" {input} bind:value />
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@ -1,174 +1,196 @@
 <script lang="ts">
-	import type { NodeInput as NodeInputType, Socket, Node as NodeType } from '@nodes/types';
-	import { getContext } from 'svelte';
-	import { createNodePath } from '../helpers/index.js';
-	import { possibleSocketIds } from '../graph/stores.js';
-	import { getGraphManager } from '../graph/context.js';
-	import NodeInput from './NodeInput.svelte';
+  import type {
+    NodeInput as NodeInputType,
+    Socket,
+    Node as NodeType,
+  } from "@nodes/types";
+  import { getContext } from "svelte";
+  import { createNodePath } from "../helpers/index.js";
+  import { possibleSocketIds } from "../graph/stores.js";
+  import { getGraphManager } from "../graph/context.js";
+  import NodeInput from "./NodeInput.svelte";

-	export let node: NodeType;
-	export let input: NodeInputType;
-	export let id: string;
-	export let isLast = false;
+  export let node: NodeType;
+  export let input: NodeInputType;
+  export let id: string;
+  export let isLast = false;

-	const socketId = `${node.id}-${id}`;
+  const socketId = `${node.id}-${id}`;

-	const graph = getGraphManager();
-	const graphId = graph.id;
-	const inputSockets = graph.inputSockets;
+  const graph = getGraphManager();
+  const graphId = graph.id;
+  const inputSockets = graph.inputSockets;

-	const setDownSocket = getContext<(socket: Socket) => void>('setDownSocket');
-	const getSocketPosition =
-		getContext<(node: NodeType, index: string) => [number, number]>('getSocketPosition');
+  const elementId = `input-${Math.random().toString(36).substring(7)}`;

-	function handleMouseDown(ev: MouseEvent) {
-		ev.preventDefault();
-		ev.stopPropagation();
-		setDownSocket({
-			node,
-			index: id,
-			position: getSocketPosition(node, id)
-		});
-	}
+  const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
+  const getSocketPosition =
+    getContext<(node: NodeType, index: string) => [number, number]>(
+      "getSocketPosition",
+    );

-	const leftBump = node.tmp?.type?.inputs?.[id].internal !== true;
-	const cornerBottom = isLast ? 5 : 0;
-	const aspectRatio = 0.5;
+  function handleMouseDown(ev: MouseEvent) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    setDownSocket({
+      node,
+      index: id,
+      position: getSocketPosition(node, id),
+    });
+  }

-	const path = createNodePath({
-		depth: 4,
-		height: 12,
-		y: 51,
-		cornerBottom,
-		leftBump,
-		aspectRatio
-	});
-	const pathDisabled = createNodePath({
-		depth: 0,
-		height: 15,
-		y: 50,
-		cornerBottom,
-		leftBump,
-		aspectRatio
-	});
-	const pathHover = createNodePath({
-		depth: 6,
-		height: 18,
-		y: 50.5,
-		cornerBottom,
-		leftBump,
-		aspectRatio
-	});
+  const leftBump = node.tmp?.type?.inputs?.[id].internal !== true;
+  const cornerBottom = isLast ? 5 : 0;
+  const aspectRatio = 0.5;
+
+  const path = createNodePath({
+    depth: 4,
+    height: 12,
+    y: 51,
+    cornerBottom,
+    leftBump,
+    aspectRatio,
+  });
+  const pathDisabled = createNodePath({
+    depth: 0,
+    height: 15,
+    y: 50,
+    cornerBottom,
+    leftBump,
+    aspectRatio,
+  });
+  const pathHover = createNodePath({
+    depth: 6,
+    height: 18,
+    y: 50.5,
+    cornerBottom,
+    leftBump,
+    aspectRatio,
+  });
 </script>

-<div class="wrapper" class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)}>
-	{#key id && graphId}
-		{#if node?.tmp?.type?.inputs?.[id]?.external !== true}
-			<div class="content" class:disabled={$inputSockets.has(socketId)}>
-				<NodeInput {node} {input} {id} label={input.label} />
-			</div>
-		{/if}
+<div
+  class="wrapper"
+  class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)}
+>
+  {#key id && graphId}
+    <div class="content" class:disabled={$inputSockets.has(socketId)}>
+      <label for={elementId}>{input.label || id}</label>
+      {#if node?.tmp?.type?.inputs?.[id]?.external !== true}
+        <NodeInput {elementId} {node} {input} {id} />
+      {/if}
+    </div>

-		{#if node?.tmp?.type?.inputs?.[id]?.internal !== true}
-			<div class="large target" on:mousedown={handleMouseDown} role="button" tabindex="0" />
-			<div class="small target" on:mousedown={handleMouseDown} role="button" tabindex="0" />
-		{/if}
-	{/key}
+    {#if node?.tmp?.type?.inputs?.[id]?.internal !== true}
+      <div
+        class="large target"
+        on:mousedown={handleMouseDown}
+        role="button"
+        tabindex="0"
+      />
+      <div
+        class="small target"
+        on:mousedown={handleMouseDown}
+        role="button"
+        tabindex="0"
+      />
+    {/if}
+  {/key}

-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 100 100"
-		width="100"
-		height="100"
-		preserveAspectRatio="none"
-		style={`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    width="100"
+    height="100"
+    preserveAspectRatio="none"
+    style={`
      --path: path("${path}");
      --hover-path: path("${pathHover}");
      --hover-path-disabled: path("${pathDisabled}");
    `}
-	>
-		<path vector-effect="non-scaling-stroke"></path>
-	</svg>
+  >
+    <path vector-effect="non-scaling-stroke"></path>
+  </svg>
 </div>

 <style>
-	.wrapper {
-		position: relative;
-		width: 100%;
-		height: 100px;
-		transform: translateY(-0.5px);
-	}
+  .wrapper {
+    position: relative;
+    width: 100%;
+    height: 100px;
+    transform: translateY(-0.5px);
+  }

-	.target {
-		position: absolute;
-		border-radius: 50%;
-		top: 50%;
-		transform: translateY(-50%) translateX(-50%);
-		/* background: red; */
-		/* opacity: 0.1; */
-	}
+  .target {
+    position: absolute;
+    border-radius: 50%;
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    /* background: red; */
+    /* opacity: 0.1; */
+  }

-	.small.target {
-		width: 30px;
-		height: 30px;
-	}
+  .small.target {
+    width: 30px;
+    height: 30px;
+  }

-	.large.target {
-		width: 60px;
-		height: 60px;
-		cursor: unset;
-		pointer-events: none;
-	}
+  .large.target {
+    width: 60px;
+    height: 60px;
+    cursor: unset;
+    pointer-events: none;
+  }

-	:global(.hovering-sockets) .large.target {
-		pointer-events: all;
-	}
+  :global(.hovering-sockets) .large.target {
+    pointer-events: all;
+  }

-	.content {
-		position: relative;
-		padding: 10px 20px;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		justify-content: space-around;
-		box-sizing: border-box;
-	}
+  .content {
+    position: relative;
+    padding: 10px 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-around;
+    box-sizing: border-box;
+  }

-	:global(.zoom-small) .content {
-		display: none;
-	}
+  :global(.zoom-small) .content {
+    display: none;
+  }

-	svg {
-		position: absolute;
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		overflow: visible;
-		top: 0;
-		left: 0;
-		z-index: -1;
-	}
+  svg {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }

-	svg path {
-		transition:
-			d 0.3s ease,
-			fill 0.3s ease;
-		fill: var(--background-color);
-		stroke: var(--stroke);
-		stroke-width: var(--stroke-width);
-		d: var(--path);
-	}
+  svg path {
+    transition:
+      d 0.3s ease,
+      fill 0.3s ease;
+    fill: var(--background-color);
+    stroke: var(--stroke);
+    stroke-width: var(--stroke-width);
+    d: var(--path);
+  }

-	:global(.hovering-sockets) .large:hover ~ svg path {
-		d: var(--hover-path);
-	}
+  :global(.hovering-sockets) .large:hover ~ svg path {
+    d: var(--hover-path);
+  }

-	.content.disabled {
-		opacity: 0.2;
-		pointer-events: none;
-	}
+  .content.disabled {
+    opacity: 0.2;
+    pointer-events: none;
+  }

-	.disabled svg path {
-		d: var(--hover-path-disabled) !important;
-	}
+  .disabled svg path {
+    d: var(--hover-path-disabled) !important;
+  }
 </style>
--- a/app/src/lib/node-registry.ts
+++ b/app/src/lib/node-registry.ts
@ -73,6 +73,7 @@ export class RemoteNodeRegistry implements NodeRegistry {
    nodeIds.push("max/plantarium/random");
    nodeIds.push("max/plantarium/float");
    nodeIds.push("max/plantarium/triangle");
+    nodeIds.push("max/plantarium/vec3");
    nodeIds.push("max/plantarium/output");
    nodeIds.push("max/plantarium/array");
    nodeIds.push("max/plantarium/sum");
--- a/app/src/lib/runtime-executor.ts
+++ b/app/src/lib/runtime-executor.ts
@ -1,5 +1,5 @@
 import type { Graph, NodeRegistry, NodeType, RuntimeExecutor } from "@nodes/types";
-import { fastHash, concat_encoded, encodeFloat } from "@nodes/utils"
+import { fastHash, concat_encoded, encodeFloat, encode } from "@nodes/utils"

 export class MemoryRuntimeExecutor implements RuntimeExecutor {

@ -176,15 +176,22 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
              return encodeFloat(value as number);
            }

+            if (Array.isArray(value)) {
+              return encode(value);
+            }
+
            return value;
          });

+          console.log(transformed_inputs);
+
          const a2 = performance.now();

          // console.log(`${a2 - a1}ms TRANSFORMED_INPUTS`);

          const _inputs = concat_encoded(transformed_inputs);
          const a3 = performance.now();
+          console.log(`executing ${node_type.id || node.id}`, _inputs);
          results[node.id] = node_type.execute(_inputs) as number;
          const duration = performance.now() - a3;
          if (duration > 5) {