@stuly/anode-react 0.1.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2026 luxluth <delphin.blehoussi93@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# anode-react
+
+React bindings and components for Anode, providing a declarative layer over
+the headless core engine.
+
+## Installation
+
+```bash
+npm install @stuly/anode-react @stuly/anode
+```
+
+## Components & Hooks
+
+- **World:** The primary canvas component for rendering the node graph.
+- **Socket:** A component for rendering connection points within nodes.
+- **Hooks:**
+  - `useAnode()`: Access the core engine.
+  - `useSocketValue()`: Subscribe to reactive data flow.
+  - `useVisibleNodes()`: Optimized spatial culling.
+  - `useEntitySockets()`: Reactive socket management.
+
+For detailed documentation and usage examples, see the [root README](../../README.md).

package/dist/context.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { Context } from "@stuly/anode";
+
+//#region src/context.d.ts
+interface Viewport {
+  x: number;
+  y: number;
+  k: number;
+}
+declare const useAnode: () => Context<any>;
+declare const useViewport: () => {
+  viewport: Viewport;
+  setViewport: (v: Viewport) => void;
+  screenToWorld: (clientX: number, clientY: number) => {
+    x: number;
+    y: number;
+  };
+};
+declare const useSelection: () => {
+  selection: {
+    nodes: Set<number>;
+    links: Set<number>;
+  };
+  setSelection: React.Dispatch<React.SetStateAction<{
+    nodes: Set<number>;
+    links: Set<number>;
+  }>>;
+};
+declare const AnodeProvider: React.FC<{
+  children: React.ReactNode;
+  context?: Context;
+}>;
+//#endregion
+export { AnodeProvider, useAnode, useSelection, useViewport };

package/dist/context.js

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Context } from "@stuly/anode";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/context.tsx
+const AnodeReactContext = createContext(null);
+const useAnode = () => {
+	const value = useContext(AnodeReactContext);
+	if (!value) throw new Error("useAnode must be used within an AnodeProvider");
+	return value.ctx;
+};
+const useViewport = () => {
+	const value = useContext(AnodeReactContext);
+	if (!value) throw new Error("useViewport must be used within an AnodeProvider");
+	return {
+		viewport: value.viewport,
+		setViewport: value.setViewport,
+		screenToWorld: value.screenToWorld
+	};
+};
+const useSelection = () => {
+	const value = useContext(AnodeReactContext);
+	if (!value) throw new Error("useSelection must be used within an AnodeProvider");
+	return {
+		selection: value.selection,
+		setSelection: value.setSelection
+	};
+};
+const AnodeProvider = ({ children, context }) => {
+	const [ctx] = useState(() => context ?? new Context());
+	const [viewport, setViewport] = useState({
+		x: 0,
+		y: 0,
+		k: 1
+	});
+	const [screenToWorld, setScreenToWorld] = useState(() => (x, y) => ({
+		x,
+		y
+	}));
+	const [selection, setSelection] = useState({
+		nodes: /* @__PURE__ */ new Set(),
+		links: /* @__PURE__ */ new Set()
+	});
+	const value = useMemo(() => ({
+		ctx,
+		viewport,
+		setViewport,
+		screenToWorld,
+		setScreenToWorld,
+		selection,
+		setSelection
+	}), [
+		ctx,
+		viewport,
+		screenToWorld,
+		selection
+	]);
+	return /* @__PURE__ */ jsx(AnodeReactContext.Provider, {
+		value,
+		children
+	});
+};
+
+//#endregion
+export { AnodeProvider, AnodeReactContext, useAnode, useSelection, useViewport };

package/dist/elements/Background.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+//#region src/elements/Background.d.ts
+interface BackgroundProps {
+  color?: string;
+  size?: number;
+  gap?: number;
+  pattern?: 'dots' | 'lines';
+}
+declare const Background: React.FC<BackgroundProps>;
+//#endregion
+export { Background };

package/dist/elements/Background.js

