@stuly/anode-react 0.1.0

package/dist/elements/Node.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Entity } from "@stuly/anode";
+
+//#region src/elements/Node.d.ts
+interface NodeProps {
+  id: number;
+  children?: React.ReactNode;
+}
+interface NodeComponentProps {
+  entity: Entity;
+}
+declare const Node: React.FC<NodeProps>;
+//#endregion
+export { Node, NodeComponentProps };

package/dist/elements/Node.js

@@ -0,0 +1,122 @@
+import { useAnode, useSelection, useViewport } from "../context.js";
+import React, { useEffect, useRef, useState } from "react";
+import { Entity } from "@stuly/anode";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/elements/Node.tsx
+const Node = ({ id, children }) => {
+	const ctx = useAnode();
+	const { viewport } = useViewport();
+	const { selection, setSelection } = useSelection();
+	const entity = ctx.entities.get(id);
+	const [, setTick] = useState(0);
+	const [isDragging, setIsDragging] = useState(false);
+	useEffect(() => {
+		if (!entity) return;
+		const onMove = (e) => {
+			if (e.id === id) setTick((t) => t + 1);
+		};
+		const handle = ctx.registerEntityMoveListener(onMove);
+		return () => {
+			ctx.unregisterListener(handle);
+		};
+	}, [
+		ctx,
+		id,
+		entity
+	]);
+	if (!entity) return null;
+	const worldPos = ctx.getWorldPosition(id);
+	const isSelected = selection.nodes.has(id);
+	return /* @__PURE__ */ jsx("div", {
+		className: "anode-node",
+		style: {
+			position: "absolute",
+			left: worldPos.x,
+			top: worldPos.y,
+			transform: "translate(-50%, -50%)",
+			cursor: isDragging ? "grabbing" : "grab",
+			outline: isSelected ? "2px solid #3b82f6" : "none",
+			borderRadius: 4,
+			transition: isDragging ? "none" : "left 0.15s ease-out, top 0.15s ease-out",
+			zIndex: isDragging ? 1e3 : 1
+		},
+		onMouseDown: (e) => {
+			if (e.button !== 0) return;
+			setIsDragging(true);
+			if (e.shiftKey) setSelection((prev) => {
+				const next = new Set(prev.nodes);
+				if (next.has(id)) next.delete(id);
+				else next.add(id);
+				return {
+					...prev,
+					nodes: next
+				};
+			});
+			else setSelection({
+				nodes: new Set([id]),
+				links: /* @__PURE__ */ new Set()
+			});
+			const startX = e.clientX;
+			const startY = e.clientY;
+			const startPosX = entity.position.x;
+			const startPosY = entity.position.y;
+			const onMouseMove = (moveEvent) => {
+				const dx = (moveEvent.clientX - startX) / viewport.k;
+				const dy = (moveEvent.clientY - startY) / viewport.k;
+				let newX = startPosX + dx;
+				let newY = startPosY + dy;
+				const gridSize = 15;
+				newX = Math.round(newX / gridSize) * gridSize;
+				newY = Math.round(newY / gridSize) * gridSize;
+				entity.move(newX, newY);
+			};
+			const onMouseUp = () => {
+				setIsDragging(false);
+				document.removeEventListener("mousemove", onMouseMove);
+				document.removeEventListener("mouseup", onMouseUp);
+			};
+			document.addEventListener("mousemove", onMouseMove);
+			document.addEventListener("mouseup", onMouseUp);
+			e.stopPropagation();
+		},
+		onTouchStart: (e) => {
+			setIsDragging(true);
+			setSelection({
+				nodes: new Set([id]),
+				links: /* @__PURE__ */ new Set()
+			});
+			const touch = e.touches[0];
+			if (!touch) return;
+			const startX = touch.clientX;
+			const startY = touch.clientY;
+			const startPosX = entity.position.x;
+			const startPosY = entity.position.y;
+			const onTouchMove = (moveEvent) => {
+				const touch = moveEvent.touches[0];
+				if (!touch) return;
+				const dx = (touch.clientX - startX) / viewport.k;
+				const dy = (touch.clientY - startY) / viewport.k;
+				let newX = startPosX + dx;
+				let newY = startPosY + dy;
+				const gridSize = 15;
+				newX = Math.round(newX / gridSize) * gridSize;
+				newY = Math.round(newY / gridSize) * gridSize;
+				entity.move(newX, newY);
+				if (moveEvent.cancelable) moveEvent.preventDefault();
+			};
+			const onTouchEnd = () => {
+				setIsDragging(false);
+				document.removeEventListener("touchmove", onTouchMove);
+				document.removeEventListener("touchend", onTouchEnd);
+			};
+			document.addEventListener("touchmove", onTouchMove, { passive: false });
+			document.addEventListener("touchend", onTouchEnd);
+			e.stopPropagation();
+		},
+		children
+	});
+};
+
+//#endregion
+export { Node };

package/dist/elements/Panel.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+//#region src/elements/Panel.d.ts
+type PanelPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+declare const Panel: React.FC<{
+  position?: PanelPosition;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}>;
+//#endregion
+export { Panel };

package/dist/elements/Panel.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/elements/Panel.tsx
+const Panel = ({ position = "top-left", children, style }) => {
+	const getPositionStyle = () => {
+		switch (position) {
+			case "top-left": return {
+				top: 20,
+				left: 20
+			};
+			case "top-right": return {
+				top: 20,
+				right: 20
+			};
+			case "bottom-left": return {
+				bottom: 20,
+				left: 20
+			};
+			case "bottom-right": return {
+				bottom: 20,
+				right: 20
+			};
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: `anode-panel anode-panel-${position}`,
+		style: {
+			position: "absolute",
+			zIndex: 100,
+			...getPositionStyle(),
+			...style
+		},
+		children
+	});
+};
+
+//#endregion
+export { Panel };

