@bruno00o/graph 0.1.0 → 0.2.0

package/dist/{mount-graph-BHwq3LOr.js → mount-graph-DYOgD_ql.js}

@@ -449,8 +449,92 @@ function createGraphModel(options = {}) {
 		}
 	};
 }
+// src/core/edge-curve.ts
+const loopTurn = .6;
+const loopGrowth = .5;
+const maxBend = .12;
+const spreadBend = .4;
+function laneBend(position, count) {
+	if (count < 2) return 0;
+	const step = Math.min(maxBend, spreadBend / (count - 1));
+	return (position - (count - 1) / 2) * step;
+}
+function loopReach(radius, ordinal, minimum) {
+	return radius + Math.max(radius * 1.5, minimum) * (1 + loopGrowth * ordinal);
+}
+function parallelCurve(ax, ay, dx, dy, bend) {
+	const length = Math.hypot(dx - ax, dy - ay);
+	const nx = length > 0 ? -(dy - ay) / length : 0;
+	const ny = length > 0 ? (dx - ax) / length : 1;
+	const offset = 2 * bend * length;
+	const px = (ax + dx) / 2 + nx * offset;
+	const py = (ay + dy) / 2 + ny * offset;
+	return {
+		ax,
+		ay,
+		bx: ax + (px - ax) * 2 / 3,
+		by: ay + (py - ay) * 2 / 3,
+		cx: dx + (px - dx) * 2 / 3,
+		cy: dy + (py - dy) * 2 / 3,
+		dx,
+		dy
+	};
+}
+function loopCurve(x, y, reach) {
+	const arm = reach / (.75 * Math.cos(loopTurn));
+	const ux = Math.SQRT1_2;
+	const uy = -Math.SQRT1_2;
+	const cos = Math.cos(loopTurn);
+	const sin = Math.sin(loopTurn);
+	return {
+		ax: x,
+		ay: y,
+		bx: x + arm * (ux * cos - uy * sin),
+		by: y + arm * (ux * sin + uy * cos),
+		cx: x + arm * (ux * cos + uy * sin),
+		cy: y + arm * (-ux * sin + uy * cos),
+		dx: x,
+		dy: y
+	};
+}
+function pointOnCubic(curve, t) {
+	const u = 1 - t;
+	const a = u * u * u;
+	const b = 3 * u * u * t;
+	const c = 3 * u * t * t;
+	const d = t * t * t;
+	return {
+		x: a * curve.ax + b * curve.bx + c * curve.cx + d * curve.dx,
+		y: a * curve.ay + b * curve.by + c * curve.cy + d * curve.dy
+	};
+}
+function sampleCubic(curve, segments) {
+	const points = new Float64Array((segments + 1) * 2);
+	for (let step = 0; step <= segments; step++) {
+		const point = pointOnCubic(curve, step / segments);
+		points[step * 2] = point.x;
+		points[step * 2 + 1] = point.y;
+	}
+	return points;
+}
+function distanceToCubic(curve, x, y, segments) {
+	const points = sampleCubic(curve, segments);
+	let best = Number.POSITIVE_INFINITY;
+	for (let step = 0; step < segments; step++) {
+		const ax = points[step * 2] ?? 0;
+		const ay = points[step * 2 + 1] ?? 0;
+		const vx = (points[step * 2 + 2] ?? 0) - ax;
+		const vy = (points[step * 2 + 3] ?? 0) - ay;
+		const squared = vx * vx + vy * vy;
+		const t = squared > 0 ? Math.min(1, Math.max(0, ((x - ax) * vx + (y - ay) * vy) / squared)) : 0;
+		best = Math.min(best, Math.hypot(x - (ax + vx * t), y - (ay + vy * t)));
+	}
+	return best;
+}
 // src/core/pick-index.ts
 const minimumPickRadius = 2;