@@ -0,0 +1,27 @@
+import { useViewport } from "../context.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/elements/Background.tsx
+const Background = ({ color = "#cbd5e1", size = 1, gap = 20, pattern = "dots" }) => {
+	const { viewport } = useViewport();
+	const scaledGap = gap * viewport.k;
+	const scaledSize = size * viewport.k;
+	const offsetX = viewport.x % scaledGap;
+	const offsetY = viewport.y % scaledGap;
+	return /* @__PURE__ */ jsx("div", { style: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		pointerEvents: "none",
+		zIndex: 0,
+		backgroundImage: pattern === "dots" ? `radial-gradient(${color} ${scaledSize}px, transparent 0)` : `linear-gradient(to right, ${color} ${Math.max(1, viewport.k)}px, transparent 1px), linear-gradient(to bottom, ${color} ${Math.max(1, viewport.k)}px, transparent 1px)`,
+		backgroundSize: `${scaledGap}px ${scaledGap}px`,
+		backgroundPosition: `${offsetX}px ${offsetY}px`
+	} });
+};
+
+//#endregion
+export { Background };

package/dist/elements/Controls.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+//#region src/elements/Controls.d.ts
+declare const Controls: React.FC<{
+  style?: React.CSSProperties;
+}>;
+//#endregion
+export { Controls };

package/dist/elements/Controls.js

@@ -0,0 +1,96 @@
+import { useAnode, useViewport } from "../context.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/elements/Controls.tsx
+const Controls = ({ style }) => {
+	const { viewport, setViewport } = useViewport();
+	const ctx = useAnode();
+	const onZoomIn = () => {
+		setViewport({
+			...viewport,
+			k: Math.min(viewport.k * 1.2, 5)
+		});
+	};
+	const onZoomOut = () => {
+		setViewport({
+			...viewport,
+			k: Math.max(viewport.k / 1.2, .1)
+		});
+	};
+	const onFitView = () => {
+		if (ctx.entities.size === 0) {
+			setViewport({
+				x: 0,
+				y: 0,
+				k: 1
+			});
+			return;
+		}
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const entity of ctx.entities.values()) {
+			const pos = ctx.getWorldPosition(entity.id);
+			minX = Math.min(minX, pos.x);
+			minY = Math.min(minY, pos.y);
+			maxX = Math.max(maxX, pos.x);
+			maxY = Math.max(maxY, pos.y);
+		}
+		const padding = 50;
+		const w = maxX - minX + padding * 2;
+		const h = maxY - minY + padding * 2;
+		const containerW = window.innerWidth;
+		const containerH = window.innerHeight;
+		const k = Math.min(containerW / w, containerH / h, 1);
+		setViewport({
+			x: (containerW - (maxX + minX) * k) / 2,
+			y: (containerH - (maxY + minY) * k) / 2,
+			k
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "anode-controls",
+		style: {
+			position: "absolute",
+			bottom: 20,
+			left: 20,
+			display: "flex",
+			flexDirection: "column",
+			gap: 5,
+			zIndex: 100,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				onClick: onZoomIn,
+				style: buttonStyle,
+				children: "+"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onZoomOut,
+				style: buttonStyle,
+				children: "-"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onFitView,
+				style: buttonStyle,
+				children: "w"
+			})
+		]
+	});
+};
+const buttonStyle = {
+	width: 30,
+	height: 30,
+	background: "white",
+	border: "1px solid #ccc",
+	borderRadius: 4,
+	cursor: "pointer",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontSize: 18,
+	fontWeight: "bold"
+};
+
+//#endregion
+export { Controls };

package/dist/elements/Group.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/elements/Group.d.ts
+interface GroupProps {
+  id: number;
+  children?: React.ReactNode;
+}
+declare const Group: React.FC<GroupProps>;
+//#endregion
+export { Group, GroupProps };

package/dist/elements/Group.js

