feat: add color to sockets

Closes #34
2026-02-13 00:52:07 +01:00
parent 4c7b03dfb8
commit c1ae70282c
8 changed files with 135 additions and 21 deletions
@@ -3,6 +3,7 @@ import { getContext, setContext } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import type { OrthographicCamera, Vector3 } from 'three';
 import type { GraphManager } from './graph-manager.svelte';
+import { ColorGenerator } from './graph/colors';
 import { getNodeHeight, getSocketPosition } from './helpers/nodeHelpers';

 const graphStateKey = Symbol('graph-state');
@@ -28,7 +29,32 @@ type EdgeData = {
  points: Vector3[];
 };

+const predefinedColors = {
+  path: {
+    hue: 80,
+    lightness: 20,
+    saturation: 80
+  },
+  float: {
+    hue: 70,
+    lightness: 10,
+    saturation: 0
+  },
+  geometry: {
+    hue: 0,
+    lightness: 50,
+    saturation: 70
+  },
+  '*': {
+    hue: 200,
+    lightness: 20,
+    saturation: 100
+  }
+} as const;
+
 export class GraphState {
+  colors = new ColorGenerator(predefinedColors);
+
  constructor(private graph: GraphManager) {
    $effect.root(() => {
      $effect(() => {