From c33e2642e1bae526a40305e02ad04079b9a6163d Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Thu, 18 Apr 2024 14:10:08 +0200
Subject: [PATCH] feat: improve zoom performance by adding a tiny rand offset
 to nodes

---
 app/src/lib/graph-interface/graph-manager.ts  |   2 +
 .../graph-interface/graph/GraphView.svelte    | 122 +++++-----
 app/src/lib/graph-interface/node/Node.svelte  | 211 +++++++++---------
 .../graph-interface/node/NodeParameter.svelte |   4 -
 app/src/lib/runtime-executor.ts               |   4 +-
 app/src/routes/+page.svelte                   |   2 +-
 packages/types/index.ts                       |   1 +
 7 files changed, 178 insertions(+), 168 deletions(-)

diff --git a/app/src/lib/graph-interface/graph-manager.ts b/app/src/lib/graph-interface/graph-manager.ts
index a2730df..0bde9a4 100644
--- a/app/src/lib/graph-interface/graph-manager.ts
+++ b/app/src/lib/graph-interface/graph-manager.ts
@@ -119,6 +119,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }>
       const nodeType = this.nodeRegistry.getNode(node.type);
       if (nodeType) {
         node.tmp = {
+          random: (Math.random() - 0.5) * 2,
           type: nodeType
         };
       }
@@ -173,6 +174,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }>
         return;
       }
       node.tmp = node.tmp || {};
+      node.tmp.random = (Math.random() - 0.5) * 2;
       node.tmp.type = nodeType;
     }
 
diff --git a/app/src/lib/graph-interface/graph/GraphView.svelte b/app/src/lib/graph-interface/graph/GraphView.svelte
index 083fd69..5b992cd 100644
--- a/app/src/lib/graph-interface/graph/GraphView.svelte
+++ b/app/src/lib/graph-interface/graph/GraphView.svelte
@@ -1,78 +1,80 @@
 <script lang="ts">
-	import type { Edge as EdgeType, Node as NodeType } from '@nodes/types';
-	import { HTML } from '@threlte/extras';
-	import Edge from '../edges/Edge.svelte';
-	import Node from '../node/Node.svelte';
-	import { getContext, onMount } from 'svelte';
-	import type { Writable } from 'svelte/store';
-	import { activeSocket } from './stores.js';
+  import type { Edge as EdgeType, Node as NodeType } from "@nodes/types";
+  import { HTML } from "@threlte/extras";
+  import Edge from "../edges/Edge.svelte";
+  import Node from "../node/Node.svelte";
+  import { getContext, onMount } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { activeSocket } from "./stores.js";
 
-	export let nodes: Writable<Map<number, NodeType>>;
-	export let edges: Writable<EdgeType[]>;
+  export let nodes: Writable<Map<number, NodeType>>;
+  export let edges: Writable<EdgeType[]>;
 
-	export let cameraPosition = [0, 0, 4];
+  export let cameraPosition = [0, 0, 4];
 
-	const isNodeInView = getContext<(n: NodeType) => boolean>('isNodeInView');
+  const isNodeInView = getContext<(n: NodeType) => boolean>("isNodeInView");
 
-	const getSocketPosition =
-		getContext<(node: NodeType, index: string | number) => [number, number]>('getSocketPosition');
+  const getSocketPosition =
+    getContext<(node: NodeType, index: string | number) => [number, number]>(
+      "getSocketPosition",
+    );
 
-	function getEdgePosition(edge: EdgeType) {
-		const pos1 = getSocketPosition(edge[0], edge[1]);
-		const pos2 = getSocketPosition(edge[2], edge[3]);
+  function getEdgePosition(edge: EdgeType) {
+    const pos1 = getSocketPosition(edge[0], edge[1]);
+    const pos2 = getSocketPosition(edge[2], edge[3]);
 
-		return [pos1[0], pos1[1], pos2[0], pos2[1]];
-	}
+    return [pos1[0], pos1[1], pos2[0], pos2[1]];
+  }
 