@@ -0,0 +1,86 @@
+import { useAnode, useViewport } from "../context.js";
+import React, { useState } from "react";
+import { Rect, Vec2 } from "@stuly/anode";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/elements/Group.tsx
+const Group = ({ id, children }) => {
+	const ctx = useAnode();
+	const { viewport } = useViewport();
+	const group = ctx.groups.get(id);
+	const [isDragging, setIsDragging] = useState(false);
+	if (!group) return null;
+	const worldPos = ctx.getGroupWorldPosition(id);
+	let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+	const calculateBounds = (g) => {
+		for (const eid of g.entities) if (ctx.entities.get(eid)) {
+			const p = ctx.getWorldPosition(eid);
+			minX = Math.min(minX, p.x - 50);
+			minY = Math.min(minY, p.y - 50);
+			maxX = Math.max(maxX, p.x + 150);
+			maxY = Math.max(maxY, p.y + 100);
+		}
+		for (const gid of g.groups) {
+			const childGroup = ctx.groups.get(gid);
+			if (childGroup) calculateBounds(childGroup);
+		}
+	};
+	calculateBounds(group);
+	const hasChildren = minX !== Infinity;
+	const width = hasChildren ? maxX - minX : 200;
+	const height = hasChildren ? maxY - minY : 200;
+	const x = hasChildren ? minX : worldPos.x;
+	const y = hasChildren ? minY : worldPos.y;
+	const onMouseDown = (e) => {
+		if (e.button !== 0) return;
+		e.stopPropagation();
+		setIsDragging(true);
+		e.clientX;
+		e.clientY;
+		let lastX = e.clientX;
+		let lastY = e.clientY;
+		const onMouseMoveDelta = (moveEvent) => {
+			const dx = (moveEvent.clientX - lastX) / viewport.k;
+			const dy = (moveEvent.clientY - lastY) / viewport.k;
+			lastX = moveEvent.clientX;
+			lastY = moveEvent.clientY;
+			ctx.moveGroup(group, dx, dy);
+		};
+		const onMouseUp = () => {
+			setIsDragging(false);
+			document.removeEventListener("mousemove", onMouseMoveDelta);
+			document.removeEventListener("mouseup", onMouseUp);
+		};
+		document.addEventListener("mousemove", onMouseMoveDelta);
+		document.addEventListener("mouseup", onMouseUp);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "anode-group",
+		onMouseDown,
+		style: {
+			position: "absolute",
+			left: x,
+			top: y,
+			width,
+			height,
+			background: "rgba(0, 0, 0, 0.05)",
+			border: "1px dashed #ccc",
+			borderRadius: 8,
+			zIndex: -1,
+			cursor: isDragging ? "grabbing" : "grab",
+			pointerEvents: "auto"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				padding: 8,
+				fontSize: 12,
+				color: "#999",
+				userSelect: "none"
+			},
+			children: group.name || `Group ${id}`
+		}), children]
+	});
+};
+
+//#endregion
+export { Group };

package/dist/elements/Link.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "@stuly/anode";
+
+//#region src/elements/Link.d.ts
+interface LinkComponentProps {
+  id: number;
+  link: Link;
+}
+interface LinkProps {
+  id: number;
+  style?: React.CSSProperties;
+  component?: React.ComponentType<LinkComponentProps> | undefined;
+}
+declare const Link$1: React.FC<LinkProps>;
+//#endregion
+export { Link$1 as Link, LinkComponentProps };

package/dist/elements/Link.js

