@fxhash/open-form-graph 0.0.1 → 0.0.2

package/dist/OpenFormGraph-wo_Y20C6.js

@@ -0,0 +1,1277 @@
+import { DEFAULT_GRAPH_CONFIG, VOID_ROOT_ID, useOpenFormGraph } from "./provider-CTDz6ZQd.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { forceCenter, forceLink, forceManyBody, forceSimulation } from "d3-force";
+import { scaleLinear, scaleLog } from "d3-scale";
+
+//#region src/util/types.ts
+function isSimNode(node) {
+	return typeof node === "object" && "id" in node;
+}
+function isSimLink(link) {
+	return typeof link === "object" && "source" in link && typeof link.source !== "string";
+}
+
+//#endregion
+//#region src/util/graph.ts
+function getNodeId(n) {
+	return typeof n === "object" && n !== null && "id" in n ? n.id : n;
+}
+function getParents(id, links) {
+	return links.filter((l) => {
+		const targetId = isSimNode(l.target) ? l.target.id : l.target;
+		return targetId === id;
+	}).map((link) => isSimNode(link.source) ? link.source.id : link.source.toString());
+}
+function getChildren(id, links) {
+	return links.filter((l) => {
+		const sourceId = isSimNode(l.source) ? l.source.id : l.source;
+		return sourceId === id;
+	}).map((link) => link.target.toString());
+}
+function getClusterSize(id, links) {
+	const children = getChildren(id, links);
+	return children.reduce((acc, childId) => {
+		return acc + getClusterSize(childId, links);
+	}, children.length || 0);
+}
+function hasOnlyLeafs(id, links) {
+	const children = getChildren(id, links);
+	return children.every((childId) => getChildren(childId, links).length === 0);
+}
+function getNodeSubgraph(nodeId, nodes, links, rootId) {
+	const nodesById = Object.fromEntries(nodes.map((n) => [n.id, n]));
+	const parentSet = new Set();
+	const childSet = new Set();
+	const subLinks = new Set();
+	let currentId = nodeId;
+	while (currentId !== rootId) {
+		const parentLink = links.find((l) => {
+			const targetId = isSimNode(l.target) ? l.target.id : l.target;
+			return targetId === currentId;
+		});
+		if (!parentLink) break;
+		const parentId = isSimNode(parentLink.source) ? parentLink.source.id : parentLink.source;
+		if (parentSet.has(parentId.toString())) break;
+		parentSet.add(parentId.toString());
+		subLinks.add(parentLink);
+		currentId = parentId.toString();
+	}
+	function collectChildren(id) {
+		for (const link of links) {
+			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+			const targetId = isSimNode(link.target) ? link.target.id : link.target;
+			if (sourceId === id && !childSet.has(targetId.toString())) {
+				childSet.add(targetId.toString());
+				subLinks.add(link);
+				collectChildren(targetId.toString());
+			}
+		}
+	}
+	collectChildren(nodeId);
+	const validIds = new Set([
+		...parentSet,
+		nodeId,
+		...childSet
+	]);
+	const filteredLinks = Array.from(subLinks).filter((link) => {
+		const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+		const targetId = isSimNode(link.target) ? link.target.id : link.target;
+		return validIds.has(sourceId.toString()) && validIds.has(targetId.toString());
+	});
+	const allNodeIds = Array.from(validIds);
+	const subNodes = allNodeIds.map((id) => nodesById[id]).filter(Boolean);
+	return {
+		nodes: subNodes,
+		links: filteredLinks
+	};
+}
+
+//#endregion
+//#region src/util/img.ts
+function loadImage(src) {
+	return new Promise((resolve, reject) => {
+		const img$1 = new Image();
+		img$1.onload = () => resolve(img$1);
+		img$1.onerror = reject;
+		img$1.src = src;
+	});
+}
+
+//#endregion
+//#region src/sim/TransformCanvas.ts
+const MIN_ZOOM = .1;
+const MAX_ZOOM = 10;
+const CLICK_THRESHOLD = 5;
+var TransformCanvas = class {
+	canvas;
+	transform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	targetTransform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	isAnimating = false;
+	animationFrame = null;
+	isDragging = false;
+	dragStart = null;
+	moved = false;
+	lastMousePos = {
+		x: 0,
+		y: 0
+	};
+	lastMoveMousePos = {
+		x: 0,
+		y: 0
+	};
+	zoomFocus = {
+		x: 0,
+		y: 0
+	};
+	onUpdate;
+	onClick;
+	onMove;
+	noInteraction = false;
+	touchStart = null;
+	lastTouchPos = {
+		x: 0,
+		y: 0
+	};
+	pinchStartDist = null;
+	pinchStartScale = 1;
+	focus = null;
+	constructor(canvas, options) {
+		this.canvas = canvas;
+		this.onUpdate = options?.onUpdate;
+		this.onClick = options?.onClick;
+		this.onMove = options?.onMove;
+		this.handleWheel = this.handleWheel.bind(this);
+		this.handleMouseDown = this.handleMouseDown.bind(this);
+		this.handleMouseMove = this.handleMouseMove.bind(this);
+		this.handleMouseUp = this.handleMouseUp.bind(this);
+		this.handleMouseUpCanvas = this.handleMouseUpCanvas.bind(this);
+		canvas.addEventListener("wheel", this.handleWheel, { passive: false });
+		canvas.addEventListener("mousedown", this.handleMouseDown);
+		window.addEventListener("mousemove", this.handleMouseMove);
+		window.addEventListener("mouseup", this.handleMouseUp);
+		canvas.addEventListener("mouseup", this.handleMouseUpCanvas);
+		this.handleTouchStart = this.handleTouchStart.bind(this);
+		this.handleTouchMove = this.handleTouchMove.bind(this);
+		this.handleTouchEnd = this.handleTouchEnd.bind(this);
+		canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+		canvas.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+		canvas.addEventListener("touchend", this.handleTouchEnd, { passive: false });
+		canvas.addEventListener("touchcancel", this.handleTouchEnd, { passive: false });
+	}
+	lerp(a, b, t) {
+		return a + (b - a) * t;
+	}
+	animateTransform = () => {
+		const speed = .05;
+		const prev = this.transform;
+		const target = this.focus?.() || this.targetTransform;
+		const next = {
+			x: this.lerp(prev.x, target.x, speed),
+			y: this.lerp(prev.y, target.y, speed),
+			scale: this.lerp(prev.scale, target.scale, speed)
+		};
+		const done = Math.abs(next.x - target.x) < .5 && Math.abs(next.y - target.y) < .5 && Math.abs(next.scale - target.scale) < .001;
+		if (done) {
+			this.transform = { ...target };
+			this.isAnimating = false;
+			this.focus = null;
+		} else {
+			this.transform = next;
+			this.isAnimating = true;
+		}
+		this.onUpdate?.(this.transform);
+		if (this.isAnimating) this.animationFrame = requestAnimationFrame(this.animateTransform);
+		else if (this.animationFrame) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+	};
+	handleWheel(e) {
+		if (this.noInteraction) return;
+		if (this.isAnimating) {
+			this.isAnimating = false;
+			this.focus = null;
+			if (this.animationFrame) {
+				cancelAnimationFrame(this.animationFrame);
+				this.animationFrame = null;
+			}
+		}
+		e.preventDefault();
+		const rect$1 = this.canvas.getBoundingClientRect();
+		const mouseX = e.clientX - rect$1.left;
+		const mouseY = e.clientY - rect$1.top;
+		this.zoomFocus = {
+			x: mouseX,
+			y: mouseY
+		};
+		const scaleFactor = e.deltaY > 0 ? .95 : 1.05;
+		const newScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, this.targetTransform.scale * scaleFactor));
+		const { x, y, scale } = this.transform;
+		const dx = mouseX - x;
+		const dy = mouseY - y;
+		const scaleChange = newScale / scale;
+		const newX = mouseX - dx * scaleChange;
+		const newY = mouseY - dy * scaleChange;
+		this.targetTransform = {
+			x: newX,
+			y: newY,
+			scale: newScale
+		};
+		if (!this.isAnimating) {
+			this.isAnimating = true;
+			this.animationFrame = requestAnimationFrame(this.animateTransform);
+		}
+	}
+	handleMouseDown(e) {
+		if (this.noInteraction) return;
+		if (this.isAnimating) {
+			this.isAnimating = false;
+			this.focus = null;
+			if (this.animationFrame) {
+				cancelAnimationFrame(this.animationFrame);
+				this.animationFrame = null;
+			}
+		}
+		this.isDragging = true;
+		this.moved = false;
+		this.dragStart = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		this.lastMousePos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}
+	handleMouseMove(e) {
+		if (this.noInteraction) return;
+		const rect$1 = this.canvas.getBoundingClientRect();
+		const x = e.clientX - rect$1.left;
+		const y = e.clientY - rect$1.top;
+		this.lastMoveMousePos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		this.onMove?.(x, y);
+		if (!this.isDragging || !this.dragStart) return;
+		const dx = e.clientX - this.dragStart.x;
+		const dy = e.clientY - this.dragStart.y;
+		if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
+			this.moved = true;
+			const deltaX = e.clientX - this.lastMousePos.x;
+			const deltaY = e.clientY - this.lastMousePos.y;
+			this.transform.x += deltaX;
+			this.transform.y += deltaY;
+			this.targetTransform.x += deltaX;
+			this.targetTransform.y += deltaY;
+			this.lastMousePos = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			this.onUpdate?.(this.transform);
+		}
+	}
+	handleMouseUpCanvas(e) {
+		if (this.noInteraction) return;
+		if (!this.moved && this.onClick) {
+			const rect$1 = this.canvas.getBoundingClientRect();
+			const x = e.clientX - rect$1.left;
+			const y = e.clientY - rect$1.top;
+			this.onClick(x, y);
+		}
+	}
+	handleMouseUp(e) {
+		this.isDragging = false;
+		this.dragStart = null;
+		this.moved = false;
+	}
+	handleTouchStart(e) {
+		if (this.noInteraction) return;
+		if (this.isAnimating) {
+			this.isAnimating = false;
+			this.focus = null;
+			if (this.animationFrame) {
+				cancelAnimationFrame(this.animationFrame);
+				this.animationFrame = null;
+			}
+		}
+		if (e.touches.length === 1) {
+			const rect$1 = this.canvas.getBoundingClientRect();
+			const touch = e.touches[0];
+			this.isDragging = true;
+			this.moved = false;
+			this.touchStart = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastTouchPos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastMoveMousePos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+		} else if (e.touches.length === 2) {
+			this.isDragging = false;
+			const [t1, t2] = [e.touches[0], e.touches[1]];
+			this.pinchStartDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+			this.pinchStartScale = this.targetTransform.scale;
+			const rect$1 = this.canvas.getBoundingClientRect();
+			this.zoomFocus = {
+				x: (t1.clientX + t2.clientX) / 2 - rect$1.left,
+				y: (t1.clientY + t2.clientY) / 2 - rect$1.top
+			};
+		}
+	}
+	handleTouchMove(e) {
+		if (this.noInteraction) return;
+		e.preventDefault();
+		const rect$1 = this.canvas.getBoundingClientRect();
+		if (e.touches.length === 1 && this.touchStart) {
+			const touch = e.touches[0];
+			const dx = touch.clientX - this.touchStart.x;
+			const dy = touch.clientY - this.touchStart.y;
+			if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
+				this.moved = true;
+				const deltaX = touch.clientX - this.lastTouchPos.x;
+				const deltaY = touch.clientY - this.lastTouchPos.y;
+				this.transform.x += deltaX;
+				this.transform.y += deltaY;
+				this.targetTransform.x += deltaX;
+				this.targetTransform.y += deltaY;
+				this.lastTouchPos = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				this.lastMoveMousePos = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				this.onUpdate?.(this.transform);
+				this.onMove?.(touch.clientX - rect$1.left, touch.clientY - rect$1.top);
+			}
+		} else if (e.touches.length === 2 && this.pinchStartDist != null) {
+			const [t1, t2] = [e.touches[0], e.touches[1]];
+			const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+			let scale = dist / this.pinchStartDist * this.pinchStartScale;
+			scale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, scale));
+			const { x, y, scale: prevScale } = this.transform;
+			const dx = this.zoomFocus.x - x;
+			const dy = this.zoomFocus.y - y;
+			const scaleChange = scale / prevScale;
+			const newX = this.zoomFocus.x - dx * scaleChange;
+			const newY = this.zoomFocus.y - dy * scaleChange;
+			this.targetTransform = {
+				x: newX,
+				y: newY,
+				scale
+			};
+			if (!this.isAnimating) {
+				this.isAnimating = true;
+				this.animationFrame = requestAnimationFrame(this.animateTransform);
+			}
+		}
+	}
+	handleTouchEnd(e) {
+		if (this.noInteraction) return;
+		if (e.touches.length === 0) {
+			if (this.isDragging && !this.moved && this.onClick && this.touchStart) {
+				const rect$1 = this.canvas.getBoundingClientRect();
+				this.onClick(this.touchStart.x - rect$1.left, this.touchStart.y - rect$1.top);
+			}
+			this.isDragging = false;
+			this.touchStart = null;
+			this.moved = false;
+			this.pinchStartDist = null;
+		} else if (e.touches.length === 1) {
+			const touch = e.touches[0];
+			this.isDragging = true;
+			this.touchStart = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastTouchPos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.pinchStartDist = null;
+		}
+	}
+	resetZoom() {
+		this.transform = {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+		this.targetTransform = {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+		this.onUpdate?.(this.transform);
+	}
+	transformTo(update) {
+		this.targetTransform = {
+			...this.transform,
+			...update
+		};
+		if (!this.isAnimating) {
+			this.isAnimating = true;
+			this.animationFrame = requestAnimationFrame(this.animateTransform);
+		}
+	}
+	trackCursor() {
+		const rect$1 = this.canvas.getBoundingClientRect();
+		const x = this.lastMoveMousePos.x - rect$1.left;
+		const y = this.lastMoveMousePos.y - rect$1.top;
+		this.onMove?.(x, y);
+	}
+	destroy() {
+		this.canvas.removeEventListener("wheel", this.handleWheel);
+		this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+		this.canvas.removeEventListener("touchstart", this.handleTouchStart);
+		this.canvas.removeEventListener("touchmove", this.handleTouchMove);
+		this.canvas.removeEventListener("touchend", this.handleTouchEnd);
+		this.canvas.removeEventListener("touchcancel", this.handleTouchEnd);
+		this.canvas.removeEventListener("mouseup", this.handleMouseUpCanvas);
+		window.removeEventListener("mousemove", this.handleMouseMove);
+		window.removeEventListener("mouseup", this.handleMouseUp);
+		this.isAnimating = false;
+		this.focus = null;
+		if (this.animationFrame) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+	}
+	setNoInteraction = (noInteraction) => {
+		this.noInteraction = noInteraction;
+	};
+	focusOn = (focus) => {
+		this.focus = focus;
+	};
+};
+
+//#endregion
+//#region src/util/canvas.ts
+/**
+* draws a circle on the canvas
+* @param ctx - The canvas rendering context
+* @param x - The x-coordinate of the circle's center
+* @param y - The y-coordinate of the circle's center
+* @param radius - The radius of the circle (default is 5)
+* @param options - Optional parameters for styling the circle
+* @param options.fill - Whether to fill the circle (default is true)
+* @param options.fillStyle - The fill color of the circle
+* @param options.stroke - Whether to stroke the circle (default is false)
+* @param options.strokeStyle - The stroke color of the circle
+* @param options.lineWidth - The width of the stroke (default is 0.2)
+* @returns void
+*/
+function circle(ctx, x, y, radius = 5, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, 2 * Math.PI);
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+/**
+* draws a rectangle on the canvas
+* @param ctx - The canvas rendering context
+* @param x - The x-coordinate of the rectangle's top-left corner
+* @param y - The y-coordinate of the rectangle's top-left corner
+* @param width - The width of the rectangle
+* @param height - The height of the rectangle
+* @param options - Optional parameters for styling the rectangle
+* @param options.fill - Whether to fill the rectangle (default is true)
+* @param options.fillStyle - The fill color of the rectangle
+* @param options.stroke - Whether to stroke the rectangle (default is false)
+* @param options.strokeStyle - The stroke color of the rectangle
+* @param options.lineWidth - The width of the stroke (default is 0.2)
+* @param options.borderRadius - The radius of the corners (default is 0)
+* @returns void
+*/
+function rect(ctx, x, y, width, height, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, borderRadius = 0 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	const r = Math.min(borderRadius, width / 2, height / 2);
+	ctx.beginPath();
+	if (r > 0) {
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + width - r, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+		ctx.lineTo(x + width, y + height - r);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+		ctx.lineTo(x + r, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+	} else ctx.rect(x, y, width, height);
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+/**
+* draws an image on the canvas with optional border radius and opacity
+* @param ctx - The canvas rendering context
+* @param image - The HTMLImageElement to draw
+* @param x - The x-coordinate of the image's top-left corner
+* @param y - The y-coordinate of the image's top-left corner
+* @param width - The width of the image
+* @param height - The height of the image
+* @param borderRadius - The radius of the corners (default is 0)
+* @param opacity - The opacity of the image (default is 1.0)
+* @param bgColor - Optional background color to fill the clipped area
+* @returns void
+*/
+function img(ctx, image, x, y, width, height, borderRadius = 0, opacity = 1, bgColor) {
+	ctx.save();
+	ctx.beginPath();
+	if (borderRadius > 0) {
+		const r = Math.min(borderRadius, width / 2, height / 2);
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + width - r, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+		ctx.lineTo(x + width, y + height - r);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+		ctx.lineTo(x + r, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+	} else ctx.rect(x, y, width, height);
+	ctx.closePath();
+	if (bgColor) {
+		ctx.save();
+		ctx.fillStyle = bgColor;
+		ctx.globalAlpha = 1;
+		ctx.fill();
+		ctx.restore();
+	}
+	ctx.clip();
+	ctx.globalAlpha = opacity;
+	ctx.drawImage(image, x, y, width, height);
+	ctx.restore();
+}
+function hexagon(ctx, x, y, radius, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, rotation = 0, borderRadius = 0 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	const sides = 6;
+	const angleStep = Math.PI * 2 / sides;
+	ctx.beginPath();
+	const points = [];
+	for (let i = 0; i < sides; i++) {
+		const angle = rotation + i * angleStep;
+		points.push({
+			x: x + radius * Math.cos(angle),
+			y: y + radius * Math.sin(angle)
+		});
+	}
+	if (borderRadius > 0) {
+		const maxBorderRadius = Math.min(borderRadius, radius / 3);
+		for (let i = 0; i < sides; i++) {
+			const current = points[i];
+			const next = points[(i + 1) % sides];
+			const prev = points[(i - 1 + sides) % sides];
+			const toPrev = {
+				x: prev.x - current.x,
+				y: prev.y - current.y
+			};
+			const toNext = {
+				x: next.x - current.x,
+				y: next.y - current.y
+			};
+			const lenPrev = Math.sqrt(toPrev.x * toPrev.x + toPrev.y * toPrev.y);
+			const lenNext = Math.sqrt(toNext.x * toNext.x + toNext.y * toNext.y);
+			const normPrev = {
+				x: toPrev.x / lenPrev,
+				y: toPrev.y / lenPrev
+			};
+			const normNext = {
+				x: toNext.x / lenNext,
+				y: toNext.y / lenNext
+			};
+			const cpPrev = {
+				x: current.x + normPrev.x * maxBorderRadius,
+				y: current.y + normPrev.y * maxBorderRadius
+			};
+			const cpNext = {
+				x: current.x + normNext.x * maxBorderRadius,
+				y: current.y + normNext.y * maxBorderRadius
+			};
+			if (i === 0) ctx.moveTo(cpPrev.x, cpPrev.y);
+			else ctx.lineTo(cpPrev.x, cpPrev.y);
+			ctx.quadraticCurveTo(current.x, current.y, cpNext.x, cpNext.y);
+		}
+	} else {
+		ctx.moveTo(points[0].x, points[0].y);
+		for (let i = 1; i < sides; i++) ctx.lineTo(points[i].x, points[i].y);
+	}
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+
+//#endregion
+//#region src/util/color.ts
+/**
+* Some utility functions to handle colors
+*/
+function color(rgb) {
+	const colorHandler = function(arg) {
+		if (typeof arg === "number") return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${arg})`;
+		if (typeof arg === "function") {
+			const transformedRGB = arg(rgb);
+			return color(transformedRGB);
+		}
+		return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+	};
+	colorHandler.rgb = rgb;
+	return colorHandler;
+}
+/**
+* Dims a color to white or black
+* @param color An array of 3 numbers representing RGB values (0-255)
+* @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
+* @returns A new array with the dimmed RGB values
+*/
+function dim(factor = .6, white = true) {
+	const base = white ? 255 : 0;
+	return function(rgb) {
+		return [
+			Math.round(rgb[0] + (base - rgb[0]) * (1 - factor)),
+			Math.round(rgb[1] + (base - rgb[1]) * (1 - factor)),
+			Math.round(rgb[2] + (base - rgb[2]) * (1 - factor))
+		];
+	};
+}
+
+//#endregion
+//#region src/util/data.ts
+const images = [];
+function generateTree(maxNodes, maxChildren) {
+	const nodes = [];
+	const links = [];
+	let index = 0;
+	function createNode(label) {
+		const isRoot = label === VOID_ROOT_ID;
+		const idx = isRoot ? VOID_ROOT_ID : index++;
+		return {
+			id: idx.toString(),
+			label,
+			imgSrc: isRoot ? void 0 : images[index % images.length]
+		};
+	}
+	const root = createNode(VOID_ROOT_ID);
+	nodes.push(root);
+	const queue = [root];
+	while (queue.length > 0 && nodes.length < maxNodes) {
+		const parent = queue.shift();
+		const rand = Math.random();
+		const biased = Math.floor(Math.pow(rand, 2) * (maxChildren + 1));
+		const childrenCount = Math.min(biased, maxChildren);
+		for (let i = 0; i < childrenCount; i++) {
+			if (nodes.length >= maxNodes) break;
+			const child = createNode(`Node ${nodes.length}`);
+			nodes.push(child);
+			links.push({
+				source: parent.id,
+				target: child.id
+			});
+			queue.push(child);
+		}
+	}
+	return {
+		nodes,
+		links
+	};
+}
+function getPrunedData(startId, nodes, links) {
+	const nodesById = Object.fromEntries(nodes.map((node) => [node.id, node]));
+	const visibleNodes = [];
+	const visibleLinks = [];
+	const visited = new Set();
+	(function traverseTree(node = nodesById[startId]) {
+		if (!node || visited.has(node.id)) return;
+		visited.add(node.id);
+		visibleNodes.push(node);
+		if (node?.state?.collapsed) return;
+		const childLinks = links.filter((l) => (isSimNode(l.source) ? l.source.id : l.source) === node.id);
+		visibleLinks.push(...childLinks);
+		childLinks.map((link) => link.target).forEach((n) => traverseTree(isSimNode(n) ? n : nodesById[n.toString()]));
+	})();
+	return {
+		nodes: visibleNodes,
+		links: visibleLinks
+	};
+}
+/**
+* Automatically identifies root nodes and builds a nested structure
+* @param nodes Array of raw nodes
+* @param links Array of links between nodes
+* @returns Array of nested nodes starting from identified roots
+*/
+function buildTreeFromGraphData(nodes, links) {
+	const nodeMap = new Map();
+	nodes.forEach((node) => nodeMap.set(node.id, node));
+	const childrenMap = new Map();
+	const parentMap = new Map();
+	nodes.forEach((node) => {
+		childrenMap.set(node.id, []);
+		parentMap.set(node.id, []);
+	});
+	links.forEach((link) => {
+		if (nodeMap.has(link.source) && nodeMap.has(link.target)) {
+			const children = childrenMap.get(link.source) || [];
+			if (!children.includes(link.target)) {
+				children.push(link.target);
+				childrenMap.set(link.source, children);
+			}
+			const parents = parentMap.get(link.target) || [];
+			if (!parents.includes(link.source)) {
+				parents.push(link.source);
+				parentMap.set(link.target, parents);
+			}
+		}
+	});
+	const rootHashes = [];
+	nodeMap.forEach((_, hash) => {
+		const parents = parentMap.get(hash) || [];
+		if (parents.length === 0) rootHashes.push(hash);
+	});
+	const buildNode = (hash, visited = new Set()) => {
+		if (visited.has(hash)) return null;
+		visited.add(hash);
+		const node = nodeMap.get(hash);
+		if (!node) return null;
+		const childHashes = childrenMap.get(hash) || [];
+		const nestedChildren = [];
+		childHashes.forEach((childHash) => {
+			const childNode = buildNode(childHash, new Set([...visited]));
+			if (childNode) nestedChildren.push(childNode);
+		});
+		return {
+			...node,
+			children: nestedChildren
+		};
+	};
+	const result = [];
+	rootHashes.forEach((rootHash) => {
+		const nestedRoot = buildNode(rootHash);
+		if (nestedRoot) result.push(nestedRoot);
+	});
+	const processedNodes = new Set();
+	const markProcessed = (node) => {
+		processedNodes.add(node.id);
+		node.children.forEach(markProcessed);
+	};
+	result.forEach(markProcessed);
+	nodeMap.forEach((_, hash) => {
+		if (!processedNodes.has(hash)) {
+			const orphanedRoot = buildNode(hash);
+			if (orphanedRoot) result.push(orphanedRoot);
+		}
+	});
+	return result;
+}
+/**
+* Recursively retrieves all parents of a node from a graph data structure
+* @param {string} nodeHash - The hash of the node to find parents for
+* @param {RawNode[]} nodes - Array of nodes in the graph
+* @param {RawLink[]} links - Array of links connecting the nodes
+* @returns {RawNode[]} - Array of parent nodes
+*/
+function searchParents(nodeHash, nodes, links) {
+	const visited = new Set();
+	function findParents(hash) {
+		if (visited.has(hash)) return [];
+		visited.add(hash);
+		const immediateParents = links.filter((link) => link.target === hash).map((link) => link.source);
+		const parentNodes = nodes.filter((node) => immediateParents.includes(node.id));
+		const ancestorNodes = immediateParents.flatMap((parentHash) => findParents(parentHash));
+		return [...parentNodes, ...ancestorNodes];
+	}
+	return findParents(nodeHash);
+}
+
+//#endregion
+//#region src/sim/OpenGraphSimulation.ts
+var OpenGraphSimulation = class {
+	width;
+	height;
+	config;
+	rootImageSources;
+	canvas;
+	transformCanvas;
+	theme;
+	data = {
+		nodes: [],
+		links: []
+	};
+	prunedData = {
+		nodes: [],
+		links: []
+	};
+	subGraph = {
+		nodes: [],
+		links: []
+	};
+	rootId = "";
+	simulation = null;
+	clusterSizeRange = [0, 1];
+	imageCache = new Map();
+	rootImages = [];
+	hideThumbnails = false;
+	noInteraction = false;
+	selectedNode = null;
+	onSelectedNodeChange;
+	hoveredNode = null;
+	onHoveredNodeChange;
+	highlights = [];
+	constructor(props) {
+		this.theme = props.theme || "light";
+		this.width = props.width;
+		this.height = props.height;
+		this.config = props.config || DEFAULT_GRAPH_CONFIG;
+		this.rootImageSources = props.rootImageSources || [];
+		this.canvas = props.canvas;
+		this.onHoveredNodeChange = props.onHoveredNodeChange;
+		this.onSelectedNodeChange = props.onSelectedNodeChange;
+		this.transformCanvas = new TransformCanvas(this.canvas, {
+			onUpdate: this.onDraw,
+			onClick: this.handleClick,
+			onMove: this.handleMove
+		});
+		this.rootImageSources.forEach((src, idx) => {
+			if (src && !this.imageCache.get(src)) loadImage(src).then((img$1) => {
+				this.imageCache.set(src, img$1);
+				this.rootImages[idx] = img$1;
+			});
+		});
+	}
+	getNodeAtPosition = (cx, cy) => {
+		const transform = this.transformCanvas.transform;
+		const { x: tx, y: ty, scale } = transform;
+		const x = (cx - tx) / scale;
+		const y = (cy - ty) / scale;
+		for (let node of this.data.nodes) {
+			const r = this.getNodeSize(node.id) / 2;
+			if (node.x == null || node.y == null) continue;
+			const dx = node.x - x;
+			const dy = node.y - y;
+			if (dx * dx + dy * dy < r * r) return node;
+		}
+		return null;
+	};
+	getNodeScreenPosition = (node) => {
+		const _x = node.x || 0;
+		const _y = node.y || 0;
+		const transform = this.transformCanvas.transform;
+		const x = this.width / 2 - _x * transform.scale;
+		const y = this.height / 2 - _y * transform.scale;
+		return {
+			x,
+			y
+		};
+	};
+	handleClick = (x, y) => {
+		const node = this.getNodeAtPosition(x, y);
+		this.handleClickNode(node);
+	};
+	handleClickNode = (node) => {
+		if (node) {
+			if (node.id === this.rootId) {
+				this.selectedNode = null;
+				this.onSelectedNodeChange?.(null);
+				this.subGraph = {
+					nodes: [],
+					links: []
+				};
+				return;
+			}
+			if (node.state) {
+				const children = getChildren(node.id, this.data.links);
+				if (children.length > 0) {
+					if (this.selectedNode?.id !== node.id) node.state.collapsed = false;
+					else node.state.collapsed = !node.state.collapsed;
+					if (!node.state.collapsed) children.forEach((childId) => {
+						const childNode = this.data.nodes.find((n) => n.id === childId);
+						if (childNode && isSimNode(childNode)) {
+							if (!childNode.x || childNode.x === 0) childNode.x = (node.x || this.width / 2) + Math.random() * 50 - 5;
+							if (!childNode.y || childNode.y === 0) childNode.y = (node.y || this.height / 2) + Math.random() * 50 - 5;
+						}
+					});
+				}
+			}
+			if (!node.state?.collapsed) {
+				const parents = getParents(node.id, this.data.links);
+				parents.forEach((parentId) => {
+					const parentNode = this.data.nodes.find((n) => n.id === parentId);
+					if (parentNode && isSimNode(parentNode) && parentNode.state) parentNode.state.collapsed = false;
+				});
+			}
+			this.restart();
+			this.subGraph = getNodeSubgraph(node.id, this.data.nodes, this.data.links, this.rootId);
+			const nodePos = this.getNodeScreenPosition(node);
+			this.transformCanvas.transformTo({
+				x: nodePos.x,
+				y: nodePos.y
+			});
+			this.transformCanvas.focusOn(() => {
+				const nodePos$1 = this.getNodeScreenPosition(node);
+				return {
+					x: nodePos$1.x,
+					y: nodePos$1.y,
+					scale: this.transformCanvas.transform.scale
+				};
+			});
+		}
+		if (this.selectedNode?.id !== node?.id) {
+			this.selectedNode = node;
+			this.onSelectedNodeChange?.(node);
+		}
+	};
+	handleMove = (x, y) => {
+		const node = this.getNodeAtPosition(x, y);
+		if (this.hoveredNode === node) return;
+		this.hoveredNode = node;
+		this.onHoveredNodeChange?.(node);
+		this.canvas.style.cursor = node ? "pointer" : "default";
+		this.onDraw();
+	};
+	initialize = (data, rootId) => {
+		this.rootId = rootId;
+		const _links = data.links.map((l) => ({ ...l }));
+		const _nodes = data.nodes.map((n) => {
+			const existingData = this.data.nodes.find((x) => x.id === n.id);
+			return {
+				...n,
+				state: { collapsed: hasOnlyLeafs(n.id, _links) && getChildren(n.id, _links).length > 1 },
+				clusterSize: getClusterSize(n.id, _links),
+				x: existingData?.x || this.width / 2 + Math.random() * 200 - 5,
+				y: existingData?.y || this.height / 2 + Math.random() * 200 - 5
+			};
+		});
+		if (!data.nodes.find((n) => n.id === rootId)) {
+			_nodes.push({
+				id: this.rootId,
+				state: {
+					collapsed: false,
+					image: void 0
+				},
+				clusterSize: 1,
+				x: this.width / 2,
+				y: this.height / 2
+			});
+			const targetIds = new Set(_links.map((link) => link.target));
+			const rootNodes = _nodes.filter((node) => !targetIds.has(node.id));
+			for (const node of rootNodes) _links.push({
+				source: rootId,
+				target: node.id
+			});
+		}
+		this.data = {
+			nodes: _nodes,
+			links: _links
+		};
+		this.loadNodeImages();
+		this.restart();
+	};
+	restart = () => {
+		this.setSelectedNode(null);
+		this.prunedData = getPrunedData(this.rootId, this.data.nodes, this.data.links);
+		this.clusterSizeRange = this.prunedData.nodes.filter((n) => n.state?.collapsed).reduce((acc, node) => [Math.min(acc[0], node.clusterSize || 1), Math.max(acc[1], node.clusterSize || 1)], [Infinity, -Infinity]);
+		this.simulation = forceSimulation(this.prunedData.nodes).force("link", forceLink(this.prunedData.links).id((d) => d.id).distance((l) => {
+			if (isSimNode(l.target) && !l.target?.state?.collapsed) return this.config.nodeSize;
+			return this.config.nodeSize * 3;
+		}).strength((l) => {
+			return .6;
+		})).force("charge", forceManyBody().strength(() => {
+			return -130;
+		})).force("center", forceCenter(this.width / 2, this.height / 2).strength(.01));
+		this.simulation.on("tick", this.onDraw);
+		this.simulation.on("end", this.onEnd);
+	};
+	get visiblityScale() {
+		return scaleLog().domain(this.clusterSizeRange).range([3, 1.5]).clamp(true);
+	}
+	get color() {
+		return color(this.theme === "light" ? this.config.theme.dark : this.config.theme.light);
+	}
+	get colorContrast() {
+		return color(this.theme === "light" ? this.config.theme.light : this.config.theme.dark);
+	}
+	getNodeSize = (nodeId) => {
+		const { nodeSize } = this.config;
+		if (nodeId === this.rootId) return nodeSize * 2;
+		const node = this.data.nodes.find((n) => n.id === nodeId);
+		const isCollapsed = !!node?.state?.collapsed;
+		if (isCollapsed) {
+			const scale = scaleLinear().domain(this.clusterSizeRange).range([nodeSize, nodeSize * 3]);
+			return scale(node.clusterSize || 1);
+		}
+		const isSelected = this.selectedNode?.id === nodeId;
+		return isSelected ? nodeSize * 2 : nodeSize;
+	};
+	onDraw = () => {
+		const context = this.canvas?.getContext("2d");
+		const transform = this.transformCanvas.transform;
+		if (!context) return;
+		const dpi = devicePixelRatio || 1;
+		context.save();
+		context.scale(dpi, dpi);
+		context.clearRect(0, 0, this.width, this.height);
+		context.translate(transform.x, transform.y);
+		context.scale(transform.scale, transform.scale);
+		context.save();
+		const isLight = this.theme === "light";
+		this.prunedData.links.forEach((l) => {
+			const _dim = !!this.selectedNode && !this.subGraph.links.find((sl) => getNodeId(sl.source) === getNodeId(l.source) && getNodeId(sl.target) === getNodeId(l.target));
+			const stroke = _dim ? this.color(dim(.09, isLight))() : this.color(dim(.18, isLight))();
+			context.globalAlpha = .5;
+			context.strokeStyle = stroke;
+			context.lineWidth = _dim ? .3 : .8;
+			context.beginPath();
+			const sx = isSimNode(l.source) && l.source.x || 0;
+			const sy = isSimNode(l.source) && l.source.y || 0;
+			context.moveTo(sx, sy);
+			const tx = isSimNode(l.target) && l.target.x || 0;
+			const ty = isSimNode(l.target) && l.target.y || 0;
+			context.lineTo(tx, ty);
+			context.stroke();
+			context.closePath();
+		});
+		context.globalAlpha = 1;
+		this.prunedData.nodes.forEach((node) => {
+			const x = node.x || 0;
+			const y = node.y || 0;
+			const isSelected = this.selectedNode?.id === node.id;
+			const isHovered = this.hoveredNode?.id === node.id;
+			const isCollapsed = !!node.state?.collapsed;
+			const _dim = !!this.selectedNode && !this.subGraph?.nodes.some((n) => n.id === node.id);
+			const fill = _dim ? this.color(dim(.075, isLight))() : isCollapsed ? this.color(dim(.18, isLight))() : isHovered ? this.color(dim(.4, isLight))() : this.color();
+			const stroke = this.colorContrast();
+			const blue = [
+				94,
+				112,
+				235
+			];
+			const red = [
+				238,
+				125,
+				121
+			];
+			const highlightedStroke = _dim ? color(red)(dim(.4, isLight))() : color(red)();
+			const size = this.getNodeSize(node.id);
+			const highlighted = this.highlights.includes(node.id);
+			if (node.id === this.rootId) {
+				circle(context, x, y, size / 2, {
+					stroke: false,
+					strokeStyle: stroke,
+					lineWidth: isSelected ? 1 : .2,
+					fill: true,
+					fillStyle: this.color(dim(.18, isLight))()
+				});
+				if (this.rootImages) {
+					const _idx = Math.min(isLight ? 0 : 1, this.rootImages.length - 1);
+					const _img = this.rootImages[_idx];
+					const _imgSize = size * .55;
+					if (_img) img(context, _img, x - _imgSize / 2, y - _imgSize / 2, _imgSize, _imgSize, 0, _dim ? .1 : 1);
+				}
+			} else if (isCollapsed) {
+				if (highlighted) {
+					const _size = size + 4;
+					circle(context, x, y, _size / 2, {
+						stroke: true,
+						strokeStyle: highlightedStroke,
+						lineWidth: 1,
+						fill: false,
+						fillStyle: fill
+					});
+				}
+				circle(context, x, y, size / 2, {
+					stroke: true,
+					strokeStyle: stroke,
+					lineWidth: isSelected ? 1 : .2,
+					fill: true,
+					fillStyle: fill
+				});
+				const showLabel = transform.scale >= this.visiblityScale(node.clusterSize || 1) ? 1 : 0;
+				if (showLabel) {
+					context.font = `${14 / transform.scale}px Sans-Serif`;
+					context.textAlign = "center";
+					context.textBaseline = "middle";
+					context.fillStyle = this.color(dim(_dim ? .2 : .5, isLight))();
+					context.fillText((node.clusterSize || 1).toString(), x, y);
+				}
+			} else {
+				if (highlighted) {
+					const _size = size + 4;
+					rect(context, x - _size / 2, y - _size / 2, _size, _size, {
+						stroke: true,
+						strokeStyle: highlightedStroke,
+						lineWidth: 1,
+						fill: false,
+						fillStyle: fill,
+						borderRadius: 1
+					});
+				}
+				rect(context, x - size / 2, y - size / 2, size, size, {
+					stroke: true,
+					strokeStyle: stroke,
+					lineWidth: isSelected ? .3 : .2,
+					fill: true,
+					fillStyle: fill,
+					borderRadius: 1
+				});
+				if (node.state?.image && !this.hideThumbnails) {
+					const _size = size - 1;
+					img(context, node.state?.image, x - _size / 2, y - _size / 2, _size, _size, 1, _dim ? .1 : 1);
+				}
+			}
+		});
+		context.restore();
+		context.restore();
+		this.transformCanvas.trackCursor();
+	};
+	onEnd = () => {};
+	loadNodeImages = () => {
+		this.data.nodes.forEach((node) => {
+			if (node.imgSrc && !this.imageCache.get(node.imgSrc)) loadImage(node.imgSrc).then((img$1) => {
+				this.imageCache.set(node.imgSrc, img$1);
+				node.state = node.state || {};
+				node.state.image = img$1;
+			});
+		});
+	};
+	destroy = () => {
+		this.simulation?.stop();
+		this.simulation?.on("tick", null);
+		this.simulation?.on("end", null);
+		this.transformCanvas.destroy();
+	};
+	resize = (width, height) => {
+		this.width = width;
+		this.height = height;
+		this.onDraw();
+	};
+	setTheme = (theme) => {
+		this.theme = theme;
+		this.onDraw();
+	};
+	setHideThumbnails = (hide) => {
+		this.hideThumbnails = hide;
+		this.onDraw();
+	};
+	setSelectedNode = (node) => {
+		this.selectedNode = node;
+		this.prunedData.nodes.sort((a, b) => {
+			if (a.id === this.selectedNode?.id) return 1;
+			if (b.id === this.selectedNode?.id) return -1;
+			return 0;
+		});
+		this.onDraw();
+	};
+	setHighlights = (highlights) => {
+		this.highlights = highlights;
+		this.onDraw();
+	};
+	setNoInteraction = (noInteraction) => {
+		this.noInteraction = noInteraction;
+		this.transformCanvas.setNoInteraction(this.noInteraction);
+		this.onDraw();
+	};
+	getNodeById = (nodeId) => {
+		return this.data.nodes.find((n) => n.id === nodeId) || null;
+	};
+};
+
+//#endregion
+//#region src/components/OpenFormGraph.tsx
+function OpenFormGraph(props) {
+	const { width, height, highlights = [], className, noInteraction = false } = props;
+	const { simulation, data, rootId, rootImageSources, theme, hideThumbnails, setHoveredNode, setSelectedNode } = useOpenFormGraph();
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		if (!canvasRef.current) return;
+		simulation.current = new OpenGraphSimulation({
+			width,
+			height,
+			canvas: canvasRef.current,
+			rootImageSources,
+			theme,
+			onHoveredNodeChange: (n) => {
+				setHoveredNode(n);
+			},
+			onSelectedNodeChange: (n) => {
+				setSelectedNode(n);
+			}
+		});
+		return () => {
+			simulation.current?.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.resize(width, height);
+	}, [width, height]);
+	useEffect(() => {
+		if (!simulation.current || !theme) return;
+		simulation.current.setTheme(theme);
+	}, [theme]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setHideThumbnails(hideThumbnails);
+	}, [hideThumbnails]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setHighlights(highlights);
+	}, [highlights]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setNoInteraction(noInteraction);
+	}, [noInteraction]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.initialize(data, rootId);
+	}, [data]);
+	const dpi = devicePixelRatio || 1;
+	return /* @__PURE__ */ jsx("canvas", {
+		onMouseEnter: props.onMouseEnter,
+		onMouseLeave: props.onMouseLeave,
+		ref: canvasRef,
+		className,
+		width: `${width * dpi}px`,
+		height: `${height * dpi}px`,
+		style: {
+			width: `${width}px`,
+			height: `${height}px`
+		}
+	});
+}
+
+//#endregion
+export { OpenFormGraph, buildTreeFromGraphData, circle, color, dim, generateTree, getChildren, getClusterSize, getNodeId, getNodeSubgraph, getParents, getPrunedData, hasOnlyLeafs, hexagon, img, isSimLink, isSimNode, loadImage, rect, searchParents };
+//# sourceMappingURL=OpenFormGraph-wo_Y20C6.js.map