package/dist/elements/Socket.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { SocketKind } from "@stuly/anode";
+
+//#region src/elements/Socket.d.ts
+interface SocketProps {
+  entityId: number;
+  kind: SocketKind;
+  name?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+declare const Socket: React.FC<SocketProps>;
+//#endregion
+export { Socket };

package/dist/elements/Socket.js

@@ -0,0 +1,106 @@
+import { useAnode, useViewport } from "../context.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { SocketKind } from "@stuly/anode";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/elements/Socket.tsx
+const Socket = ({ entityId, kind, name, className, style }) => {
+	const ctx = useAnode();
+	const { viewport } = useViewport();
+	const ref = useRef(null);
+	const [socketId, setSocketId] = useState(null);
+	const createdSocketId = useRef(null);
+	useEffect(() => {
+		const entity = ctx.entities.get(entityId);
+		if (!entity) return;
+		const existingSocket = Array.from(entity.sockets.values()).find((s) => s.kind === kind && s.name === name);
+		if (existingSocket) {
+			createdSocketId.current = existingSocket.id;
+			setSocketId(existingSocket.id);
+		} else if (createdSocketId.current === null) {
+			const socket = ctx.newSocket(entity, kind, name);
+			createdSocketId.current = socket.id;
+			setSocketId(socket.id);
+		}
+		return () => {
+			createdSocketId.current = null;
+			setSocketId(null);
+		};
+	}, [
+		ctx,
+		entityId,
+		kind,
+		name
+	]);
+	const updateOffset = useCallback(() => {
+		const sid = socketId ?? createdSocketId.current;
+		if (!ref.current || sid === null) return;
+		if (!ctx.entities.get(entityId)) return;
+		const socket = ctx.sockets.get(sid);
+		if (!socket) return;
+		const rect = ref.current.getBoundingClientRect();
+		const parentNode = ref.current.closest(".anode-node");
+		if (!parentNode) return;
+		const parentRect = parentNode.getBoundingClientRect();
+		socket.offset.set((rect.left + rect.width / 2 - (parentRect.left + parentRect.width / 2)) / viewport.k, (rect.top + rect.height / 2 - (parentRect.top + parentRect.height / 2)) / viewport.k);
+		ctx.notifySocketMove(socket);
+	}, [
+		ctx,
+		entityId,
+		socketId,
+		viewport.k
+	]);
+	useEffect(() => {
+		updateOffset();
+		window.addEventListener("resize", updateOffset);
+		return () => window.removeEventListener("resize", updateOffset);
+	}, [updateOffset]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: `anode-socket ${className || ""}`,
+		"data-socket-id": socketId,
+		"data-socket-kind": kind,
+		style: {
+			width: 12,
+			height: 12,
+			borderRadius: "50%",
+			background: kind === SocketKind.INPUT ? "#4ade80" : "#f87171",
+			border: "2px solid white",
+			cursor: "crosshair",
+			...style
+		},
+		onMouseDown: (e) => {
+			e.stopPropagation();
+			if (socketId === null) return;
+			const event = new CustomEvent("anode-link-start", {
+				bubbles: true,
+				detail: {
+					socketId,
+					kind,
+					x: e.clientX,
+					y: e.clientY
+				}
+			});
+			ref.current?.dispatchEvent(event);
+		},
+		onTouchStart: (e) => {
+			e.stopPropagation();
+			if (socketId === null) return;
+			const touch = e.touches[0];
+			if (!touch) return;
+			const event = new CustomEvent("anode-link-start", {
+				bubbles: true,
+				detail: {
+					socketId,
+					kind,
+					x: touch.clientX,
+					y: touch.clientY
+				}
+			});
+			ref.current?.dispatchEvent(event);
+		}
+	});
+};
+
+//#endregion
+export { Socket };

package/dist/elements/World.d.ts

@@ -0,0 +1,45 @@
+import { NodeComponentProps } from "./Node.js";
+import { LinkComponentProps } from "./Link.js";
+import React from "react";
+import { Context, LinkKind } from "@stuly/anode";
+
+//#region src/elements/World.d.ts
+interface NodeData {
+  id: number;
+  position: {
+    x: number;
+    y: number;
+  };
+  type?: string;
+  data?: any;
+}
+interface LinkData {
+  id: number;
+  source: number;
+  sourceHandle: string;
+  target: number;
+  targetHandle: string;
+  type?: string;
+  data?: any;
+  kind?: LinkKind;
+  waypoints?: {
+    x: number;
+    y: number;
+  }[];
+}
+declare const World: React.FC<{
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  selectionBoxStyle?: React.CSSProperties;
+  nodeTypes?: Record<string, React.ComponentType<NodeComponentProps>>;
+  linkTypes?: Record<string, React.ComponentType<LinkComponentProps>>;
+  defaultLinkKind?: LinkKind;
+  onConnect?: (fromId: number, toId: number, ctx: Context<any>) => void;
+  isValidConnection?: (from: any, to: any, ctx: Context<any>) => boolean;
+  nodes?: NodeData[];
+  links?: LinkData[];
+  onNodesChange?: (nodes: NodeData[], ctx: Context<any>) => void;
+  onLinksChange?: (links: LinkData[], ctx: Context<any>) => void;
+}>;
+//#endregion
+export { LinkData, NodeData, World };