feat: some moving around

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

@@ -0,0 +1,112 @@
+<script context="module" lang="ts">
+  const color = new Color(0x202020);
+  color.convertLinearToSRGB();
+
+  const color2 = color.clone();
+  color2.convertSRGBToLinear();
+
+  const circleMaterial = new MeshBasicMaterial({
+    color,
+    toneMapped: false,
+  });
+
+  const lineCache = new Map<number, BufferGeometry>();
+
+  const curve = new CubicBezierCurve(
+    new Vector2(0, 0),
+    new Vector2(0, 0),
+    new Vector2(0, 0),
+    new Vector2(0, 0),
+  );
+</script>
+
+<script lang="ts">
+  import { T } from "@threlte/core";
+  import { MeshLineMaterial } from "@threlte/extras";
+  import { BufferGeometry, MeshBasicMaterial, Vector3 } from "three";
+  import { Color } from "three/src/math/Color.js";
+  import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
+  import { Vector2 } from "three/src/math/Vector2.js";
+  import { createEdgeGeometry } from "./createEdgeGeometry.js";
+
+  export let from: { x: number; y: number };
+  export let to: { x: number; y: number };
+
+  let samples = 5;
+
+  let geometry: BufferGeometry;
+
+  let lastId: number | null = null;
+
+  const primeA = 31;
+  const primeB = 37;
+
+  export const update = function () {
+    const new_x = to.x - from.x;
+    const new_y = to.y - from.y;
+    const curveId = new_x * primeA + new_y * primeB;
+    if (lastId === curveId) {
+      return;
+    }
+
+    const mid = new Vector2(new_x / 2, new_y / 2);
+
+    if (lineCache.has(curveId)) {
+      geometry = lineCache.get(curveId)!;
+      return;
+    }
+
+    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);
+
+    curve.v0.set(0, 0);
+    curve.v1.set(mid.x, 0);
+    curve.v2.set(mid.x, new_y);
+    curve.v3.set(new_x, new_y);
+
+    const points = curve
+      .getPoints(samples)
+      .map((p) => new Vector3(p.x, 0, p.y))
+      .flat();
+
+    geometry = createEdgeGeometry(points);
+    lineCache.set(curveId, geometry);
+  };
+
+  $: if (from || to) {
+    update();
+  }
+</script>
+
+<T.Mesh
+  position.x={from.x}
+  position.z={from.y}
+  position.y={0.8}
+  rotation.x={-Math.PI / 2}
+  material={circleMaterial}
+>
+  <T.CircleGeometry args={[0.3, 16]} />
+</T.Mesh>
+
+<T.Mesh
+  position.x={to.x}
+  position.z={to.y}
+  position.y={0.8}
+  rotation.x={-Math.PI / 2}
+  material={circleMaterial}
+>
+  <T.CircleGeometry args={[0.3, 16]} />
+</T.Mesh>
+
+{#if geometry}
+  <T.Mesh position.x={from.x} position.z={from.y} position.y={0.1} {geometry}>
+    <MeshLineMaterial
+      width={4}
+      attenuate={false}
+      color={color2}
+      toneMapped={false}
+    />
+  </T.Mesh>
+{/if}

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Edge from "./Edge.svelte";
+
+  export let from: { x: number; y: number };
+  export let to: { x: number; y: number };
+</script>
+
+<Edge {from} {to} />

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

@@ -0,0 +1,100 @@
+import { BufferGeometry, Vector3, BufferAttribute } from 'three'
+import { setXY, setXYZ, setXYZW, setXYZXYZ } from './utils.js'
+
+
+export function createEdgeGeometry(points: Vector3[]) {
+
+  let shape = 'none'
+  let shapeFunction = (p: number) => 1
+
+  // When the component first runs we create the buffer geometry and allocate the buffer attributes
+  let pointCount = points.length
+  let counters: number[] = []
+  let counterIndex = 0
+  let side: number[] = []
+  let widthArray: number[] = []
+  let doubleIndex = 0
+  let uvArray: number[] = []
+  let uvIndex = 0
+  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
+    counters[counterIndex + 0] = c
+    counters[counterIndex + 1] = c
+    counterIndex += 2
+
+    setXY(side, doubleIndex, 1, -1)
+    let width = shape === 'none' ? 1 : shapeFunction(j / (pointCount - 1))
+    setXY(widthArray, doubleIndex, width, width)
+    doubleIndex += 2
+
+    setXYZW(uvArray, uvIndex, j / (pointCount - 1), 0, j / (pointCount - 1), 1)
+    uvIndex += 4
+
+    if (j < pointCount - 1) {
+      const n = j * 2
+      setXYZ(indices, indicesIndex, n + 0, n + 1, n + 2)
+      setXYZ(indices, indicesIndex + 3, n + 2, n + 1, n + 3)
+      indicesIndex += 6
+    }
+  }
+
+  const geometry = new BufferGeometry()
+  // create these buffer attributes at the correct length but leave them empty for now
+  geometry.setAttribute('position', new BufferAttribute(new Float32Array(pointCount * 6), 3))
+  geometry.setAttribute('previous', new BufferAttribute(new Float32Array(pointCount * 6), 3))
+  geometry.setAttribute('next', new BufferAttribute(new Float32Array(pointCount * 6), 3))
+  // create and populate these buffer attributes
+  geometry.setAttribute('counters', new BufferAttribute(new Float32Array(counters), 1))
+  geometry.setAttribute('side', new BufferAttribute(new Float32Array(side), 1))
+  geometry.setAttribute('width', new BufferAttribute(new Float32Array(widthArray), 1))
+  geometry.setAttribute('uv', new BufferAttribute(new Float32Array(uvArray), 2))
+  geometry.setIndex(new BufferAttribute(new Uint16Array(indices), 1))
+
+
+
+  let positions: number[] = []
+  let previous: number[] = []
+  let next: number[] = []
+  let positionIndex = 0
+  let previousIndex = 0
+  let nextIndex = 0
+  setXYZXYZ(previous, previousIndex, points[0].x, points[0].y, points[0].z)
+  previousIndex += 6
+  for (let j = 0; j < pointCount; j++) {
+    const p = points[j]
+    setXYZXYZ(positions, positionIndex, p.x, p.y, p.z)
+    positionIndex += 6
+    if (j < pointCount - 1) {
+      setXYZXYZ(previous, previousIndex, p.x, p.y, p.z)
+      previousIndex += 6
+    }
+    if (j > 0 && j + 1 <= pointCount) {
+      setXYZXYZ(next, nextIndex, p.x, p.y, p.z)
+      nextIndex += 6
+    }
+  }
+  setXYZXYZ(
+    next,
+    nextIndex,
+    points[pointCount - 1].x,
+    points[pointCount - 1].y,
+    points[pointCount - 1].z
+  )
+  const positionAttribute = (geometry.getAttribute('position') as BufferAttribute).set(positions)
+  const previousAttribute = (geometry.getAttribute('previous') as BufferAttribute).set(previous)
+  const nextAttribute = (geometry.getAttribute('next') as BufferAttribute).set(next)
+  positionAttribute.needsUpdate = true
+  previousAttribute.needsUpdate = true
+  nextAttribute.needsUpdate = true
+  geometry.computeBoundingSphere()
+
+  return geometry;
+
+}

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

@@ -0,0 +1,34 @@
+export const setXYZXYZ = (array: number[], location: number, x: number, y: number, z: number) => {
+  array[location + 0] = x
+  array[location + 1] = y
+  array[location + 2] = z
+
+  array[location + 3] = x
+  array[location + 4] = y
+  array[location + 5] = z
+}
+
+export const setXY = (array: number[], location: number, x: number, y: number) => {
+  array[location + 0] = x
+  array[location + 1] = y
+}
+
+export const setXYZ = (array: number[], location: number, x: number, y: number, z: number) => {
+  array[location + 0] = x
+  array[location + 1] = y
+  array[location + 2] = z
+}
+
+export const setXYZW = (
+  array: number[],
+  location: number,
+  x: number,
+  y: number,
+  z: number,
+  w: number
+) => {
+  array[location + 0] = x
+  array[location + 1] = y
+  array[location + 2] = z
+  array[location + 3] = w
+}