feat: some shit

app/src/lib/result-viewer/Scene.svelte

@@ -9,21 +9,28 @@
     Box3,
     Mesh,
     MeshBasicMaterial,
+    Color,
   } from "three";
-  import { AppSettings } from "../settings/app-settings";
+  import { appSettings } from "../settings/app-settings.svelte";
   import Camera from "./Camera.svelte";
+  import { colors } from "$lib/graph-interface/graph/colors.svelte";
 
   const { renderStage, invalidate: _invalidate } = useThrelte();
 
-  export let fps: number[] = [];
-  // let renderer = threlte.renderer;
-  // let rendererRender = renderer.render;
-  // renderer.render = function (scene, camera) {
-  //   const a = performance.now();
-  //   rendererRender.call(renderer, scene, camera);
-  //   fps.push(performance.now() - a);
-  //   fps = fps.slice(-100);
-  // };
+  type Props = {
+    fps: number[];
+    lines: Vector3[][];
+    scene: Group;
+    centerCamera: boolean;
+  };
+
+  let {
+    lines,
+    centerCamera,
+    fps = $bindable(),
+    scene = $bindable(),
+  }: Props = $props();
+
   useTask(
     (delta) => {
       fps.push(1 / delta);
@@ -53,12 +60,8 @@
     _invalidate();
   };
 
-  let geometries: BufferGeometry[] = [];
-  export let lines: Vector3[][];
-  export let scene: Group;
-
-  export let centerCamera: boolean = true;
-  let center = new Vector3(0, 4, 0);
+  let geometries = $state<BufferGeometry[]>();
+  let center = $state(new Vector3(0, 4, 0));
 
   function isMesh(child: Mesh | any): child is Mesh {
     return child.isObject3D && "material" in child;
@@ -68,14 +71,15 @@
     return material.isMaterial && "matcap" in material;
   }
 
-  $: if ($AppSettings && scene) {
+  $effect(() => {
+    const wireframe = appSettings.debug.wireframe;
     scene.traverse(function (child) {
       if (isMesh(child) && isMatCapMaterial(child.material)) {
-        child.material.wireframe = $AppSettings.wireframe;
+        child.material.wireframe = wireframe;
       }
     });
-    invalidate();
-  }
+    _invalidate();
+  });
 
   function getPosition(geo: BufferGeometry, i: number) {
     return [
@@ -88,32 +92,38 @@
 
 <Camera {center} {centerCamera} />
 
-{#if $AppSettings.showGrid}
-  <T.GridHelper args={[20, 20]} />
+{#if appSettings.showGrid}
+  <T.GridHelper
+    args={[20, 20]}
+    colorGrid={colors["outline"]}
+    colorCenterLine={new Color("red")}
+  />
 {/if}
 
 <T.Group>
-  {#each geometries as geo}
-    {#if $AppSettings.showIndices}
-      {#each geo.attributes.position.array as _, i}
-        {#if i % 3 === 0}
-          <Text fontSize={0.25} position={getPosition(geo, i)} />
-        {/if}
-      {/each}
-    {/if}
+  {#if geometries}
+    {#each geometries as geo}
+      {#if appSettings.debug.showIndices}
+        {#each geo.attributes.position.array as _, i}
+          {#if i % 3 === 0}
+            <Text fontSize={0.25} position={getPosition(geo, i)} />
+          {/if}
+        {/each}
+      {/if}
 
-    {#if $AppSettings.showVertices}
-      <T.Points visible={true}>
-        <T is={geo} />
-        <T.PointsMaterial size={0.25} />
-      </T.Points>
-    {/if}
-  {/each}
+      {#if appSettings.debug.showVertices}
+        <T.Points visible={true}>
+          <T is={geo} />
+          <T.PointsMaterial size={0.25} />
+        </T.Points>
+      {/if}
+    {/each}
+  {/if}
 
   <T.Group bind:ref={scene}></T.Group>
 </T.Group>
 
-{#if $AppSettings.showStemLines && lines}
+{#if appSettings.debug.showStemLines && lines}
   {#each lines as line}
     <T.Mesh>
       <MeshLineGeometry points={line} />

app/src/lib/result-viewer/Viewer.svelte

@@ -2,12 +2,10 @@
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
   import { Vector3 } from "three";
-
   import { decodeFloat, splitNestedArray } from "@nodes/utils";
   import type { PerformanceStore } from "@nodes/utils";
-  import { AppSettings } from "$lib/settings/app-settings";
+  import { appSettings } from "$lib/settings/app-settings.svelte";
   import SmallPerformanceViewer from "$lib/performance/SmallPerformanceViewer.svelte";
-
   import { MeshMatcapMaterial, TextureLoader, type Group } from "three";
   import {
     createGeometryPool,
@@ -22,9 +20,11 @@
     matcap,
   });
 
+  let sceneComponent = $state<ReturnType<typeof Scene>>();
+  let fps = $state<number[]>([]);
+
   let geometryPool: ReturnType<typeof createGeometryPool>;
   let instancePool: ReturnType<typeof createInstancedGeometryPool>;
-
   export function updateGeometries(inputs: Int32Array[], group: Group) {
     geometryPool = geometryPool || createGeometryPool(group, material);
     instancePool = instancePool || createInstancedGeometryPool(group, material);
@@ -38,14 +38,15 @@
     };
   }
 
-  export let centerCamera: boolean = true;
-  export let perf: PerformanceStore;
-  export let scene: Group;
-  let fps: number[] = [];
+  type Props = {
+    scene: Group;
+    centerCamera: boolean;
+    perf: PerformanceStore;
+  };
 
-  let lines: Vector3[][] = [];
+  let { scene = $bindable(), centerCamera, perf }: Props = $props();
 
-  let invalidate: () => void;
+  let lines = $state<Vector3[][]>([]);
 
   function createLineGeometryFromEncodedData(encodedData: Int32Array) {
     const positions: Vector3[] = [];
@@ -63,12 +64,12 @@
   }
 
   export const update = function update(result: Int32Array) {
-    perf?.addPoint("split-result");
+    perf.addPoint("split-result");
     const inputs = splitNestedArray(result);
-    perf?.endPoint();
+    perf.endPoint();
 
-    if ($AppSettings.showStemLines) {
-      perf?.addPoint("create-lines");
+    if (appSettings.debug.showStemLines) {
+      perf.addPoint("create-lines");
       lines = inputs
         .map((input) => {
           if (input[0] === 0) {
@@ -79,21 +80,27 @@
       perf.endPoint();
     }
 
-    perf?.addPoint("update-geometries");
+    perf.addPoint("update-geometries");
 
     const { totalVertices, totalFaces } = updateGeometries(inputs, scene);
-    perf?.endPoint();
+    perf.endPoint();
 
-    perf?.addPoint("total-vertices", totalVertices);
-    perf?.addPoint("total-faces", totalFaces);
-    invalidate();
+    perf.addPoint("total-vertices", totalVertices);
+    perf.addPoint("total-faces", totalFaces);
+    sceneComponent?.invalidate();
   };
 </script>
 
-{#if $AppSettings.showPerformancePanel}
+{#if appSettings.debug.showPerformancePanel}
   <SmallPerformanceViewer {fps} store={perf} />
 {/if}
 
 <Canvas>
-  <Scene bind:scene bind:invalidate {lines} {centerCamera} bind:fps />
+  <Scene
+    bind:this={sceneComponent}
+    {lines}
+    {centerCamera}
+    bind:scene
+    bind:fps
+  />
 </Canvas>

app/src/lib/result-viewer/geometryPool.ts

@@ -1,6 +1,5 @@
 import { fastHashArrayBuffer } from "@nodes/utils";
-import { BufferAttribute, BufferGeometry, Float32BufferAttribute, Group, InstancedMesh, Material, Matrix4, Mesh } from "three"
-
+import { BufferAttribute, BufferGeometry, Float32BufferAttribute, Group, InstancedMesh, Material, Matrix4, Mesh } from "three";
 
 function fastArrayHash(arr: ArrayBuffer) {
   let ints = new Uint8Array(arr);
@@ -108,7 +107,6 @@ export function createGeometryPool(parentScene: Group, material: Material) {
       scene.add(mesh);
       meshes.push(mesh);
     }
-
   }