@ankhzet/graph 0.5.0 → 0.5.1

package/dist/index.js

@@ -19,16 +19,47 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		enumerable: !(r = C(t, s)) || r.enumerable
 	});
 	return e;
-}, O = (e, t, n) => (D(e, t, "default"), n && D(n, t, "default")), k = (e, t, n = 1) => ({
+}, O = (e, t, n) => (D(e, t, "default"), n && D(n, t, "default")), ee = 16, te = 8, ne = 16, re = 32, ie = class {
+	grid;
+	gridSize;
+	sizes;
+	constructor({ grid: e = 16, port: t = 8, lane: n = 16, space: r = 32 } = {}) {
+		this.grid = e, this.gridSize = {
+			x: e,
+			y: e
+		}, this.sizes = {
+			grid: this.gridSize,
+			port: t,
+			lane: n,
+			space: r
+		};
+	}
+	snap(e) {
+		let t = e < 0 ? -1 : 1;
+		return t * (Math.round(t * e / this.grid + .5) - .5) * this.grid;
+	}
+	toGraph({ x: e, y: t }) {
+		return {
+			x: (e - .5) * this.grid,
+			y: (t - .5) * this.grid
+		};
+	}
+	toData({ x: e, y: t }) {
+		return {
+			x: ~~(this.snap(e) / this.grid + .5),
+			y: ~~(this.snap(t) / this.grid + .5)
+		};
+	}
+}, ae = ({ description: { item: e } }) => e.isolator ? e.title : null, k = (e, t, n = 1) => ({
 	x: ~~(e.x + t.x * n),
 	y: ~~(e.y + t.y * n)
-}), A = (e, t) => (n) => n.node === e && n.port === t, ee = (e) => (t) => t.node === e, j = (e, t, n) => {
+}), A = (e, t) => (n) => n.node === e && n.port === t, oe = (e) => (t) => t.node === e, se = (e, t, n) => {
 	if (n) for (let r of n) {
 		let n = t.nodes.findIndex(A(r.node, r.port));
 		n >= 0 !== e && (e ? t.nodes.push(r) : t.nodes.splice(n, 1));
 	}
 	else e || (t.nodes = []);
-}, te = (e, t, n, r, i, a, o, s) => {
+}, ce = (e, t, n, r, i, a, o, s) => {
 	if (e === n && t === r || i === o && a === s) return !1;
 	let c = (s - a) * (n - e) - (o - i) * (r - t);
 	if (c === 0) return !1;
@@ -37,7 +68,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		x: e + l * (n - e),
 		y: t + l * (r - t)
 	};
-}, M = class {
+}, j = class {
 	joints = /* @__PURE__ */ new Map();
 	parentId;
 	constructor(e, t) {
@@ -67,13 +98,13 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		return !!this.joints.get(e)?.nodes.some(A(t, n));
 	}
 	getPort(e, t) {
-		let n = this.find(t === void 0 ? (t) => t.nodes.some(ee(e)) : (n) => n.nodes.some(A(e, t)));
+		let n = this.find(t === void 0 ? (t) => t.nodes.some(oe(e)) : (n) => n.nodes.some(A(e, t)));
 		if (n) return n.port;
 	}
 	connect({ port: e, target: t, connect: n }) {
 		let r = this.joints.get(e);
 		if (!r) throw Error(`Node ${this.parentId} does not have joint "${e}"`);
-		return j(n, r, t), r;
+		return se(n, r, t), r;
 	}
 	getNodes(e) {
 		return this.joints.get(e)?.nodes;
@@ -86,7 +117,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 	get count() {
 		return this.joints.size;
 	}
-}, ne = Symbol("E_CONNECT"), re = Symbol("E_MOVE"), ie = class extends e {
+}, le = Symbol("E_CONNECT"), M = Symbol("E_MOVE"), N = class extends e {
 	id;
 	description;
 	inputs;
@@ -97,7 +128,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		y: 0
 	};
 	constructor({ id: e, coordinator: t, inputs: n = [], outputs: r = [], ...i }) {
-		super(), this.id = e, this.coordinator = t, this.description = i, this.inputs = new M(e, n), this.outputs = new M(e, r);
+		super(), this.id = e, this.coordinator = t, this.description = i, this.inputs = new j(e, n), this.outputs = new j(e, r);
 	}
 	get title() {
 		return this.description.title;
@@ -112,7 +143,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		return this.#e;
 	}
 	set position({ x: e, y: t }) {
-		e = this.coordinator.snap(e), t = this.coordinator.snap(t), !(this.#e.x === e && this.#e.y === t) && (this.#e.x = e, this.#e.y = t, this.dispatchEvent(re, this.#e));
+		e = this.coordinator.snap(e), t = this.coordinator.snap(t), !(this.#e.x === e && this.#e.y === t) && (this.#e.x = e, this.#e.y = t, this.dispatchEvent(M, this.#e));
 	}
 	isInput(e, t, n) {
 		return this.inputs.hasAtPort(e, t, n);
@@ -154,7 +185,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 				nodes: a
 			});
 		}
-		this.dispatchEvent(ne, {
+		this.dispatchEvent(le, {
 			connect: t,
 			input: e,
 			source: i,
@@ -165,12 +196,12 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		return this.position = e;
 	}
 	onConnect(e) {
-		return this.handleEvent(ne, e);
+		return this.handleEvent(le, e);
 	}
 	onMove(e) {
-		return this.handleEvent(re, e);
+		return this.handleEvent(M, e);
 	}
-}, N = class {
+}, P = class {
 	_barriers = {};
 	_isBarrier;
 	map;
@@ -231,7 +262,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 			y: (i.y - r.y) / 2
 		};
 	}
-}, ae = class extends N {
+}, ue = class extends P {
 	layers = [];
 	#e = null;
 	get center() {
@@ -292,7 +323,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 			if (n && !1 === t(n)) break;
 		}
 	}
-}, oe = class extends N {
+}, de = class extends P {
 	cache = {};
 	hash = null;
 	get center() {
@@ -325,7 +356,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		}
 		return this.hash = null, a;
 	}
-}, se = class {
+}, fe = class {
 	sort(e) {
 		let t = {}, n = {}, r = [];
 		for (let i of e) {
@@ -377,7 +408,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 			leafs: r
 		};
 	}
-}, ce = class {
+}, pe = class {
 	sort(e, t, n) {
 		let r = n.pop();
 		for (let e of r);
@@ -390,7 +421,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		}
 		return n;
 	}
