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();
     }

nodes/max/plantarium/noise/src/input.json

@@ -26,6 +26,15 @@
     },
     "seed": {
       "type": "seed"
+    },
+    "directionalStrength": {
+      "type": "vec3",
+      "hidden": true,
+      "value": [
+        1,
+        1,
+        1
+      ]
     }
   }
 }

nodes/max/plantarium/noise/src/lib.rs

@@ -2,7 +2,8 @@ use glam::Vec3;
 use macros::include_definition_file;
 use noise::{core::open_simplex::open_simplex_2d, permutationtable::PermutationTable, Vector2};
 use utils::{
-    concat_args, decode_float, encode_float, evaluate_float, get_args, log, set_panic_hook,
+    concat_args, decode_float, encode_float, evaluate_float, evaluate_vec3, get_args, log,
+    set_panic_hook,
 };
 use wasm_bindgen::prelude::*;
 
@@ -30,13 +31,16 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
 
     let seed = args[4][0];
 
+    let directional_strength = evaluate_vec3(args[5]);
+
     let hasher = PermutationTable::new(seed as u32);
     log!(
-        "scale: {}, strength: {}, fix_bottom: {}, seed: {}",
+        "scale: {}, strength: {}, fix_bottom: {}, seed: {}, directional: {:?}",
         scale,
         strength,
         fix_bottom,
-        seed
+        seed,
+        directional_strength
     );
 
     let output: Vec<Vec<i32>> = plants
@@ -77,16 +81,19 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
                 let nx = open_simplex_2d(px, &hasher) as f32
                     * strength
                     * 0.1
+                    * directional_strength[0]
                     * lerp(1.0, a as f32, fix_bottom);
 
                 let ny = open_simplex_2d(py, &hasher) as f32
                     * strength
                     * 0.1
+                    * directional_strength[1]
                     * lerp(1.0, a as f32, fix_bottom);
 
                 let nz = open_simplex_2d(pz, &hasher) as f32
                     * strength
                     * 0.1
+                    * directional_strength[2]
                     * lerp(1.0, a as f32, fix_bottom);
 
                 plant[3 + i * 4] = encode_float(decode_float(plant[3 + i * 4]) + nx);

nodes/max/plantarium/stem/src/input.json

@@ -21,11 +21,11 @@
     },
     "length": {
       "type": "float",
-      "value": 2
+      "value": 5
     },
     "thickness": {
       "type": "float",
-      "value": 2
+      "value": 0.2
     },
     "resolution_curve": {
       "type": "integer",

packages/ui/src/lib/Input.svelte

@@ -5,6 +5,7 @@
   import Select from "./elements/Select.svelte";
 
   import type { NodeInput } from "@nodes/types";
+  import Vec3 from "./elements/Vec3.svelte";
 
   export let input: NodeInput;
   export let value: any;
@@ -19,4 +20,6 @@
   <Checkbox {id} bind:value />
 {:else if input.type === "select"}
   <Select {id} bind:value options={input.options} />
+{:else if input.type === "vec3"}
+  <Vec3 {id} bind:value />
 {/if}

packages/ui/src/lib/app.css

@@ -61,6 +61,8 @@ body {
   --selected: #c65a19;
 
   --outline: var(--neutral-400);
+  --connection: #333333;
+  --edge: var(--connection, var(--outline));
 
   --text-color: var(--neutral-200);
 
@@ -81,6 +83,7 @@ body.theme-light {
   --layer-3: var(--neutral-500);
   --active: #000000;
   --selected: #c65a19;
+  --connection: #888;
 }
 
 body.theme-solarized {
@@ -92,6 +95,7 @@ body.theme-solarized {
   --layer-3: #586e75;
   --active: #000000;
   --selected: #268bd2;
+  --connection: #839496;
 }
 
 body.theme-catppuccin {
@@ -101,6 +105,7 @@ body.theme-catppuccin {
   --layer-2: #313244;
   --layer-1: #1E1E2E;
   --layer-0: #11111b;
+  --connection: #444459;
 }
 
 body.theme-high-contrast {
@@ -110,6 +115,7 @@ body.theme-high-contrast {
   --layer-1: black;
   --layer-2: #222222;
   --layer-3: #FFFFFF;
+  --connection: #FFF;
 }
 
 body.theme-nord {
@@ -120,7 +126,8 @@ body.theme-nord {
   --layer-2: #434C5E;
   --layer-3: #5E81AC;
   --active: #8999bd;
-  --selected: #b76c3f
+  --selected: #b76c3f;
+  --connection: #232731;
 }
 
 body.theme-dracula {

packages/ui/src/lib/elements/Vec3.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Float from "./Float.svelte";
+
+  export let value = [0, 0, 0];
+  export let id = "";
+</script>
+
+<Float id={`${id}-x`} bind:value={value[0]} />
+<Float id={`${id}-y`} bind:value={value[1]} />
+<Float id={`${id}-z`} bind:value={value[2]} />