@@ -0,0 +1,191 @@
+import { useAnode, useSelection, useViewport } from "../context.js";
+import React, { useEffect, useState } from "react";
+import { Link, Vec2, getLinkCenter, getLinkPath, getLinkPoints } from "@stuly/anode";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/elements/Link.tsx
+const Link$1 = ({ id, style, component: Component }) => {
+	const ctx = useAnode();
+	const { viewport, screenToWorld } = useViewport();
+	const { selection, setSelection } = useSelection();
+	const link = ctx.links.get(id);
+	const [, setTick] = useState(0);
+	useEffect(() => {
+		if (!link) return;
+		const onUpdate = () => setTick((t) => t + 1);
+		const h1 = ctx.registerEntityMoveListener(onUpdate);
+		const h2 = ctx.registerSocketMoveListener(onUpdate);
+		const h3 = ctx.registerSocketCreateListener(onUpdate);
+		const h4 = ctx.registerLinkUpdateListener((l) => {
+			if (l.id === id) onUpdate();
+		});
+		return () => {
+			ctx.unregisterListener(h1);
+			ctx.unregisterListener(h2);
+			ctx.unregisterListener(h3);
+			ctx.unregisterListener(h4);
+		};
+	}, [
+		ctx,
+		link,
+		id
+	]);
+	if (!link) return null;
+	const d = getLinkPath(ctx, link);
+	const pts = getLinkPoints(ctx, link);
+	const center = getLinkCenter(ctx, link);
+	if (!d || !pts) return null;
+	const isSelected = selection.links.has(id);
+	const onClick = (e) => {
+		e.stopPropagation();
+		if (e.shiftKey) setSelection((prev) => {
+			const next = new Set(prev.links);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return {
+				...prev,
+				links: next
+			};
+		});
+		else setSelection({
+			nodes: /* @__PURE__ */ new Set(),
+			links: new Set([id])
+		});
+	};
+	const onDoubleClick = (e) => {
+		e.stopPropagation();
+		const { x, y } = screenToWorld(e.clientX, e.clientY);
+		const newWaypoints = [...link.waypoints, new Vec2(x, y)];
+		ctx.setLinkWaypoints(link, newWaypoints);
+	};
+	const onHandleMouseDown = (e, type) => {
+		e.stopPropagation();
+		const event = new CustomEvent("anode-link-reconnect", {
+			bubbles: true,
+			detail: {
+				linkId: id,
+				type,
+				x: e.clientX,
+				y: e.clientY
+			}
+		});
+		e.target.dispatchEvent(event);
+	};
+	const onWaypointMouseDown = (e, index) => {
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startY = e.clientY;
+		const initialWaypoints = link.waypoints.map((p) => p.clone());
+		const onMouseMove = (moveEvent) => {
+			const dx = (moveEvent.clientX - startX) / viewport.k;
+			const dy = (moveEvent.clientY - startY) / viewport.k;
+			link.waypoints = initialWaypoints.map((p, i) => {
+				if (i === index) return new Vec2(p.x + dx, p.y + dy);
+				return p;
+			});
+			setTick((t) => t + 1);
+		};
+		const onMouseUp = () => {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			ctx.setLinkWaypoints(link, link.waypoints);
+		};
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("g", {
+		onClick,
+		onDoubleClick,
+		style: { cursor: "pointer" },
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d,
+				fill: "none",
+				stroke: "transparent",
+				strokeWidth: 15
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d,
+				fill: "none",
+				stroke: isSelected ? "#3b82f6" : "#94a3b8",
+				strokeWidth: isSelected ? 3 : 2,
+				style: {
+					transition: "stroke 0.2s, stroke-width 0.2s",
+					...style
+				}
+			}),
+			isSelected && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: pts.from.x,
+					cy: pts.from.y,
+					r: 5,
+					fill: "white",
+					stroke: "#3b82f6",
+					strokeWidth: 2,
+					onMouseDown: (e) => onHandleMouseDown(e, "from"),
+					style: {
+						cursor: "crosshair",
+						pointerEvents: "auto"
+					}
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: pts.to.x,
+					cy: pts.to.y,
+					r: 5,
+					fill: "white",
+					stroke: "#3b82f6",
+					strokeWidth: 2,
+					onMouseDown: (e) => onHandleMouseDown(e, "to"),
+					style: {
+						cursor: "crosshair",
+						pointerEvents: "auto"
+					}
+				}),
+				link.waypoints.map((p, i) => /* @__PURE__ */ jsx("circle", {
+					cx: p.x,
+					cy: p.y,
+					r: 4,
+					fill: "#3b82f6",
+					onMouseDown: (e) => onWaypointMouseDown(e, i),
+					onContextMenu: (e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						const newWaypoints = link.waypoints.filter((_, idx) => idx !== i);
+						ctx.setLinkWaypoints(link, newWaypoints);
+					},
+					style: {
+						cursor: "move",
+						pointerEvents: "auto"
+					}
+				}, i)),
+				" "
+			] })
+		]
+	}), Component && center && /* @__PURE__ */ jsx("foreignObject", {
+		x: center.x - 50,
+		y: center.y - 25,
+		width: 100,
+		height: 50,
+		style: {
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				pointerEvents: "auto"
+			},
+			children: /* @__PURE__ */ jsx(Component, {
+				id,
+				link
+			})
+		})
+	})] });
+};
+
+//#endregion
+export { Link$1 as Link };