-}, le = class {
+}, me = class {
 	isBarrier;
 	klass;
 	constructor(e, t) {
@@ -404,7 +435,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 	getSubGraphs(e, t) {
 		return new this.klass(e, this.isBarrier).getSubGraphs(t);
 	}
-}, P = Symbol("changed"), F = class extends e {
+}, F = Symbol("changed"), I = class extends e {
 	all;
 	map = {};
 	constructor(e = []) {
@@ -412,7 +443,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 	}
 	clear() {
 		let e = this.all;
-		this.all = [], this.map = {}, this.dispatchEvent(P, {
+		this.all = [], this.map = {}, this.dispatchEvent(F, {
 			diff: e,
 			added: !1
 		});
@@ -429,22 +460,22 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 	add(e) {
 		let t = Array.isArray(e) ? e : [e], n = [];
 		for (let e of t) this.all.includes(e) || (n.push(e), this.map[e.id] = e);
-		return n.length && (this.all = this.all.concat(n), this.dispatchEvent(P)), e;
+		return n.length && (this.all = this.all.concat(n), this.dispatchEvent(F)), e;
 	}
 	remove(e) {
 		Array.isArray(e) || (e = [e]);
 		let t = this.all.filter((t) => !e.includes(t.id));
 		if (t.length !== this.all.length) {
 			for (let t of e) delete this.map[t];
-			this.all = t, this.dispatchEvent(P);
+			this.all = t, this.dispatchEvent(F);
 		}
 		return this;
 	}
 	onChange(e) {
-		return this.handleEvent(P, e);
+		return this.handleEvent(F, e);
 	}
-}, I = (e, t) => e === t ? !0 : e.length === t.length ? e.every((e, n) => e.id === t[n]?.id) : !1;
-function L(e) {
+}, L = (e, t) => e === t ? !0 : e.length === t.length ? e.every((e, n) => e.id === t[n]?.id) : !1;
+function he(e) {
 	let [[t, n]] = l(() => {
 		let t = e();
 		return [t, [
@@ -452,7 +483,7 @@ function L(e) {
 			() => t.all,
 			() => t.all,
 			(e) => e,
-			I
+			L
 		]];
 	});
 	return o(() => () => {
@@ -461,7 +492,7 @@ function L(e) {
 }
 //#endregion
 //#region src/graph/useDraggable.tsx
-var R = (e) => {
+var ge = (e) => {
 	let t = e.position, [n, r] = l(() => ({
 		x: t.x,
 		y: t.y
@@ -495,24 +526,24 @@ var R = (e) => {
 			e.onDrag(t), r(t);
 		})
 	};
-}, z = /* @__PURE__ */ E({});
-import * as ue from "@pixi/core";
-O(z, ue);
-import * as de from "@pixi/display";
-O(z, de);
-import * as fe from "@pixi/sprite";
-O(z, fe);
-import * as pe from "@pixi/graphics";
-O(z, pe);
-import * as me from "@pixi/text";
-O(z, me);
-import * as he from "@pixi/text-bitmap";
-O(z, he);
-import * as ge from "@pixi/events";
-O(z, ge);
+}, R = /* @__PURE__ */ E({});
+import * as _e from "@pixi/core";
+O(R, _e);
+import * as ve from "@pixi/display";
+O(R, ve);
+import * as ye from "@pixi/sprite";
+O(R, ye);
+import * as be from "@pixi/graphics";
+O(R, be);
+import * as xe from "@pixi/text";
+O(R, xe);
+import * as Se from "@pixi/text-bitmap";
+O(R, Se);
+import * as Ce from "@pixi/events";
+O(R, Ce);
 //#endregion
 //#region src/graph/render/Batch.ts
-var _e = class extends e {
+var z = class extends e {
 	counter;
 	constructor() {
 		super(), this.counter = 0;
@@ -533,12 +564,12 @@ var _e = class extends e {
 	and(e) {
 		return this.handleEvent(".", e);
 	}
-}, ve = [
+}, we = [
 	[0, -1],
 	[-1, 0],
 	[0, 1],
 	[1, 0]
-], ye = Math.PI * 2, be = Math.PI / 2, xe = class extends z.Graphics {
+], Te = Math.PI * 2, Ee = Math.PI / 2, De = class extends R.Graphics {
 	sizeX;
 	sizeY;
 	lineSize;
@@ -550,10 +581,10 @@ var _e = class extends e {
 	#n;
 	#r;
 	constructor(e, { lineSize: t, sizeX: n, sizeY: r, radius: i, color: a }) {
-		super(), this.lineSize = t, this.color = a, this.sizeX = n, this.sizeY = r, this.#t = new z.Graphics().lineStyle({
+		super(), this.lineSize = t, this.color = a, this.sizeX = n, this.sizeY = r, this.#t = new R.Graphics().lineStyle({
 			width: t,
 			color: a
-		}).drawRoundedRect(0, 0, n, r, i), this.#e = new z.Graphics(), this.#e.position.set(n / 2, r / 2), this.#t.mask = this.#e, this.addChild(e), this.addChild(this.#t), this.addChild(this.#e), this.progress = 0;
+		}).drawRoundedRect(0, 0, n, r, i), this.#e = new R.Graphics(), this.#e.position.set(n / 2, r / 2), this.#t.mask = this.#e, this.addChild(e), this.addChild(this.#t), this.addChild(this.#e), this.progress = 0;
 		let o = this.sizeX / 2, s = this.sizeY / 2, c = -o + this.lineSize, l = -s + this.lineSize, u = +o - this.lineSize, d = +s - this.lineSize, f = [
 			[
 				c,
@@ -605,11 +636,11 @@ var _e = class extends e {
 	}
 	update(e) {
 		this.progress = e;
-		let t = e * ye % ye, n = Math.cos(t - be) * this.sizeX * 2, r = Math.sin(t - be) * this.sizeY * 2, i, a = null, o = 0;
+		let t = e * Te % Te, n = Math.cos(t - Ee) * this.sizeX * 2, r = Math.sin(t - Ee) * this.sizeY * 2, i, a = null, o = 0;
 		for (let e = 0; e < this.#r.segments.length; e++) {
-			let t = this.#r.segments[e], s = te(0, 0, n, r, t[0], t[1], t[2], t[3]);
+			let t = this.#r.segments[e], s = ce(0, 0, n, r, t[0], t[1], t[2], t[3]);
 			if (s) {
-				a = s, o = e === 0 ? s.x > 0 ? 0 : 4 : 4 - e, i = ve[e];
+				a = s, o = e === 0 ? s.x > 0 ? 0 : 4 : 4 - e, i = we[e];
 				break;
 			}
 		}
@@ -619,7 +650,7 @@ var _e = class extends e {
 			this.#e.lineTo(a.x + i[0] * this.lineSize * 2, a.y + i[1] * this.lineSize * 2).lineTo(a.x, a.y).lineTo(0, 0).endFill();
 		}
 	}
-}, B = class extends z.Graphics {
+}, B = class extends R.Graphics {
 	from;
 	to;
 	angled = !1;
@@ -627,7 +658,7 @@ var _e = class extends e {
 	#e;
 	#t = 2;
 	constructor(e, t, n, r, i = 2) {
-		super(), this.#e = i, this.from = new z.ObservablePoint(() => this.update(), 0, e, t), this.to = new z.ObservablePoint(() => this.update(), 0, n, r), this.eventMode = "none";
+		super(), this.#e = i, this.from = new R.ObservablePoint(() => this.update(), 0, e, t), this.to = new R.ObservablePoint(() => this.update(), 0, n, r), this.eventMode = "none";
 	}
 	moveFromPoint(e) {
 		let t = this.from.x !== e.x || this.from.y !== e.y;
@@ -647,11 +678,11 @@ var _e = class extends e {
 		let { x: e, y: t } = this.from, { x: n, y: r } = this.to, i = n - e, a = r - t, o = i / 2, s = a / 2;
 		return this.clear(), this.lineStyle(this.#t, this.color, this.alpha), this.x = n - o, this.y = r - s, this.angled ? (this.moveTo(-o, -s), this.lineTo(0, -s), this.lineTo(0, s), this.lineTo(o, s)) : (this.moveTo(-o, -s), this.lineTo(o, s)), this.#e && (this.beginFill(this.color, this.alpha), this.drawCircle(-o, -s, this.#e / 2), this.drawCircle(o, s, this.#e / 2), this.endFill()), this;
 	}
-}, Se = class extends z.Graphics {
+}, Oe = class extends R.Graphics {
 	from;
 	to;
 	constructor(e, t) {
-		super(), this.from = new z.Point(e, t), this.to = {};
+		super(), this.from = new R.Point(e, t), this.to = {};
 		for (let e of Object.values(this.to)) this.addChild(e);
 	}
 	addTarget(e, t) {
@@ -673,15 +704,15 @@ var _e = class extends e {
 		}
 		return t;
 	}
-}, Ce = {
+}, ke = {
 	0: 6710886,
 	2: 16737894,
 	1: 6750054
-}, we = {
+}, Ae = {
 	0: 6710886,
 	2: 11167334,
 	1: 16724787
-}, Te = (e, t, n) => {
+}, je = (e, t, n) => {
 	let { point: { parent: r, input: i } } = e;
 	if (t.hover) {
 		let a = r === t.point.parent || i === t.point.input ? 2 : 1;
@@ -692,7 +723,7 @@ var _e = class extends e {
 		return a;
 	}
 	return 0;
-}, Ee = (e, t) => e.parent === t.parent && e.port === t.port, De = class extends z.Graphics {
+}, Me = (e, t) => e.parent === t.parent && e.port === t.port, Ne = class extends R.Graphics {
 	line1;
 	line2;
 	line12;
@@ -717,14 +748,14 @@ var _e = class extends e {
 	setPosition(e) {
 		return this.x = e.x, this.y = e.y, this;
 	}
-}, Oe = class extends Se {
+}, Pe = class extends Oe {
 	start;
 	finish;
 	viable;
 	#e;
 	#t;
 	constructor(e) {
-		super(e.pos.x, e.pos.y), this.start = e, this.viable = 0, this.#e = this.addTarget(0, 0), this.#t = new De(10, 16724787).hide(), this.addChild(this.#t);
+		super(e.pos.x, e.pos.y), this.start = e, this.viable = 0, this.#e = this.addTarget(0, 0), this.#t = new Ne(10, 16724787).hide(), this.addChild(this.#t);
 	}
 	get isRemoving() {
 		return this.start.remove || !!this.finish?.remove;
@@ -737,18 +768,18 @@ var _e = class extends e {
 				x: t + a / 2,
 				y: n + o / 2
 			};
-			this.#t.setColor(we[this.viable]).setPosition(e).setAngle(s).show(), this.viable === 0 && (this.#e.visible = !1, this.#t.hide());
+			this.#t.setColor(Ae[this.viable]).setPosition(e).setAngle(s).show(), this.viable === 0 && (this.#e.visible = !1, this.#t.hide());
 		} else this.#t.hide();
-		this.#e.setColor(this.isRemoving ? we[this.viable] : Ce[this.viable]).moveToPoint(e);
+		this.#e.setColor(this.isRemoving ? Ae[this.viable] : ke[this.viable]).moveToPoint(e);
 	}
 	flail(e) {
 		this.finish || this.setLine(e);
 	}
 	hoverPort(e) {
-		this.viable = Te(this.start, e, this.isRemoving), this.finish = this.viable === 1 ? e : void 0, this.setLine(e.pos);
+		this.viable = je(this.start, e, this.isRemoving), this.finish = this.viable === 1 ? e : void 0, this.setLine(e.pos);
 	}
 	connect({ point: e }) {
-		if (this.finish && Ee(this.finish.point, e)) {
+		if (this.finish && Me(this.finish.point, e)) {
 			let { start: { remove: e, point: t }, finish: { remove: n, point: r } } = this, i = t.input ? t : r, a = t.input ? r : t;
 			return {
 				connect: !(e || n),
@@ -758,8 +789,8 @@ var _e = class extends e {
 		}
 		return !1;
 	}
-}, V = class extends z.Container {
-	static makeFont = (e, t, n) => typeof document < "u" && z.BitmapFont.from(e, t, {
+}, V = class extends R.Container {
+	static makeFont = (e, t, n) => typeof document < "u" && R.BitmapFont.from(e, t, {
 		chars: [
 			["a", "z"],
 			["A", "Z"],
@@ -777,7 +808,7 @@ var _e = class extends e {
 		fontName: e
 	}));
 	constructor(e, t) {
-		super(), this.#e = this.addChild(new z.BitmapText(String(e), t));
+		super(), this.#e = this.addChild(new R.BitmapText(String(e), t));
 	}
 	set text(e) {
 		this.#e.text = String(e);
@@ -788,7 +819,7 @@ var _e = class extends e {
 	set tint(e) {
 		this.#e.tint = e;
 	}
-}, H = Symbol.for("E_PORT_CLICK"), U = Symbol.for("E_PORT_HOVER"), ke = class t extends z.Graphics {
+}, H = Symbol.for("E_PORT_CLICK"), U = Symbol.for("E_PORT_HOVER"), Fe = class t extends R.Graphics {
 	connectorPoint;
 	hasBothLanes;
 	static port = V.factory("nodePort", {
@@ -837,12 +868,12 @@ var _e = class extends e {
 		x: n.x,
 		y: n.y
 	};
-}, Ae = (e) => e.__drag_root ? e : e.parent && Ae(e.parent);
-function je(e) {
+}, Ie = (e) => e.__drag_root ? e : e.parent && Ie(e.parent);
+function Le(e) {
 	return function(t) {
 		if (e.dispatchEvent(G, !0), t.buttons & 2) return;
 		let n = this._drag_meta = {
-			root: Ae(this.parent) || (() => {
+			root: Ie(this.parent) || (() => {
 				throw Error("Can't find scene root");
 			})(),
 			emitter: e,
@@ -850,8 +881,8 @@ function je(e) {
 			anchor: this.position.clone(),
 			lastPosition: K(t),
 			newPosition: K(t),
-			onDragEnd: Ne(this),
-			onDragMove: Me(this)
+			onDragEnd: ze(this),
+			onDragMove: Re(this)
 		};
 		n.root.addEventListener("pointerup", n.onDragEnd, {
 			capture: !0,
@@ -865,18 +896,18 @@ function je(e) {
 		});
 	};
 }
-var Me = (e) => (t) => {
+var Re = (e) => (t) => {
 	if (!e._drag_meta?.dragging) return;
 	let { newPosition: n, lastPosition: r, anchor: i, emitter: a } = e._drag_meta;
 	K(t, n), n.x -= r.x, n.y -= r.y, a.dispatchEvent(W, {
 		x: i.x + n.x,
 		y: i.y + n.y
 	});
-}, Ne = (e) => () => {
+}, ze = (e) => () => {
 	if (!e._drag_meta) return;
 	let { root: t, emitter: n, onDragEnd: r, onDragMove: i } = e._drag_meta;
 	t.removeEventListener("pointerup", r), t.removeEventListener("pointerupoutside", r), t.removeEventListener("pointermove", i), n.dispatchEvent(G, !1), delete e._drag_meta;
-}, q = Symbol.for("E_NODE_CONTEXT"), J = Symbol.for("E_CONNECTORS_UPDATE"), Pe = class t extends e {
+}, q = Symbol.for("E_NODE_CONTEXT"), J = Symbol.for("E_CONNECTORS_UPDATE"), Be = class t extends e {
 	static label = V.factory("nodeLabel", {
 		fontSize: 24,
 		align: "center",
@@ -887,7 +918,7 @@ var Me = (e) => (t) => {
 	#e;
 	#t;
 	#n;
-	#r = je(this);
+	#r = Le(this);
 	data;
 	find;
 	ports = /* @__PURE__ */ new Map();
@@ -924,7 +955,7 @@ var Me = (e) => (t) => {
 	#i({ connect: e, input: t, source: { port: n }, target: r }) {
 		let i = this.connectors.find((e) => e.port === n && e.input === t);
 		if (!i) return;
-		j(e, i, r);
+		se(e, i, r);
 		let a = this.ports.get(n);
 		a && a.setActive(!!i.nodes.length);
 	}
@@ -949,7 +980,7 @@ var Me = (e) => (t) => {
 				input: !0,
 				x: n.x,
 				y: n.y,
-				connector: new Se(r.x, r.y)
+				connector: new Oe(r.x, r.y)
 			}), t++;
 		}
 		for (let t of this.data.outputs) this.#n.push({
@@ -1016,7 +1047,7 @@ var Me = (e) => (t) => {
 		return o.eventMode = "static", o.addEventListener("pointerdown", (e) => this.handleClick(e)), o.x = this.data.position.x, o.y = this.data.position.y, this.#t = o;
 	}
 	makeRoundRect({ stroke: e, fill: t, x: n = 0, y: r = 0, width: i, height: a, thickness: o = 1, radius: s = 4 }) {
-		let c = new z.Graphics();
+		let c = new R.Graphics();
 		return c.lineStyle(o, e), c.beginFill(t), c.drawRoundedRect(0, 0, i, a, s), c.endFill(), c.x = n, c.y = r, c;
 	}
 	makeLane(e) {
@@ -1028,7 +1059,7 @@ var Me = (e) => (t) => {
 		}, e));
 	}
 	makePort(e, t) {
-		let { port: n, x: r, y: i } = e, a = new ke(e, t);
+		let { port: n, x: r, y: i } = e, a = new Fe(e, t);
 		return this.ports.set(n, a), a.onClick((t) => {
 			if (t.buttons & 2) return this.dispatchEvent(q, {
 				event: t,
@@ -1093,13 +1124,13 @@ var Me = (e) => (t) => {
 		}
 		this.placeConnectors();
 	}
-}, Fe = {
+}, Ve = {
 	x: 0,
 	y: 0
-}, Ie = (e, t) => e.cell.x === t.cell.x && e.cell.y === t.cell.y && e.count.x === t.count.x && e.count.y === t.count.y && e.size.width === t.size.width && e.size.height === t.size.height, Y = (e, t, n) => e > t ? e < n ? e : n : t, X = (e, t, n, r, i) => Y(e - t / 2, n + i, r - t - i), Le = (e) => {
+}, He = (e, t) => e.cell.x === t.cell.x && e.cell.y === t.cell.y && e.count.x === t.count.x && e.count.y === t.count.y && e.size.width === t.size.width && e.size.height === t.size.height, Y = (e, t, n) => e > t ? e < n ? e : n : t, X = (e, t, n, r, i) => Y(e - t / 2, n + i, r - t - i), Ue = (e) => {
 	let t = Math.ceil(e);
 	return t % 2 ? t + 1 : t;
-}, Re = class e extends z.Graphics {
+}, We = class e extends R.Graphics {
 	static text = V.factory("GridBoundary", {
 		fontSize: 24,
 		fill: 16777215,
@@ -1114,10 +1145,10 @@ var Me = (e) => (t) => {
 	#n;
 	#r;
 	#i;
-	#a = new z.Rectangle(0, 0, 0, 0);
+	#a = new R.Rectangle(0, 0, 0, 0);
 	#o = {
-		cell: Fe,
-		count: Fe,
+		cell: Ve,
+		count: Ve,
 		size: {
 			width: 0,
 			height: 0
@@ -1126,13 +1157,13 @@ var Me = (e) => (t) => {
 	#s;
 	#c;
 	constructor(t, n, r = 5) {
-		super(), this.cellSize = t, this.colors = n, this.#e = r, this.#s = this.addChild(new z.Container()), this.#c = this.addChild(new z.Container()), this.#n = e.text("", { fontSize: 12 }), this.#t = e.text("", { fontSize: 12 }), this.#i = e.text("", { fontSize: 12 }), this.#r = e.text("", { fontSize: 12 });
+		super(), this.cellSize = t, this.colors = n, this.#e = r, this.#s = this.addChild(new R.Container()), this.#c = this.addChild(new R.Container()), this.#n = e.text("", { fontSize: 12 }), this.#t = e.text("", { fontSize: 12 }), this.#i = e.text("", { fontSize: 12 }), this.#r = e.text("", { fontSize: 12 });
 	}
 	get lods() {
 		return this.colors.length;
 	}
 	snapSize({ width: e, height: t }, n) {
-		let { x: r, y: i } = this.cellSize, a = n ? 2 ** (n - 1) * this.#e : 1, o = a * r, s = a * i, c = Le(e / o), l = Le(t / s);
+		let { x: r, y: i } = this.cellSize, a = n ? 2 ** (n - 1) * this.#e : 1, o = a * r, s = a * i, c = Ue(e / o), l = Ue(t / s);
 		return {
 			cell: {
 				x: o,
@@ -1154,24 +1185,24 @@ var Me = (e) => (t) => {
 	viewport(e) {
 		this.makeRullers(e);
 		let t = this.toMaxSnap(this.#a), n = this.toMaxSnap(e);
-		this.#s.x = (e.left + e.width) % n.cell.x, this.#s.y = (e.top + e.height) % n.cell.y, !Ie(t, n) && (this.#a.copyFrom(e), this.#o = n, this.update());
+		this.#s.x = (e.left + e.width) % n.cell.x, this.#s.y = (e.top + e.height) % n.cell.y, !He(t, n) && (this.#a.copyFrom(e), this.#o = n, this.update());
 	}
 	makeRullers(e) {
 		this.#c.removeChildren();
-		let t = this.#c.addChild(new z.Graphics()), { left: n, top: r, width: i, height: a } = e, o = n + i, s = r + a, c = Y(o, 1, i - 1), l = Y(s, 1, a - 1);
+		let t = this.#c.addChild(new R.Graphics()), { left: n, top: r, width: i, height: a } = e, o = n + i, s = r + a, c = Y(o, 1, i - 1), l = Y(s, 1, a - 1);
 		t.lineStyle(2, 16711680, 1), t.moveTo(0, l), t.lineTo(i, l), t.moveTo(c, 0), t.lineTo(c, a), this.#c.addChild(this.#n, this.#t, this.#i, this.#r), this.#n.text = ~~(-(i + n) / this.cellSize.x), this.#i.text = ~~(-(a + r) / this.cellSize.y), this.#t.text = ~~(-n / this.cellSize.x), this.#r.text = ~~(-r / this.cellSize.y);
 		let u = this.#n.height, d = this.#n.width, f = this.#t.width, p = this.#i.width, m = this.#r.width, h = X(l, u, 0, a, 2), g = X(c, p, d + 5, i - f - 5, 2), _ = X(c, m, d + 5, i - f - 5, 2);
 		this.#n.x = 2, this.#n.y = h, this.#t.x = i - f - 2, this.#t.y = h, this.#i.x = g, this.#i.y = 2, this.#r.x = _, this.#r.y = a - u - 2;
 	}
 	makeLOD(e) {
-		let t = this.colors[e], { cell: { x: n, y: r }, count: { x: i, y: a }, size: { width: o, height: s } } = this.snapSize(this.#o.size, e), c = new z.Graphics();
+		let t = this.colors[e], { cell: { x: n, y: r }, count: { x: i, y: a }, size: { width: o, height: s } } = this.snapSize(this.#o.size, e), c = new R.Graphics();
 		c.lineStyle(.25 * (e + 1), t, 1);
 		for (let e = 0; e < i; e++) c.moveTo(n * e, 0), c.lineTo(n * e, s);
 		for (let e = 0; e < a; e++) c.moveTo(0, r * e), c.lineTo(o, r * e);
 		return c;
 	}
 	makeGrid() {
-		let e = new z.Container();
+		let e = new R.Container();
 		for (let t of this.colors.keys()) e.addChild(this.makeLOD(t));
 		return e;
 	}
@@ -1183,7 +1214,7 @@ var Me = (e) => (t) => {
 			i.x = n * e, i.y = r * t, this.#s.addChild(i);
 		}
 	}
-}, ze = 24, Z = 12, Be = class e extends z.Container {
+}, Ge = 24, Z = 12, Ke = class e extends R.Container {
 	static label = V.factory("menuItem", {
 		fontSize: 24,
 		align: "center",
@@ -1194,13 +1225,13 @@ var Me = (e) => (t) => {
 	#n;
 	#r;
 	#i = 0;
-	#a = ze;
+	#a = Ge;
 	#o = !1;
 	#s = !1;
 	#c = !1;
 	index;
 	constructor(t, n, r) {
-		super(), this.index = t, this.#n = n, this.#s = !!n.separator, this.#r = !!n.group, this.#c = !!n.disabled || this.#r, this.#e = this.addChild(new z.Graphics()), this.#t = this.addChild(e.label(this.label, { fontSize: 12 })), this.eventMode = "static", this.addEventListener("pointerdown", (e) => {
+		super(), this.index = t, this.#n = n, this.#s = !!n.separator, this.#r = !!n.group, this.#c = !!n.disabled || this.#r, this.#e = this.addChild(new R.Graphics()), this.#t = this.addChild(e.label(this.label, { fontSize: 12 })), this.eventMode = "static", this.addEventListener("pointerdown", (e) => {
 			this.#c || (e.stopPropagation(), e.preventDefault(), r());
 		});
 	}
@@ -1241,7 +1272,7 @@ var Me = (e) => (t) => {
 		let e = this.width, t = this.height, n = this.#e;
 		this.separator ? (n.lineStyle(1, 1638, 1), n.moveTo(Z, 1), n.lineTo(e - Z, 1)) : this.#r ? (n.lineStyle(0, 0, 1), n.beginFill(3355443), n.drawRect(-1, 1, e + 2, t - 2), n.endFill()) : this.hover ? (n.lineStyle(0, 0, 1), n.beginFill(4473924), n.drawRoundedRect(0, 0, e, t, 4), n.endFill()) : n.clear(), this.#t.text = this.#n.label, this.#t.x = Z, this.#t.y = (t - this.#t.height) / 2, this.#t.alpha = this.#c && !this.#r ? .3 : 1, this.#t.tint = this.#r || this.hover ? 16777215 : 0;
 	}
-}, Ve = Symbol.for("E_ITEM_SELECT"), He = Symbol.for("E_CLOSE_MENU"), Ue = new z.Point(), We = class extends z.Container {
+}, qe = Symbol.for("E_ITEM_SELECT"), Je = Symbol.for("E_CLOSE_MENU"), Ye = new R.Point(), Xe = class extends R.Container {
 	#e;
 	#t;
 	#n;
@@ -1249,8 +1280,8 @@ var Me = (e) => (t) => {
 	#i;
 	#a = -1;
 	constructor(t) {
-		super(), this.#i = new e(), this.#n = this.addChild(new z.Graphics()), this.#e = this.addChild(new z.Graphics()), this.#t = this.addChild(new z.Container()), this.#r = t.items.map((e, t) => this.#t.addChild(new Be(t, e, () => this.handleSelect(e)))), this.#t.mask = this.#n, this.eventMode = "static", this.addEventListener("pointermove", (e) => {
-			this.hoverIndex = this.getItemAtY(e.getLocalPosition(this, Ue).y);
+		super(), this.#i = new e(), this.#n = this.addChild(new R.Graphics()), this.#e = this.addChild(new R.Graphics()), this.#t = this.addChild(new R.Container()), this.#r = t.items.map((e, t) => this.#t.addChild(new Ke(t, e, () => this.handleSelect(e)))), this.#t.mask = this.#n, this.eventMode = "static", this.addEventListener("pointermove", (e) => {
+			this.hoverIndex = this.getItemAtY(e.getLocalPosition(this, Ye).y);
 		}), this.addEventListener("pointerleave", () => {
 			this.hoverIndex = -1;
 		}), this.update();
@@ -1272,16 +1303,16 @@ var Me = (e) => (t) => {
 		n && (n.hover = t);
 	}
 	handleSelect(e) {
-		this.#i.dispatchEvent(Ve, e);
+		this.#i.dispatchEvent(qe, e);
 	}
 	close() {
-		this.visible = !1, this.#i.dispatchEvent(He);
+		this.visible = !1, this.#i.dispatchEvent(Je);
 	}
 	onSelect(e) {
-		return this.#i.handleEvent(Ve, e);
+		return this.#i.handleEvent(qe, e);
 	}
 	onClose(e) {
-		return this.#i.handleEvent(He, e);
+		return this.#i.handleEvent(Je, e);
 	}
 	get width() {
 		return Math.max(...this.#r.map((e) => e.labelWidth));
@@ -1297,7 +1328,7 @@ var Me = (e) => (t) => {
 		let i = 0;
 		for (let t of this.#r) t.y = i, t.resize(e), i += t.height;
 	}
-}, Ge = class {
+}, Ze = class {
 	ticker;
 	nodes = /* @__PURE__ */ new Map();
 	connectors = /* @__PURE__ */ new Map();
@@ -1321,7 +1352,7 @@ var Me = (e) => (t) => {
 	#e = t(() => this.ticker.speed = .05, 1e3);
 	#t = (e) => this.nodes.get(e);
 	constructor({ maxFPS: e, grid: t, gui: n = [] }) {
-		this.ticker = new z.Ticker(), this.world = new z.Container(), this.root = new z.Container(), this.overlay = new z.Container(), this.grid = new Re(t.cellSize, t.colors), this.world.sortableChildren = !0, this.ticker.maxFPS = e, this.world.__drag_root = !0, this.gui = n, this.root.addChild(this.grid), this.root.addChild(this.world), this.root.addChild(this.overlay), this.root.addChild(...n), this.ticker.add(this.render.bind(this)), this.world.eventMode = "static", this.world.hitArea = { contains: () => !0 }, this.world.addEventListener("pointermove", (e) => {
+		this.ticker = new R.Ticker(), this.world = new R.Container(), this.root = new R.Container(), this.overlay = new R.Container(), this.grid = new We(t.cellSize, t.colors), this.world.sortableChildren = !0, this.ticker.maxFPS = e, this.world.__drag_root = !0, this.gui = n, this.root.addChild(this.grid), this.root.addChild(this.world), this.root.addChild(this.overlay), this.root.addChild(...n), this.ticker.add(this.render.bind(this)), this.world.eventMode = "static", this.world.hitArea = { contains: () => !0 }, this.world.addEventListener("pointermove", (e) => {
 			this.handlePointerMove(this.fromGlobal(e.global));
 		}), this.world.addEventListener("pointerdown", (e) => {
 			this.handlePointerDown(this.fromGlobal(e.global), e);
@@ -1333,7 +1364,7 @@ var Me = (e) => (t) => {
 	get renderer() {
 		if (!this._renderer) {
 			let { viewport: e } = this.options;
-			this._renderer = (0, z.autoDetectRenderer)({
+			this._renderer = (0, R.autoDetectRenderer)({
 				width: e.width,
 				height: e.height,
 				antialias: e.antialias,
@@ -1387,7 +1418,7 @@ var Me = (e) => (t) => {
 		this.closeMenu();
 		let r = e.getMenu(t, n);
 		if (r) {
-			let t = this.overlay.addChild(Object.assign(new We(r), n));
+			let t = this.overlay.addChild(Object.assign(new Xe(r), n));
 			return t.onSelect((t) => {
 				!1 !== e.handleMenu(t.data) && this.closeMenu();
 			}), t.onClose(() => {
@@ -1397,7 +1428,7 @@ var Me = (e) => (t) => {
 	}
 	addNode(e) {
 		if (this.#t(e.id)) return;
-		let t = new Pe(e, this.#t);
+		let t = new Be(e, this.#t);
 		t.onMove((t) => {
 			this._pending || this.moveNodeTo(e.id, t);
 		}), t.onCapture((t) => {
@@ -1414,7 +1445,7 @@ var Me = (e) => (t) => {
 					t && (this.connectNodes(t), this.pending = null);
 					return;
 				}
-				this.pending = new Oe(e);
+				this.pending = new Pe(e);
 			}
 		}), t.onPortHover((e) => this.pending?.hoverPort(e)), t.onConnectorsUpdate(({ add: e, remove: t }) => {
 			if (e) for (let { uid: t, connector: n } of e) this.addConnector(t, n);
@@ -1516,7 +1547,7 @@ var Me = (e) => (t) => {
 	}
 	updateViewport() {
 		let { width: e, height: t, translation: { x: n, y: r } } = this;
-		e && t && this.grid.viewport(new z.Rectangle(n - e / 2, r - t / 2, e, t));
+		e && t && this.grid.viewport(new R.Rectangle(n - e / 2, r - t / 2, e, t));
 	}
 	render() {
 		this.renderer?.render(this.root);
@@ -1524,7 +1555,7 @@ var Me = (e) => (t) => {
 	update() {
 		this.ticker.update();
 	}
-}, Ke = "\nPort:\n  LMB - start connecting\n  LMB + (Meta | Ctrl) - start disconnecting\nCanvas:\n  LMB + Shift - drag while connecting/disconnecting", Q = class e extends z.Container {
+}, Qe = "\nPort:\n  LMB - start connecting\n  LMB + (Meta | Ctrl) - start disconnecting\nCanvas:\n  LMB + Shift - drag while connecting/disconnecting", Q = class e extends R.Container {
 	static text = V.factory("GUIText", {
 		fontSize: 16,
 		align: "left",
@@ -1539,7 +1570,7 @@ var Me = (e) => (t) => {
 	] });
 	static makeText = (e) => this.text(e, { fontSize: 8 });
 	#e;
-	#t = new z.Text("ℹ️", {
+	#t = new R.Text("ℹ️", {
 		fontSize: 8,
 		lineHeight: 14
 	});
@@ -1547,7 +1578,7 @@ var Me = (e) => (t) => {
 	#r = !1;
 	#i = "";
 	#a;
-	constructor(e, t = Ke) {
+	constructor(e, t = Qe) {
 		super(), this.#a = t, this.addChild(this.#t), this.addChild(this.#n), this.#t.eventMode = "static", this.#t.addEventListener("pointerdown", () => this.legend = !this.legend), this.#n.x = 8, this.#n.y = 8, this.#e = e;
 	}
 	getMenu(e, t) {
@@ -1571,7 +1602,7 @@ var Me = (e) => (t) => {
 	set legend(e) {
 		this.#r = e, this.#n.text = this.#i + (this.#r ? this.#a : "");
 	}
-}, qe = class extends z.Container {
+}, $e = class extends R.Container {
 	first;
 	constructor(e, ...t) {
 		super(), this.first = e, this.addChild(e, ...t);
@@ -1579,7 +1610,7 @@ var Me = (e) => (t) => {
 	hotSwap(...e) {
 		this.removeChildren(), this.addChild(this.first, ...e);
 	}
-}, Je = class extends z.Graphics {
+}, et = class extends R.Graphics {
 	#e;
 	#t;
 	constructor(e) {
@@ -1599,26 +1630,26 @@ var Me = (e) => (t) => {
 	}
 };
 O(/* @__PURE__ */ E({
-	Batch: () => _e,
+	Batch: () => z,
 	E_CONNECTORS_UPDATE: () => J,
 	E_NODE_CONTEXT: () => q,
 	LANE_HEIGHT: () => 16,
 	LANE_WIDTH: () => 16,
 	PIXIGUI: () => Q,
-	PIXINode: () => Pe,
-	PIXIOutlined: () => Je,
-	PIXIRenderer: () => Ge,
-	PIXIStacked: () => qe,
+	PIXINode: () => Be,
+	PIXIOutlined: () => et,
+	PIXIRenderer: () => Ze,
+	PIXIStacked: () => $e,
 	PORT_SIZE: () => 8,
-	RectSpinner: () => xe
-}), z);
+	RectSpinner: () => De
+}), R);
 //#endregion
 //#region src/graph/GraphAdapter.ts
-var Ye = class extends _e {
+var tt = class extends z {
 	renderer;
 	nodes = [];
 	constructor(e) {
-		super(), this.renderer = new Ge(e), this.and(() => this.renderer.render());
+		super(), this.renderer = new Ze(e), this.and(() => this.renderer.render());
 	}
 	[Symbol.iterator]() {
 		return this.nodes[Symbol.iterator]();
@@ -1681,7 +1712,7 @@ var Ye = class extends _e {
 };
 //#endregion
 //#region src/graph/NodeGroups.tsx
-function Xe(e, t) {
+function nt(e, t) {
 	let n = [];
 	for (let r of e) {
 		let e = t(r);
@@ -1697,23 +1728,23 @@ function Xe(e, t) {
 		getAll: () => [r]
 	};
 }
-var Ze = (e, t) => {
+var rt = (e, t) => {
 	let n = e.length;
 	if (n !== t.length) return !1;
 	for (let r = 0; r < n; r++) if (e[r] !== t[r]) return !1;
 	return !0;
-}, Qe = (e) => {
+}, it = (e) => {
 	let t = e.map(String);
 	return (e) => t.includes(String(e.value));
-}, $e = (e, t) => e.every((e) => t.some((t) => t.value === e.value)) && Ze(e.flatMap(tt), t.flatMap(tt)), et = (e) => e.value, tt = (e) => e.ids, $ = v(function({ items: e, resolver: t, onSelect: n, children: r, ...a }) {
-	let { groups: c, getAll: u } = s(() => Xe(e, t), [e, t]), [d, f] = l(u), p = s(() => d.map((e) => String(e.value)), [d]), h = m(({ target: { selectedOptions: e } }) => {
-		let t = c.filter(Qe(Array.from(e, et)));
+}, at = (e, t) => e.every((e) => t.some((t) => t.value === e.value)) && rt(e.flatMap(ot), t.flatMap(ot)), $ = (e) => e.value, ot = (e) => e.ids, st = v(function({ items: e, resolver: t, onSelect: n, children: r, ...a }) {
+	let { groups: c, getAll: u } = s(() => nt(e, t), [e, t]), [d, f] = l(u), p = s(() => d.map((e) => String(e.value)), [d]), h = m(({ target: { selectedOptions: e } }) => {
+		let t = c.filter(it(Array.from(e, $)));
 		t && f(t);
 	});
 	return i(() => void n(d), [d, n]), o(() => {
-		let e = c.filter(Qe(d.map(et)));
+		let e = c.filter(it(d.map($)));
 		if (e) {
-			if ($e(e, d)) return;
+			if (at(e, d)) return;
 			f(e);
 		} else f(u);
 	}, [
@@ -1731,8 +1762,8 @@ var Ze = (e, t) => {
 			children: t
 		}, String(e)))]
 	});
-}), nt = v(({ ref: e, handlers: t, onResize: n, ...r }) => {
-	let [o, s] = h(), { bind: c, reset: l } = R(t);
+}), ct = v(({ ref: e, handlers: t, onResize: n, ...r }) => {
+	let [o, s] = h(), { bind: c, reset: l } = ge(t);
 	return a(e, () => ({
 		reset: l,
 		get element() {
@@ -1745,31 +1776,19 @@ var Ze = (e, t) => {
 		});
 	}, [o, n]), /* @__PURE__ */ y("div", {
 		ref: s,
-		style: rt.root,
+		style: lt.root,
 		children: /* @__PURE__ */ y("div", {
-			style: rt.root,
+			style: lt.root,
 			...c,
 			...r
 		})
 	});
-}), rt = u.of({ root: {
+}), lt = u.of({ root: {
 	flex: 1,
 	display: "flex",
 	minWidth: 0,
 	minHeight: 0
-} }), it = v(({ onSelect: e, ...t }) => /* @__PURE__ */ y($, {
-	resolver: at,
-	onSelect: m((t) => e(t.ids)),
-	...t
-})), at = (e) => {
-	if (!e.item.isolator) return;
-	let t = [e.id];
-	return {
-		value: e.id,
-		label: e.title,
-		ids: t
-	};
-}, ot = (e, t, { onEdit: n, onConnect: r, onMove: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s, onDelete: c, onSelect: l, onContextMenu: u } = {}) => ({
+} }), ut = (e, t, { onEdit: n, onConnect: r, onMove: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s, onDelete: c, onSelect: l, onContextMenu: u } = {}) => ({
 	canvas: {
 		onSelectNode: (t, n) => l?.(t?.item || null, e.toData(n)),
 		onContextMenu: (t, n) => u?.(t?.item || null, e.toData(n))
@@ -1799,11 +1818,23 @@ var Ze = (e, t) => {
 		onDeletePort: async (e, t) => s?.(e.item, t),
 		onDelete: async (e) => c?.(e.item)
 	}
-}), st = {
+}), dt = v(({ onSelect: e, ...t }) => /* @__PURE__ */ y(st, {
+	resolver: ft,
+	onSelect: m((t) => e(t.ids)),
+	...t
+})), ft = (e) => {
+	if (!e.item.isolator) return;
+	let t = [e.id];
+	return {
+		value: e.id,
+		label: e.title,
+		ids: t
+	};
+}, pt = {
 	x: 0,
 	y: 0
-}, ct = v(function({ innerRef: e, nodes: t, subset: n, coordinator: r, layouter: l, menu: u, onSelectNode: d, onContextMenu: f, ...p }) {
-	let h = c(st), g = c(null), _ = s(() => new Q(u), [u]), v = s(() => new Ye({
+}, mt = v(function({ innerRef: e, nodes: t, subset: n, coordinator: r, layouter: l, menu: u, onSelectNode: d, onContextMenu: f, ...p }) {
+	let h = c(pt), g = c(null), _ = s(() => new Q(u), [u]), v = s(() => new tt({
 		maxFPS: 120,
 		grid: {
 			cellSize: r.gridSize,
@@ -1868,15 +1899,15 @@ var Ze = (e, t) => {
 			antialias: !0,
 			transparent: !1
 		} });
-	}, [v]), /* @__PURE__ */ y(nt, {
+	}, [v]), /* @__PURE__ */ y(ct, {
 		ref: g,
 		handlers: D,
 		onResize: b,
 		...p
 	});
-}), lt = (e, { onEdit: t, onMove: n, onConnect: r, onDelete: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s }) => {
+}), ht = (e, { onEdit: t, onMove: n, onConnect: r, onDelete: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s }) => {
 	e.onConnect(r), e.onMove((t) => n(e, t)), e.onEditAction(() => t(e)), e.onDeleteAction(() => i(e)), e.onAddPortAction((t) => a(e, t)), e.onDisconnectPortAction(({ port: t }) => o(e, t)), e.onDeletePortAction(({ port: t }) => s(e, t));
-}, ut = (e, t, { added: n, removed: r }) => {
+}, gt = (e, t, { added: n, removed: r }) => {
 	if (n.length) {
 		let r = n.reduce((e, t) => (e[t.id] = t, e), {}), i = (t) => r[t] || e.find((e) => e.id === t);
 		for (let e of n) {
@@ -1900,11 +1931,11 @@ var Ze = (e, t) => {
 				}
 			}
 		}
-		if (t) for (let e of n) lt(e, t);
+		if (t) for (let e of n) ht(e, t);
 		e.add(n);
 	}
 	if (r.length) for (let t of r) e.remove(t);
-}, dt = () => [{
+}, _t = () => [{
 	label: "Add node",
 	items: [{
 		label: "+ Call",
@@ -1959,13 +1990,13 @@ var Ze = (e, t) => {
 			}
 		}
 	]
-}], ft = (e, t) => ({
+}], vt = (e, t) => ({
 	getMenu(t, n) {
 		let r = {
 			action: "add",
 			...e.toData(n)
 		};
-		return { items: dt().map(({ label: e, items: t }) => [{
+		return { items: _t().map(({ label: e, items: t }) => [{
 			label: e,
 			group: !0
 		}, ...t.map(({ label: e, data: t, ...n }) => ({
@@ -1984,7 +2015,7 @@ var Ze = (e, t) => {
 				return;
 		}
 	}
-}), pt = (e, t) => {
+}), yt = (e, t) => {
 	let n = c([]);
 	p(() => {
 		let i = t?.filter((e) => !n.current.some(r(e.id))), a = n.current.filter((e) => !t?.some(r(e.id)));
@@ -1992,8 +2023,8 @@ var Ze = (e, t) => {
 		if (i) for (let { id: t } of i) e.find(r(t))?.setSelected(!0);
 		n.current = t || [];
 	}, [t, e]);
-}, mt = (e) => e.startsWith("channel_"), ht = (e) => mt(e) ? e.slice(8) : "", gt = (e) => ({ id: t, name: n, input: r, to: i, port: a }) => {
-	let o = ht(n);
+}, bt = (e) => e.startsWith("channel_"), xt = (e) => bt(e) ? e.slice(8) : "", St = (e) => ({ id: t, name: n, input: r, to: i, port: a }) => {
+	let o = xt(n);
 	o && (n = `${r ? "> " : ""}@${o}${r ? "" : " >"}`);
 	let s = [];
 	if (i) {
@@ -2008,11 +2039,11 @@ var Ze = (e, t) => {
 		name: n,
 		nodes: s
 	};
-}, _t = /* @__PURE__ */ function(e) {
+}, Ct = /* @__PURE__ */ function(e) {
 	return e[e.Idle = 1] = "Idle", e[e.Processing = 2] = "Processing", e[e.Done = 4] = "Done", e[e.Error = 8] = "Error", e[e.Selected = 16] = "Selected", e;
-}({}), vt = /* @__PURE__ */ function(e) {
+}({}), wt = /* @__PURE__ */ function(e) {
 	return e[e.EDIT_NODE = 1] = "EDIT_NODE", e[e.ADD_PORT = 2] = "ADD_PORT", e[e.DISCONNECT_PORT = 3] = "DISCONNECT_PORT", e[e.DELETE_PORT = 4] = "DELETE_PORT", e[e.DELETE_NODE = 5] = "DELETE_NODE", e;
-}({}), yt = class extends ie {
+}({}), Tt = class extends N {
 	#e;
 	#t;
 	constructor({ finder: e, item: t, coordinator: n, toTitle: r }) {
@@ -2023,8 +2054,8 @@ var Ze = (e, t) => {
 			progress: 0,
 			id: t.id,
 			title: r(t),
-			inputs: t.ports.filter(({ input: e }) => !!e).map(gt(e)),
-			outputs: t.ports.filter(({ input: e }) => !e).map(gt(e))
+			inputs: t.ports.filter(({ input: e }) => !!e).map(St(e)),
+			outputs: t.ports.filter(({ input: e }) => !e).map(St(e))
 		}), this.position = this.coordinator.toGraph(t);
 	}
 	dispose() {
@@ -2145,13 +2176,13 @@ var Ze = (e, t) => {
 	}
 	render(e) {
 		let t = e.width - 1, n = e.height - 1;
-		return this.#t ? this.#t.hotSwap(e) : this.#t = new qe(new Je({
+		return this.#t ? this.#t.hotSwap(e) : this.#t = new $e(new et({
 			width: t,
 			height: n,
 			color: 3407871,
 			lineSize: 1,
 			radius: 6
-		}), e), this.#t.first.active = this.isSelected, this.#e ? this.#e.hotSwap(this.#t) : this.#e = new xe(this.#t, {
+		}), e), this.#t.first.active = this.isSelected, this.#e ? this.#e.hotSwap(this.#t) : this.#e = new De(this.#t, {
 			sizeX: t,
 			sizeY: n,
 			color: 3355647,
@@ -2159,15 +2190,15 @@ var Ze = (e, t) => {
 			radius: 6
 		}), this.#e.setActive(this.isInProgress), this.#e;
 	}
-}, bt = ({ coordinator: e, sync: t, onUpdate: n, store: r, toTitle: i }) => {
+}, Et = ({ coordinator: e, sync: t, onUpdate: n, store: r, toTitle: i }) => {
 	let a = c(t), o = s(() => ({
 		subscribe: (e) => r.onChange(e),
 		getSnapshot: () => r.get(),
 		selector: (e) => e.sort((e, t) => e.id.localeCompare(t.id)),
-		is: I
+		is: L
 	}), [r]), l = _(o.subscribe, o.getSnapshot, o.getSnapshot, o.selector, o.is), u = g(l), d = m((e) => l.find((t) => t.id === e));
 	a.current = t, p(() => {
-		let t = (t) => new yt({
+		let t = (t) => new Tt({
 			finder: d,
 			item: t,
 			coordinator: e,
@@ -2184,90 +2215,60 @@ var Ze = (e, t) => {
 			removed: []
 		});
 	}, [l, i]), p(() => x(() => l, n), []);
-}, xt = class {
-	grid;
-	gridSize;
-	sizes;
-	constructor({ grid: e = 16, port: t = 8, lane: n = 16, space: r = 32 } = {}) {
-		this.grid = e, this.gridSize = {
-			x: e,
-			y: e
-		}, this.sizes = {
-			grid: this.gridSize,
-			port: t,
-			lane: n,
-			space: r
-		};
-	}
-	snap(e) {
-		let t = e < 0 ? -1 : 1;
-		return t * (Math.round(t * e / this.grid + .5) - .5) * this.grid;
-	}
-	toGraph({ x: e, y: t }) {
-		return {
-			x: (e - .5) * this.grid,
-			y: (t - .5) * this.grid
-		};
-	}
-	toData({ x: e, y: t }) {
-		return {
-			x: ~~(this.snap(e) / this.grid + .5),
-			y: ~~(this.snap(t) / this.grid + .5)
-		};
-	}
-}, St = v(({ innerRef: e, graph: t, selected: n, sizes: r, handlers: i, children: o, onExport: u, ...f }) => {
-	let p = c(null), h = s(() => new xt(r), [r]), g = ft(h, i?.onCreate), [_, v] = L(() => new F()), [x, S] = l(), { canvas: C, loader: w } = ot(h, _, i), T = m(() => u?.(t));
+}, Dt = v(({ innerRef: e, graph: t, layouter: n, selected: r, sizes: i, handlers: o, children: u, onExport: f, ...p }) => {
+	let h = c(null), g = s(() => new ie(i), [i]), _ = vt(g, o?.onCreate), [v, x] = he(() => new I()), [S, C] = l(), { canvas: w, loader: T } = ut(g, v, o), E = m(() => f?.(t));
 	return a(e, () => ({
 		get graph() {
-			return p.current?.graph;
+			return h.current?.graph;
 		},
 		get element() {
-			return p.current?.element;
+			return h.current?.element;
 		}
-	})), bt({
+	})), Et({
 		store: s(() => {
-			let e = new F(t.items);
+			let e = new I(t.items);
 			return {
 				items: e,
 				get: () => e.all,
 				onChange: (t) => e.onChange(t)
 			};
 		}, [t.items]),
-		coordinator: h,
+		coordinator: g,
 		toTitle: (e) => e.title,
-		sync: (e) => ut(_, w, e),
+		sync: (e) => gt(v, T, e),
 		onUpdate: () => e?.current?.graph.layout()
-	}), pt(v, n), /* @__PURE__ */ b("div", {
+	}), yt(x, r), /* @__PURE__ */ b("div", {
 		onContextMenu: d,
-		style: Ct.root,
-		...f,
+		style: Ot.root,
+		...p,
 		children: [/* @__PURE__ */ b("div", {
-			style: Ct.selector,
+			style: Ot.selector,
 			children: [
-				o,
-				/* @__PURE__ */ y(it, {
-					items: v,
-					onSelect: S
+				u,
+				/* @__PURE__ */ y(dt, {
+					items: x,
+					onSelect: C
 				}),
 				/* @__PURE__ */ y("button", {
-					onClick: () => S(void 0),
+					onClick: () => C(void 0),
 					children: "Update"
 				}),
-				u && /* @__PURE__ */ y("button", {
-					onClick: T,
+				f && /* @__PURE__ */ y("button", {
+					onClick: E,
 					children: "Export"
 				})
 			]
-		}), /* @__PURE__ */ y(ct, {
-			innerRef: p,
-			coordinator: h,
-			nodes: v,
-			subset: x,
-			menu: g,
-			...C
+		}), /* @__PURE__ */ y(mt, {
+			innerRef: h,
+			coordinator: g,
+			layouter: n,
+			nodes: x,
+			subset: S,
+			menu: _,
+			...w
 		})]
 	});
-}), Ct = u.of({
+}), Ot = u.of({
 	root: {
 		flex: 1,
 		display: "flex",
@@ -2281,6 +2282,6 @@ var Ze = (e, t) => {
 	}
 });
 //#endregion
-export { oe as ClusteredLayout, ce as EdgesSort, Ye as GraphAdapter, ct as GraphCanvas, ie as GraphNode, M as GraphNodeJoints, ae as LayeredLayout, le as Layouter, St as ManagedGraph, yt as ManagedGraphNode, vt as MenuActions, $ as NodeGroups, _t as NodeStatus, N as NodesGraph, se as NodesSort, Q as PIXIGUI, F as Store, nt as Viewport, ht as getChannelName, mt as isChannelName, I as isEqualIdentifiables, R as useDraggable, L as useStore };
+export { de as ClusteredLayout, ie as Coordinates, pe as EdgesSort, ee as GRID_SIZE, tt as GraphAdapter, mt as GraphCanvas, N as GraphNode, j as GraphNodeJoints, ne as LANE_SIZE, ue as LayeredLayout, me as Layouter, Dt as ManagedGraph, Tt as ManagedGraphNode, wt as MenuActions, st as NodeGroups, Ct as NodeStatus, P as NodesGraph, fe as NodesSort, Q as PIXIGUI, te as PORT_SIZE, re as SPACE_SIZE, I as Store, ct as Viewport, xt as getChannelName, ae as groupResolver, bt as isChannelName, L as isEqualIdentifiables, ge as useDraggable, he as useStore };
 
 //# sourceMappingURL=index.js.map