feat: some shit

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

@@ -1,12 +1,14 @@
 <script lang="ts">
   import type { Node } from "@nodes/types";
   import { getContext, onMount } from "svelte";
-  import { colors, getGraphState } from "../graph/state.svelte";
+  import { getGraphState } from "../graph/state.svelte";
   import { T } from "@threlte/core";
-  import { Color, type Mesh } from "three";
+  import { type Mesh } from "three";
   import NodeFrag from "./Node.frag";
   import NodeVert from "./Node.vert";
   import NodeHtml from "./NodeHTML.svelte";
+  import { colors } from "../graph/colors.svelte";
+  import { appSettings } from "$lib/settings/app-settings.svelte";
 
   const graphState = getGraphState();
 
@@ -18,7 +20,16 @@
   const { node, inView, z }: Props = $props();
 
   const isActive = $derived(graphState.activeNodeId === node.id);
-  const isSelected = $derived(!!graphState.selectedNodes?.has(node.id));
+  const isSelected = $derived(graphState.selectedNodes.has(node.id));
+  let strokeColor = $state(colors.selected);
+  $effect(() => {
+    appSettings.theme;
+    strokeColor = isSelected
+      ? colors.selected.clone()
+      : isActive
+        ? colors.active.clone()
+        : colors.outline.clone();
+  });
 
   const updateNodePosition =
     getContext<(n: Node) => void>("updateNodePosition");
@@ -30,16 +41,11 @@
   const height = getNodeHeight?.(node.type);
 
   $effect(() => {
-    if (node && meshRef) {
-      node.tmp = node.tmp || {};
-      node.tmp.mesh = meshRef;
-      updateNodePosition?.(node);
-    }
+    node.tmp = node.tmp || {};
+    node.tmp.mesh = meshRef;
+    updateNodePosition?.(node);
   });
 
-  const colorBright = $colors["layer-2"];
-  const colorDark = $colors["layer-1"];
-
   onMount(() => {
     node.tmp = node.tmp || {};
     node.tmp.mesh = meshRef;
@@ -61,20 +67,14 @@
     fragmentShader={NodeFrag}
     transparent
     uniforms={{
-      uColorBright: { value: new Color("#171717") },
-      uColorDark: { value: new Color("#151515") },
-      uStrokeColor: { value: new Color("#9d5f28") },
+      uColorBright: { value: colors["layer-2"] },
+      uColorDark: { value: colors["layer-1"] },
+      uStrokeColor: { value: colors.outline.clone() },
       uStrokeWidth: { value: 1.0 },
       uWidth: { value: 20 },
       uHeight: { value: height },
     }}
-    uniforms.uColorBright.value={colorBright}
-    uniforms.uColorDark.value={colorDark}
-    uniforms.uStrokeColor.value={isSelected
-      ? $colors.selected
-      : isActive
-        ? $colors.active
-        : $colors.outline}
+    uniforms.uStrokeColor.value={strokeColor.clone()}
     uniforms.uStrokeWidth.value={(7 - z) / 3}
   />
 </T.Mesh>

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

@@ -3,14 +3,27 @@
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
   import { getContext, onMount } from "svelte";
-  export let isActive = false;
-  export let isSelected = false;
-  export let inView = true;
-  export let z = 2;
 
   let ref: HTMLDivElement;
-  export let node: Node;
-  export let position = "absolute";
+
+  type Props = {
+    node: Node;
+
+    position?: "absolute" | "fixed";
+    isActive?: boolean;
+    isSelected?: boolean;
+    inView?: boolean;
+    z?: number;
+  };
+
+  let {
+    node,
+    position = "absolute",
+    isActive = false,
+    isSelected = false,
+    inView = true,
+    z = 2,
+  }: Props = $props();
 
   const zOffset = (node.tmp?.random || 0) * 0.5;
   const zLimit = 2 - zOffset;
@@ -25,12 +38,6 @@
   const updateNodePosition =
     getContext<(n: Node) => void>("updateNodePosition");
 
-  $: if (node && ref) {
-    node.tmp = node.tmp || {};
-    node.tmp.ref = ref;
-    updateNodePosition?.(node);
-  }
-
   onMount(() => {
     node.tmp = node.tmp || {};
     node.tmp.ref = ref;

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

@@ -26,9 +26,9 @@
   const aspectRatio = 0.25;
 
   const path = createNodePath({
-    depth: 5,
-    height: 29,
-    y: 50,
+    depth: 5.5,
+    height: 34,
+    y: 49,
     cornerTop,
     rightBump,
     aspectRatio,
@@ -42,9 +42,9 @@
     aspectRatio,
   });
   const pathHover = createNodePath({
-    depth: 9,
+    depth: 8.5,
     height: 50,
-    y: 50,
+    y: 49,
     cornerTop,
     rightBump,
     aspectRatio,
@@ -103,12 +103,12 @@
 
   svg {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 1px;
+    left: 1px;
     z-index: -1;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+    width: calc(100% - 2px);
+    height: calc(100% - 1px);
     overflow: visible;
   }
 

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

@@ -53,14 +53,14 @@
   const path = createNodePath({
     depth: 7,
     height: 20,
-    y: 51,
+    y: 50.5,
     cornerBottom,
     leftBump,
     aspectRatio,
   });
   const pathDisabled = createNodePath({
-    depth: 4.5,
-    height: 14,
+    depth: 6,
+    height: 18,
     y: 50.5,
     cornerBottom,
     leftBump,
@@ -172,11 +172,11 @@
   svg {
     position: absolute;
     box-sizing: border-box;
-    width: 100%;
+    width: calc(100% - 2px);
     height: 100%;
     overflow: visible;
     top: 0;
-    left: 0;
+    left: 1px;
     z-index: -1;
   }