+const pickSegments = 16;
+const indexSegments = 8;
 function createGrid(frame, count, visit) {
 	const cells = frame.cols * frame.rows;
 	const offsets = new Uint32Array(cells + 1);
@@ -505,6 +589,7 @@ var PickIndex = class {
 	#maxWorldRadius = 0;
 	#maxScreenRadius = 0;
 	#maxEdgeHalfWidth = 0;
+	#loops = [];
 	build(source) {
 		const { nodes, edges, positions } = source;
 		let count = 0;
@@ -530,8 +615,25 @@ var PickIndex = class {
 		if (count === 0) {
 			this.#nodes = null;
 			this.#edges = null;
+			this.#loops = [];
 			return;
 		}
+		this.#loops = [];
+		for (let index = 0; index < edges.capacity; index++) {
+			if (edges.alive[index] !== 1) continue;
+			if (edges.source[index] === edges.target[index]) {
+				this.#loops.push(index);
+				continue;
+			}
+			if ((edges.bend[index] ?? 0) === 0) continue;
+			const points = sampleCubic(this.#parallel(source, index), indexSegments);
+			for (let at = 0; at < points.length; at += 2) {
+				minX = Math.min(minX, points[at] ?? minX);
+				maxX = Math.max(maxX, points[at] ?? maxX);
+				minY = Math.min(minY, points[at + 1] ?? minY);
+				maxY = Math.max(maxY, points[at + 1] ?? maxY);
+			}
+		}
 		const spanX = Math.max(maxX - minX, 1);
 		const spanY = Math.max(maxY - minY, 1);
 		let cell = Math.max(this.#maxWorldRadius * 2, Math.sqrt(spanX * spanY / count) * 2, .001);
@@ -554,9 +656,15 @@ var PickIndex = class {
 		this.#edges = createGrid(frame, edges.capacity, (index, emit) => {
 			if (edges.alive[index] !== 1) return;
 			this.#maxEdgeHalfWidth = Math.max(this.#maxEdgeHalfWidth, (edges.width[index] ?? 0) / 2);
-			const source = edges.source[index] ?? 0;
-			const target = edges.target[index] ?? 0;
-			traverse(frame, positions.x(source), positions.y(source), positions.x(target), positions.y(target), emit);
+			const from = edges.source[index] ?? 0;
+			const to = edges.target[index] ?? 0;
+			if (from === to) return;
+			if ((edges.bend[index] ?? 0) === 0) {
+				traverse(frame, positions.x(from), positions.y(from), positions.x(to), positions.y(to), emit);
+				return;
+			}
+			const points = sampleCubic(this.#parallel(source, index), indexSegments);
+			for (let at = 0; at + 3 < points.length; at += 2) traverse(frame, points[at] ?? 0, points[at + 1] ?? 0, points[at + 2] ?? 0, points[at + 3] ?? 0, emit);
 		});
 	}
 	pick(source, x, y, zoom, tolerance) {
@@ -582,6 +690,18 @@ var PickIndex = class {
 			for (let at = grid.offsets[cell] ?? 0; at < end; at++) visit(grid.items[at] ?? 0);
 		}
 	}
+	#parallel(source, index) {
+		const { edges, positions } = source;
+		const from = edges.source[index] ?? 0;
+		const to = edges.target[index] ?? 0;
+		return parallelCurve(positions.x(from), positions.y(from), positions.x(to), positions.y(to), edges.bend[index] ?? 0);
+	}
+	#loop(source, index, zoom) {
+		const node = source.edges.source[index] ?? 0;
+		const size = (source.nodes.size[node] ?? 0) / 2;
+		const reach = loopReach(Math.max(source.nodes.screenUnits[node] === 1 ? size : size * zoom, 1.25), source.edges.bend[index] ?? 0, 12) / zoom;
+		return loopCurve(source.positions.x(node), source.positions.y(node), reach);
+	}
 	#radius(source, index, zoom) {
 		const size = (source.nodes.size[index] ?? 0) / 2;
 		const radius = source.nodes.screenUnits[index] === 1 ? size / zoom : size;
@@ -612,10 +732,26 @@ var PickIndex = class {
 		let best = -1;
 		let bestDistance = Number.POSITIVE_INFINITY;
 		let bestOrder = Number.NEGATIVE_INFINITY;
+		const consider = (index, distance) => {
+			if (distance > ((edges.width[index] ?? 0) / 2 + tolerance) / zoom) return;
+			const order = source.order("edges", index);
+			if (distance < bestDistance || distance === bestDistance && order > bestOrder) {
+				best = index;
+				bestDistance = distance;
+				bestOrder = order;
+			}
+		};
+		const seen = /* @__PURE__ */ new Set();
 		this.#cells(grid, x, y, reach, (index) => {
 			if (edges.alive[index] !== 1) return;
 			const s = edges.source[index] ?? 0;
 			const t = edges.target[index] ?? 0;
+			if ((edges.bend[index] ?? 0) !== 0) {
+				if (seen.has(index)) return;
+				seen.add(index);
+				consider(index, distanceToCubic(this.#parallel(source, index), x, y, pickSegments));
+				return;
+			}
 			const ax = positions.x(s);
 			const ay = positions.y(s);
 			const dx = positions.x(t) - ax;
@@ -624,15 +760,12 @@ var PickIndex = class {
 			if (length === 0) return;
 			const along = ((x - ax) * dx + (y - ay) * dy) / length;
 			if (along < this.#radius(source, s, zoom) || along > length - this.#radius(source, t, zoom)) return;
-			const distance = Math.abs((x - ax) * dy - (y - ay) * dx) / length;
-			if (distance > ((edges.width[index] ?? 0) / 2 + tolerance) / zoom) return;
-			const order = source.order("edges", index);
-			if (distance < bestDistance || distance === bestDistance && order > bestOrder) {
-				best = index;
-				bestDistance = distance;
-				bestOrder = order;
-			}
+			consider(index, Math.abs((x - ax) * dy - (y - ay) * dx) / length);
 		});
+		for (const index of this.#loops) {
+			if (edges.alive[index] !== 1) continue;
+			consider(index, distanceToCubic(this.#loop(source, index, zoom), x, y, pickSegments));
+		}
 		return best;
 	}
 };
@@ -1091,6 +1224,7 @@ var EdgeColumns = class {
 	dash = /* @__PURE__ */ new Uint8Array(0);
 	arrow = /* @__PURE__ */ new Uint8Array(0);
 	opacity = /* @__PURE__ */ new Float32Array(0);
+	bend = /* @__PURE__ */ new Float32Array(0);
 	label = [];
 	reserve(index) {
 		if (index < this.capacity) return;
@@ -1104,15 +1238,190 @@ var EdgeColumns = class {
 		this.dash = grow$1(this.dash, capacity);
 		this.arrow = grow$1(this.arrow, capacity);
 		this.opacity = grow$1(this.opacity, capacity);
+		this.bend = grow$1(this.bend, capacity);
 		this.capacity = capacity;
 	}
 	clear(index) {
 		if (index >= this.capacity) return;
 		this.alive[index] = 0;
+		this.bend[index] = 0;
 		this.keys[index] = void 0;
 		this.label[index] = null;
 	}
 };
+// src/core/edge-lanes.ts
+const empty = -1;
+const removed = -2;
+function hash(low, high) {
+	let h = Math.imul(low, 2654435761) ^ Math.imul(high + 2135587861, 2246822519);
+	h ^= h >>> 15;
+	return Math.imul(h, 739982445) ^ h >>> 12;
+}
+function grown(array, length) {
+	const next = new Int32Array(length).fill(-1);
+	next.set(array);
+	return next;
+}
+function createEdgeLanes() {
+	let mask = -1;
+	let lows = /* @__PURE__ */ new Uint32Array(0);
+	let highs = /* @__PURE__ */ new Uint32Array(0);
+	let heads = /* @__PURE__ */ new Int32Array(0);
+	let tails = /* @__PURE__ */ new Int32Array(0);
+	let counts = /* @__PURE__ */ new Int32Array(0);
+	let stamps = /* @__PURE__ */ new Uint32Array(0);
+	let used = 0;
+	let live = 0;
+	let generation = 0;
+	let slots = /* @__PURE__ */ new Int32Array(0);
+	let nexts = /* @__PURE__ */ new Int32Array(0);
+	let prevs = /* @__PURE__ */ new Int32Array(0);
+	let touched = [];
+	function reserve(index) {
+		if (index < slots.length) return;
+		const length = Math.max(64, slots.length * 2, index + 1);
+		slots = grown(slots, length);
+		nexts = grown(nexts, length);
+		prevs = grown(prevs, length);
+	}
+	function locate(low, high) {
+		let slot = hash(low, high) & mask;
+		let free = -1;
+		for (;;) {
+			const head = heads[slot] ?? empty;
+			if (head === empty) return -(free >= 0 ? free : slot) - 1;
+			if (head === removed) {
+				if (free < 0) free = slot;
+			} else if (lows[slot] === low && highs[slot] === high) return slot;
+			slot = slot + 1 & mask;
+		}
+	}
+	function resize(minimum) {
+		let capacity = 16;
+		while (capacity < minimum) capacity *= 2;
+		const oldLows = lows;
+		const oldHighs = highs;
+		const oldHeads = heads;
+		const oldTails = tails;
+		const oldCounts = counts;
+		mask = capacity - 1;
+		lows = new Uint32Array(capacity);
+		highs = new Uint32Array(capacity);
+		heads = new Int32Array(capacity).fill(empty);
+		tails = new Int32Array(capacity).fill(-1);
+		counts = new Int32Array(capacity);
+		stamps = new Uint32Array(capacity);
+		generation = 0;
+		used = 0;
+		live = 0;
+		for (let old = 0; old < oldHeads.length; old++) {
+			const first = oldHeads[old] ?? empty;
+			if (first < 0) continue;
+			const low = oldLows[old] ?? 0;
+			const high = oldHighs[old] ?? 0;
+			const slot = -locate(low, high) - 1;
+			lows[slot] = low;
+			highs[slot] = high;
+			heads[slot] = first;
+			tails[slot] = oldTails[old] ?? -1;
+			counts[slot] = oldCounts[old] ?? 0;
+			used++;
+			live++;
+			for (let at = first; at >= 0; at = nexts[at] ?? -1) slots[at] = slot;
+		}
+	}
+	function unlink(index) {
+		const slot = slots[index] ?? -1;
+		if (slot < 0) return;
+		const prev = prevs[index] ?? -1;
+		const next = nexts[index] ?? -1;
+		if (prev >= 0) nexts[prev] = next;
+		else heads[slot] = next;
+		if (next >= 0) prevs[next] = prev;
+		else tails[slot] = prev;
+		slots[index] = -1;
+		const count = (counts[slot] ?? 1) - 1;
+		counts[slot] = count;
+		if (count === 0) {
+			heads[slot] = removed;
+			live--;
+		} else touched.push(heads[slot] ?? -1);
+	}
+	function link(index, source, target) {
+		reserve(index);
+		const low = source < target ? source : target;
+		const high = source < target ? target : source;
+		const current = slots[index] ?? -1;
+		if (current >= 0) {
+			if (lows[current] === low && highs[current] === high) return;
+			unlink(index);
+		}
+		if ((used + 1) * 2 > mask + 1) resize(Math.max(16, (live + 1) * 4));
+		const found = locate(low, high);
+		prevs[index] = -1;
+		nexts[index] = -1;
+		if (found >= 0) {
+			const tail = tails[found] ?? -1;
+			nexts[tail] = index;
+			prevs[index] = tail;
+			tails[found] = index;
+			counts[found] = (counts[found] ?? 0) + 1;
+			slots[index] = found;
+		} else {
+			const slot = -found - 1;
+			if (heads[slot] === empty) used++;
+			live++;
+			lows[slot] = low;
+			highs[slot] = high;
+			heads[slot] = index;
+			tails[slot] = index;
+			counts[slot] = 1;
+			slots[index] = slot;
+		}
+		touched.push(index);
+	}
+	function write(edges, dirty) {
+		if (touched.length === 0) return;
+		generation = generation + 1 >>> 0;
+		if (generation === 0) {
+			stamps.fill(0);
+			generation = 1;
+		}
+		const bends = edges.bend;
+		for (const edge of touched) {
+			const slot = edge >= 0 ? slots[edge] ?? -1 : -1;
+			if (slot < 0 || stamps[slot] === generation) continue;
+			stamps[slot] = generation;
+			const count = counts[slot] ?? 0;
+			const loop = lows[slot] === highs[slot];
+			if (count === 1 && !loop) {
+				const only = heads[slot] ?? 0;
+				if (bends[only] !== 0) {
+					bends[only] = 0;
+					dirty.add(only);
+				}
+				continue;
+			}
+			let position = 0;
+			for (let at = heads[slot] ?? -1; at >= 0; at = nexts[at] ?? -1) {
+				const source = edges.source[at] ?? 0;
+				const target = edges.target[at] ?? 0;
+				const bend = loop ? position : Math.fround(laneBend(position, count) * (source < target ? 1 : -1)) || 0;
+				if (bends[at] !== bend) {
+					bends[at] = bend;
+					dirty.add(at);
+				}
+				position++;
+			}
+		}
+		touched = [];
+	}
+	return {
+		link,
+		unlink,
+		write
+	};
+}
 // src/core/palette.ts
 var Palette = class {
 	#ids = /* @__PURE__ */ new Map();
@@ -1186,6 +1495,7 @@ function createScene() {
 	const nodes = new NodeColumns();
 	const edges = new EdgeColumns();
 	const palette = new Palette();
+	const lanes = createEdgeLanes();
 	const slots = /* @__PURE__ */ new Map();
 	let layers = [];
 	let layersDirty = false;
@@ -1273,6 +1583,7 @@ function createScene() {
 		edges.slot[index] = slots.get(record.mark) ?? 0;
 		edges.source[index] = model.node(record.source)?.index ?? 0;
 		edges.target[index] = model.node(record.target)?.index ?? 0;
+		lanes.link(index, edges.source[index] ?? 0, edges.target[index] ?? 0);
 		edges.color[index] = palette.id(color);
 		edges.width[index] = Number.isNaN(width) ? defaults.edgeWidth : widthScale.map(width, widthDomain);
 		edges.dash[index] = codeOf(dashCodes, mark.dash?.(datum));
@@ -1290,6 +1601,7 @@ function createScene() {
 		dirtyNodes.add(index);
 	}
 	function removeEdge(index) {
+		lanes.unlink(index);
 		edges.clear(index);
 		widthValues[index] = NaN;
 		edgeColorValues[index] = void 0;
@@ -1381,6 +1693,7 @@ function createScene() {
 			}
 			for (const record of nodeRecords.values()) writeNode(record);
 			for (const record of edgeRecords.values()) writeEdge(model, record);
+			lanes.write(edges, dirtyEdges);
 		},
 		takeDirty() {
 			const dirty = {
@@ -2187,6 +2500,10 @@ void main() {
     gl_Position = hidden;
     return;
   }
+  if (topology.x == topology.y || style.z != 0.0) {
+    gl_Position = hidden;
+    return;
+  }
   Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z), 32);
   ivec2 s = texel(topology.x);
   ivec2 e = texel(topology.y);
@@ -2231,6 +2548,143 @@ void main() {
   gl_Position = visible > 0.5 ? toClip(ps + dir * along + normal * across) : hidden;
 }
 `;
+const segments = 24 .toFixed(1);
+const curveVertex = `${header}${nodeData}${edgeData}
+in vec3 corner;
+in uint instance;
+out vec2 vPos;
+out float vStart;
+out float vEnd;
+out float vHalfWidth;
+out float vArrowLength;
+out float vArrowHalf;
+out float vHaloWidth;
+flat out uint vDash;
+flat out uint vArrow;
+flat out vec4 vColor;
+flat out float vOpacity;
+vec2 cubicAt(vec2 a, vec2 b, vec2 c, vec2 d, float t) {
+  float u = 1.0 - t;
+  return u * u * u * a + 3.0 * u * u * t * b + 3.0 * u * t * t * c + t * t * t * d;
+}
+vec2 cubicTangent(vec2 a, vec2 b, vec2 c, vec2 d, float t) {
+  float u = 1.0 - t;
+  return 3.0 * u * u * (b - a) + 6.0 * u * t * (c - b) + 3.0 * t * t * (d - c);
+}
+float crossing(vec2 a, vec2 b, vec2 c, vec2 d, vec2 point, float radius, float lo, float hi, bool rising) {
+  for (int i = 0; i < 14; i++) {
+    float mid = (lo + hi) * 0.5;
+    bool inside = distance(cubicAt(a, b, c, d, mid), point) < radius;
+    if (inside == rising) lo = mid; else hi = mid;
+  }
+  return (lo + hi) * 0.5;
+}
+float arcLength(vec2 a, vec2 b, vec2 c, vec2 d, float from, float to) {
+  float total = 0.0;
+  vec2 previous = cubicAt(a, b, c, d, from);
+  for (int i = 1; i <= 8; i++) {
+    vec2 next = cubicAt(a, b, c, d, mix(from, to, float(i) / 8.0));
+    total += distance(previous, next);
+    previous = next;
+  }
+  return total;
+}
+vec2 turn(vec2 v, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  return vec2(v.x * c - v.y * s, v.x * s + v.y * c);
+}
+void main() {
+  ivec2 t = texel(instance);
+  uvec4 topology = texelFetch(edgeTopology, t, 0);
+  vec4 style = texelFetch(edgeStyle, t, 0);
+  uint packed = topology.w;
+  uint mask = texelFetch(edgeState, t, 0).r;
+  bool highlighted = (mask & highlightMask) != 0u;
+  bool loop = topology.x == topology.y;
+  if ((packed & 16u) == 0u || (!loop && style.z == 0.0) || (overlay == 0 && (int(packed >> 5u) != layerSlot || highlighted))) {
+    gl_Position = hidden;
+    return;
+  }
+  Look look = resolve(mask, Look(style.y, style.x, 0.0, 1.0, none, topology.z), 32);
+  ivec2 s = texel(topology.x);
+  ivec2 e = texel(topology.y);
+  vec2 a = toScreen(texelFetch(nodePosition, s, 0).xy);
+  vec2 d = toScreen(texelFetch(nodePosition, e, 0).xy);
+  float sourceRadius = nodeRadius(texelFetch(nodeStyle, s, 0));
+  float targetRadius = nodeRadius(texelFetch(nodeStyle, e, 0));
+  vec2 b;
+  vec2 c;
+  if (loop) {
+    float reach = sourceRadius + max(sourceRadius * 1.5, ${12 .toFixed(1)}) * (1.0 + ${loopGrowth.toFixed(2)} * style.z);
+    float arm = reach / (0.75 * cos(${loopTurn.toFixed(4)}));
+    vec2 u = vec2(0.70710678, -0.70710678);
+    b = a + arm * turn(u, ${loopTurn.toFixed(4)});
+    c = a + arm * turn(u, -${loopTurn.toFixed(4)});
+  } else {
+    vec2 delta = d - a;
+    float len = length(delta);
+    vec2 side = len > 0.0 ? vec2(-delta.y, delta.x) / len : vec2(0.0, 1.0);
+    vec2 control = (a + d) * 0.5 + side * (2.0 * style.z * len);
+    b = a + (control - a) * (2.0 / 3.0);
+    c = d + (control - d) * (2.0 / 3.0);
+  }
+  float t0 = crossing(a, b, c, d, a, sourceRadius, 0.0, 0.5, true);
+  float t1 = crossing(a, b, c, d, d, targetRadius, 0.5, 1.0, false);
+  float visible = arcLength(a, b, c, d, t0, t1);
+  float width = max(look.strokeWidth, 0.5);
+  uint arrow = (packed >> 2u) & 3u;
+  float arrowLength = arrow != 0u && visible > width * 8.0 ? max(width * 4.0, 6.0) : 0.0;
+  float arrowHalf = max(width * 1.6, 3.0);
+  float halo = look.halo > 0.5 ? haloWidth : 0.0;
+  float margin = 0.5 / pixelRatio + 0.5;
+  float startHead = (arrow & 1u) != 0u ? arrowLength : 0.0;
+  float endHead = (arrow & 2u) != 0u ? arrowLength : 0.0;
+  vec2 first = cubicAt(a, b, c, d, t0);
+  vec2 last = cubicAt(a, b, c, d, t1);
+  float ta = startHead > 0.0 ? crossing(a, b, c, d, first, startHead, t0, t1, true) : t0;
+  float tb = endHead > 0.0 ? crossing(a, b, c, d, last, endHead, t0, t1, false) : t1;
+  float body = width * 0.5 + halo + margin;
+  float head = max(body, arrowHalf + halo + margin);
+  int station = int(corner.x + 0.5);
+  float at;
+  float along;
+  float push = 0.0;
+  if (station == 0) {
+    at = t0;
+    along = -margin;
+    push = -margin;
+  } else if (station > int(${segments}) + 1) {
+    at = t1;
+    along = visible + margin;
+    push = margin;
+  } else {
+    float f = float(station - 1) / ${segments};
+    at = mix(ta, tb, f);
+    along = mix(startHead, visible - endHead, f);
+  }
+  vec2 tangent = cubicTangent(a, b, c, d, at);
+  float tangentLength = length(tangent);
+  vec2 dir = tangentLength > 0.0 ? tangent / tangentLength : vec2(1.0, 0.0);
+  vec2 normal = vec2(-dir.y, dir.x);
+  float extent = corner.z < 0.5 ? body
+    : corner.z < 1.5 ? (startHead > 0.0 ? head : body)
+    : (endHead > 0.0 ? head : body);
+  float across = corner.y * extent;
+  vPos = vec2(along, across);
+  vStart = 0.0;
+  vEnd = visible;
+  vHalfWidth = width * 0.5;
+  vArrowLength = arrowLength;
+  vArrowHalf = arrowHalf;
+  vHaloWidth = halo;
+  vDash = packed & 3u;
+  vArrow = arrow;
+  vColor = paletteColor(look.stroke);
+  vOpacity = look.opacity;
+  gl_Position = visible > 0.5 ? toClip(cubicAt(a, b, c, d, at) + dir * push + normal * across) : hidden;
+}
+`;
 const edgeFragment = `${header}
 in vec2 vPos;
 in float vStart;
@@ -2387,6 +2841,27 @@ const cornerEdge = new Float32Array([
 	1,
 	2
 ]);
+function curveCorners() {
+	const values = [
+		0,
+		-1,
+		1,
+		0,
+		1,
+		1,
+		1,
+		-1,
+		1,
+		1,
+		1,
+		1
+	];
+	for (let station = 1; station <= 25; station++) values.push(station, -1, 0, station, 1, 0);
+	const end = 25;
+	values.push(end, -1, 2, end, 1, 2, 26, -1, 2, 26, 1, 2);
+	return new Float32Array(values);
+}
+const cornerCurve = curveCorners();
 const cornerLabel = new Float32Array([
 	0,
 	0,
@@ -2487,26 +2962,30 @@ function createWebglRenderer(canvas) {
 		edgeProgram,
 		labelProgram
 	];
-	for (const program of programs) {
+	const locations = /* @__PURE__ */ new Map();
+	function prepare(program) {
 		gl.useProgram(program);
 		for (const [name, unit] of Object.entries(units)) {
 			const location = gl.getUniformLocation(program, name);
 			if (location) gl.uniform1i(location, unit);
 		}
+		locations.set(program, {
+			layerSlot: gl.getUniformLocation(program, "layerSlot"),
+			overlay: gl.getUniformLocation(program, "overlay")
+		});
 	}
+	for (const program of programs) prepare(program);
 	gl.useProgram(labelProgram);
 	gl.uniform1f(gl.getUniformLocation(labelProgram, "atlasFontSize"), 24);
-	const locations = new Map(programs.map((program) => [program, {
-		layerSlot: gl.getUniformLocation(program, "layerSlot"),
-		overlay: gl.getUniformLocation(program, "overlay")
-	}]));
 	const nodeCorner = createBuffer(gl, cornerNode, gl.STATIC_DRAW);
 	const edgeCorner = createBuffer(gl, cornerEdge, gl.STATIC_DRAW);
+	const curveCorner = createBuffer(gl, cornerCurve, gl.STATIC_DRAW);
 	const labelCorner = createBuffer(gl, cornerLabel, gl.STATIC_DRAW);
 	const nodeIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.STATIC_DRAW);
 	const edgeIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.STATIC_DRAW);
 	const nodeOverlayIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.DYNAMIC_DRAW);
 	const edgeOverlayIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.DYNAMIC_DRAW);
+	const curveIndices = createBuffer(gl, /* @__PURE__ */ new Uint32Array(0), gl.DYNAMIC_DRAW);
 	const labelMainBuffer = createBuffer(gl, /* @__PURE__ */ new Uint8Array(0), gl.DYNAMIC_DRAW);
 	const labelHighlightBuffer = createBuffer(gl, /* @__PURE__ */ new Uint8Array(0), gl.DYNAMIC_DRAW);
 	const warmIndex = createBuffer(gl, /* @__PURE__ */ new Uint32Array(1), gl.STATIC_DRAW);
@@ -2514,11 +2993,13 @@ function createWebglRenderer(canvas) {
 	const buffers = [
 		nodeCorner,
 		edgeCorner,
+		curveCorner,
 		labelCorner,
 		nodeIndices,
 		edgeIndices,
 		nodeOverlayIndices,
 		edgeOverlayIndices,
+		curveIndices,
 		labelMainBuffer,
 		labelHighlightBuffer,
 		warmIndex,
@@ -2595,10 +3076,26 @@ function createWebglRenderer(canvas) {
 		[labelProgram, cornerLabel.length / 2]
 	]);
 	let warmed = false;
+	let curvePass = null;
+	function curves() {
+		if (curvePass) return curvePass;
+		const program = createProgram(gl, curveVertex, edgeFragment, blocks);
+		prepare(program);
+		programs.push(program);
+		vertexCounts.set(program, cornerCurve.length / 3);
+		curvePass = {
+			program,
+			main: createVertexArray(gl, program, [corner(curveCorner, 3), instance(curveIndices)]),
+			overlay: createVertexArray(gl, program, [corner(curveCorner, 3), instance(edgeOverlayIndices)])
+		};
+		return curvePass;
+	}
 	let nodeCapacity = 0;
 	let edgeCapacity = 0;
 	let nodeOverlayCount = 0;
 	let edgeOverlayCount = 0;
+	const curved = /* @__PURE__ */ new Set();
+	let curvedChanged = false;
 	let input = null;
 	const atlas = new GlyphAtlas("system-ui, sans-serif");
 	const labels = new LabelLayer();
@@ -2629,6 +3126,14 @@ function createWebglRenderer(canvas) {
 		edgeTopology.data[at + 3] = (edges.dash[index] ?? 0) | (edges.arrow[index] ?? 0) << 2 | (edges.alive[index] ?? 0) << 4 | (edges.slot[index] ?? 0) << 5;
 		edgeStyle.data[at] = edges.width[index] ?? 0;
 		edgeStyle.data[at + 1] = edges.opacity[index] ?? 1;
+		const bend = edges.bend[index] ?? 0;
+		edgeStyle.data[at + 2] = bend;
+		const isCurved = edges.alive[index] === 1 && (bend !== 0 || edges.source[index] === edges.target[index]);
+		if (isCurved !== curved.has(index)) {
+			if (isCurved) curved.add(index);
+			else curved.delete(index);
+			curvedChanged = true;
+		}
 	}
 	function syncNodes(next) {
 		const nodes = next.scene.nodes;
@@ -2688,6 +3193,11 @@ function createWebglRenderer(canvas) {
 		}
 		edgeTopology.upload(first, last);
 		edgeStyle.upload(first, last);
+		if (curvedChanged) {
+			curvedChanged = false;
+			gl.bindBuffer(gl.ARRAY_BUFFER, curveIndices);
+			gl.bufferData(gl.ARRAY_BUFFER, Uint32Array.from(curved), gl.DYNAMIC_DRAW);
+		}
 		const states = next.states;
 		const range = states.edgeDirty.take();
 		if (next.full || grown) {
@@ -2849,10 +3359,16 @@ function createWebglRenderer(canvas) {
 			gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 			bind();
 			if (!warmed) warm();
-			for (const layer of input?.scene.layers ?? []) if (layer.kind === "edges") draw(edgeProgram, vertexArrays.edges, edgeCapacity, layer.slot, 0);
-			else draw(nodeProgram, vertexArrays.nodes, nodeCapacity, layer.slot, 0);
+			for (const layer of input?.scene.layers ?? []) if (layer.kind === "edges") {
+				draw(edgeProgram, vertexArrays.edges, edgeCapacity, layer.slot, 0);
+				if (curved.size > 0) {
+					const pass = curves();
+					draw(pass.program, pass.main, curved.size, layer.slot, 0);
+				}
+			} else draw(nodeProgram, vertexArrays.nodes, nodeCapacity, layer.slot, 0);
 			draw(labelProgram, vertexArrays.labels, labels.main.count, 0, 0);
 			draw(edgeProgram, vertexArrays.edgeOverlay, edgeOverlayCount, 0, 1);
+			if (curvePass && curved.size > 0) draw(curvePass.program, curvePass.overlay, edgeOverlayCount, 0, 1);
 			draw(nodeProgram, vertexArrays.nodeOverlay, nodeOverlayCount, 0, 1);
 			draw(labelProgram, vertexArrays.labelHighlight, labels.highlight.count, 0, 1);
 			gl.bindVertexArray(null);
@@ -2868,6 +3384,10 @@ function createWebglRenderer(canvas) {
 				statesBuffer
 			]) gl.deleteBuffer(buffer);
 			for (const vao of Object.values(vertexArrays)) gl.deleteVertexArray(vao);
+			if (curvePass) {
+				gl.deleteVertexArray(curvePass.main);
+				gl.deleteVertexArray(curvePass.overlay);
+			}
 			for (const program of programs) gl.deleteProgram(program);
 			gl.getExtension("WEBGL_lose_context")?.loseContext();
 		}
@@ -3820,4 +4340,4 @@ function mountGraph(container, options) {
 }
 export { freeStateNames as n, maxFreeStates as r, mountGraph as t };
 
-//# sourceMappingURL=mount-graph-BHwq3LOr.js.map
+//# sourceMappingURL=mount-graph-DYOgD_ql.js.map