feat: improve theme color consistency

app/package.json

@@ -42,6 +42,7 @@
     "internal-ip": "^8.0.0",
     "svelte": "^4.2.15",
     "svelte-check": "^3.6.9",
+    "three-inspect": "^0.4.5",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",

app/src/lib/graph-interface/background/Background.svelte

@@ -21,6 +21,8 @@
     bw = width / cameraPosition[2];
     bh = height / cameraPosition[2];
   }
+  $: backgroundColor = $colors["layer-0"];
+  $: lineColor = $colors["outline"];
 </script>
 
 <T.Group
@@ -52,8 +54,8 @@
         },
       }}
       uniforms.camPos.value={cameraPosition}
-      uniforms.backgroundColor.value={$colors.layer0}
-      uniforms.lineColor.value={$colors.outline}
+      uniforms.backgroundColor.value={backgroundColor}
+      uniforms.lineColor.value={lineColor}
       uniforms.zoomLimits.value={[minZoom, maxZoom]}
       uniforms.dimensions.value={[width, height]}
     />

app/src/lib/graph-interface/edges/Edge.svelte

@@ -1,12 +1,15 @@
 <script context="module" lang="ts">
   import { colors } from "../graph/stores";
-  import { get } from "svelte/store";
 
   const circleMaterial = new MeshBasicMaterial({
-    color: get(colors).outline,
+    color: get(colors).edge,
     toneMapped: false,
   });
 
+  colors.subscribe((c) => {
+    circleMaterial.color.copy(c.edge.clone().convertSRGBToLinear());
+  });
+
   const lineCache = new Map<number, BufferGeometry>();
 
   const curve = new CubicBezierCurve(
@@ -20,10 +23,11 @@
 <script lang="ts">
   import { T } from "@threlte/core";
   import { MeshLineMaterial } from "@threlte/extras";
-  import { BufferGeometry, Color, MeshBasicMaterial, Vector3 } from "three";
+  import { BufferGeometry, MeshBasicMaterial, Vector3 } from "three";
   import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
   import { Vector2 } from "three/src/math/Vector2.js";
   import { createEdgeGeometry } from "./createEdgeGeometry.js";
+  import { get } from "svelte/store";
 
   export let from: { x: number; y: number };
   export let to: { x: number; y: number };
@@ -75,11 +79,7 @@
     update();
   }
 
-  const lineColor = new Color($colors.outline);
-
-  $: if ($colors.outline) {
-    lineColor.copyLinearToSRGB($colors.outline);
-  }
+  $: lineColor = $colors["edge"].clone().convertSRGBToLinear();
 </script>
 
 <T.Mesh
