@ankhzet/graph 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ankhzet/graph
 
+## 0.4.1
+
+### Patch Changes
+
+- Fix graph nodes render
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -445,7 +445,7 @@ export declare function NodeGroups<Item extends GroupableItem<any>>({ items, res
 export declare interface NodeGroupsProps<T extends GroupableItem<any>> extends PropsWithChildren {
     items: T[];
     resolver: GroupResolver<T>;
-    onSelect: (group: ItemsGroup<T['id']>) => void;
+    onSelect: (groups: ItemsGroup<T['id']>[]) => void;
 }
 
 export declare type NodeJoinRequest<ID> = {

package/dist/index.js

@@ -162,7 +162,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		});
 	}
 	move(e) {
-		return this.position = e, this.position;
+		return this.position = e;
 	}
 	onConnect(e) {
 		return this.handleEvent(j, e);
@@ -926,7 +926,7 @@ var Me = (e) => (t) => {
 		return e < n || t < r ? !1 : e - n <= this.width && t - r <= this.height;
 	}
 	get width() {
-		return Math.max(this.data.width, this.#e.width + 2);
+		return Math.max(this.data.width, this.#e.width + 6);
 	}
 	get height() {
 		return this.data.height + 16;
@@ -943,33 +943,35 @@ var Me = (e) => (t) => {
 	}
 	get connectors() {
 		if (this.#n) return this.#n;
-		let e = [], t = 1, n = 1;
-		for (let n of this.data.inputs) {
-			let r = {
+		let e = this.width;
+		this.#n = [];
+		let t = 1, n = 1;
+		for (let e of this.data.inputs) {
+			let n = {
 				x: 16 / 2,
 				y: t * 16 + 16 / 2
-			}, i = O(this.data.position, r);
-			e.push({
+			}, r = O(this.data.position, n);
+			this.#n.push({
 				parent: this.data.id,
-				port: n.port,
-				name: n.name,
-				nodes: n.nodes,
+				port: e.port,
+				name: e.name,
+				nodes: e.nodes,
 				input: !0,
-				x: r.x,
-				y: r.y,
-				connector: new Se(i.x, i.y)
+				x: n.x,
+				y: n.y,
+				connector: new Se(r.x, r.y)
 			}), t++;
 		}
-		for (let t of this.data.outputs) e.push({
+		for (let t of this.data.outputs) this.#n.push({
 			parent: this.data.id,
 			port: t.port,
 			name: t.name,
 			nodes: t.nodes,
 			input: !1,
-			x: 64 - 16 / 2,
+			x: e - 16 / 2,
 			y: n * 16 + 16 / 2
 		}), n++;
-		return this.#n = e;
+		return this.#n;
 	}
 	placeConnectors(e = !0) {
 		let t = /* @__PURE__ */ new Map(), n = [];
@@ -1612,7 +1614,6 @@ D(/* @__PURE__ */ E({
 	E_NODE_CONTEXT: () => q,
 	LANE_HEIGHT: () => 16,
 	LANE_WIDTH: () => 16,
-	NODE_WIDTH: () => 64,
 	PIXIGUI: () => Q,
 	PIXINode: () => Pe,
 	PIXIOutlined: () => Je,
@@ -1696,11 +1697,15 @@ function Xe(e, t) {
 		let e = t(r);
 		e && n.push(e);
 	}
-	return n.sort((e, t) => e.label.localeCompare(t.label)).concat([{
+	let r = {
 		value: "all",
 		ids: e.map(({ id: e }) => e),
 		label: `All nodes (${e.length})`
-	}]);
+	};
+	return {
+		groups: n.sort((e, t) => e.label.localeCompare(t.label)).concat([r]),
+		getAll: () => [r]
+	};
 }
 var Ze = (e, t) => {
 	let n = e.length;
@@ -1708,31 +1713,35 @@ var Ze = (e, t) => {
 	for (let r = 0; r < n; r++) if (e[r] !== t[r]) return !1;
 	return !0;
 }, Qe = (e) => {
-	let t = String(e);
-	return (e) => String(e.value) === t;
-}, $e = v(function({ items: e, resolver: t, onSelect: n, children: r, ...a }) {
-	let c = s(() => Xe(e, t), [e, t]), [u, d] = l(c.find(({ value: e }) => e === "all")), f = m(({ target: { value: e } }) => {
-		let t = c.find(Qe(e));
-		t && d(t);
+	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)));
+		t && f(t);
 	});
-	return i(() => void n(u), [u, n]), o(() => {
-		let e = c.find(Qe(u.value));
+	return i(() => void n(d), [d, n]), o(() => {
+		let e = c.filter(Qe(d.map(et)));
 		if (e) {
-			if (e === u) return;
-			(e.label !== u.label || !Ze(e.ids, u.ids)) && d(e);
-		} else d(c[0]);
-	}, [c, u]), /* @__PURE__ */ b("select", {
+			if ($e(e, d)) return;
+			f(e);
+		} else f(u);
+	}, [
+		c,
+		u,
+		d
+	]), /* @__PURE__ */ b("select", {
 		multiple: !0,
 		size: c.length,
-		value: String(u.value),
-		onChange: f,
+		value: p,
+		onChange: h,
 		...a,
 		children: [r, c.map(({ value: e, label: t }) => /* @__PURE__ */ y("option", {
 			value: String(e),
 			children: t
 		}, String(e)))]
 	});
-}), et = v(({ ref: e, handlers: t, onResize: n, ...r }) => {
+}), nt = v(({ ref: e, handlers: t, onResize: n, ...r }) => {
 	let [o, s] = h(), { bind: c, reset: l } = R(t);
 	return a(e, () => ({
 		reset: l,
@@ -1746,23 +1755,23 @@ var Ze = (e, t) => {
 		});
 	}, [o, n]), /* @__PURE__ */ y("div", {
 		ref: s,
-		style: $.root,
+		style: rt.root,
 		children: /* @__PURE__ */ y("div", {
-			style: $.root,
+			style: rt.root,
 			...c,
 			...r
 		})
 	});
-}), $ = u.of({ root: {
+}), rt = u.of({ root: {
 	flex: 1,
 	display: "flex",
 	minWidth: 0,
 	minHeight: 0
-} }), tt = v(({ onSelect: e, ...t }) => /* @__PURE__ */ y($e, {
-	resolver: nt,
+} }), it = v(({ onSelect: e, ...t }) => /* @__PURE__ */ y($, {
+	resolver: at,
 	onSelect: m((t) => e(t.ids)),
 	...t
-})), nt = (e) => {
+})), at = (e) => {
 	if (!e.item.isolator) return;
 	let t = [e.id];
 	return {
@@ -1770,7 +1779,7 @@ var Ze = (e, t) => {
 		label: e.title,
 		ids: t
 	};
-}, rt = (e, t, { onEdit: n, onConnect: r, onMove: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s, onDelete: c, onSelect: l, onContextMenu: u } = {}) => ({
+}, ot = (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))
@@ -1800,11 +1809,11 @@ var Ze = (e, t) => {
 		onDeletePort: async (e, t) => s?.(e.item, t),
 		onDelete: async (e) => c?.(e.item)
 	}
-}), it = {
+}), st = {
 	x: 0,
 	y: 0
-}, at = v(function({ innerRef: e, nodes: t, subset: n, coordinator: r, menu: l, onSelectNode: u, onContextMenu: d, ...f }) {
-	let p = c(it), h = c(null), g = s(() => new Q(l), [l]), _ = s(() => new Ye({
+}, ct = v(function({ innerRef: e, nodes: t, subset: n, coordinator: r, menu: l, onSelectNode: u, onContextMenu: d, ...f }) {
+	let p = c(st), h = c(null), g = s(() => new Q(l), [l]), _ = s(() => new Ye({
 		maxFPS: 120,
 		grid: {
 			cellSize: r.gridSize,
@@ -1865,15 +1874,15 @@ var Ze = (e, t) => {
 			antialias: !0,
 			transparent: !1
 		} });
-	}, [_]), /* @__PURE__ */ y(et, {
+	}, [_]), /* @__PURE__ */ y(nt, {
 		ref: h,
 		handlers: E,
 		onResize: v,
 		...f
 	});
-}), ot = (e, { onEdit: t, onMove: n, onConnect: r, onDelete: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s }) => {
+}), lt = (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));
-}, st = (e, t, { added: n, removed: r }) => {
+}, ut = (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) {
@@ -1897,11 +1906,11 @@ var Ze = (e, t) => {
 				}
 			}
 		}
-		if (t) for (let e of n) ot(e, t);
+		if (t) for (let e of n) lt(e, t);
 		e.add(n);
 	}
 	if (r.length) for (let t of r) e.remove(t);
-}, ct = () => [{
+}, dt = () => [{
 	label: "Add node",
 	items: [{
 		label: "+ Call",
@@ -1956,13 +1965,13 @@ var Ze = (e, t) => {
 			}
 		}
 	]
-}], lt = (e, t) => ({
+}], ft = (e, t) => ({
 	getMenu(t, n) {
 		let r = {
 			action: "add",
 			...e.toData(n)
 		};
-		return { items: ct().map(({ label: e, items: t }) => [{
+		return { items: dt().map(({ label: e, items: t }) => [{
 			label: e,
 			group: !0
 		}, ...t.map(({ label: e, data: t, ...n }) => ({
@@ -1981,7 +1990,7 @@ var Ze = (e, t) => {
 				return;
 		}
 	}
-}), ut = (e, t) => {
+}), pt = (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)));
@@ -1989,8 +1998,8 @@ var Ze = (e, t) => {
 		if (i) for (let { id: t } of i) e.find(r(t))?.setSelected(!0);
 		n.current = t || [];
 	}, [t, e]);
-}, dt = (e) => e.startsWith("channel_"), ft = (e) => dt(e) ? e.slice(8) : "", pt = (e) => ({ id: t, name: n, input: r, to: i, port: a }) => {
-	let o = ft(n);
+}, 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);
 	o && (n = `${r ? "> " : ""}@${o}${r ? "" : " >"}`);
 	let s = [];
 	if (i) {
@@ -2005,11 +2014,11 @@ var Ze = (e, t) => {
 		name: n,
 		nodes: s
 	};
-}, mt = /* @__PURE__ */ function(e) {
+}, _t = /* @__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;
-}({}), ht = /* @__PURE__ */ function(e) {
+}({}), vt = /* @__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;
-}({}), gt = class extends ie {
+}({}), yt = class extends ie {
 	#e;
 	#t;
 	constructor({ finder: e, item: t, coordinator: n, toTitle: r }) {
@@ -2020,8 +2029,8 @@ var Ze = (e, t) => {
 			progress: 0,
 			id: t.id,
 			title: r(t),
-			inputs: t.ports.filter(({ input: e }) => !!e).map(pt(e)),
-			outputs: t.ports.filter(({ input: e }) => !e).map(pt(e))
+			inputs: t.ports.filter(({ input: e }) => !!e).map(gt(e)),
+			outputs: t.ports.filter(({ input: e }) => !e).map(gt(e))
 		}), this.position = this.coordinator.toGraph(t);
 	}
 	dispose() {
@@ -2141,22 +2150,22 @@ var Ze = (e, t) => {
 		return !!(this.description.status & 2) || this.description.progress > 0;
 	}
 	render(e) {
-		let t = ~~e.width - 1, n = ~~e.height - 2;
+		let t = e.width - 1, n = e.height - 1;
 		return this.#t ? this.#t.hotSwap(e) : this.#t = new qe(new Je({
 			width: t,
 			height: n,
 			color: 3407871,
 			lineSize: 1,
-			radius: 4
+			radius: 6
 		}), e), this.#t.first.active = this.isSelected, this.#e ? this.#e.hotSwap(this.#t) : this.#e = new xe(this.#t, {
 			sizeX: t,
 			sizeY: n,
 			color: 3355647,
 			lineSize: 3,
-			radius: 4
+			radius: 6
 		}), this.#e.setActive(this.isInProgress), this.#e;
 	}
-}, _t = ({ coordinator: e, sync: t, onUpdate: n, store: r, toTitle: i }) => {
+}, bt = ({ coordinator: e, sync: t, onUpdate: n, store: r, toTitle: i }) => {
 	let a = c(t), o = s(() => ({
 		subscribe: (e) => r.onChange(e),
 		getSnapshot: () => r.get(),
@@ -2164,7 +2173,7 @@ var Ze = (e, t) => {
 		is: I
 	}), [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 gt({
+		let t = (t) => new yt({
 			finder: d,
 			item: t,
 			coordinator: e,
@@ -2181,7 +2190,7 @@ var Ze = (e, t) => {
 			removed: []
 		});
 	}, [l, i]), p(() => x(() => l, n), []);
-}, vt = class {
+}, xt = class {
 	grid;
 	gridSize;
 	sizes;
@@ -2212,8 +2221,8 @@ var Ze = (e, t) => {
 			y: ~~(this.snap(t) / this.grid + .5)
 		};
 	}
-}, yt = v(({ innerRef: e, graph: t, selected: n, sizes: r, handlers: i, children: o, onExport: u, ...f }) => {
-	let p = c(null), h = s(() => new vt(r), [r]), g = lt(h, i?.onCreate), [_, v] = L(() => new F()), [x, S] = l(), { canvas: C, loader: w } = rt(h, _, i), T = m(() => u?.(t));
+}, 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));
 	return a(e, () => ({
 		get graph() {
 			return p.current?.graph;
@@ -2221,7 +2230,7 @@ var Ze = (e, t) => {
 		get element() {
 			return p.current?.element;
 		}
-	})), _t({
+	})), bt({
 		store: s(() => {
 			let e = new F(t.items);
 			return {
@@ -2232,17 +2241,17 @@ var Ze = (e, t) => {
 		}, [t.items]),
 		coordinator: h,
 		toTitle: (e) => e.title,
-		sync: (e) => st(_, w, e),
+		sync: (e) => ut(_, w, e),
 		onUpdate: () => e?.current?.graph.layout()
-	}), ut(v, n), /* @__PURE__ */ b("div", {
+	}), pt(v, n), /* @__PURE__ */ b("div", {
 		onContextMenu: d,
-		style: bt.root,
+		style: Ct.root,
 		...f,
 		children: [/* @__PURE__ */ b("div", {
-			style: bt.selector,
+			style: Ct.selector,
 			children: [
 				o,
-				/* @__PURE__ */ y(tt, {
+				/* @__PURE__ */ y(it, {
 					items: v,
 					onSelect: S
 				}),
@@ -2255,7 +2264,7 @@ var Ze = (e, t) => {
 					children: "Export"
 				})
 			]
-		}), /* @__PURE__ */ y(at, {
+		}), /* @__PURE__ */ y(ct, {
 			innerRef: p,
 			coordinator: h,
 			nodes: v,
@@ -2264,7 +2273,7 @@ var Ze = (e, t) => {
 			...C
 		})]
 	});
-}), bt = u.of({
+}), Ct = u.of({
 	root: {
 		flex: 1,
 		display: "flex",
@@ -2278,6 +2287,6 @@ var Ze = (e, t) => {
 	}
 });
 //#endregion
-export { oe as ClusteredLayout, ce as EdgesSort, Ye as GraphAdapter, at as GraphCanvas, ie as GraphNode, A as GraphNodeJoints, ae as LayeredLayout, le as Layouter, yt as ManagedGraph, gt as ManagedGraphNode, ht as MenuActions, $e as NodeGroups, mt as NodeStatus, N as NodesGraph, se as NodesSort, Q as PIXIGUI, F as Store, et as Viewport, ft as getChannelName, dt as isChannelName, I as isEqualIdentifiables, R as useDraggable, L as useStore };
+export { oe as ClusteredLayout, ce as EdgesSort, Ye as GraphAdapter, ct as GraphCanvas, ie as GraphNode, A 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 };
 
 //# sourceMappingURL=index.js.map