@stuly/anode-react 0.1.0

package/dist/hooks.js

@@ -0,0 +1,156 @@
+import { useAnode, useViewport } from "./context.js";
+import React, { useMemo, useSyncExternalStore } from "react";
+import { Entity, Link, Rect } from "@stuly/anode";
+
+//#region src/hooks.ts
+const useNodes = () => {
+	const ctx = useAnode();
+	const store = useMemo(() => {
+		let snapshot = Array.from(ctx.entities.values());
+		return {
+			subscribe: (onStoreChange) => {
+				snapshot = Array.from(ctx.entities.values());
+				const update = () => {
+					snapshot = Array.from(ctx.entities.values());
+					onStoreChange();
+				};
+				const handles = [
+					ctx.registerEntityCreateListener(update),
+					ctx.registerEntityDropListener(update),
+					ctx.registerEntityMoveListener(update),
+					ctx.registerBulkChangeListener(update)
+				];
+				return () => handles.forEach((h) => ctx.unregisterListener(h));
+			},
+			getSnapshot: () => snapshot
+		};
+	}, [ctx]);
+	return useSyncExternalStore(store.subscribe, store.getSnapshot);
+};
+const useVisibleNodes = (containerRect) => {
+	const ctx = useAnode();
+	const { viewport } = useViewport();
+	return useMemo(() => {
+		const w = (containerRect?.width || window.innerWidth) / viewport.k;
+		const h = (containerRect?.height || window.innerHeight) / viewport.k;
+		const x = -viewport.x / viewport.k;
+		const y = -viewport.y / viewport.k;
+		const padding = 300 / viewport.k;
+		const queryRect = new Rect(x - padding, y - padding, w + padding * 2, h + padding * 2);
+		return Array.from(new Set(ctx.quadTree.query(queryRect))).map((id) => ctx.entities.get(id)).filter((n) => !!n);
+	}, [
+		ctx,
+		viewport,
+		containerRect,
+		useNodes()
+	]);
+};
+const useEdges = () => {
+	const ctx = useAnode();
+	const store = useMemo(() => {
+		let snapshot = Array.from(ctx.links.values());
+		return {
+			subscribe: (onStoreChange) => {
+				snapshot = Array.from(ctx.links.values());
+				const update = () => {
+					snapshot = Array.from(ctx.links.values());
+					onStoreChange();
+				};
+				const handles = [
+					ctx.registerLinkCreateListener(update),
+					ctx.registerLinkDropListener(update),
+					ctx.registerEntityMoveListener(update),
+					ctx.registerBulkChangeListener(update)
+				];
+				return () => handles.forEach((h) => ctx.unregisterListener(h));
+			},
+			getSnapshot: () => snapshot
+		};
+	}, [ctx]);
+	return useSyncExternalStore(store.subscribe, store.getSnapshot);
+};
+const useEntitySockets = (entityId) => {
+	const ctx = useAnode();
+	const store = useMemo(() => {
+		let snapshot = [];
+		const entity = ctx.entities.get(entityId);
+		if (entity) snapshot = Array.from(entity.sockets.values());
+		return {
+			subscribe: (onStoreChange) => {
+				const update = () => {
+					const e = ctx.entities.get(entityId);
+					snapshot = e ? Array.from(e.sockets.values()) : [];
+					onStoreChange();
+				};
+				const h1 = ctx.registerSocketCreateListener((s) => {
+					if (s.entityId === entityId) update();
+				});
+				const h2 = ctx.registerSocketDropListener((s) => {
+					if (s.entityId === entityId) update();
+				});
+				const h3 = ctx.registerSocketMoveListener((s) => {
+					if (s.entityId === entityId) update();
+				});
+				const h4 = ctx.registerBulkChangeListener(update);
+				return () => {
+					ctx.unregisterListener(h1);
+					ctx.unregisterListener(h2);
+					ctx.unregisterListener(h3);
+					ctx.unregisterListener(h4);
+				};
+			},
+			getSnapshot: () => snapshot
+		};
+	}, [ctx, entityId]);
+	return useSyncExternalStore(store.subscribe, store.getSnapshot);
+};
+function useSocketValue(socketId) {
+	const ctx = useAnode();
+	const store = useMemo(() => {
+		return {
+			subscribe: (onStoreChange) => {
+				if (socketId === null) return () => {};
+				const handle = ctx.registerSocketValueListener((s) => {
+					if (s.id === socketId) onStoreChange();
+				});
+				const bulkHandle = ctx.registerBulkChangeListener(onStoreChange);
+				return () => {
+					ctx.unregisterListener(handle);
+					ctx.unregisterListener(bulkHandle);
+				};
+			},
+			getSnapshot: () => {
+				if (socketId === null) return null;
+				return ctx.sockets.get(socketId)?.value ?? null;
+			}
+		};
+	}, [ctx, socketId]);
+	return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+const useGroups = () => {
+	const ctx = useAnode();
+	const store = useMemo(() => {
+		let snapshot = Array.from(ctx.groups.values());
+		return {
+			subscribe: (onStoreChange) => {
+				snapshot = Array.from(ctx.groups.values());
+				const update = () => {
+					snapshot = Array.from(ctx.groups.values());
+					onStoreChange();
+				};
+				const handles = [
+					ctx.registerGroupCreateListener(update),
+					ctx.registerGroupDropListener(update),
+					ctx.registerEntityMoveListener(update),
+					ctx.registerBulkChangeListener(update)
+				];
+				return () => handles.forEach((h) => ctx.unregisterListener(h));
+			},
+			getSnapshot: () => snapshot
+		};
+	}, [ctx]);
+	return useSyncExternalStore(store.subscribe, store.getSnapshot);
+};
+
+//#endregion
+export { useEdges, useEntitySockets, useGroups, useNodes, useSocketValue, useVisibleNodes };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { Node, NodeComponentProps } from "./elements/Node.js";
+import { Link, LinkComponentProps } from "./elements/Link.js";
+import { LinkData, NodeData, World } from "./elements/World.js";
+import { Group, GroupProps } from "./elements/Group.js";
+import { Socket } from "./elements/Socket.js";
+import { Background } from "./elements/Background.js";
+import { MiniMap } from "./elements/MiniMap.js";
+import { Controls } from "./elements/Controls.js";
+import { Panel } from "./elements/Panel.js";
+import { AnodeProvider, useAnode, useSelection, useViewport } from "./context.js";
+import { useEdges, useEntitySockets, useGroups, useNodes, useSocketValue, useVisibleNodes } from "./hooks.js";
+export { AnodeProvider, Background, Controls, Group, type GroupProps, Link, type LinkComponentProps, type LinkData, MiniMap, Node, type NodeComponentProps, type NodeData, Panel, Socket, World, useAnode, useEdges, useEntitySockets, useGroups, useNodes, useSelection, useSocketValue, useViewport, useVisibleNodes };

package/dist/index.js

@@ -0,0 +1,13 @@
+import { AnodeProvider, useAnode, useSelection, useViewport } from "./context.js";
+import { useEdges, useEntitySockets, useGroups, useNodes, useSocketValue, useVisibleNodes } from "./hooks.js";
+import { Node } from "./elements/Node.js";
+import { Group } from "./elements/Group.js";
+import { Link } from "./elements/Link.js";
+import { World } from "./elements/World.js";
+import { Socket } from "./elements/Socket.js";
+import { Background } from "./elements/Background.js";
+import { MiniMap } from "./elements/MiniMap.js";
+import { Controls } from "./elements/Controls.js";
+import { Panel } from "./elements/Panel.js";
+
+export { AnodeProvider, Background, Controls, Group, Link, MiniMap, Node, Panel, Socket, World, useAnode, useEdges, useEntitySockets, useGroups, useNodes, useSelection, useSocketValue, useViewport, useVisibleNodes };

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@stuly/anode-react",
+  "version": "0.1.0",
+  "description": "Anode react wrapper",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "type": "module",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "@stuly/anode": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "pnpm tsdown",
+    "lint": "tsc"
+  }
+}