@ankhzet/graph 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ankhzet/graph
 
+## 0.5.0
+
+### Minor Changes
+
+- Add layouter prop to canvas
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -135,7 +135,7 @@ export declare class GraphAdapter<Node extends GraphNodeInterface> extends Batch
 
 export declare type GraphBarrier<N extends GraphNodeInterface> = (node: N) => boolean;
 
-export declare function GraphCanvas<Node extends GraphNodeInterface<ID, Data, Render>, ID = any, Data = any, Render = any>({ innerRef, nodes, subset, coordinator, menu, onSelectNode, onContextMenu, ...rest }: GraphNodeProps<Node>): JSX.Element;
+export declare function GraphCanvas<Node extends GraphNodeInterface<ID, Data, Render>, ID = any, Data = any, Render = any>({ innerRef, nodes, subset, coordinator, layouter, menu, onSelectNode, onContextMenu, ...rest }: GraphNodeProps<Node>): JSX.Element;
 
 declare interface GraphDTO {
     title: string;
@@ -231,6 +231,7 @@ export declare class GraphNodeJoints<ID> implements NodeJoints<ID> {
 export declare interface GraphNodeProps<Node extends GraphNodeInterface> {
     innerRef?: Ref<GraphRef<Node>>;
     coordinator: Coordinator;
+    layouter?: Layouter<Node>;
     nodes: Node[];
     subset?: Node['id'][];
     menu: IMenuProvider<any>;
@@ -317,8 +318,8 @@ export declare interface Layer<Node extends GraphNodeInterface> {
 }
 
 export declare class LayeredLayout<Node extends GraphNodeInterface> extends NodesGraph<Node> implements Layout<Node> {
+    #private;
     layers: Layers<Node>;
-    private hash;
     get center(): Position;
     spread(layer: number, nodes: Node['id'][]): number;
     findMax(node: Node): number;
@@ -327,28 +328,27 @@ export declare class LayeredLayout<Node extends GraphNodeInterface> extends Node
     remove(node: Node, layer: number): boolean;
     put(node: Node, layer: number): void;
     findLayer(node: Node): number;
-    findLayers(nodes: Node[]): Partial<Record<string, number>>;
+    findLayers(nodes: Node[]): Record<string, number>;
     shift(node: Node, fromLayer: number, offset: number, chain?: Node[]): number;
     private all;
     private walk;
 }
 
-export declare interface Layers<Node extends GraphNodeInterface> extends Iterable<Layer<Node>> {
-    [idx: number]: Layer<Node>;
+export declare interface Layers<Node extends GraphNodeInterface> extends Array<Layer<Node>> {
 }
 
-declare interface Layout<Node extends GraphNodeInterface<any, any>> {
+declare interface Layout<Node extends GraphNodeInterface> {
     readonly center: Position;
     getSubGraphs(subset?: Node['id'][]): Node['id'][][];
     spread(layer: number, nodes: Node['id'][]): number;
 }
 
-export declare class Layouter<Node extends GraphNodeInterface<any, any>> {
+export declare class Layouter<Node extends GraphNodeInterface> {
     private readonly isBarrier;
     private readonly klass;
     constructor(klass: Constructor<Layout<Node>, [nodes: Node[], isBarrier: GraphBarrier<Node>]>, isBarrier: GraphBarrier<Node>);
     layout(nodes: Node[], subset?: Node['id'][]): Layout<Node>;
-    getSubGraphs(nodes: Node[]): Node["id"][][];
+    getSubGraphs(nodes: Node[], subset?: Node['id'][]): Node["id"][][];
 }
 
 export declare type Line = {

package/dist/index.js

@@ -13,22 +13,22 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		enumerable: !0
 	});
 	return t || S(n, Symbol.toStringTag, { value: "Module" }), n;
-}, ee = (e, t, n, r) => {
+}, D = (e, t, n, r) => {
 	if (t && typeof t == "object" || typeof t == "function") for (var i = w(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !T.call(e, s) && s !== n && S(e, s, {
 		get: ((e) => t[e]).bind(null, s),
 		enumerable: !(r = C(t, s)) || r.enumerable
 	});
 	return e;
-}, D = (e, t, n) => (ee(e, t, "default"), n && ee(n, t, "default")), O = (e, t, n = 1) => ({
+}, O = (e, t, n) => (D(e, t, "default"), n && D(n, t, "default")), k = (e, t, n = 1) => ({
 	x: ~~(e.x + t.x * n),
 	y: ~~(e.y + t.y * n)
-}), k = (e, t) => (n) => n.node === e && n.port === t, te = (e) => (t) => t.node === e, ne = (e, t, n) => {
+}), A = (e, t) => (n) => n.node === e && n.port === t, ee = (e) => (t) => t.node === e, j = (e, t, n) => {
 	if (n) for (let r of n) {
-		let n = t.nodes.findIndex(k(r.node, r.port));
+		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 = []);
-}, re = (e, t, n, r, i, a, o, s) => {
+}, te = (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 +37,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		x: e + l * (n - e),
 		y: t + l * (r - t)
 	};
-}, A = class {
+}, M = class {
 	joints = /* @__PURE__ */ new Map();
 	parentId;
 	constructor(e, t) {
@@ -64,16 +64,16 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		return !!this.getPort(e, t);
 	}
 	hasAtPort(e, t, n) {
-		return !!this.joints.get(e)?.nodes.some(k(t, n));
+		return !!this.joints.get(e)?.nodes.some(A(t, n));
 	}
 	getPort(e, t) {
-		let n = this.find(t === void 0 ? (t) => t.nodes.some(te(e)) : (n) => n.nodes.some(k(e, t)));
+		let n = this.find(t === void 0 ? (t) => t.nodes.some(ee(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 ne(n, r, t), r;
+		return j(n, r, t), r;
 	}
 	getNodes(e) {
 		return this.joints.get(e)?.nodes;
@@ -86,7 +86,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 	get count() {
 		return this.joints.size;
 	}
-}, j = Symbol("E_CONNECT"), M = Symbol("E_MOVE"), ie = class extends e {
+}, ne = Symbol("E_CONNECT"), re = Symbol("E_MOVE"), ie = class extends e {
 	id;
 	description;
 	inputs;
@@ -97,7 +97,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 A(e, n), this.outputs = new A(e, r);
+		super(), this.id = e, this.coordinator = t, this.description = i, this.inputs = new M(e, n), this.outputs = new M(e, r);
 	}
 	get title() {
 		return this.description.title;
@@ -112,7 +112,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(M, 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(re, this.#e));
 	}
 	isInput(e, t, n) {
 		return this.inputs.hasAtPort(e, t, n);
@@ -154,7 +154,7 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 				nodes: a
 			});
 		}
-		this.dispatchEvent(j, {
+		this.dispatchEvent(ne, {
 			connect: t,
 			input: e,
 			source: i,
@@ -165,10 +165,10 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		return this.position = e;
 	}
 	onConnect(e) {
-		return this.handleEvent(j, e);
+		return this.handleEvent(ne, e);
 	}
 	onMove(e) {
-		return this.handleEvent(M, e);
+		return this.handleEvent(re, e);
 	}
 }, N = class {
 	_barriers = {};
@@ -233,30 +233,20 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 	}
 }, ae = class extends N {
 	layers = [];
-	hash = null;
+	#e = null;
 	get center() {
-		return this.hash ||= this.getCenter((e) => e.position), this.hash;
+		return this.#e ??= this.getCenter((e) => e.position);
 	}
 	spread(e, t) {
-		let n = [], r = 0;
-		for (let i of t) {
-			let t = this.map[i], a = this.shift(t, this.findLayer(t), e, n);
-			r = Math.max(r, a);
-		}
-		return r;
+		let n = [], r = this.get(t).map((t) => this.shift(t, this.findLayer(t), e, n));
+		return Math.max(...r);
 	}
 	findMax(e) {
-		let t = this.findLayers(this.get(e.inputs.ids)), n = 0;
-		for (let e of Object.values(t)) {
-			let t = +e;
-			t > n && (n = t);
-		}
-		return n || 0;
+		let t = this.findLayers(this.get(e.inputs.ids));
+		return Math.max(0, ...Object.values(t));
 	}
 	dependants({ id: e }) {
-		let t = [];
-		for (let n of this.nodes) n.id !== e && n.inputs.has(e) && t.push(n);
-		return t;
+		return this.nodes.filter((t) => t.id !== e && t.inputs.has(e));
 	}
 	get(e) {
 		return e.map((e) => this.map[e]).filter(n);
@@ -265,19 +255,17 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		return this.layers[t] ? delete this.layers[t][e.id] : !1;
 	}
 	put(e, t) {
-		let n = this.layers[t] || (this.layers[t] = {});
-		n[e.id] = e;
+		(this.layers[t] ??= {})[e.id] = e;
 	}
 	findLayer(e) {
-		for (let [t, n] of Object.entries(this.layers)) if (n[e.id]) return +t;
-		return 0;
+		return Math.max(0, this.layers.findIndex((t) => t[e.id]));
 	}
 	findLayers(e) {
 		let t = {};
-		for (let n in this.layers) {
-			let r = this.layers[n], i = [];
-			for (let a of e) r[a.id] && (t[a.id] = +n, i.push(a));
-			e = e.filter((e) => i.indexOf(e) < 0);
+		for (let [n, r] of this.layers.entries()) {
+			let i = e.filter((e) => r[e.id]).map((e) => e.id);
+			for (let e of i) t[e] = n;
+			e = e.filter((e) => !i.includes(e.id));
 		}
 		return t;
 	}
@@ -409,10 +397,12 @@ var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.g
 		this.klass = e, this.isBarrier = t;
 	}
 	layout(e, t) {
-		return new this.klass(e, this.isBarrier);
+		let n = new this.klass(e, this.isBarrier), r = n.getSubGraphs(t), i = 0;
+		for (let e of r) i += n.spread(i, e);
+		return n;
 	}
-	getSubGraphs(e) {
-		return new this.klass(e, this.isBarrier).getSubGraphs();
+	getSubGraphs(e, t) {
+		return new this.klass(e, this.isBarrier).getSubGraphs(t);
 	}
 }, P = Symbol("changed"), F = class extends e {
 	all;
@@ -507,19 +497,19 @@ var R = (e) => {
 	};
 }, z = /* @__PURE__ */ E({});
 import * as ue from "@pixi/core";
-D(z, ue);
+O(z, ue);
 import * as de from "@pixi/display";
-D(z, de);
+O(z, de);
 import * as fe from "@pixi/sprite";
-D(z, fe);
+O(z, fe);
 import * as pe from "@pixi/graphics";
-D(z, pe);
+O(z, pe);
 import * as me from "@pixi/text";
-D(z, me);
+O(z, me);
 import * as he from "@pixi/text-bitmap";
-D(z, he);
+O(z, he);
 import * as ge from "@pixi/events";
-D(z, ge);
+O(z, ge);
 //#endregion
 //#region src/graph/render/Batch.ts
 var _e = class extends e {
@@ -617,7 +607,7 @@ var _e = class extends 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;
 		for (let e = 0; e < this.#r.segments.length; e++) {
-			let t = this.#r.segments[e], s = re(0, 0, n, r, t[0], t[1], t[2], t[3]);
+			let t = this.#r.segments[e], s = te(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];
 				break;
@@ -696,7 +686,7 @@ var _e = class extends e {
 	if (t.hover) {
 		let a = r === t.point.parent || i === t.point.input ? 2 : 1;
 		if (a && n) {
-			let n = e.point.nodes.some(k(t.point.parent, t.point.port)), r = t.point.nodes.some(k(e.point.parent, e.point.port));
+			let n = e.point.nodes.some(A(t.point.parent, t.point.port)), r = t.point.nodes.some(A(e.point.parent, e.point.port));
 			return n && r ? 1 : 0;
 		}
 		return a;
@@ -934,12 +924,12 @@ 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;
-		ne(e, i, r);
+		j(e, i, r);
 		let a = this.ports.get(n);
 		a && a.setActive(!!i.nodes.length);
 	}
 	connectedAt(e, t, n) {
-		return this.connectors.find(({ nodes: r, connector: i }) => n !== !i && r.length && r.some(k(e, t)));
+		return this.connectors.find(({ nodes: r, connector: i }) => n !== !i && r.length && r.some(A(e, t)));
 	}
 	get connectors() {
 		if (this.#n) return this.#n;
@@ -950,7 +940,7 @@ var Me = (e) => (t) => {
 			let n = {
 				x: 16 / 2,
 				y: t * 16 + 16 / 2
-			}, r = O(this.data.position, n);
+			}, r = k(this.data.position, n);
 			this.#n.push({
 				parent: this.data.id,
 				port: e.port,
@@ -977,11 +967,11 @@ var Me = (e) => (t) => {
 		let t = /* @__PURE__ */ new Map(), n = [];
 		for (let r of this.connectors) {
 			let { connector: i, nodes: a, port: o } = r, s = `${this.id}-${o}`;
-			if (i) if (i.move(O(this.renderable, r)), a.length) {
+			if (i) if (i.move(k(this.renderable, r)), a.length) {
 				let e = 0;
 				for (let { node: t, port: n } of a) {
 					let r = this.find(t), a = r?.connectedAt(this.id, o);
-					r && a ? (i.moveTargetTo(t, n, O(r.renderable, a)), e++) : i.removeTarget(t, n);
+					r && a ? (i.moveTargetTo(t, n, k(r.renderable, a)), e++) : i.removeTarget(t, n);
 				}
 				e && t.set(s, i);
 			} else n.push(s);
@@ -1379,13 +1369,13 @@ var Me = (e) => (t) => {
 		};
 	}
 	fromGlobal(e) {
-		return O(e, this.world.transform.position, -1);
+		return k(e, this.world.transform.position, -1);
 	}
 	fromLocal(e) {
-		return O(O(e, this.world.transform.position, -2), this.center);
+		return k(k(e, this.world.transform.position, -2), this.center);
 	}
 	offsetPos(e, t = 1) {
-		return O(e, this.center, t);
+		return k(e, this.center, t);
 	}
 	translate(e) {
 		this.world.transform.position.copyFrom(this.offsetPos(e)), this.overlay.transform.position.copyFrom(this.offsetPos(e)), this.updateViewport();
@@ -1608,7 +1598,7 @@ var Me = (e) => (t) => {
 		}
 	}
 };
-D(/* @__PURE__ */ E({
+O(/* @__PURE__ */ E({
 	Batch: () => _e,
 	E_CONNECTORS_UPDATE: () => J,
 	E_NODE_CONTEXT: () => q,
@@ -1812,8 +1802,8 @@ var Ze = (e, t) => {
 }), st = {
 	x: 0,
 	y: 0
-}, 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({
+}, 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({
 		maxFPS: 120,
 		grid: {
 			cellSize: r.gridSize,
@@ -1824,49 +1814,53 @@ var Ze = (e, t) => {
 				10066329
 			]
 		},
-		gui: [g]
+		gui: [_]
 	}), [r]);
 	a(e, () => ({
-		graph: _,
+		graph: v,
 		get element() {
-			return h.current?.element;
+			return g.current?.element;
 		}
 	}));
-	let v = m(({ width: e, height: t }) => _.resize(e, t)), b = m(() => {
-		let { x: e, y: t } = r.toData(_.translation), { x: n, y: i } = r.toData(p.current);
-		g.text = `Pos: ${-(e - 1)} x ${-(t - 1)}\nCursor: ${~~(n - 1)} x ${~~(i - 1)}`;
-	}), x = m((e) => {
-		p.current = _.fromLocal(e), b();
+	let b = m(({ width: e, height: t }) => v.resize(e, t)), x = m(() => {
+		let { x: e, y: t } = r.toData(v.translation), { x: n, y: i } = r.toData(h.current);
+		_.text = `Pos: ${-(e - 1)} x ${-(t - 1)}\nCursor: ${~~(n - 1)} x ${~~(i - 1)}`;
 	}), S = m((e) => {
-		p.current = _.fromLocal(e), _.releaseNode(), b();
-	}), C = m((e, t) => {
-		if (x(e), _.capturing && !t?.shiftKey && u(null, r.toData(p.current)), !1 === u(_.capturing || null, r.toData(p.current))) return _.releaseNode(), !1;
-	}), w = m((e) => {
-		_.capturing || (_.translate(e), b());
+		h.current = v.fromLocal(e), x();
+	}), C = m((e) => {
+		h.current = v.fromLocal(e), v.releaseNode(), x();
+	}), w = m((e, t) => {
+		if (S(e), v.capturing && !t?.shiftKey && d(null, r.toData(h.current)), !1 === d(v.capturing || null, r.toData(h.current))) return v.releaseNode(), !1;
 	}), T = m((e) => {
-		if (!1 === C(e)) return !1;
-		if (!1 === d(_.capturing || null, r.toData(p.current))) return _.releaseNode(), !1;
-	}), E = s(() => ({
+		v.capturing || (v.translate(e), x());
+	}), E = m((e) => {
+		if (!1 === w(e)) return !1;
+		if (!1 === f(v.capturing || null, r.toData(h.current))) return v.releaseNode(), !1;
+	}), D = s(() => ({
 		get position() {
-			return _.translation;
+			return v.translation;
 		},
-		onDrag: w,
-		onPointer: x,
-		onClick: C,
-		onUp: S,
-		onContext: T
-	}), [_]);
+		onDrag: T,
+		onPointer: S,
+		onClick: w,
+		onUp: C,
+		onContext: E
+	}), [v]);
 	return i(() => {
-		if (!h.current) return;
+		if (!g.current) return;
 		let e = n || t.map(({ id: e }) => e);
-		_.batch(() => {
-			for (let t of _) e.includes(t.id) || _.removeNode(t);
-			for (let n of t) e.includes(n.id) && (_.addNode(n), _.moveNodeTo(n, n.position));
-			_.layout();
+		v.batch(() => {
+			for (let t of v) e.includes(t.id) || v.removeNode(t);
+			for (let n of t) e.includes(n.id) && (v.addNode(n), v.moveNodeTo(n, n.position));
+			l && l.layout(t, n), v.layout();
 		});
-	}, [n, t]), o(() => {
-		let e = h.current?.element;
-		if (e) return _.mount(e, { viewport: {
+	}, [
+		n,
+		t,
+		l
+	]), o(() => {
+		let e = g.current?.element;
+		if (e) return v.mount(e, { viewport: {
 			width: e.clientWidth,
 			height: e.clientHeight,
 			resolution: window.devicePixelRatio,
@@ -1874,11 +1868,11 @@ var Ze = (e, t) => {
 			antialias: !0,
 			transparent: !1
 		} });
-	}, [_]), /* @__PURE__ */ y(nt, {
-		ref: h,
-		handlers: E,
-		onResize: v,
-		...f
+	}, [v]), /* @__PURE__ */ y(nt, {
+		ref: g,
+		handlers: D,
+		onResize: b,
+		...p
 	});
 }), 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));
@@ -2287,6 +2281,6 @@ var Ze = (e, t) => {
 	}
 });
 //#endregion
-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 };
+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 };
 
 //# sourceMappingURL=index.js.map