feat: some shit

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

@@ -1,13 +1,15 @@
 <script module lang="ts">
-  import { colors } from "../graph/state.svelte";
+  import { colors } from "../graph/colors.svelte";
 
   const circleMaterial = new MeshBasicMaterial({
-    color: get(colors).edge,
+    color: colors.edge.clone(),
     toneMapped: false,
   });
-
-  colors.subscribe((c) => {
-    circleMaterial.color.copy(c.edge.clone().convertSRGBToLinear());
+  $effect.root(() => {
+    $effect(() => {
+      appSettings.theme;
+      circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
+    })
   });
 
   const lineCache = new Map<number, BufferGeometry>();
@@ -23,23 +25,24 @@
 <script lang="ts">
   import { T } from "@threlte/core";
   import { MeshLineMaterial } from "@threlte/extras";
-  import { BufferGeometry, 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";
+    import { appSettings } from "$lib/settings/app-settings.svelte";
 
   type Props = {
     from: { x: number; y: number };
     to: { x: number; y: number };
+    z:number;
   };
 
-  const { from, to }: Props = $props();
-
-  let samples = 5;
+  const { from, to, z }: Props = $props();
 
   let geometry: BufferGeometry|null = $state(null);
 
+  const lineColor = $derived(appSettings.theme && colors.edge.clone().convertSRGBToLinear());
+
   let lastId: number | null = null;
 
   const primeA = 31;
@@ -63,7 +66,8 @@
     const length = Math.floor(
       Math.sqrt(Math.pow(new_x, 2) + Math.pow(new_y, 2)) / 4,
     );
-    samples = Math.min(Math.max(10, length), 60) * 2;
+
+    const samples = Math.max(length * 16, 10);
 
     curve.v0.set(0, 0);
     curve.v1.set(mid.x, 0);
@@ -79,13 +83,12 @@
     lineCache.set(curveId, geometry);
   };
 
+
   $effect(() => {
     if (from || to) {
       update();
     }
   });
-
-  const lineColor = $derived($colors.edge.clone().convertSRGBToLinear());
 </script>
 
 <T.Mesh
@@ -110,6 +113,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} />
+    <MeshLineMaterial width={Math.max(z*0.0001,0.00001)} color={lineColor}  />
   </T.Mesh>
 {/if}

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

@@ -1,8 +1,12 @@
 <script lang="ts">
   import Edge from "./Edge.svelte";
 
-  type Props = { from: { x: number; y: number }; to: { x: number; y: number } };
-  const { from, to }: Props = $props();
+  type Props = {
+    from: { x: number; y: number };
+    to: { x: number; y: number };
+    z: number;
+  };
+  const { from, to, z }: Props = $props();
 </script>
 
-<Edge {from} {to} />
+<Edge {from} {to} {z} />

app/src/lib/graph-interface/edges/createEdgeGeometry.ts

@@ -1,11 +1,29 @@
-import { BufferGeometry, Vector3, BufferAttribute } from 'three'
-import { setXY, setXYZ, setXYZW, setXYZXYZ } from './utils.js'
+import { BufferAttribute, BufferGeometry, Vector3 } from 'three';
+import { setXY, setXYZ, setXYZW, setXYZXYZ } from './utils.js';
 
 
 export function createEdgeGeometry(points: Vector3[]) {
 
-  let shape = 'none'
-  let shapeFunction = (p: number) => 1
+  const length = points[0].distanceTo(points[points.length - 1]);
+
+  const startRadius = 10.5;
+  const constantWidth = 2;
+  const taperFraction = 0.8 / length;
+
+  function ease(t: number) {
+    return t * t * (3 - 2 * t);
+  }
+  let shapeFunction = (alpha: number) => {
+    if (alpha < taperFraction) {
+      const easedAlpha = ease(alpha / taperFraction);
+      return startRadius + (constantWidth - startRadius) * easedAlpha;
+    } else if (alpha > 1 - taperFraction) {
+      const easedAlpha = ease((alpha - (1 - taperFraction)) / taperFraction);
+      return constantWidth + (startRadius - constantWidth) * easedAlpha;
+    } else {
+      return constantWidth;
+    }
+  };
 
   // When the component first runs we create the buffer geometry and allocate the buffer attributes
   let pointCount = points.length
@@ -19,9 +37,7 @@ export function createEdgeGeometry(points: Vector3[]) {
   let indices: number[] = []
   let indicesIndex = 0
 
-  if (shape === 'taper') {
-    shapeFunction = (p: number) => 1 * Math.pow(4 * p * (1 - p), 1)
-  }
+
 
   for (let j = 0; j < pointCount; j++) {
     const c = j / points.length
@@ -30,7 +46,7 @@ export function createEdgeGeometry(points: Vector3[]) {
     counterIndex += 2
 
     setXY(side, doubleIndex, 1, -1)
-    let width = shape === 'none' ? 1 : shapeFunction(j / (pointCount - 1))
+    let width = shapeFunction((j / (pointCount - 1)))
     setXY(widthArray, doubleIndex, width, width)
     doubleIndex += 2