@@ -104,11 +104,6 @@
 
 {#if geometry}
   <T.Mesh position.x={from.x} position.z={from.y} position.y={0.1} {geometry}>
-    <MeshLineMaterial
-      width={3}
-      attenuate={false}
-      color={lineColor}
-      toneMapped={false}
-    />
+    <MeshLineMaterial width={3} attenuate={false} color={lineColor} />
   </T.Mesh>
 {/if}

app/src/lib/graph-interface/graph/colors.ts

@@ -0,0 +1,45 @@
+import { readable } from "svelte/store";
+import { Color } from "three";
+
+const variables = [
+  "layer-0",
+  "layer-1",
+  "layer-2",
+  "layer-3",
+  "outline",
+  "active",
+  "selected",
+  "edge",
+] as const;
+
+const store = Object.fromEntries(variables.map(v => [v, new Color()])) as Record<typeof variables[number], Color>;
+
+let lastStyle = "";
+
+function updateColors() {
+  if (!("getComputedStyle" in globalThis)) return;
+  const style = getComputedStyle(document.body);
+  let hash = "";
+  for (const v of variables) {
+    let color = style.getPropertyValue(`--${v}`);
+    hash += color;
+    store[v].setStyle(color);
+  }
+  if (hash === lastStyle) return;
+  lastStyle = hash;
+}
+
+updateColors();
+
+export const colors = readable(store, set => {
+
+  updateColors();
+  set(store);
+
+  window.onload = function () { updateColors(); set(store) };
+
+  document.body.addEventListener("transitionstart", () => {
+    updateColors();
+    set(store);
+  })
+});

app/src/lib/graph-interface/graph/stores.ts

@@ -10,63 +10,4 @@ export const hoveredSocket: Writable<Socket | null> = writable(null);
 export const possibleSockets: Writable<Socket[]> = writable([]);
 export const possibleSocketIds: Writable<Set<string> | null> = writable(null);
 
-export const colors = writable({
-  layer0: new Color().setStyle("#060606"),
-  layer1: new Color().setStyle("#171717"),
-  layer2: new Color().setStyle("#2D2D2D"),
-  layer3: new Color().setStyle("#A6A6A6"),
-  outline: new Color().setStyle("#000000"),
-  active: new Color().setStyle("#c65a19"),
-  selected: new Color().setStyle("#ffffff"),
-});
-
-if ("getComputedStyle" in globalThis) {
-
-  const body = document.body;
-
-  let lastStyle = "";
-
-  function updateColors() {
-
-    const style = getComputedStyle(body);
-    const layer0 = style.getPropertyValue("--layer-0");
-    const layer1 = style.getPropertyValue("--layer-1");
-    const layer2 = style.getPropertyValue("--layer-2");
-    const layer3 = style.getPropertyValue("--layer-3");
-    const outline = style.getPropertyValue("--outline");
-    const active = style.getPropertyValue("--active");
-    const selected = style.getPropertyValue("--selected");
-
-    const newStyle = `${layer0}${layer1}${layer2}${layer3}${outline}${active}${selected}`;
-
-    if (newStyle === lastStyle) return;
-    lastStyle = newStyle;
-
-    colors.update(col => {
-      col.layer0.setStyle(layer0);
-      col.layer0.convertLinearToSRGB();
-      col.layer1.setStyle(layer1);
-      col.layer1.convertLinearToSRGB();
-      col.layer2.setStyle(layer2);
-      col.layer2.convertLinearToSRGB();
-      col.layer3.setStyle(layer3);
-      col.layer3.convertLinearToSRGB();
-      col.outline.setStyle(outline);
-      col.outline.convertLinearToSRGB();
-      col.active.setStyle(active);
-      col.active.convertLinearToSRGB();
-      col.selected.setStyle(selected);
-      col.selected.convertLinearToSRGB();
-      return col;
-    });
-
-  }
-
-  updateColors();
-
-  window.onload = updateColors;
-
-  body.addEventListener("transitionstart", () => {
-    updateColors();
-  })
-}
+export { colors } from "./colors";

app/src/lib/graph-interface/node/Node.svelte

@@ -1,8 +1,6 @@
 <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 { colors } from "../graph/stores";
   import { T } from "@threlte/core";
@@ -33,6 +31,9 @@
     updateNodePosition?.(node);
   }
 
+  $: colorBright = $colors["layer-2"];
+  $: colorDark = $colors["layer-1"];
+
   onMount(() => {
     node.tmp = node.tmp || {};
     node.tmp.mesh = meshRef;
@@ -61,8 +62,8 @@
       uWidth: { value: 20 },
       uHeight: { value: height },
     }}
-    uniforms.uColorBright.value={$colors.layer2}
-    uniforms.uColorDark.value={$colors.layer1}
+    uniforms.uColorBright.value={colorBright}
+    uniforms.uColorDark.value={colorDark}
     uniforms.uStrokeColor.value={isSelected
       ? $colors.selected
       : isActive

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

@@ -6,6 +6,7 @@
   import { OrbitControls } from "@threlte/extras";
   import { AppSettings } from "../settings/app-settings";
   import localStore from "$lib/helpers/localStore";
+  import { Inspector } from "three-inspect";
 
   export let geometries: BufferGeometry[];
   export let lines: Vector3[][];

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
+  import { Inspector } from "three-inspect";
   import {
     BufferGeometry,
     Float32BufferAttribute,

app/src/lib/settings/ActiveNode.svelte

@@ -3,6 +3,7 @@
   import NestedSettings from "./NestedSettings.svelte";
   import { writable } from "svelte/store";
   import type { GraphManager } from "$lib/graph-interface/graph-manager";
+  import { encodeFloat } from "@nodes/utils";
 
   function filterInputs(inputs: Record<string, NodeInput>) {
     return Object.fromEntries(
@@ -41,11 +42,17 @@
     Object.keys($store).forEach((_key: string) => {
       node.props = node.props || {};
       const key = _key as keyof typeof $store;
-      if (node && $store && node.props[key] !== $store[key]) {
-        needsUpdate = true;
-        node.props[key] = $store[key];
+      if (node && $store) {
+        if (Array.isArray($store[key])) {
+          node.props[key] = [...$store[key]].map((v) => encodeFloat(v));
+          needsUpdate = true;
+        } else if (node.props[key] !== $store[key]) {
+          needsUpdate = true;
+          node.props[key] = $store[key];
+        }
       }
     });
+    console.log(needsUpdate, node.props, $store);
     if (needsUpdate) {
       manager.execute();
     }