@fxhash/open-form-graph 0.0.1 → 0.0.3

package/dist/OpenFormGraph-i8VSTamk.js

@@ -0,0 +1,2170 @@
+import { DEFAULT_GRAPH_CONFIG, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph } from "./provider-PqOen2FE.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { forceCenter, forceCollide, forceManyBody, forceRadial, forceSimulation } from "d3-force";
+import { scaleLinear, scaleLog } from "d3-scale";
+import { EventEmitter, float2hex, xorshiftString } from "@fxhash/utils";
+
+//#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";
+}
+function isCustomHighlight(highlight) {
+	if (typeof highlight === "string") return false;
+	return true;
+}
+
+//#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 getAllParentsUntil(nodeId, links, stopAtId) {
+	const parent = getParents(nodeId, links)[0];
+	if (!parent || parent === stopAtId) return [];
+	return [parent, ...getAllParentsUntil(parent, links, stopAtId)];
+}
+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 getNodeDepth(id, links) {
+	function getDepth(id$1, depth) {
+		const parents = getParents(id$1, links);
+		if (parents.length === 0) return depth;
+		return getDepth(parents[0], depth + 1);
+	}
+	return getDepth(id, 0);
+}
+function getRootParent(id, links, stop) {
+	let currentId = id;
+	while (true) {
+		const parents = getParents(currentId, links);
+		if (stop && parents.includes(stop)) return currentId;
+		if (parents.length === 0) return currentId;
+		currentId = parents[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 loadHTMLImageElement(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;
+const ANIMATION_SPEED = .07;
+const DRAG_ANIMATION_SPEED = .5;
+const ANIMATION_THRESHOLD = {
+	x: .5,
+	y: .5,
+	scale: .001
+};
+const MOMENTUM_DAMPING = .91;
+const MIN_VELOCITY = .5;
+var TransformCanvas = class {
+	canvas;
+	transform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	targetTransform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	isAnimating = false;
+	animationFrame = null;
+	focus = null;
+	offset = {
+		x: 0,
+		y: 0
+	};
+	isDragging = false;
+	dragStart = null;
+	hasMoved = false;
+	lastPointerPos = {
+		x: 0,
+		y: 0
+	};
+	lastMovePos = {
+		x: 0,
+		y: 0
+	};
+	velocity = {
+		x: 0,
+		y: 0
+	};
+	lastDragTime = 0;
+	momentumFrame = null;
+	touchStart = null;
+	pinchStartDist = null;
+	pinchStartScale = 1;
+	noInteraction = false;
+	dpr = 1;
+	resizeObserver = null;
+	mediaQueryList = null;
+	onUpdate;
+	onClick;
+	onMove;
+	constructor(canvas, options) {
+		this.canvas = canvas;
+		this.onUpdate = options?.onUpdate;
+		this.onClick = options?.onClick;
+		this.onMove = options?.onMove;
+		this.offset = options?.offset || {
+			x: 0,
+			y: 0
+		};
+		this.dpr = window.devicePixelRatio || 1;
+		this.bindEventHandlers();
+		this.attachEventListeners();
+		this.setupDPRMonitoring();
+	}
+	bindEventHandlers() {
+		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.handleCanvasClick = this.handleCanvasClick.bind(this);
+		this.handleTouchStart = this.handleTouchStart.bind(this);
+		this.handleTouchMove = this.handleTouchMove.bind(this);
+		this.handleTouchEnd = this.handleTouchEnd.bind(this);
+	}
+	attachEventListeners() {
+		this.canvas.addEventListener("wheel", this.handleWheel, { passive: false });
+		this.canvas.addEventListener("mousedown", this.handleMouseDown);
+		this.canvas.addEventListener("click", this.handleCanvasClick);
+		window.addEventListener("mousemove", this.handleMouseMove);
+		window.addEventListener("mouseup", this.handleMouseUp);
+		this.canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+		this.canvas.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+		this.canvas.addEventListener("touchend", this.handleTouchEnd, { passive: false });
+		this.canvas.addEventListener("touchcancel", this.handleTouchEnd, { passive: false });
+	}
+	setupDPRMonitoring() {
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizeObserver = new ResizeObserver(() => {
+				this.updateDPR();
+			});
+			this.resizeObserver.observe(this.canvas);
+		}
+		const updateDPRFromMediaQuery = () => {
+			this.updateDPR();
+		};
+		const dpr = window.devicePixelRatio || 1;
+		this.mediaQueryList = window.matchMedia(`(resolution: ${dpr}dppx)`);
+		if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener("change", updateDPRFromMediaQuery);
+	}
+	updateDPR() {
+		const newDPR = window.devicePixelRatio || 1;
+		if (newDPR !== this.dpr) {
+			const oldDPR = this.dpr;
+			this.dpr = newDPR;
+			const scale = newDPR / oldDPR;
+			this.transform.x *= scale;
+			this.transform.y *= scale;
+			this.targetTransform.x *= scale;
+			this.targetTransform.y *= scale;
+			this.onUpdate?.(this.transform);
+			if (this.mediaQueryList) {
+				const updateDPRFromMediaQuery = () => {
+					this.updateDPR();
+				};
+				if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener("change", updateDPRFromMediaQuery);
+				this.mediaQueryList = window.matchMedia(`(resolution: ${newDPR}dppx)`);
+				if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener("change", updateDPRFromMediaQuery);
+			}
+		}
+	}
+	toCanvasCoords(clientX, clientY) {
+		const rect$1 = this.canvas.getBoundingClientRect();
+		return {
+			x: (clientX - rect$1.left) * this.dpr,
+			y: (clientY - rect$1.top) * this.dpr
+		};
+	}
+	toCSSCoords(clientX, clientY) {
+		const rect$1 = this.canvas.getBoundingClientRect();
+		return {
+			x: clientX - rect$1.left,
+			y: clientY - rect$1.top
+		};
+	}
+	startMomentum() {
+		if (Math.abs(this.velocity.x) > MIN_VELOCITY || Math.abs(this.velocity.y) > MIN_VELOCITY) {
+			if (!this.momentumFrame) this.momentumFrame = requestAnimationFrame(this.applyMomentum);
+		}
+	}
+	applyMomentum = () => {
+		this.targetTransform.x += this.velocity.x * this.dpr;
+		this.targetTransform.y += this.velocity.y * this.dpr;
+		this.velocity.x *= MOMENTUM_DAMPING;
+		this.velocity.y *= MOMENTUM_DAMPING;
+		if (Math.abs(this.velocity.x) > MIN_VELOCITY || Math.abs(this.velocity.y) > MIN_VELOCITY) {
+			this.startAnimation();
+			this.momentumFrame = requestAnimationFrame(this.applyMomentum);
+		} else {
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+			this.momentumFrame = null;
+		}
+	};
+	lerp(a, b, t) {
+		return a + (b - a) * t;
+	}
+	animateTransform = () => {
+		const target = this.focus?.() || this.targetTransform;
+		const prev = this.transform;
+		const animationSpeed = this.isDragging ? DRAG_ANIMATION_SPEED : ANIMATION_SPEED;
+		const next = {
+			x: this.lerp(prev.x, target.x, animationSpeed / this.dpr),
+			y: this.lerp(prev.y, target.y, animationSpeed / this.dpr),
+			scale: this.lerp(prev.scale, target.scale, animationSpeed / this.dpr)
+		};
+		const done = Math.abs(next.x - target.x) < ANIMATION_THRESHOLD.x && Math.abs(next.y - target.y) < ANIMATION_THRESHOLD.y && Math.abs(next.scale - target.scale) < ANIMATION_THRESHOLD.scale;
+		if (done) {
+			this.transform = { ...target };
+			this.stopAnimation();
+		} else {
+			this.transform = next;
+			this.onUpdate?.(this.transform);
+			this.animationFrame = requestAnimationFrame(this.animateTransform);
+		}
+	};
+	startAnimation() {
+		if (!this.isAnimating) {
+			this.isAnimating = true;
+			this.animationFrame = requestAnimationFrame(this.animateTransform);
+		}
+	}
+	stopAnimation() {
+		this.isAnimating = false;
+		this.focus = null;
+		if (this.animationFrame) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+	}
+	interruptAnimation() {
+		this.targetTransform = { ...this.transform };
+		if (this.isAnimating) this.stopAnimation();
+		if (this.momentumFrame) {
+			cancelAnimationFrame(this.momentumFrame);
+			this.momentumFrame = null;
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+		}
+	}
+	handleWheel(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (this.noInteraction) return;
+		if (this.momentumFrame) {
+			cancelAnimationFrame(this.momentumFrame);
+			this.momentumFrame = null;
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+		}
+		if (this.focus) {
+			this.interruptAnimation();
+			this.focus = null;
+		}
+		const canvasCoords = this.toCanvasCoords(e.clientX, e.clientY);
+		const scaleFactor = e.deltaY > 0 ? .95 : 1.05;
+		const newScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, this.targetTransform.scale * scaleFactor));
+		const { x: currentX, y: currentY, scale: currentScale } = this.transform;
+		const worldX = (canvasCoords.x - currentX - this.offset.x * currentScale) / currentScale;
+		const worldY = (canvasCoords.y - currentY - this.offset.y * currentScale) / currentScale;
+		const newX = canvasCoords.x - worldX * newScale - this.offset.x * newScale;
+		const newY = canvasCoords.y - worldY * newScale - this.offset.y * newScale;
+		this.targetTransform = {
+			x: newX,
+			y: newY,
+			scale: newScale
+		};
+		this.startAnimation();
+	}
+	handleMouseDown(e) {
+		if (this.noInteraction) return;
+		this.interruptAnimation();
+		this.isDragging = true;
+		this.hasMoved = false;
+		this.dragStart = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		this.lastPointerPos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}
+	handleMouseMove(e) {
+		if (this.noInteraction) return;
+		this.lastMovePos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const cssCoords = this.toCSSCoords(e.clientX, e.clientY);
+		this.onMove?.(cssCoords.x, cssCoords.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.hasMoved = true;
+			const deltaX = (e.clientX - this.lastPointerPos.x) * this.dpr;
+			const deltaY = (e.clientY - this.lastPointerPos.y) * this.dpr;
+			this.targetTransform.x += deltaX;
+			this.targetTransform.y += deltaY;
+			const now = Date.now();
+			const dt = now - this.lastDragTime;
+			if (dt > 0 && dt < 100) {
+				this.velocity.x = deltaX / dt * 16;
+				this.velocity.y = deltaY / dt * 16;
+			}
+			this.lastPointerPos = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			this.lastDragTime = now;
+			this.startAnimation();
+		}
+	}
+	handleMouseUp(e) {
+		if (this.isDragging && this.hasMoved) this.startMomentum();
+		this.isDragging = false;
+		this.dragStart = null;
+	}
+	handleCanvasClick(e) {
+		if (this.noInteraction || this.hasMoved) return;
+		const cssCoords = this.toCSSCoords(e.clientX, e.clientY);
+		this.onClick?.(cssCoords.x, cssCoords.y);
+	}
+	handleTouchStart(e) {
+		if (this.noInteraction) return;
+		e.preventDefault();
+		this.interruptAnimation();
+		if (e.touches.length === 1) {
+			const touch = e.touches[0];
+			this.isDragging = true;
+			this.hasMoved = false;
+			this.touchStart = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastPointerPos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastMovePos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+		} else if (e.touches.length === 2) {
+			this.isDragging = false;
+			const [t1, t2] = Array.from(e.touches);
+			this.pinchStartDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+			this.pinchStartScale = this.targetTransform.scale;
+		}
+	}
+	handleTouchMove(e) {
+		if (this.noInteraction) return;
+		e.preventDefault();
+		if (e.touches.length === 1 && this.isDragging && 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.hasMoved = true;
+				const deltaX = touch.clientX - this.lastPointerPos.x;
+				const deltaY = touch.clientY - this.lastPointerPos.y;
+				this.targetTransform.x += deltaX * this.dpr;
+				this.targetTransform.y += deltaY * this.dpr;
+				const now = Date.now();
+				const dt = now - this.lastDragTime;
+				if (dt > 0 && dt < 100) {
+					this.velocity.x = deltaX / dt * 16;
+					this.velocity.y = deltaY / dt * 16;
+				}
+				this.lastPointerPos = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				this.lastMovePos = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				this.lastDragTime = now;
+				this.startAnimation();
+				const cssCoords = this.toCSSCoords(touch.clientX, touch.clientY);
+				this.onMove?.(cssCoords.x, cssCoords.y);
+			}
+		} else if (e.touches.length === 2 && this.pinchStartDist != null) {
+			if (this.momentumFrame) {
+				cancelAnimationFrame(this.momentumFrame);
+				this.momentumFrame = null;
+				this.velocity = {
+					x: 0,
+					y: 0
+				};
+			}
+			const [t1, t2] = Array.from(e.touches);
+			const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+			let newScale = dist / this.pinchStartDist * this.pinchStartScale;
+			newScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newScale));
+			const centerX = (t1.clientX + t2.clientX) / 2;
+			const centerY = (t1.clientY + t2.clientY) / 2;
+			const canvasCenter = this.toCanvasCoords(centerX, centerY);
+			const { x: currentX, y: currentY, scale: currentScale } = this.transform;
+			const worldX = (canvasCenter.x - currentX - this.offset.x * currentScale) / currentScale;
+			const worldY = (canvasCenter.y - currentY - this.offset.y * currentScale) / currentScale;
+			const newX = canvasCenter.x - worldX * newScale - this.offset.x * newScale;
+			const newY = canvasCenter.y - worldY * newScale - this.offset.y * newScale;
+			this.targetTransform = {
+				x: newX,
+				y: newY,
+				scale: newScale
+			};
+			this.startAnimation();
+		}
+	}
+	handleTouchEnd(e) {
+		if (this.noInteraction) return;
+		if (e.touches.length === 0) {
+			if (this.isDragging && this.hasMoved) this.startMomentum();
+			else if (this.isDragging && !this.hasMoved && this.onClick && this.touchStart) {
+				const cssCoords = this.toCSSCoords(this.touchStart.x, this.touchStart.y);
+				this.onClick(cssCoords.x, cssCoords.y);
+			}
+			this.isDragging = false;
+			this.touchStart = null;
+			this.hasMoved = false;
+			this.pinchStartDist = null;
+		} else if (e.touches.length === 1) {
+			const touch = e.touches[0];
+			this.isDragging = true;
+			this.hasMoved = false;
+			this.touchStart = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastPointerPos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.pinchStartDist = null;
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+			this.lastDragTime = Date.now();
+		}
+	}
+	resetZoom() {
+		this.targetTransform = {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+		this.startAnimation();
+	}
+	transformTo(update) {
+		this.targetTransform = {
+			...this.targetTransform,
+			...update
+		};
+		this.startAnimation();
+	}
+	getTransformationFromWorld(worldX, worldY, newScale) {
+		const scale = newScale ?? this.transform.scale;
+		const x = this.canvas.width / 2 + this.offset.x * this.dpr - worldX * scale - (this.canvas.width / 2 + this.offset.x * this.dpr) * scale;
+		const y = this.canvas.height / 2 + this.offset.y * this.dpr - worldY * scale - (this.canvas.height / 2 + this.offset.y * this.dpr) * scale;
+		return {
+			x,
+			y,
+			scale
+		};
+	}
+	transformToWorld(worldX, worldY, newScale) {
+		const transform = this.getTransformationFromWorld(worldX, worldY, newScale);
+		this.transformTo(transform);
+	}
+	trackCursor() {
+		const cssCoords = this.toCSSCoords(this.lastMovePos.x, this.lastMovePos.y);
+		this.onMove?.(cssCoords.x, cssCoords.y);
+	}
+	setNoInteraction(noInteraction) {
+		this.noInteraction = noInteraction;
+		if (noInteraction) {
+			this.isDragging = false;
+			this.dragStart = null;
+		}
+	}
+	focusOn(focus) {
+		this.focus = focus;
+		if (focus) {
+			const _focus = focus;
+			this.focus = () => {
+				const worldFocus = _focus();
+				if (!worldFocus) return null;
+				const transform = this.getTransformationFromWorld(worldFocus.x, worldFocus.y, worldFocus.scale);
+				return transform;
+			};
+			this.startAnimation();
+		}
+	}
+	resetFocus() {
+		this.focus = null;
+	}
+	destroy() {
+		this.stopAnimation();
+		if (this.momentumFrame) {
+			cancelAnimationFrame(this.momentumFrame);
+			this.momentumFrame = null;
+		}
+		this.canvas.removeEventListener("wheel", this.handleWheel);
+		this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+		this.canvas.removeEventListener("click", this.handleCanvasClick);
+		this.canvas.removeEventListener("touchstart", this.handleTouchStart);
+		this.canvas.removeEventListener("touchmove", this.handleTouchMove);
+		this.canvas.removeEventListener("touchend", this.handleTouchEnd);
+		this.canvas.removeEventListener("touchcancel", this.handleTouchEnd);
+		window.removeEventListener("mousemove", this.handleMouseMove);
+		window.removeEventListener("mouseup", this.handleMouseUp);
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+		if (this.mediaQueryList) {
+			const updateDPRFromMediaQuery = () => {
+				this.updateDPR();
+			};
+			if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener("change", updateDPRFromMediaQuery);
+			this.mediaQueryList = null;
+		}
+	}
+	getTransform() {
+		return { ...this.transform };
+	}
+	getTargetTransform() {
+		return { ...this.targetTransform };
+	}
+	getFocus() {
+		return this.focus ? { ...this.focus } : null;
+	}
+	setOffset(offset) {
+		this.offset = offset;
+	}
+};
+
+//#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();
+	ctx.globalAlpha = 1;
+	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 && opacity < 1) {
+		ctx.save();
+		ctx.fillStyle = bgColor;
+		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$1 = 0;
+	function createNode(label) {
+		const isRoot = label === VOID_ROOT_ID;
+		const idx = isRoot ? VOID_ROOT_ID : index$1++;
+		return {
+			id: idx.toString(),
+			label,
+			imgSrc: isRoot ? void 0 : images[index$1 % 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, highlights = []) {
+	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);
+		if (node.status === "LIQUIDATED" && !highlights.find((h) => h.id === node.id)) return;
+		visibleNodes.push(node);
+		if (node?.state?.collapsed) return;
+		const childLinks = links.filter((l) => (isSimNode(l.source) ? l.source.id : l.source) === node.id);
+		for (const link of childLinks) {
+			const targetNode = isSimNode(link.target) ? link.target : nodesById[link.target.toString()];
+			if (targetNode?.status === "LIQUIDATED" && !highlights.find((h) => h.id === targetNode.id)) continue;
+			visibleLinks.push(link);
+			traverseTree(targetNode);
+		}
+	})();
+	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/_interfaces.ts
+var OpenGraphEventEmitter = class extends EventEmitter {};
+
+//#endregion
+//#region src/util/math.ts
+function getRadialPoint(r, cx, cy, angle = Math.random() * 2 * Math.PI) {
+	return {
+		x: cx + r * Math.cos(angle),
+		y: cy + r * Math.sin(angle)
+	};
+}
+function getAngle(cx, cy, x, y) {
+	return Math.atan2(y - cy, x - cx);
+}
+
+//#endregion
+//#region src/util/highlights.ts
+const red = [
+	238,
+	125,
+	121
+];
+const redred = [
+	255,
+	0,
+	0
+];
+var Highlight = class {
+	static owner = (id) => {
+		return {
+			id,
+			strokeColor: red
+		};
+	};
+	static primary = (id) => {
+		return {
+			id,
+			linkTo: id,
+			scale: 4,
+			strokeColor: redred,
+			linkColor: redred,
+			onTop: true,
+			isDetached: true
+		};
+	};
+	static evolved = (id) => {
+		return {
+			id,
+			linkTo: id,
+			scale: 2.1,
+			strokeColor: redred,
+			linkColor: redred,
+			onTop: true,
+			isDetached: true
+		};
+	};
+	static minted = (id) => {
+		return {
+			id,
+			linkTo: id,
+			scale: 1.5,
+			strokeColor: redred,
+			linkColor: redred,
+			isDetached: true,
+			onTop: true
+		};
+	};
+};
+
+//#endregion
+//#region src/sim/asymmetric-link.ts
+function constant(x) {
+	return function() {
+		return x;
+	};
+}
+function jiggle(random) {
+	return (random() - .5) * 1e-6;
+}
+function index(d) {
+	return d.index;
+}
+function find(nodeById, nodeId) {
+	const node = nodeById.get(nodeId);
+	if (!node) throw new Error("node not found: " + nodeId);
+	return node;
+}
+function asymmetricLinks(links) {
+	let id = index;
+	let strength = defaultStrength;
+	let strengths;
+	let distance = constant(30);
+	let distances;
+	let nodes;
+	let count;
+	let bias;
+	let random;
+	let iterations = 1;
+	if (links == null) links = [];
+	function defaultStrength(link) {
+		return 1 / Math.min(count[link.source.index], count[link.target.index]);
+	}
+	function force(alpha) {
+		for (let k = 0, n = links.length; k < iterations; ++k) for (let i = 0; i < n; ++i) {
+			const link = links[i];
+			const source = link.source;
+			const target = link.target;
+			let x = target.x + target.vx - source.x - source.vx || jiggle(random);
+			let y = target.y + target.vy - source.y - source.vy || jiggle(random);
+			let l = Math.sqrt(x * x + y * y);
+			l = (l - distances[i]) / l * alpha;
+			x *= l;
+			y *= l;
+			const b = bias[i];
+			const strengthValue = strengths[i];
+			let s0, s1;
+			if (Array.isArray(strengthValue)) [s0, s1] = strengthValue;
+			else s0 = s1 = strengthValue;
+			target.vx -= x * b * s0;
+			target.vy -= y * b * s0;
+			source.vx += x * (1 - b) * s1;
+			source.vy += y * (1 - b) * s1;
+		}
+	}
+	function initialize() {
+		if (!nodes) return;
+		const n = nodes.length;
+		const m = links.length;
+		const nodeById = new Map(nodes.map((d, i) => [id(d, i, nodes), d]));
+		count = new Array(n).fill(0);
+		for (let i = 0; i < m; ++i) {
+			const link = links[i];
+			link.index = i;
+			if (typeof link.source !== "object") link.source = find(nodeById, link.source);
+			if (typeof link.target !== "object") link.target = find(nodeById, link.target);
+			count[link.source.index]++;
+			count[link.target.index]++;
+		}
+		bias = new Array(m);
+		for (let i = 0; i < m; ++i) {
+			const link = links[i];
+			const sourceCount = count[link.source.index];
+			const targetCount = count[link.target.index];
+			bias[i] = sourceCount / (sourceCount + targetCount);
+		}
+		strengths = new Array(m);
+		initializeStrength();
+		distances = new Array(m);
+		initializeDistance();
+	}
+	function initializeStrength() {
+		if (!nodes) return;
+		for (let i = 0, n = links.length; i < n; ++i) strengths[i] = strength(links[i], i, links);
+	}
+	function initializeDistance() {
+		if (!nodes) return;
+		for (let i = 0, n = links.length; i < n; ++i) distances[i] = +distance(links[i], i, links);
+	}
+	force.initialize = function(_nodes, _random) {
+		nodes = _nodes;
+		random = _random;
+		initialize();
+	};
+	force.links = function(_) {
+		return arguments.length ? (links = _, initialize(), force) : links;
+	};
+	force.id = function(_) {
+		return arguments.length ? (id = _, force) : id;
+	};
+	force.iterations = function(_) {
+		return arguments.length ? (iterations = +_, force) : iterations;
+	};
+	force.strength = function(_) {
+		return arguments.length ? (strength = typeof _ === "function" ? _ : constant(+_), initializeStrength(), force) : strength;
+	};
+	force.distance = function(_) {
+		return arguments.length ? (distance = typeof _ === "function" ? _ : constant(+_), initializeDistance(), force) : distance;
+	};
+	return force;
+}
+
+//#endregion
+//#region src/util/hash.ts
+function quickHash(data) {
+	return float2hex(xorshiftString(data));
+}
+
+//#endregion
+//#region src/sim/OpenGraphSimulation.ts
+const RADIAL_FORCES = false;
+const INITIAL_RADIUS = 300;
+const INCREMENTAL = 200;
+function getRadius(depth) {
+	if (depth === 0) return INITIAL_RADIUS;
+	return INCREMENTAL * depth + INITIAL_RADIUS;
+}
+var OpenGraphSimulation = class {
+	width;
+	height;
+	config;
+	rootImageSources;
+	canvas;
+	transformCanvas;
+	theme;
+	rawData;
+	emitter;
+	translate = {
+		x: 0,
+		y: 0
+	};
+	data = {
+		nodes: [],
+		links: []
+	};
+	prunedData = {
+		nodes: [],
+		links: []
+	};
+	subGraph = {
+		nodes: [],
+		links: []
+	};
+	rootId = "";
+	simulation = null;
+	clusterSizeRange = [0, 1];
+	maxDepth = 0;
+	isTicking = false;
+	tickCount = 0;
+	loadNodeImage;
+	imageCache = new Map();
+	rootImages = [];
+	hideThumbnails = false;
+	noInteraction = false;
+	lockedNodeId;
+	selectedNode = null;
+	hoveredNode = null;
+	highlights = [];
+	renderLayers = {
+		links: {
+			regular: [],
+			highlighted: []
+		},
+		nodes: {
+			regular: [],
+			highlighted: []
+		}
+	};
+	constructor(props) {
+		this.emitter = new OpenGraphEventEmitter();
+		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.lockedNodeId = props.lockedNodeId;
+		this.loadNodeImage = props.loadNodeImage;
+		this.translate = props.translate || {
+			x: 0,
+			y: 0
+		};
+		this.transformCanvas = new TransformCanvas(this.canvas, {
+			onUpdate: this.handleTransform,
+			onClick: this.handleClick,
+			onMove: this.handleMove
+		});
+		this.rootImageSources.forEach((src, idx) => {
+			if (src && !this.imageCache.get(src)) loadHTMLImageElement(src).then((img$1) => {
+				this.imageCache.set(src, img$1);
+				this.rootImages[idx] = img$1;
+			});
+		});
+	}
+	get center() {
+		return {
+			x: 0,
+			y: 0
+		};
+	}
+	get origin() {
+		const dpi = devicePixelRatio || 1;
+		return {
+			x: (this.translate.x + this.width / 2) * dpi,
+			y: (this.translate.y + this.height / 2) * dpi
+		};
+	}
+	getNodeAtPosition = (cx, cy) => {
+		const transform = this.transformCanvas.getTransform();
+		const { x: tx, y: ty, scale } = transform;
+		const dpi = devicePixelRatio || 1;
+		const canvasX = cx * dpi;
+		const canvasY = cy * dpi;
+		const scaledX = (canvasX - tx) / scale;
+		const scaledY = (canvasY - ty) / scale;
+		const graphX = scaledX - this.origin.x;
+		const graphY = scaledY - this.origin.y;
+		const candidates = [];
+		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 - graphX;
+			const dy = node.y - graphY;
+			if (dx * dx + dy * dy < r * r) {
+				if (!this.prunedData.nodes.find((n) => n.id === node.id)) continue;
+				candidates.push(node);
+			}
+		}
+		if (candidates.length === 0) return null;
+		if (candidates.length === 1) return candidates[0];
+		for (let i = this.renderLayers.nodes.highlighted.length - 1; i >= 0; i--) {
+			const node = this.renderLayers.nodes.highlighted[i];
+			if (candidates.find((c) => c.id === node.id)) return node;
+		}
+		for (let node of this.renderLayers.nodes.regular) if (candidates.find((c) => c.id === node.id)) return node;
+		return candidates[0];
+	};
+	getNodeScreenPosition = (node) => {
+		const transform = this.transformCanvas.getTransform();
+		const x = transform.x + (node.x || 0 + this.origin.x) * transform.scale;
+		const y = transform.y + (node.y || 0 + this.origin.y) * transform.scale;
+		return {
+			x,
+			y
+		};
+	};
+	getNodeCanvasPosition = (node) => {
+		const _x = node.x || 0;
+		const _y = node.y || 0;
+		const transform = this.transformCanvas.getTransform();
+		const x = this.origin.x - _x * transform.scale;
+		const y = this.origin.y - _y * transform.scale;
+		return {
+			x,
+			y
+		};
+	};
+	screenToWorld(_x, _y) {
+		const transform = this.transformCanvas.getTransform();
+		const { x: tx, y: ty, scale } = transform;
+		const dpi = devicePixelRatio || 1;
+		const canvasX = _x * dpi;
+		const canvasY = _y * dpi;
+		const scaledX = (canvasX - tx) / scale;
+		const scaledY = (canvasY - ty) / scale;
+		const x = scaledX - this.origin.x;
+		const y = scaledY - this.origin.y;
+		return {
+			x,
+			y
+		};
+	}
+	worldToScreen(worldX, worldY) {
+		const transform = this.transformCanvas.getTransform();
+		const { x: tx, y: ty, scale } = transform;
+		const dpi = devicePixelRatio || 1;
+		const scaledX = (worldX + this.origin.x) * scale;
+		const scaledY = (worldY + this.origin.y) * scale;
+		const canvasX = scaledX + tx;
+		const canvasY = scaledY + ty;
+		const screenX = canvasX / dpi;
+		const screenY = canvasY / dpi;
+		return {
+			x: screenX,
+			y: screenY
+		};
+	}
+	handleClick = (x, y) => {
+		let node = this.getNodeAtPosition(x, y);
+		if (node?.state?.sessionNode) return;
+		if (this.lockedNodeId && !node) node = this.getNodeById(this.lockedNodeId);
+		this.handleClickNode(node);
+	};
+	handleClickNode = (node, options = {
+		noToggle: false,
+		triggerFocus: false
+	}) => {
+		let wasOpened = false;
+		if (node) {
+			if (node.id === this.rootId) {
+				this.selectedNode = null;
+				this.emitter.emit("selected-node-changed", null);
+				this.subGraph = {
+					nodes: [],
+					links: []
+				};
+				this.updateRenderLayers();
+				this.updateScene();
+				return;
+			}
+			if (node.state) {
+				const children = getChildren(node.id, this.data.links);
+				if (children.length > 0 && !options?.noToggle) {
+					if (this.selectedNode?.id !== node.id) {
+						if (node.state.collapsed) wasOpened = true;
+						node.state.collapsed = false;
+					} else node.state.collapsed = !node.state.collapsed;
+					if (!node.state.collapsed) {
+						const clusterDistance = 100;
+						const clusterRadius = 50;
+						const parentX = node.x || this.center.x;
+						const parentY = node.y || this.center.y;
+						const dirX = parentX - this.center.x;
+						const dirY = parentY - this.center.y;
+						const length = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
+						const normX = dirX / length;
+						const normY = dirY / length;
+						const clusterX = parentX + normX * clusterDistance;
+						const clusterY = parentY + normY * clusterDistance;
+						children.forEach((childId) => {
+							const childNode = this.data.nodes.find((n) => n.id === childId);
+							if (childNode && isSimNode(childNode)) {
+								const angle = Math.random() * 2 * Math.PI;
+								const radius = Math.random() * clusterRadius;
+								childNode.x = clusterX + Math.cos(angle) * radius;
+								childNode.y = clusterY + Math.sin(angle) * radius;
+							}
+						});
+					}
+				}
+			}
+			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.subGraph = getNodeSubgraph(node.id, this.data.nodes, this.data.links, this.rootId);
+		}
+		if (this.selectedNode?.id !== node?.id) {
+			this.selectedNode = node;
+			this.emitter.emit("selected-node-changed", node);
+			this.updateRenderLayers();
+		}
+		if (node) {
+			this.restart(wasOpened ? .05 : 0);
+			if (wasOpened || options?.triggerFocus) this.transformCanvas.focusOn(() => {
+				const t = this.transformCanvas.getTransform();
+				const _node = this.getNodeById(node.id);
+				return {
+					x: _node?.x,
+					y: _node?.y,
+					scale: t.scale
+				};
+			});
+		} else if (!node && this.selectedNode) {
+			this.selectedNode = null;
+			this.emitter.emit("selected-node-changed", null);
+			this.subGraph = {
+				nodes: [],
+				links: []
+			};
+			this.updateRenderLayers();
+			this.updateScene();
+		}
+	};
+	updateScene = () => {
+		if (this.isTicking) return;
+		this.onDraw();
+	};
+	handleMove = (x, y) => {
+		const world = this.screenToWorld(x, y);
+		const node = this.simulation?.find(world.x, world.y, 10) || null;
+		if (node?.state?.sessionNode) return;
+		if (this.hoveredNode === node) return;
+		this.hoveredNode = node;
+		this.emitter.emit("hovered-node-changed", node);
+		this.canvas.style.cursor = node ? "pointer" : "default";
+		this.updateScene();
+	};
+	handleTransform = (t) => {
+		this.emitter.emit("transform-changed", t);
+		this.updateScene();
+	};
+	updateHighlights = () => {
+		const detachedHighlights = this.highlights.filter((h) => h.isDetached);
+		const validSessionIds = new Set();
+		let focusSessionNode = null;
+		detachedHighlights.forEach((h) => {
+			const highlightedNode = this.data.nodes.find((n) => n.id === h.id);
+			if (!highlightedNode) return;
+			const existingLink = this.data.links.find((l) => {
+				return isSimNode(l.target) ? l.target.id === h.id : l.target === h.id;
+			});
+			if (!existingLink) return;
+			const id = isSimNode(existingLink.source) ? existingLink.source.id : existingLink.source.toString();
+			const parentNode = this.getNodeById(id);
+			if (!parentNode) return;
+			const _sessionId = h.sessionId || parentNode.id;
+			const sessionId = parentNode.state?.sessionNode ? parentNode.id : `${VOID_DETACH_ID}-${_sessionId}`;
+			validSessionIds.add(sessionId);
+			let sessionNode = this.data.nodes.find((n) => n.id === sessionId);
+			if (!sessionNode) {
+				const depth = (highlightedNode?.depth || 1) + 1;
+				const angle = getAngle(this.center.x, this.center.y, parentNode?.x, parentNode?.y);
+				const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y, angle);
+				sessionNode = {
+					id: sessionId,
+					state: {
+						collapsed: false,
+						image: void 0,
+						sessionNode: true
+					},
+					depth,
+					clusterSize: 1,
+					x: circlePos.x,
+					y: circlePos.y
+				};
+				this.data.nodes.push(sessionNode);
+				this.data.links.push({
+					target: sessionNode,
+					source: parentNode
+				});
+			}
+			const existingLinkIndex = this.data.links.findIndex((l) => l === existingLink);
+			this.data.links.splice(existingLinkIndex, 1);
+			this.data.links.push({
+				target: highlightedNode,
+				source: sessionNode
+			});
+			const parents = getAllParentsUntil(highlightedNode.id, this.data.links, this.rootId);
+			parents.forEach((parentId) => {
+				const node = this.data.nodes.find((n) => n.id === parentId);
+				if (node?.state) node.state.collapsed = false;
+			});
+			if (highlightedNode.state) highlightedNode.state.collapsed = false;
+			if (!focusSessionNode) focusSessionNode = sessionNode;
+		});
+		const sessionNodesToRemove = this.data.nodes.filter((n) => n.state?.sessionNode && !validSessionIds.has(n.id));
+		sessionNodesToRemove.forEach((sessionNode) => {
+			const childLinks = this.data.links.filter((l) => isSimNode(l.source) && l.source.id === sessionNode.id);
+			const incomingLink = this.data.links.find((l) => isSimNode(l.target) && l.target.id === sessionNode.id);
+			const parentNode = incomingLink ? isSimNode(incomingLink.source) ? incomingLink.source : this.getNodeById(incomingLink.source.toString()) : null;
+			this.data.links = this.data.links.filter((l) => !(isSimNode(l.source) && l.source.id === sessionNode.id) && !(isSimNode(l.target) && l.target.id === sessionNode.id));
+			if (parentNode) childLinks.forEach((link) => {
+				const targetNode = isSimNode(link.target) ? link.target : this.getNodeById(link.target.toString());
+				if (targetNode) this.data.links.push({
+					source: parentNode,
+					target: targetNode
+				});
+			});
+			const index$1 = this.data.nodes.findIndex((n) => n.id === sessionNode.id);
+			if (index$1 !== -1) this.data.nodes.splice(index$1, 1);
+		});
+		if (this.selectedNode) this.subGraph = getNodeSubgraph(this.selectedNode.id, this.data.nodes, this.data.links, this.rootId);
+		this.restart();
+		if (focusSessionNode) this.transformCanvas.focusOn(() => {
+			if (!focusSessionNode) return null;
+			const t = this.transformCanvas.getTransform();
+			const _node = this.getNodeById(focusSessionNode.id);
+			if (!_node) return null;
+			return {
+				x: _node?.x,
+				y: _node?.y,
+				scale: t.scale
+			};
+		});
+	};
+	initialize = (data, rootId) => {
+		this.rawData = data;
+		this.rootId = rootId;
+		const _links = data.links.map((l) => ({ ...l }));
+		const _nodes = data.nodes.map((n) => {
+			const existingData = this.data.nodes.find((x$1) => x$1.id === n.id);
+			const parents = getParents(n.id, _links);
+			const parentNode = this.data.nodes.find((p) => p.id === parents[0]);
+			const clusterSize = getClusterSize(n.id, _links);
+			const depth = getNodeDepth(n.id, _links);
+			const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y);
+			const x = depth > 0 ? null : existingData?.x || parentNode?.x || circlePos.x;
+			const y = depth > 0 ? null : existingData?.y || parentNode?.y || circlePos.y;
+			return {
+				...n,
+				state: {
+					collapsed: hasOnlyLeafs(n.id, _links) && getChildren(n.id, _links).length > 1,
+					...existingData?.state
+				},
+				clusterSize,
+				depth,
+				x,
+				y
+			};
+		}).sort((a, b) => a.depth - b.depth);
+		_nodes.forEach((n, i, arr) => {
+			const existingData = _nodes.find((x$1) => x$1.id === n.id);
+			const parents = getParents(n.id, _links);
+			const parentNode = _nodes.find((p) => p.id === parents[0]);
+			const depth = n.depth;
+			const parentAngle = depth > 0 ? getAngle(this.center.x, this.center.y, parentNode?.x, parentNode?.y) : void 0;
+			const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y, parentAngle);
+			const x = depth > 0 ? existingData?.x || circlePos.x : existingData?.x || circlePos.x;
+			const y = depth > 0 ? existingData?.y || circlePos.y : existingData?.y || circlePos.y;
+			_nodes[i].x = x;
+			_nodes[i].y = y;
+		});
+		if (!data.nodes.find((n) => n.id === this.rootId)) _nodes.push({
+			id: this.rootId,
+			state: {
+				collapsed: false,
+				image: void 0
+			},
+			depth: -1,
+			clusterSize: 1,
+			x: this.center.x,
+			y: this.center.y
+		});
+		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: this.rootId,
+			target: node.id
+		});
+		this.maxDepth = Math.max(..._nodes.map((n) => n.depth || 0));
+		this.data = {
+			nodes: _nodes,
+			links: _links
+		};
+		this.loadNodeImages();
+		this.updateHighlights();
+		this.triggerSelected(true);
+	};
+	get lockedNode() {
+		return this.lockedNodeId ? this.getNodeById(this.lockedNodeId) : null;
+	}
+	triggerSelected = (triggerFocus = false) => {
+		if (this.selectedNode) this.handleClickNode(this.selectedNode, {
+			noToggle: true,
+			triggerFocus
+		});
+		else if (this.lockedNode) this.handleClickNode(this.lockedNode, {
+			noToggle: true,
+			triggerFocus
+		});
+		else this.setSelectedNode(null);
+	};
+	restart = (alpha = .1) => {
+		this.tickCount = 0;
+		this.prunedData = getPrunedData(this.rootId, this.data.nodes, this.data.links, this.highlights);
+		this.updateRenderLayers();
+		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]);
+		if (this.simulation) {
+			this.simulation.stop();
+			this.simulation.on("tick", null);
+			this.simulation.on("end", null);
+		}
+		this.simulation = forceSimulation(this.prunedData.nodes).alpha(this.simulation ? alpha : .5).force("collide", forceCollide((n) => this.getNodeSize(n.id) / 2)).force("link", asymmetricLinks(this.prunedData.links).id((d) => d.id).distance((l) => {
+			const size = this.getNodeSize(isSimNode(l.target) ? l.target.id : l.target.toString());
+			if (isSimNode(l.target)) {
+				const state = l.target?.state;
+				if (!state?.collapsed) return size;
+			}
+			return size * 3;
+		}).strength((l) => {
+			return [.66, .08];
+		})).force("charge", forceManyBody().strength((node) => {
+			return -150;
+		})).force("center", forceCenter(this.center.x, this.center.y).strength(.1)).restart();
+		if (RADIAL_FORCES) for (let i = 0; i < this.maxDepth; i++) {
+			const depth = i;
+			const r = getRadius(depth);
+			const x = this.center.x;
+			const y = this.center.y;
+			console.log("Adding radial force for depth", depth, "with radius", r, x, y);
+			this.simulation.force(`radial-${depth}`, forceRadial(r, x, y).strength((n) => {
+				if (n.id === this.rootId) return 0;
+				if (n.depth === 0) return 0;
+				if (n.depth === depth) return .01;
+				return 0;
+			}));
+		}
+		this.simulation.on("tick", this.handleTick);
+		this.simulation.on("end", this.onEnd);
+	};
+	get rootNode() {
+		return this.data.nodes.find((n) => n.id === this.rootId) || null;
+	}
+	handleTick = () => {
+		this.isTicking = true;
+		this.onDraw();
+		this.tickCount++;
+	};
+	setTranslate({ x, y }) {
+		this.translate = {
+			x,
+			y
+		};
+		this.transformCanvas.setOffset(this.translate);
+	}
+	get visiblityScale() {
+		return scaleLog().domain(this.clusterSizeRange).range([1.5, .9]).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;
+		const highlight = this.highlights.find((h) => h.id === nodeId);
+		const sizeScale = highlight?.scale || 1;
+		if (nodeId === this.rootId) return nodeSize * 2 * sizeScale;
+		const node = this.data.nodes.find((n) => n.id === nodeId);
+		if (node?.state?.sessionNode) return 5;
+		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;
+		const isLiquidated = node?.status === "LIQUIDATED" || node?.status === "REGENERATED";
+		const _size = isLiquidated ? nodeSize * .2 : nodeSize;
+		return isSelected ? _size * 4 : _size * sizeScale;
+	};
+	updateRenderLayers() {
+		const isHighlighted = (id) => {
+			const highlight = this.highlights.find((h) => h.id === id);
+			return !this.selectedNode && highlight?.onTop || this.selectedNode?.id === id || this.subGraph.nodes.find((n) => n.id === id);
+		};
+		this.renderLayers.nodes.regular = [];
+		this.renderLayers.nodes.highlighted = [];
+		this.prunedData.nodes.forEach((node) => {
+			if (isHighlighted(node.id)) this.renderLayers.nodes.highlighted.push(node);
+			else this.renderLayers.nodes.regular.push(node);
+		});
+		this.renderLayers.links.regular = [];
+		this.renderLayers.links.highlighted = [];
+		const isLinkInSubgraph = (link) => {
+			if (!this.selectedNode) return false;
+			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+			const targetId = isSimNode(link.target) ? link.target.id : link.target;
+			return this.subGraph.links.some((l) => {
+				const lSourceId = getNodeId(l.source);
+				const lTargetId = getNodeId(l.target);
+				return lSourceId === sourceId && lTargetId === targetId || lSourceId === targetId && lTargetId === sourceId;
+			});
+		};
+		const isLinkInHighlights = (link) => {
+			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+			const targetId = isSimNode(link.target) ? link.target.id : link.target;
+			return !this.selectedNode && !!this.highlights.find((h) => h.isDetached && (h.id === sourceId || h.id === targetId));
+		};
+		this.prunedData.links.forEach((link) => {
+			const inSubgraph = isLinkInSubgraph(link);
+			const inHighlights = isLinkInHighlights(link);
+			if (inSubgraph || inHighlights) this.renderLayers.links.highlighted.push(link);
+			else this.renderLayers.links.regular.push(link);
+		});
+		this.renderLayers.links.highlighted.sort((a, b) => {
+			const inSubgraphA = isLinkInSubgraph(a);
+			const inSubgraphB = isLinkInSubgraph(b);
+			if (inSubgraphA || inSubgraphB) return 2;
+			return -1;
+		});
+		this.renderLayers.nodes.highlighted.sort((a, b) => {
+			const highlightA = this.highlights.find((h) => h.id === a.id);
+			const highlightB = this.highlights.find((h) => h.id === b.id);
+			if (this.subGraph.nodes.find((n) => n.id === a.id) || this.subGraph.nodes.find((n) => n.id === b.id)) return 2;
+			if (a.id === this.selectedNode?.id || b.id === this.selectedNode?.id) return 2;
+			if (highlightA?.onTop || highlightB?.onTop) return 1;
+			return -1;
+		});
+	}
+	renderLink(ctx, link, options) {
+		const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+		const targetId = isSimNode(link.target) ? link.target.id : link.target;
+		let sourceNode = this.data.nodes.find((n) => n.id === sourceId);
+		const isLight = this.theme === "light";
+		const { dim: _dim, hasSelection, highlight } = options;
+		let stroke = _dim ? this.color(dim(.09, isLight))() : hasSelection ? this.color(dim(.4, isLight))() : this.color(dim(.18, isLight))();
+		ctx.globalAlpha = highlight ? 1 : .5;
+		const sx = sourceNode && sourceNode.x || 0;
+		const sy = sourceNode && sourceNode.y || 0;
+		const tx = isSimNode(link.target) && link.target.x || 0;
+		const ty = isSimNode(link.target) && link.target.y || 0;
+		if (highlight?.linkColor) {
+			const gradient = ctx.createLinearGradient(sx, sy, tx, ty);
+			gradient.addColorStop(0, stroke);
+			gradient.addColorStop(1, color(highlight.linkColor)());
+			ctx.strokeStyle = gradient;
+		} else ctx.strokeStyle = stroke;
+		ctx.lineWidth = _dim ? .3 : .8;
+		ctx.beginPath();
+		ctx.moveTo(sx, sy);
+		ctx.lineTo(tx, ty);
+		ctx.stroke();
+		ctx.closePath();
+	}
+	renderNode(ctx, node, options) {
+		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 isLiquidated = node.status === "LIQUIDATED" || node.status === "REGENERATED";
+		const isLight = this.theme === "light";
+		const { dim: _dim, transform } = options;
+		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 nodeSize = this.getNodeSize(node.id);
+		const highlight = this.highlights.find((h) => h.id === node.id);
+		const highlighted = !!highlight;
+		let highlightedStroke = _dim ? color(highlight?.strokeColor || red)(dim(.4, isLight))() : color(highlight?.strokeColor || red)();
+		if (node.id === this.rootId) this.renderRootNode(ctx, x, y, nodeSize, _dim, isLight);
+		else if (node.state?.sessionNode) this.renderSessionNode(ctx, x, y, nodeSize);
+		else if (isCollapsed) this.renderCollapsedNode(ctx, x, y, nodeSize, {
+			fill,
+			stroke,
+			highlighted,
+			highlightedStroke,
+			isSelected,
+			dim: _dim,
+			transform,
+			clusterSize: node.clusterSize || 1,
+			isLight
+		});
+		else this.renderExpandedNode(ctx, x, y, nodeSize, {
+			fill,
+			stroke,
+			highlighted,
+			highlightedStroke,
+			isHovered,
+			isLiquidated,
+			dim: _dim,
+			image: node.state?.image
+		});
+	}
+	renderSessionNode(ctx, x, y, size) {
+		const isLight = this.theme === "light";
+		circle(ctx, x, y, size / 2, {
+			stroke: true,
+			strokeStyle: this.colorContrast(),
+			lineWidth: .2,
+			fill: true,
+			fillStyle: this.color(dim(.18, isLight))()
+		});
+	}
+	renderRootNode(ctx, x, y, size, dimmed, isLight) {
+		circle(ctx, x, y, size / 2, {
+			stroke: false,
+			strokeStyle: this.colorContrast(),
+			lineWidth: .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(ctx, _img, x - _imgSize / 2, y - _imgSize / 2, _imgSize, _imgSize, 0, dimmed ? .1 : 1);
+		}
+	}
+	renderCollapsedNode(ctx, x, y, size, options) {
+		const { fill, stroke, highlighted, highlightedStroke, isSelected, dim: _dim, transform, clusterSize, isLight } = options;
+		if (highlighted) {
+			const _size = size + 4;
+			circle(ctx, x, y, _size / 2, {
+				stroke: true,
+				strokeStyle: highlightedStroke,
+				lineWidth: 1,
+				fill: false,
+				fillStyle: fill
+			});
+		}
+		circle(ctx, x, y, size / 2, {
+			stroke: true,
+			strokeStyle: stroke,
+			lineWidth: isSelected ? 1 : .2,
+			fill: true,
+			fillStyle: fill
+		});
+		const showLabel = transform.scale >= this.visiblityScale(clusterSize) ? 1 : 0;
+		if (showLabel) {
+			ctx.font = `${14 / transform.scale}px Sans-Serif`;
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillStyle = this.color(dim(_dim ? .2 : .5, isLight))();
+			ctx.fillText(clusterSize.toString(), x, y);
+		}
+	}
+	renderExpandedNode(ctx, x, y, size, options) {
+		const { fill, highlighted, highlightedStroke, isHovered, isLiquidated, dim: _dim, image } = options;
+		const _size = size + 1;
+		rect(ctx, x - _size / 2, y - _size / 2, _size, _size, {
+			stroke: highlighted || isHovered,
+			strokeStyle: isHovered ? fill : highlightedStroke,
+			lineWidth: .5,
+			fill: this.hideThumbnails || isLiquidated || !image,
+			fillStyle: fill,
+			borderRadius: 1
+		});
+		if (image && !this.hideThumbnails && !isLiquidated) img(ctx, image, x - size / 2, y - size / 2, size, size, 1, _dim ? .1 : 1, fill);
+	}
+	onDraw = () => {
+		const context = this.canvas?.getContext("2d");
+		const transform = this.transformCanvas.getTransform();
+		if (!context) return;
+		const dpi = devicePixelRatio || 1;
+		context.save();
+		context.scale(dpi, dpi);
+		context.clearRect(0, 0, this.width, this.height);
+		context.setTransform(transform.scale, 0, 0, transform.scale, transform.x, transform.y);
+		context.translate(this.origin.x, this.origin.y);
+		context.save();
+		const hasSelection = !!this.selectedNode;
+		this.renderLayers.links.regular.forEach((link) => {
+			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+			const targetId = isSimNode(link.target) ? link.target.id : link.target;
+			const _dim = hasSelection && !this.subGraph.links.find((sl) => getNodeId(sl.source) === sourceId && getNodeId(sl.target) === targetId);
+			this.renderLink(context, link, {
+				dim: _dim,
+				hasSelection
+			});
+		});
+		context.globalAlpha = 1;
+		this.renderLayers.nodes.regular.forEach((node) => {
+			const _dim = hasSelection && !this.subGraph.nodes.some((n) => n.id === node.id);
+			this.renderNode(context, node, {
+				dim: _dim,
+				transform
+			});
+		});
+		this.renderLayers.links.highlighted.forEach((link) => {
+			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+			const targetId = isSimNode(link.target) ? link.target.id : link.target;
+			const _dim = hasSelection && !this.subGraph.links.find((sl) => getNodeId(sl.source) === sourceId && getNodeId(sl.target) === targetId);
+			const highlight = this.highlights.find((h) => h.id === sourceId || h.id === targetId);
+			this.renderLink(context, link, {
+				dim: _dim,
+				hasSelection,
+				highlight
+			});
+		});
+		context.globalAlpha = 1;
+		this.renderLayers.nodes.highlighted.forEach((node) => {
+			const _dim = hasSelection && !this.subGraph.nodes.some((n) => n.id === node.id);
+			this.renderNode(context, node, {
+				dim: _dim,
+				transform
+			});
+		});
+		context.restore();
+		context.restore();
+		this.transformCanvas.trackCursor();
+	};
+	drawDebug(context) {
+		const transform = this.transformCanvas.getTransform();
+		context.font = `14px Sans-Serif`;
+		context.textAlign = "left";
+		context.fillStyle = "#000000";
+		context.fillText(`${transform.x}, ${transform.y}, ${transform.scale}`, 0, 15);
+		const center = this.worldToScreen(this.rootNode?.x, this.rootNode?.y);
+		context.fillText(`${center.x}, ${center.y}`, 0, 30);
+	}
+	drawDebugDepthCircles(context) {
+		const transform = this.transformCanvas.getTransform();
+		for (let i = 0; i < this.maxDepth; i++) {
+			const depth = i;
+			const r = getRadius(depth);
+			const x = this.center.x;
+			const y = this.center.y;
+			circle(context, x, y, r, {
+				fill: false,
+				stroke: true,
+				strokeStyle: "#00ff00"
+			});
+			context.font = `${40 / transform.scale}px Sans-Serif`;
+			context.textAlign = "center";
+			context.textBaseline = "middle";
+			context.fillStyle = this.color();
+			context.fillText(depth.toString(), x + r, y);
+		}
+	}
+	onEnd = () => {
+		this.isTicking = false;
+	};
+	loadNodeImages = () => {
+		this.data.nodes.forEach((node) => {
+			if (node.id === this.rootId) return;
+			if (node.imgSrc && this.imageCache.get(node.imgSrc)) {
+				node.state = node.state || {};
+				node.state.image = this.imageCache.get(node.imgSrc);
+				return;
+			}
+			const loadImage = async () => {
+				const src = this.loadNodeImage ? await this.loadNodeImage(node) : node.imgSrc;
+				if (!src) return;
+				const html = this.imageCache.get(src) || await loadHTMLImageElement(src);
+				this.imageCache.set(src, html);
+				node.state = node.state || {};
+				node.state.image = html;
+			};
+			loadImage();
+		});
+	};
+	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.updateScene();
+	};
+	setTheme = (theme) => {
+		this.theme = theme;
+		this.updateScene();
+	};
+	setHideThumbnails = (hide) => {
+		this.hideThumbnails = hide;
+		this.updateScene();
+	};
+	setSelectedNode = (node) => {
+		this.selectedNode = node;
+		this.updateRenderLayers();
+		this.updateScene();
+	};
+	_highlightHash;
+	setHighlights = (highlights) => {
+		const hash = quickHash(JSON.stringify(highlights));
+		if (hash === this._highlightHash) return;
+		this._highlightHash = hash;
+		this.highlights = highlights;
+		this.updateHighlights();
+	};
+	setNoInteraction = (noInteraction) => {
+		this.noInteraction = noInteraction;
+		this.transformCanvas.setNoInteraction(this.noInteraction);
+		this.updateScene();
+	};
+	getNodeById = (nodeId) => {
+		return this.data.nodes.find((n) => n.id === nodeId) || null;
+	};
+	setLockedNodeId = (nodeId) => {
+		this.lockedNodeId = nodeId || void 0;
+	};
+	handleClickDebug = (x, y) => {
+		const p = this.screenToWorld(x, y);
+		this.circles.push(p);
+		this.transformCanvas.focusOn(() => {
+			const circle$1 = this.circles[this.circles.length - 1];
+			return {
+				x: circle$1.x,
+				y: circle$1.y,
+				scale: this.transformCanvas.getTransform().scale
+			};
+		});
+		this.updateScene();
+	};
+	circles = [];
+	onDrawDebug = () => {
+		const context = this.canvas?.getContext("2d");
+		const transform = this.transformCanvas.getTransform();
+		if (!context) return;
+		const dpi = devicePixelRatio || 1;
+		context.save();
+		context.scale(dpi, dpi);
+		context.clearRect(0, 0, this.width, this.height);
+		context.setTransform(transform.scale, 0, 0, transform.scale, transform.x, transform.y);
+		context.translate(this.origin.x, this.origin.y);
+		context.save();
+		this.circles.map((c) => {
+			circle(context, c.x, c.y, 5, {
+				fill: true,
+				fillStyle: "#ff0000",
+				stroke: false
+			});
+		});
+		circle(context, 0, 0, 5, {
+			fill: true,
+			fillStyle: "#ff0000",
+			stroke: false
+		});
+		context.restore();
+		context.restore();
+	};
+};
+
+//#endregion
+//#region src/components/OpenFormGraph.tsx
+function OpenFormGraph(props) {
+	const { width, height, highlights = [], className, noInteraction = false, loadNodeImage, translate, onTransform } = props;
+	const { simulation, data, rootId, rootImageSources, theme, hideThumbnails, setHoveredNode, setSelectedNode, lockedNodeId } = useOpenFormGraph();
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		if (!canvasRef.current) return;
+		simulation.current = new OpenGraphSimulation({
+			width,
+			height,
+			canvas: canvasRef.current,
+			rootImageSources,
+			loadNodeImage,
+			theme,
+			translate,
+			lockedNodeId
+		});
+		simulation.current.emitter.on("selected-node-changed", setSelectedNode);
+		simulation.current.emitter.on("hovered-node-changed", setHoveredNode);
+		return () => {
+			simulation.current?.emitter.off("selected-node-changed", setSelectedNode);
+			simulation.current?.emitter.off("hovered-node-changed", setHoveredNode);
+			simulation.current?.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		if (!simulation.current) return;
+		if (!onTransform) return;
+		simulation.current.emitter.on("transform-changed", onTransform);
+		return () => {
+			simulation.current?.emitter.off("transform-changed", onTransform);
+		};
+	}, [onTransform]);
+	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]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		if (!translate) return;
+		simulation.current.setTranslate(translate);
+	}, [translate?.y, translate?.x]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		if (simulation.current.lockedNodeId === lockedNodeId) return;
+		simulation.current.setLockedNodeId(lockedNodeId);
+	}, [translate?.y, translate?.x]);
+	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 { Highlight, OpenFormGraph, OpenGraphEventEmitter, OpenGraphSimulation, TransformCanvas, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getNodeDepth, getNodeId, getNodeSubgraph, getParents, getPrunedData, getRootParent, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, rect, red, searchParents };
+//# sourceMappingURL=OpenFormGraph-i8VSTamk.js.map