-	onMount(() => {
-		for (const node of $nodes.values()) {
-			if (node?.tmp?.ref) {
-				node.tmp.ref.style.setProperty('--nx', `${node.position[0] * 10}px`);
-				node.tmp.ref.style.setProperty('--ny', `${node.position[1] * 10}px`);
-			}
-		}
-	});
+  onMount(() => {
+    for (const node of $nodes.values()) {
+      if (node?.tmp?.ref) {
+        node.tmp.ref.style.setProperty("--nx", `${node.position[0] * 10}px`);
+        node.tmp.ref.style.setProperty("--ny", `${node.position[1] * 10}px`);
+      }
+    }
+  });
 </script>
 
 {#each $edges as edge (`${edge[0].id}-${edge[1]}-${edge[2].id}-${edge[3]}`)}
-	{@const pos = getEdgePosition(edge)}
-	{@const [x1, y1, x2, y2] = pos}
-	<Edge
-		from={{
-			x: x1,
-			y: y1
-		}}
-		to={{
-			x: x2,
-			y: y2
-		}}
-	/>
+  {@const pos = getEdgePosition(edge)}
+  {@const [x1, y1, x2, y2] = pos}
+  <Edge
+    from={{
+      x: x1,
+      y: y1,
+    }}
+    to={{
+      x: x2,
+      y: y2,
+    }}
+  />
 {/each}
 
 <HTML transform={false}>
-	<div
-		role="tree"
-		id="graph"
-		tabindex="0"
-		class="wrapper"
-		class:zoom-small={cameraPosition[2] < 2}
-		class:hovering-sockets={activeSocket}
-		style={`--cz: ${cameraPosition[2]}; --node-display: ${cameraPosition[2] < 2 ? 'none' : 'block'};`}
-	>
-		{#each $nodes.values() as node (node.id)}
-			<Node {node} inView={cameraPosition && isNodeInView(node)} z={cameraPosition[2]} />
-		{/each}
-	</div>
+  <div
+    role="tree"
+    id="graph"
+    tabindex="0"
+    class="wrapper"
+    style:transform={`scale(${cameraPosition[2] * 0.1})`}
+    class:hovering-sockets={activeSocket}
+  >
+    {#each $nodes.values() as node (node.id)}
+      <Node
+        {node}
+        inView={cameraPosition && isNodeInView(node)}
+        z={cameraPosition[2]}
+      />
+    {/each}
+  </div>
 </HTML>
 
 <style>
-	.wrapper {
-		position: absolute;
-		z-index: 100;
-		width: 0px;
-		height: 0px;
-		transform: scale(calc(var(--cz) * 0.1));
-		display: var(--node-display, block);
-		opacity: calc((var(--cz) - 2.5) / 3.5);
-	}
+  .wrapper {
+    position: absolute;
+    z-index: 100;
+    width: 0px;
+    height: 0px;
+  }
 </style>
diff --git a/app/src/lib/graph-interface/node/Node.svelte b/app/src/lib/graph-interface/node/Node.svelte
index d46987c..999abd8 100644
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -1,129 +1,138 @@
 <script lang="ts">
-	import type { Node } from '@nodes/types';
-	import { getContext, onMount } from 'svelte';
-	import NodeHeader from './NodeHeader.svelte';
-	import NodeParameter from './NodeParameter.svelte';
-	import { activeNodeId, selectedNodes } from '../graph/stores.js';
-	import { T } from '@threlte/core';
-	import { Color, type Mesh } from 'three';
-	import NodeFrag from './Node.frag';
-	import NodeVert from './Node.vert';
+  import type { Node } from "@nodes/types";
+  import { getContext, onMount } from "svelte";
+  import NodeHeader from "./NodeHeader.svelte";
+  import NodeParameter from "./NodeParameter.svelte";
+  import { activeNodeId, selectedNodes } from "../graph/stores.js";
+  import { T } from "@threlte/core";
+  import { Color, type Mesh } from "three";
+  import NodeFrag from "./Node.frag";
+  import NodeVert from "./Node.vert";
 
-	export let node: Node;
-	export let inView = true;
-	export let z = 2;
+  export let node: Node;
+  export let inView = true;
+  export let z = 2;
 
-	$: isActive = $activeNodeId === node.id;
-	$: isSelected = !!$selectedNodes?.has(node.id);
+  $: isActive = $activeNodeId === node.id;
+  $: isSelected = !!$selectedNodes?.has(node.id);
 
-	const updateNodePosition = getContext<(n: Node) => void>('updateNodePosition');
+  const updateNodePosition =
+    getContext<(n: Node) => void>("updateNodePosition");
 
-	const getNodeHeight = getContext<(n: string) => number>('getNodeHeight');
+  const getNodeHeight = getContext<(n: string) => number>("getNodeHeight");
 
-	const type = node?.tmp?.type;
+  const type = node?.tmp?.type;
 
-	const parameters = Object.entries(type?.inputs || {})
-		.filter((p) => p[1].type !== 'seed')
-		.filter((p) => !('setting' in p[1]));
+  const zOffset = (node.tmp?.random || 0) * 0.5;
+  const zLimit = 2 - zOffset;
+  $: visible = inView && z > zLimit;
 
-	let ref: HTMLDivElement;
-	let meshRef: Mesh;
+  const parameters = Object.entries(type?.inputs || {})
+    .filter((p) => p[1].type !== "seed")
+    .filter((p) => !("setting" in p[1]));
 
-	const height = getNodeHeight(node.type);
+  let ref: HTMLDivElement;
+  let meshRef: Mesh;
 
-	$: if (node && ref && meshRef) {
-		node.tmp = node.tmp || {};
-		node.tmp.ref = ref;
-		node.tmp.mesh = meshRef;
-		updateNodePosition(node);
-	}
+  const height = getNodeHeight(node.type);
 
-	onMount(() => {
-		node.tmp = node.tmp || {};
-		node.tmp.ref = ref;
-		node.tmp.mesh = meshRef;
-		updateNodePosition(node);
-	});
+  $: if (node && ref && meshRef) {
+    node.tmp = node.tmp || {};
+    node.tmp.ref = ref;
+    node.tmp.mesh = meshRef;
+    updateNodePosition(node);
+  }
 
-	const colorDark = new Color();
-	colorDark.setStyle('#151515');
-	//colorDark.();
+  onMount(() => {
+    node.tmp = node.tmp || {};
+    node.tmp.ref = ref;
+    node.tmp.mesh = meshRef;
+    updateNodePosition(node);
+  });
 
-	const colorBright = new Color('#202020');
-	//colorBright.convertLinearToSRGB();
+  const colorDark = new Color();
+  colorDark.setStyle("#151515");
+  //colorDark.();
+
+  const colorBright = new Color("#202020");
+  //colorBright.convertLinearToSRGB();
 </script>
 
 <T.Mesh
-	position.x={node.position[0] + 10}
-	position.z={node.position[1] + height / 2}
-	position.y={0.8}
-	rotation.x={-Math.PI / 2}
-	bind:ref={meshRef}
-	visible={z < 7}
+  position.x={node.position[0] + 10}
+  position.z={node.position[1] + height / 2}
+  position.y={0.8}
+  rotation.x={-Math.PI / 2}
+  bind:ref={meshRef}
+  visible={inView && z < 7}
 >
-	<T.PlaneGeometry args={[20, height]} radius={1} />
-	<T.ShaderMaterial
-		vertexShader={NodeVert}
-		fragmentShader={NodeFrag}
-		transparent
-		uniforms={{
-			uColorBright: { value: colorBright },
-			uColorDark: { value: colorDark },
-			uSelectedColor: { value: new Color('#9d5f28') },
-			uActiveColor: { value: new Color('white') },
-			uSelected: { value: false },
-			uActive: { value: false },
-			uStrokeWidth: { value: 1.0 },
-			uWidth: { value: 20 },
-			uHeight: { value: height }
-		}}
-		uniforms.uSelected.value={isSelected}
-		uniforms.uActive.value={isActive}
-		uniforms.uStrokeWidth.value={(7 - z) / 3}
-	/>
+  <T.PlaneGeometry args={[20, height]} radius={1} />
+  <T.ShaderMaterial
+    vertexShader={NodeVert}
+    fragmentShader={NodeFrag}
+    transparent
+    uniforms={{
+      uColorBright: { value: colorBright },
+      uColorDark: { value: colorDark },
+      uSelectedColor: { value: new Color("#9d5f28") },
+      uActiveColor: { value: new Color("white") },
+      uSelected: { value: false },
+      uActive: { value: false },
+      uStrokeWidth: { value: 1.0 },
+      uWidth: { value: 20 },
+      uHeight: { value: height },
+    }}
+    uniforms.uSelected.value={isSelected}
+    uniforms.uActive.value={isActive}
+    uniforms.uStrokeWidth.value={(7 - z) / 3}
+  />
 </T.Mesh>
 
 <div
-	class="node"
-	class:active={isActive}
-	class:selected={isSelected}
-	class:out-of-view={!inView}
-	data-node-id={node.id}
-	bind:this={ref}
+  class="node"
+  class:active={isActive}
+  style:--cz={z + zOffset}
+  style:display={inView && z > zLimit ? "block" : "none"}
+  class:selected={isSelected}
+  class:out-of-view={!inView}
+  data-node-id={node.id}
+  bind:this={ref}
 >
-	<NodeHeader {node} />
+  <NodeHeader {node} />
 
-	{#each parameters as [key, value], i}
-		<NodeParameter bind:node id={key} input={value} isLast={i == parameters.length - 1} />
-	{/each}
+  {#each parameters as [key, value], i}
+    <NodeParameter
+      bind:node
+      id={key}
+      input={value}
+      isLast={i == parameters.length - 1}
+    />
+  {/each}
 </div>
 
 <style>
-	.node {
-		position: absolute;
-		box-sizing: border-box;
-		user-select: none !important;
-		cursor: pointer;
-		width: 200px;
-		color: var(--text-color);
-		transform: translate3d(var(--nx), var(--ny), 0);
-		z-index: 1;
-		font-weight: 300;
-		--stroke: var(--background-color-lighter);
-		--stroke-width: 2px;
-	}
+  .node {
+    position: absolute;
+    box-sizing: border-box;
+    user-select: none !important;
+    cursor: pointer;
+    width: 200px;
+    color: var(--text-color);
+    transform: translate3d(var(--nx), var(--ny), 0);
+    z-index: 1;
+    opacity: calc((var(--cz) - 2.5) / 3.5);
+    font-weight: 300;
+    --stroke: var(--background-color-lighter);
+    --stroke-width: 2px;
+  }
 
-	.node.active {
-		--stroke: white;
-		--stroke-width: 1px;
-	}
+  .node.active {
+    --stroke: white;
+    --stroke-width: 1px;
+  }
 
-	.node.selected {
-		--stroke: #9d5f28;
-		--stroke-width: 1px;
-	}
-
-	.node.out-of-view {
-		display: none;
-	}
+  .node.selected {
+    --stroke: #9d5f28;
+    --stroke-width: 1px;
+  }
 </style>
diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte
index 4ecd040..1b8f623 100644
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -156,10 +156,6 @@
     box-sizing: border-box;
   }
 
-  :global(.zoom-small) .content {
-    display: none;
-  }
-
   svg {
     position: absolute;
     box-sizing: border-box;
diff --git a/app/src/lib/runtime-executor.ts b/app/src/lib/runtime-executor.ts
index d05a945..74f13a4 100644
--- a/app/src/lib/runtime-executor.ts
+++ b/app/src/lib/runtime-executor.ts
@@ -183,7 +183,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
             return value;
           });
 
-          console.log(transformed_inputs);
+          // console.log(transformed_inputs);
 
           const a2 = performance.now();
 
@@ -191,7 +191,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
           const _inputs = concat_encoded(transformed_inputs);
           const a3 = performance.now();
-          console.log(`executing ${node_type.id || node.id}`, _inputs);
+          // 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) {
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index fb8d1d6..4a1d69d 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -75,7 +75,7 @@
     header
     <button
       on:click={() => {
-        graph = templates.grid(10, 10);
+        graph = templates.grid(15, 15);
       }}>grid stress-test</button
     >
   </header>
diff --git a/packages/types/index.ts b/packages/types/index.ts
index c282340..7674de8 100644
--- a/packages/types/index.ts
+++ b/packages/types/index.ts
@@ -8,6 +8,7 @@ export type Node = {
   tmp?: {
     depth?: number;
     mesh?: any;
+    random?: number;
     parents?: Node[],
     children?: Node[],
     inputNodes?: Record<string, Node>