wip: play around with imposters

frontend/src/lib/components/Node.svelte

@@ -4,39 +4,60 @@
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
   import { activeNodeId, selectedNodes } from "./graph/stores";
+  import { T } from "@threlte/core";
+  import type { Mesh } from "three";
 
   export let node: Node;
   export let inView = true;
+  export let z = 2;
 
   const updateNodePosition =
     getContext<(n: Node) => void>("updateNodePosition");
 
+  const getNodeHeight = getContext<(n: Node) => number>("getNodeHeight");
+
   const type = node?.tmp?.type;
 
   const parameters = Object.entries(type?.inputs || {});
 
   let ref: HTMLDivElement;
+  let meshRef: Mesh;
 
-  $: if (node && ref) {
+  const height = getNodeHeight(node.type);
+  console.log(node.type, height);
+
+  $: if (node && ref && meshRef) {
     node.tmp = node.tmp || {};
     node.tmp.ref = ref;
+    node.tmp.mesh = meshRef;
     updateNodePosition(node);
   }
 
   onMount(() => {
-    if (ref) {
+    node.tmp = node.tmp || {};
-      node.tmp = node.tmp || {};
+    node.tmp.ref = ref;
-      node.tmp.ref = ref;
+    node.tmp.mesh = meshRef;
-      updateNodePosition(node);
+    updateNodePosition(node);
-    }
   });
 </script>
 
+<T.Mesh
+  position.x={node.position.x + 10}
+  position.z={node.position.y + height / 2}
+  position.y={0.8}
+  rotation.x={-Math.PI / 2}
+  bind:ref={meshRef}
+  visible={true}
+>
+  <T.PlaneGeometry args={[20, height]} />
+  <T.MeshBasicMaterial color="#151515" />
+</T.Mesh>
+
 <div
   class="node"
   class:active={$activeNodeId === node.id}
   class:selected={!!$selectedNodes?.has(node.id)}
-  class:in-view={inView}
+  class:out-of-view={!inView}
   data-node-id={node.id}
   bind:this={ref}
 >
@@ -63,9 +84,10 @@
     transform: translate3d(var(--nx), var(--ny), 0);
     z-index: 1;
     font-weight: 300;
-    display: none;
+    display: var(--node-display, "block");
     --stroke: var(--background-color-lighter);
     --stroke-width: 2px;
+    opacity: var(--input-opacity);
   }
 
   .node.active {
@@ -78,7 +100,7 @@
     --stroke-width: 1px;
   }
 
-  .node.in-view {
+  .node.out-of-view {
-    display: unset;
+    display: none;
   }
 </style>

frontend/src/lib/components/graph/Graph.svelte

@@ -26,7 +26,7 @@
   const edges = graph.edges;
 
   let camera: OrthographicCamera;
-  const minZoom = 2;
+  const minZoom = 1;
   const maxZoom = 40;
   let mousePosition = [0, 0];
   let mouseDown: null | [number, number] = null;
@@ -71,11 +71,12 @@
   };
 
   function updateNodePosition(node: NodeType) {
-    node.tmp = node.tmp || {};
     if (node?.tmp?.ref) {
       if (node.tmp["x"] !== undefined && node.tmp["y"] !== undefined) {
         node.tmp.ref.style.setProperty("--nx", `${node.tmp.x * 10}px`);
         node.tmp.ref.style.setProperty("--ny", `${node.tmp.y * 10}px`);
+        node.tmp.mesh.position.x = node.tmp.x + 10;
+        node.tmp.mesh.position.z = node.tmp.y + getNodeHeight(node.type) / 2;
         if (node.tmp.x === node.position.x && node.tmp.y === node.position.y) {
           delete node.tmp.x;
           delete node.tmp.y;
@@ -83,6 +84,9 @@
       } else {
         node.tmp.ref.style.setProperty("--nx", `${node.position.x * 10}px`);
         node.tmp.ref.style.setProperty("--ny", `${node.position.y * 10}px`);
+        node.tmp.mesh.position.x = node.position.x + 10;
+        node.tmp.mesh.position.z =
+          node.position.y + getNodeHeight(node.type) / 2;
       }
     }
   }
@@ -99,8 +103,10 @@
     }
     const height = 5 + 10 * Object.keys(node.inputs).length;
     nodeHeightCache[nodeTypeId] = height;
+    console.log(node, height);
     return height;
   }
+  setContext("getNodeHeight", getNodeHeight);
 
   setContext("isNodeInView", (node: NodeType) => {
     const height = getNodeHeight(node.type);

frontend/src/lib/components/graph/GraphView.svelte

@@ -58,10 +58,14 @@
     class="wrapper"
     class:zoom-small={cameraPosition[2] < 2}
     class:hovering-sockets={activeSocket}
-    style={`--cz: ${cameraPosition[2]};`}
+    style={`--cz: ${cameraPosition[2]}; --node-display: ${cameraPosition[2] < 2 ? "none" : "block"};`}
   >
     {#each $nodes.values() as node (node.id)}
-      <Node {node} inView={cameraPosition && isNodeInView(node)} />
+      <Node
+        {node}
+        inView={cameraPosition && isNodeInView(node)}
+        z={cameraPosition[2]}
+      />
     {/each}
   </div>
 </HTML>

frontend/src/routes/+page.svelte

@@ -14,7 +14,7 @@
   if (graph) {
     graphManager.load(JSON.parse(graph));
   } else {
-    graphManager.load(graphManager.createTemplate("grid", 5, 5));
+    graphManager.load(graphManager.createTemplate("grid", 10, 10));
   }
 
   graphManager.on("save", (graph) => {
@@ -54,13 +54,6 @@
 </div>
 
 <style>
-  .wrapper {
-    position: absolute;
-    z-index: 100;
-    top: 10px;
-    left: 10px;
-  }
-
   #canvas-wrapper {
     height: 100vh;
   }