package/dist/elements/MiniMap.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/elements/MiniMap.d.ts
+declare const MiniMap: React.FC<{
+  width?: number;
+  height?: number;
+  style?: React.CSSProperties;
+}>;
+//#endregion
+export { MiniMap };

package/dist/elements/MiniMap.js

@@ -0,0 +1,80 @@
+import { useAnode, useViewport } from "../context.js";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/elements/MiniMap.tsx
+const MiniMap = ({ width = 200, height = 150, style }) => {
+	const ctx = useAnode();
+	const { viewport } = useViewport();
+	const bounds = useMemo(() => {
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		if (ctx.entities.size === 0) return {
+			x: 0,
+			y: 0,
+			w: 1e3,
+			h: 1e3
+		};
+		for (const entity of ctx.entities.values()) {
+			const pos = ctx.getWorldPosition(entity.id);
+			minX = Math.min(minX, pos.x);
+			minY = Math.min(minY, pos.y);
+			maxX = Math.max(maxX, pos.x);
+			maxY = Math.max(maxY, pos.y);
+		}
+		const padding = 100;
+		minX -= padding;
+		minY -= padding;
+		maxX += padding;
+		maxY += padding;
+		return {
+			x: minX,
+			y: minY,
+			w: maxX - minX,
+			h: maxY - minY
+		};
+	}, [ctx.entities.size, Array.from(ctx.entities.values()).map((e) => e.position.x + e.position.y).join(",")]);
+	const scale = Math.min(width / bounds.w, height / bounds.h);
+	return /* @__PURE__ */ jsx("div", {
+		className: "anode-minimap",
+		style: {
+			position: "absolute",
+			bottom: 20,
+			right: 20,
+			width,
+			height,
+			background: "rgba(255, 255, 255, 0.8)",
+			border: "1px solid #ccc",
+			borderRadius: 4,
+			overflow: "hidden",
+			pointerEvents: "none",
+			zIndex: 100,
+			...style
+		},
+		children: /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			viewBox: `${bounds.x} ${bounds.y} ${bounds.w} ${bounds.h}`,
+			children: [Array.from(ctx.entities.values()).map((entity) => {
+				const pos = ctx.getWorldPosition(entity.id);
+				return /* @__PURE__ */ jsx("rect", {
+					x: pos.x - 25,
+					y: pos.y - 25,
+					width: 50,
+					height: 50,
+					fill: "#94a3b8"
+				}, entity.id);
+			}), /* @__PURE__ */ jsx("rect", {
+				x: -viewport.x / viewport.k,
+				y: -viewport.y / viewport.k,
+				width: width / (scale * viewport.k),
+				height: height / (scale * viewport.k),
+				fill: "rgba(59, 130, 246, 0.1)",
+				stroke: "#3b82f6",
+				strokeWidth: 2 / scale
+			})]
+		})
+	});
+};
+
+//#endregion
+export { MiniMap };