max/nodarium
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 5 Wiki Activity

Compare commits

base: max:feat/group-node
Branches Tags
max:main max:feat/group-node max:feat/arena-runtime max:feat/shape-node max:feat/zig-based-node
max:v0.0.5 max:v0.0.4 max:v0.0.3 max:v0.0.2 max:v0.0.1
..
compare: max:main
Branches Tags
max:feat/group-node max:main max:feat/arena-runtime max:feat/shape-node max:feat/zig-based-node
max:v0.0.5 max:v0.0.4 max:v0.0.3 max:v0.0.2 max:v0.0.1

1 Commits
feat/group ... main

Author SHA1 Message Date
Max Richter
a56e8f445e feat(ci): install openssh client
All checks were successful
📊 Benchmark the Runtime / release (push) Successful in 44s
Details
Build & Push CI Image / build-and-push (push) Successful in 13m32s
Details
🚀 Lint & Test & Deploy / release (push) Successful in 4m17s
Details
2026-04-24 13:56:07 +02:00
24 changed files with 82 additions and 1599 deletions
Expand all files Collapse all files

42
.gitea/workflows/benchmark.yaml
View File

@@ -14,7 +14,7 @@ env:
jobs: jobs:
release: release:
runs-on: ubuntu-latest runs-on: ubuntu-latest
container: git.max-richter.dev/max/nodarium-ci:a56e8f445edb6064ae7a7b3b783fb7445f1b4e69 container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47
steps: steps:
- name: 📑 Checkout Code - name: 📑 Checkout Code
@@ -51,37 +51,9 @@ jobs:
- name: 🏃 Execute Runtime - name: 🏃 Execute Runtime
run: pnpm run --filter @nodarium/app bench run: pnpm run --filter @nodarium/app bench
- name: 🔑 Setup SSH key - name: 📤 Upload Benchmark Results
run: | uses: actions/upload-artifact@v3
mkdir -p ~/.ssh with:
echo "${{ secrets.GIT_SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519 name: benchmark-data
chmod 600 ~/.ssh/id_ed25519 path: app/benchmark/out/
ssh-keyscan -p 2222 -H git.max-richter.dev >> ~/.ssh/known_hosts compression: 9
ssh -vvv -p 2222 -i ~/.ssh/id_ed25519 -T git@git.max-richter.dev
- name: 📤 Push Results
env:
BENCH_REPO: "git@git.max-richter.dev:max/nodarium-benchmarks.git"
run: |
git config --global user.name "nodarium-bot"
git config --global user.email "nodarium-bot@max-richter.dev"
# 2. Clone the benchmarks repo into a temp folder
git config --global core.sshCommand "ssh -vv -p 2222 -i ~/.ssh/id_ed25519 -o IdentitiesOnly=yes"
git clone git@git.max-richter.dev:max/nodarium-benchmarks.git target_bench_repo
# 3. Create a directory structure based on the branch
# This allows the UI to "switch between branches"
BRANCH_NAME="${{ github.ref_name }}"
DEST_DIR="target_bench_repo/data/$BRANCH_NAME/$(date +%s)"
mkdir -p "$DEST_DIR"
# 4. Copy the new results
# Assuming your bench tool outputs a file named 'results.json'
cp app/benchmark/out/*.json "$DEST_DIR/"
# 5. Commit and Push
cd target_bench_repo
git add .
git commit -m "Update benchmarks for $BRANCH_NAME: ${{ github.sha }}"
git push origin main

2
.gitea/workflows/release.yaml
View File

@@ -15,7 +15,7 @@ env:
jobs: jobs:
release: release:
runs-on: ubuntu-latest runs-on: ubuntu-latest
container: git.max-richter.dev/max/nodarium-ci:a56e8f445edb6064ae7a7b3b783fb7445f1b4e69 container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47
steps: steps:
- name: 📑 Checkout Code - name: 📑 Checkout Code

1
Dockerfile.ci
View File

@@ -5,6 +5,7 @@ ENV RUSTUP_HOME=/usr/local/rustup \
PATH=/usr/local/cargo/bin:$PATH PATH=/usr/local/cargo/bin:$PATH
RUN apt-get update && apt-get install -y \ RUN apt-get update && apt-get install -y \
openssh-client \
ca-certificates=20230311+deb12u1 \ ca-certificates=20230311+deb12u1 \
gpg=2.2.40-1.1+deb12u2 \ gpg=2.2.40-1.1+deb12u2 \
gpg-agent=2.2.40-1.1+deb12u2 \ gpg-agent=2.2.40-1.1+deb12u2 \

2
app/src/lib/graph-interface/components/AddMenu.svelte
View File

@@ -183,7 +183,7 @@
activeNodeId = node.id; activeNodeId = node.id;
}} }}
> >
{node.meta?.title ?? node.id.split('/').at(-1)} {node.id.split('/').at(-1)}
</div> </div>
{/each} {/each}
</div> </div>

610
app/src/lib/graph-interface/graph-manager.svelte.ts
View File

@@ -3,14 +3,11 @@ import { RemoteNodeRegistry } from '$lib/node-registry/index';
import type { import type {
Edge, Edge,
Graph, Graph,
GroupSocket,
NodeDefinition, NodeDefinition,
NodeGroupDefinition,
NodeId, NodeId,
NodeInput, NodeInput,
NodeInstance, NodeInstance,
NodeRegistry, NodeRegistry,
SerializedNode,
Socket Socket
} from '@nodarium/types'; } from '@nodarium/types';
import { fastHashString } from '@nodarium/utils'; import { fastHashString } from '@nodarium/utils';
@@ -59,14 +56,6 @@ function areEdgesEqual(firstEdge: Edge, secondEdge: Edge) {
return true; return true;
} }
function isVirtualType(type: string): boolean {
return type.startsWith('__virtual/');
}
function isGroupInstanceType(type: string): boolean {
return type === '__virtual/group/instance';
}
export class GraphManager extends EventEmitter<{ export class GraphManager extends EventEmitter<{
save: Graph; save: Graph;
result: unknown; result: unknown;
@@ -90,12 +79,6 @@ export class GraphManager extends EventEmitter<{
currentUndoGroup: number | null = null; currentUndoGroup: number | null = null;
// Group-related state
groups: Map<string, NodeGroupDefinition> = new Map();
groupNodeDefinitions: Map<string, NodeDefinition> = new Map();
currentGroupContext: string | null = null;
graphStack: { rootGraph: Graph; groupId: string; cameraPosition: [number, number, number] }[] = $state([]);
inputSockets = $derived.by(() => { inputSockets = $derived.by(() => {
const s = new SvelteSet<string>(); const s = new SvelteSet<string>();
for (const edge of this.edges) { for (const edge of this.edges) {
@@ -105,523 +88,37 @@ export class GraphManager extends EventEmitter<{
}); });
history: HistoryManager = new HistoryManager(); history: HistoryManager = new HistoryManager();
private serializeFullGraph(): Graph {
if (this.graphStack.length === 0) return this.serialize();
// Merge the current internal state upward through every stack level.
// $state.snapshot strips Svelte reactive proxies so the result can cross
// the postMessage boundary to the worker.
let merged: Graph = this.serialize();
for (let i = this.graphStack.length - 1; i >= 0; i--) {
const { rootGraph, groupId } = $state.snapshot(this.graphStack[i]);
merged = {
...rootGraph,
groups: {
...rootGraph.groups,
[groupId]: {
...rootGraph.groups?.[groupId]!,
graph: { nodes: merged.nodes, edges: merged.edges }
}
}
};
}
return merged;
}
execute = throttle(() => { execute = throttle(() => {
if (this.loaded === false) return; if (this.loaded === false) return;
this.emit('result', this.serializeFullGraph()); this.emit('result', this.serialize());
}, 10); }, 10);
constructor(public registry: NodeRegistry) { constructor(public registry: NodeRegistry) {
super(); super();
} }
// --- Group helpers ---
private buildGroupNodeDefinition(group: NodeGroupDefinition): NodeDefinition {
return {
id: `__virtual/group/${group.id}` as NodeId,
meta: { title: group.name },
inputs: Object.fromEntries(
group.inputs.map(s => [s.name, { type: s.type, external: true } as NodeInput])
),
outputs: group.outputs.map(s => s.type),
execute(input: Int32Array): Int32Array { return input; }
};
}
buildGroupInputNodeDef(group: NodeGroupDefinition): NodeDefinition {
return {
id: '__virtual/group/input' as NodeId,
inputs: {},
outputs: group.inputs.map(s => s.type),
execute(input: Int32Array): Int32Array { return input; }
};
}
buildGroupOutputNodeDef(group: NodeGroupDefinition): NodeDefinition {
return {
id: '__virtual/group/output' as NodeId,
inputs: Object.fromEntries(
group.outputs.map(s => [s.name, { type: s.type }])
) as Record<string, NodeInput>,
outputs: [],
execute(input: Int32Array): Int32Array { return input; }
};
}
private getNodeTypeWithContext(type: string, props?: Record<string, unknown>): NodeDefinition | undefined {
if (type === '__virtual/group/input' && this.currentGroupContext) {
const group = this.groups.get(this.currentGroupContext);
if (group) return this.buildGroupInputNodeDef(group);
}
if (type === '__virtual/group/output' && this.currentGroupContext) {
const group = this.groups.get(this.currentGroupContext);
if (group) return this.buildGroupOutputNodeDef(group);
}
if (type === '__virtual/group/instance') {
const groupId = props?.groupId as string | undefined;
if (groupId) return this.groupNodeDefinitions.get(`__virtual/group/${groupId}`);
return undefined;
}
return this.groupNodeDefinitions.get(type) || this.registry.getNode(type);
}
// --- Group creation ---
createGroup(nodeIds: number[]): NodeInstance | undefined {
if (nodeIds.length === 0) return;
const selectedNodes = nodeIds
.map(id => this.getNode(id))
.filter(Boolean) as NodeInstance[];
if (selectedNodes.length === 0) return;
const selectedSet = new Set(nodeIds);
// Snapshot boundary edges
const incomingEdges = this.edges.filter(e =>
!selectedSet.has(e[0].id) && selectedSet.has(e[2].id)
);
const outgoingEdges = this.edges.filter(e =>
selectedSet.has(e[0].id) && !selectedSet.has(e[2].id)
);
const inputs: GroupSocket[] = incomingEdges.map((e, i) => ({
name: `input_${i}`,
type: e[0].state.type?.outputs?.[e[1]] || '*'
}));
const outputs: GroupSocket[] = outgoingEdges.map((e, i) => ({
name: `output_${i}`,
type: e[0].state.type?.outputs?.[e[1]] || '*'
}));
const groupId = `grp_${Date.now().toString(36)}`;
const xs = selectedNodes.map(n => n.position[0]);
const ys = selectedNodes.map(n => n.position[1]);
const minX = Math.min(...xs);
const maxX = Math.max(...xs);
const avgY = ys.reduce((a, b) => a + b, 0) / ys.length;
const centroidX = xs.reduce((a, b) => a + b, 0) / xs.length;
// Find unique IDs for virtual nodes in the internal graph
const existingIds = new Set(selectedNodes.map(n => n.id));
let internalInputId = 1;
while (existingIds.has(internalInputId)) internalInputId++;
existingIds.add(internalInputId);
let internalOutputId = internalInputId + 1;
while (existingIds.has(internalOutputId)) internalOutputId++;
const internalNodes: SerializedNode[] = [
{
id: internalInputId,
type: '__virtual/group/input' as NodeId,
position: [minX - 25, avgY]
},
...selectedNodes.map(n => {
// Use $state.snapshot to get plain values (no reactive proxies)
const props = n.props ? $state.snapshot(n.props) : undefined;
const meta = n.meta ? $state.snapshot(n.meta) : undefined;
return {
id: n.id,
type: n.type,
position: [n.position[0], n.position[1]] as [number, number],
...(props !== undefined ? { props } : {}),
...(meta ? { meta } : {})
};
}),
{
id: internalOutputId,
type: '__virtual/group/output' as NodeId,
position: [maxX + 25, avgY]
}
];
const internalEdges: Graph['edges'] = [
...this.getEdgesBetweenNodes(selectedNodes),
...incomingEdges.map((e, i) =>
[internalInputId, i, e[2].id, e[3]] as [number, number, number, string]
),
...outgoingEdges.map((e, i) =>
[e[0].id, e[1], internalOutputId, `output_${i}`] as [number, number, number, string]
)
];
const group: NodeGroupDefinition = {
id: groupId,
name: 'Group',
inputs,
outputs,
graph: { nodes: internalNodes, edges: internalEdges }
};
this.groups.set(groupId, group);
if (!this.graph.groups) this.graph.groups = {};
this.graph.groups[groupId] = group;
const groupNodeDef = this.buildGroupNodeDefinition(group);
this.groupNodeDefinitions.set(groupNodeDef.id, groupNodeDef);
this.startUndoGroup();
// Remove selected nodes and all their edges
for (const node of selectedNodes) {
const connectedEdges = this.edges.filter(
e => e[0].id === node.id || e[2].id === node.id
);
for (const e of connectedEdges) {
this.removeEdge(e, { applyDeletion: false });
}
this.nodes.delete(node.id);
}
// Place group instance node (plain object like _init — don't wrap in $state()
// to avoid Svelte 5 deeply-proxying the NodeDefinition execute function)
const groupNodeId = this.createNodeId();
const groupNode = {
id: groupNodeId,
type: '__virtual/group/instance' as NodeId,
position: [centroidX, avgY] as [number, number],
props: { groupId },
state: { type: groupNodeDef }
} as NodeInstance;
this.nodes.set(groupNodeId, groupNode);
// Reconnect boundary edges
for (let i = 0; i < incomingEdges.length; i++) {
const e = incomingEdges[i];
this.createEdge(e[0], e[1], groupNode, inputs[i].name, { applyUpdate: false });
}
for (let i = 0; i < outgoingEdges.length; i++) {
const e = outgoingEdges[i];
this.createEdge(groupNode, i, e[2], e[3], { applyUpdate: false });
}
this.saveUndoGroup();
this.execute();
return groupNode;
}
// --- Ungrouping ---
ungroup(nodeId: number) {
const groupNode = this.getNode(nodeId);
if (!groupNode || !isGroupInstanceType(groupNode.type)) return;
const groupId = groupNode.props?.groupId as string | undefined;
if (!groupId) return;
const group = this.groups.get(groupId);
if (!group) return;
const incomingEdges = this.getEdgesToNode(groupNode);
const outgoingEdges = this.getEdgesFromNode(groupNode);
const inputVirtualId = group.graph.nodes.find(
n => n.type === '__virtual/group/input'
)?.id;
const outputVirtualId = group.graph.nodes.find(
n => n.type === '__virtual/group/output'
)?.id;
this.startUndoGroup();
// Remove the group instance node (and its edges)
this.removeNode(groupNode, { restoreEdges: false });
// Re-insert internal nodes
const idMap = new Map<number, number>();
const realInternalNodes = group.graph.nodes.filter(
n => n.type !== '__virtual/group/input' && n.type !== '__virtual/group/output'
);
for (const n of realInternalNodes) {
const newId = this.createNodeId();
idMap.set(n.id, newId);
const nodeType = this.getNodeTypeWithContext(n.type, n.props as Record<string, unknown>);
const newNode: NodeInstance = $state({
id: newId,
type: n.type,
position: [...n.position] as [number, number],
...(n.props ? { props: { ...n.props } } : {}),
state: nodeType ? { type: nodeType } : {}
});
this.nodes.set(newId, newNode);
}
// Re-wire edges
for (const e of group.graph.edges) {
const fromIsInput = e[0] === inputVirtualId;
const toIsOutput = e[2] === outputVirtualId;
if (fromIsInput) {
const inputIdx = e[1];
const parentEdge = incomingEdges.find(
pe => pe[3] === group.inputs[inputIdx]?.name
);
if (parentEdge) {
const toNode = this.getNode(idMap.get(e[2])!);
if (toNode) {
this.createEdge(parentEdge[0], parentEdge[1], toNode, e[3], {
applyUpdate: false
});
}
}
} else if (toIsOutput) {
const outputSocketName = e[3];
const outputIdx = group.outputs.findIndex(s => s.name === outputSocketName);
const parentEdge = outgoingEdges.find(pe => pe[1] === outputIdx);
if (parentEdge) {
const fromNode = this.getNode(idMap.get(e[0])!);
const toNode = this.getNode(parentEdge[2].id);
if (fromNode && toNode) {
this.createEdge(fromNode, e[1], toNode, parentEdge[3], {
applyUpdate: false
});
}
}
} else {
const fromNode = this.getNode(idMap.get(e[0])!);
const toNode = this.getNode(idMap.get(e[2])!);
if (fromNode && toNode) {
this.createEdge(fromNode, e[1], toNode, e[3], { applyUpdate: false });
}
}
}
// Remove group definition if no more instances
const hasOtherInstances = Array.from(this.nodes.values()).some(
n => n.type === '__virtual/group/instance' && (n.props?.groupId as string) === groupId
);
if (!hasOtherInstances) {
this.groups.delete(groupId);
this.groupNodeDefinitions.delete(`__virtual/group/${groupId}`);
if (this.graph.groups) {
delete this.graph.groups[groupId];
}
}
this.saveUndoGroup();
this.execute();
}
// --- Group socket management (called from inside a group) ---
addGroupSocket(kind: 'input' | 'output', socketType: string) {
if (!this.currentGroupContext) return;
const group = this.groups.get(this.currentGroupContext);
if (!group) return;
const arr = kind === 'input' ? group.inputs : group.outputs;
const name = `${kind}_${arr.length}`;
arr.push({ name, type: socketType });
this._refreshGroupContext(group);
this.save();
}
removeGroupSocket(kind: 'input' | 'output', index: number) {
if (!this.currentGroupContext) return;
const group = this.groups.get(this.currentGroupContext);
if (!group) return;
const arr = kind === 'input' ? group.inputs : group.outputs;
arr.splice(index, 1);
this._refreshGroupContext(group);
this.save();
}
private _refreshGroupContext(group: NodeGroupDefinition) {
const groupId = group.id;
// Keep graph.groups in sync
if (this.graph.groups?.[groupId]) {
this.graph.groups[groupId] = group;
}
// Rebuild the group node definition (used in parent graph)
const groupNodeDef = this.buildGroupNodeDefinition(group);
this.groupNodeDefinitions.set(groupNodeDef.id, groupNodeDef);
// Update virtual input/output nodes in the current internal graph,
// and any group instance nodes that reference this group
const inputDef = this.buildGroupInputNodeDef(group);
const outputDef = this.buildGroupOutputNodeDef(group);
for (const node of this.nodes.values()) {
if (node.type === '__virtual/group/input') node.state.type = inputDef;
if (node.type === '__virtual/group/output') node.state.type = outputDef;
if (node.type === '__virtual/group/instance' && (node.props?.groupId as string) === groupId) {
node.state.type = groupNodeDef;
}
}
}
// --- Group navigation ---
enterGroup(nodeId: number, cameraPosition: [number, number, number] = [0, 0, 4]): boolean {
const groupNode = this.getNode(nodeId);
if (!groupNode || !isGroupInstanceType(groupNode.type)) return false;
const groupId = groupNode.props?.groupId as string | undefined;
if (!groupId) return false;
const group = this.groups.get(groupId);
if (!group) return false;
const currentSerialized = this.serialize();
this.graphStack.push({ rootGraph: currentSerialized, groupId, cameraPosition });
this.currentGroupContext = groupId;
const internalGraph: Graph = {
id: this.graph.id,
nodes: group.graph.nodes,
edges: group.graph.edges,
groups: this.graph.groups
};
this.graph = internalGraph;
this._init(internalGraph);
this.history.reset();
return true;
}
exitGroup(): [number, number, number] | false {
if (this.graphStack.length === 0) return false;
const { rootGraph, groupId, cameraPosition } = this.graphStack[this.graphStack.length - 1];
this.graphStack.pop();
// Serialize current internal graph state
const internalState = this.serialize();
// Update the group definition in the root graph
const updatedRootGraph: Graph = {
...rootGraph,
groups: {
...rootGraph.groups,
[groupId]: {
...rootGraph.groups?.[groupId]!,
graph: {
nodes: internalState.nodes,
edges: internalState.edges
}
}
}
};
this.currentGroupContext = this.graphStack.length > 0
? this.graphStack[this.graphStack.length - 1].groupId
: null;
this.graph = updatedRootGraph;
this._init(updatedRootGraph);
this.history.reset();
this.save();
return cameraPosition;
}
get isInsideGroup(): boolean {
return this.graphStack.length > 0;
}
get breadcrumbs(): { name: string; groupId: string | null }[] {
const crumbs: { name: string; groupId: string | null }[] = [
{ name: 'Root', groupId: null }
];
for (const entry of this.graphStack) {
const group = this.groups.get(entry.groupId);
crumbs.push({ name: group?.name ?? entry.groupId, groupId: entry.groupId });
}
return crumbs;
}
// --- Serialization ---
private serializeGroups(): Graph['groups'] | undefined {
const src = this.graph.groups;
if (!src || Object.keys(src).length === 0) return undefined;
const result: NonNullable<Graph['groups']> = {};
for (const [id, group] of Object.entries(src)) {
result[id] = {
id: group.id,
name: group.name,
inputs: group.inputs.map(s => ({ name: s.name, type: s.type })),
outputs: group.outputs.map(s => ({ name: s.name, type: s.type })),
graph: {
nodes: group.graph.nodes.map(n => ({
id: n.id,
type: n.type,
position: [n.position[0], n.position[1]] as [number, number],
...(n.props !== undefined ? {
props: Object.fromEntries(
Object.entries(n.props).map(([k, v]) => [
k,
Array.isArray(v) ? [...v] : v
])
)
} : {}),
...(n.meta ? { meta: { title: n.meta.title, lastModified: n.meta.lastModified } } : {})
})),
edges: group.graph.edges.map(
e => [e[0], e[1], e[2], e[3]] as [number, number, number, string]
)
}
};
}
return result;
}
serialize(): Graph { serialize(): Graph {
const nodes = Array.from(this.nodes.values()).map((node) => ({ const nodes = Array.from(this.nodes.values()).map((node) => ({
id: node.id, id: node.id,
position: [...node.position] as [number, number], position: [...node.position],
type: node.type, type: node.type,
props: node.props ? $state.snapshot(node.props) : undefined props: node.props
})); })) as NodeInstance[];
const edges = this.edges.map((edge) => [ const edges = this.edges.map((edge) => [
edge[0].id, edge[0].id,
edge[1], edge[1],
edge[2].id, edge[2].id,
edge[3] edge[3]
]) as Graph['edges']; ]) as Graph['edges'];
const groups = this.serializeGroups();
const serialized = { const serialized = {
id: this.graph.id, id: this.graph.id,
settings: $state.snapshot(this.settings), settings: $state.snapshot(this.settings),
meta: $state.snapshot(this.graph.meta), meta: $state.snapshot(this.graph.meta),
nodes, nodes,
edges, edges
...(groups ? { groups } : {})
}; };
logger.log('serializing graph', serialized); logger.log('serializing graph', serialized);
return clone(serialized) as Graph; return clone($state.snapshot(serialized));
} }
private lastSettingsHash = 0; private lastSettingsHash = 0;
@@ -636,12 +133,7 @@ export class GraphManager extends EventEmitter<{
} }
getNodeDefinitions() { getNodeDefinitions() {
const all = this.registry.getAllNodes(); return this.registry.getAllNodes();
// Only show the Group node in AddMenu when there's at least one group to assign
if (this.groups.size === 0) {
return all.filter(n => n.id !== '__virtual/group/instance');
}
return all;
} }
getLinkedNodes(node: NodeInstance) { getLinkedNodes(node: NodeInstance) {
@@ -717,14 +209,19 @@ export class GraphManager extends EventEmitter<{
const draggedInputs = Object.values(draggedNode.state.type.inputs ?? {}); const draggedInputs = Object.values(draggedNode.state.type.inputs ?? {});
const draggedOutputs = draggedNode.state.type.outputs ?? []; const draggedOutputs = draggedNode.state.type.outputs ?? [];
// Optimization: Pre-calculate parents to avoid cycles
const parentIds = new SvelteSet(this.getParentsOfNode(draggedNode).map(n => n.id)); const parentIds = new SvelteSet(this.getParentsOfNode(draggedNode).map(n => n.id));
return this.edges.filter((edge) => { return this.edges.filter((edge) => {
const [fromNode, fromSocketIdx, toNode, toSocketKey] = edge; const [fromNode, fromSocketIdx, toNode, toSocketKey] = edge;
// 1. Prevent cycles: If the target node is already a parent, we can't drop here
if (parentIds.has(toNode.id)) return false; if (parentIds.has(toNode.id)) return false;
// 2. Prevent self-dropping: Don't drop on edges already connected to this node
if (fromNode.id === nodeId || toNode.id === nodeId) return false; if (fromNode.id === nodeId || toNode.id === nodeId) return false;
// 3. Check if edge.source can plug into ANY draggedNode.input
const edgeOutputSocketType = fromNode.state?.type?.outputs?.[fromSocketIdx]; const edgeOutputSocketType = fromNode.state?.type?.outputs?.[fromSocketIdx];
const canPlugIntoDragged = draggedInputs.some(input => { const canPlugIntoDragged = draggedInputs.some(input => {
const acceptedTypes = [input.type, ...(input.accepts || [])]; const acceptedTypes = [input.type, ...(input.accepts || [])];
@@ -733,6 +230,7 @@ export class GraphManager extends EventEmitter<{
if (!canPlugIntoDragged) return false; if (!canPlugIntoDragged) return false;
// 4. Check if ANY draggedNode.output can plug into edge.target
const targetInput = toNode.state?.type?.inputs?.[toSocketKey]; const targetInput = toNode.state?.type?.inputs?.[toSocketKey];
const targetAcceptedTypes = [targetInput?.type, ...(targetInput?.accepts || [])]; const targetAcceptedTypes = [targetInput?.type, ...(targetInput?.accepts || [])];
@@ -769,35 +267,15 @@ export class GraphManager extends EventEmitter<{
} }
private _init(graph: Graph) { private _init(graph: Graph) {
// Rebuild group definitions from the graph
this.groups.clear();
this.groupNodeDefinitions.clear();
if (graph.groups) {
for (const [groupId, group] of Object.entries(graph.groups)) {
this.groups.set(groupId, group);
const def = this.buildGroupNodeDefinition(group);
this.groupNodeDefinitions.set(def.id, def);
}
}
const nodes = new SvelteMap( const nodes = new SvelteMap(
graph.nodes.map((serialized) => { graph.nodes.map((node) => {
// Migration: old __virtual/group/{groupId} format → __virtual/group/instance with props.groupId const nodeType = this.registry.getNode(node.type);
let node = serialized; const n = node as NodeInstance;
if (node.type.startsWith('__virtual/group/') if (nodeType) {
&& node.type !== '__virtual/group/input' n.state = {
&& node.type !== '__virtual/group/output' type: nodeType
&& node.type !== '__virtual/group/instance') { };
const oldGroupId = node.type.split('/')[2];
node = { ...node, type: '__virtual/group/instance' as NodeId, props: { ...node.props, groupId: oldGroupId } };
} }
// IMPORTANT: copy the node so we don't mutate the original SerializedNode
// (which may be stored in a group definition). Mutating it would add
// state.type (with an execute fn) making it non-cloneable.
const nodeType = this.getNodeTypeWithContext(node.type, node.props as Record<string, unknown>);
const n = { ...node } as NodeInstance;
n.state = nodeType ? { type: nodeType } : {};
return [node.id, n]; return [node.id, n];
}) })
); );
@@ -833,10 +311,7 @@ export class GraphManager extends EventEmitter<{
logger.info('loading graph', { nodes: graph.nodes, edges: graph.edges, id: graph.id }); logger.info('loading graph', { nodes: graph.nodes, edges: graph.edges, id: graph.id });
// Filter out virtual group types — they are resolved locally, not fetched remotely const nodeIds = Array.from(new SvelteSet([...graph.nodes.map((n) => n.type)]));
const nodeIds = Array.from(new SvelteSet([
...graph.nodes.map((n) => n.type).filter(t => !isVirtualType(t))
]));
await this.registry.load(nodeIds); await this.registry.load(nodeIds);
// Fetch all nodes from all collections of the loaded nodes // Fetch all nodes from all collections of the loaded nodes
@@ -857,13 +332,13 @@ export class GraphManager extends EventEmitter<{
logger.info('loaded node types', this.registry.getAllNodes()); logger.info('loaded node types', this.registry.getAllNodes());
for (const node of this.graph.nodes) { for (const node of this.graph.nodes) {
if (isVirtualType(node.type)) continue;
const nodeType = this.registry.getNode(node.type); const nodeType = this.registry.getNode(node.type);
if (!nodeType) { if (!nodeType) {
logger.error(`Node type not found: ${node.type}`); logger.error(`Node type not found: ${node.type}`);
this.status = 'error'; this.status = 'error';
return; return;
} }
// Turn into runtime node
const n = node as NodeInstance; const n = node as NodeInstance;
n.state = {}; n.state = {};
n.state.type = nodeType; n.state.type = nodeType;
@@ -872,6 +347,7 @@ export class GraphManager extends EventEmitter<{
// load settings // load settings
const settingTypes: Record< const settingTypes: Record<
string, string,
// Optional metadata to map settings to specific nodes
NodeInput & { __node_type: string; __node_input: string } NodeInput & { __node_type: string; __node_input: string }
> = {}; > = {};
const settingValues = graph.settings || {}; const settingValues = graph.settings || {};
@@ -900,10 +376,6 @@ export class GraphManager extends EventEmitter<{
this.settings = settingValues; this.settings = settingValues;
this.emit('settings', { types: settingTypes, values: settingValues }); this.emit('settings', { types: settingTypes, values: settingValues });
// Reset navigation
this.graphStack = [];
this.currentGroupContext = null;
this.history.reset(); this.history.reset();
this._init(this.graph); this._init(this.graph);
@@ -970,7 +442,9 @@ export class GraphManager extends EventEmitter<{
} }
getNodesBetween(from: NodeInstance, to: NodeInstance): NodeInstance[] | undefined { getNodesBetween(from: NodeInstance, to: NodeInstance): NodeInstance[] | undefined {
// < - - - - from
const toParents = this.getParentsOfNode(to); const toParents = this.getParentsOfNode(to);
// < - - - - from - - - - to
const fromParents = this.getParentsOfNode(from); const fromParents = this.getParentsOfNode(from);
if (toParents.includes(from)) { if (toParents.includes(from)) {
const fromChildren = this.getChildren(from); const fromChildren = this.getChildren(from);
@@ -979,6 +453,7 @@ export class GraphManager extends EventEmitter<{
const toChildren = this.getChildren(to); const toChildren = this.getChildren(to);
return fromParents.filter((n) => toChildren.includes(n)); return fromParents.filter((n) => toChildren.includes(n));
} else { } else {
// these two nodes are not connected
return; return;
} }
} }
@@ -1032,6 +507,7 @@ export class GraphManager extends EventEmitter<{
} }
createGraph(nodes: NodeInstance[], edges: [number, number, number, string][]) { createGraph(nodes: NodeInstance[], edges: [number, number, number, string][]) {
// map old ids to new ids
const idMap = new SvelteMap<number, number>(); const idMap = new SvelteMap<number, number>();
let startId = this.createNodeId(); let startId = this.createNodeId();
@@ -1082,26 +558,6 @@ export class GraphManager extends EventEmitter<{
position: NodeInstance['position']; position: NodeInstance['position'];
props: NodeInstance['props']; props: NodeInstance['props'];
}) { }) {
if (type === '__virtual/group/instance') {
const firstEntry = this.groups.entries().next();
if (firstEntry.done) {
logger.error('No groups available to create a group node');
return;
}
const [groupId] = firstEntry.value;
const groupNodeDef = this.groupNodeDefinitions.get(`__virtual/group/${groupId}`);
const node = {
id: this.createNodeId(),
type: '__virtual/group/instance' as NodeId,
position,
props: { groupId, ...props },
state: { type: groupNodeDef }
} as NodeInstance;
this.nodes.set(node.id, node);
this.save();
return node;
}
const nodeType = this.registry.getNode(type); const nodeType = this.registry.getNode(type);
if (!nodeType) { if (!nodeType) {
logger.error(`Node type not found: ${type}`); logger.error(`Node type not found: ${type}`);
@@ -1132,6 +588,7 @@ export class GraphManager extends EventEmitter<{
): Edge | undefined { ): Edge | undefined {
const existingEdges = this.getEdgesToNode(to); const existingEdges = this.getEdgesToNode(to);
// check if this exact edge already exists
const existingEdge = existingEdges.find( const existingEdge = existingEdges.find(
(e) => e[0].id === from.id && e[1] === fromSocket && e[3] === toSocket (e) => e[0].id === from.id && e[1] === fromSocket && e[3] === toSocket
); );
@@ -1140,6 +597,7 @@ export class GraphManager extends EventEmitter<{
return; return;
} }
// check if socket types match
const fromSocketType = from.state?.type?.outputs?.[fromSocket]; const fromSocketType = from.state?.type?.outputs?.[fromSocket];
const toSocketType = [to.state?.type?.inputs?.[toSocket]?.type]; const toSocketType = [to.state?.type?.inputs?.[toSocket]?.type];
if (to.state?.type?.inputs?.[toSocket]?.accepts) { if (to.state?.type?.inputs?.[toSocket]?.accepts) {
@@ -1207,13 +665,12 @@ export class GraphManager extends EventEmitter<{
const state = this.serialize(); const state = this.serialize();
this.history.save(state); this.history.save(state);
// This is some stupid race condition where the graph-manager emits a save event
// when the graph is not fully loaded
if (this.nodes.size === 0 && this.edges.length === 0) { if (this.nodes.size === 0 && this.edges.length === 0) {
return; return;
} }
// Don't emit save event while navigating inside a group
if (this.graphStack.length > 0) return;
this.emit('save', state); this.emit('save', state);
logger.log('saving graphs', state); logger.log('saving graphs', state);
} }
@@ -1272,7 +729,9 @@ export class GraphManager extends EventEmitter<{
const sockets: [NodeInstance, string | number][] = []; const sockets: [NodeInstance, string | number][] = [];
// if index is a string, we are an input looking for outputs
if (typeof index === 'string') { if (typeof index === 'string') {
// filter out self and child nodes
const children = new SvelteSet(this.getChildren(node).map((n) => n.id)); const children = new SvelteSet(this.getChildren(node).map((n) => n.id));
const nodes = this.getAllNodes().filter( const nodes = this.getAllNodes().filter(
(n) => n.id !== node.id && !children.has(n.id) (n) => n.id !== node.id && !children.has(n.id)
@@ -1291,6 +750,9 @@ export class GraphManager extends EventEmitter<{
} }
} }
} else if (typeof index === 'number') { } else if (typeof index === 'number') {
// if index is a number, we are an output looking for inputs
// filter out self and parent nodes
const parents = new SvelteSet(this.getParentsOfNode(node).map((n) => n.id)); const parents = new SvelteSet(this.getParentsOfNode(node).map((n) => n.id));
const nodes = this.getAllNodes().filter( const nodes = this.getAllNodes().filter(
(n) => n.id !== node.id && !parents.has(n.id) (n) => n.id !== node.id && !parents.has(n.id)

3
app/src/lib/graph-interface/graph-state.svelte.ts
View File

@@ -99,9 +99,6 @@ export class GraphState {
edges: [number, number, number, string][]; edges: [number, number, number, string][];
} = null; } = null;
// Saved camera position per group so re-entering restores where you left off
groupCameras = new Map<string, [number, number, number]>();
cameraBounds = $derived([ cameraBounds = $derived([
this.cameraPosition[0] - this.width / this.cameraPosition[2] / 2, this.cameraPosition[0] - this.width / this.cameraPosition[2] / 2,
this.cameraPosition[0] + this.width / this.cameraPosition[2] / 2, this.cameraPosition[0] + this.width / this.cameraPosition[2] / 2,

3
app/src/lib/graph-interface/graph/Graph.svelte
View File

@@ -100,9 +100,6 @@
if (typeof index === 'string') { if (typeof index === 'string') {
return node.state.type?.inputs?.[index].type || 'unknown'; return node.state.type?.inputs?.[index].type || 'unknown';
} }
if (node.type === '__virtual/group/instance') {
index += 1;
}
return node.state.type?.outputs?.[index] || 'unknown'; return node.state.type?.outputs?.[index] || 'unknown';
} }
</script> </script>

89
app/src/lib/graph-interface/graph/Wrapper.svelte
View File

@@ -87,95 +87,6 @@
manager.load(graph); manager.load(graph);
} }
}); });
function navigateToBreadcrumb(index: number) {
const crumbs = manager.breadcrumbs;
const depth = crumbs.length - 1 - index;
let restoredCamera: [number, number, number] | false = false;
for (let i = 0; i < depth; i++) {
const groupId = manager.currentGroupContext;
if (groupId) {
state.groupCameras.set(groupId, [...state.cameraPosition] as [number, number, number]);
}
restoredCamera = manager.exitGroup();
}
state.activeNodeId = -1;
state.clearSelection();
if (restoredCamera !== false) {
state.cameraPosition[0] = restoredCamera[0];
state.cameraPosition[1] = restoredCamera[1];
state.cameraPosition[2] = restoredCamera[2];
} else {
state.centerNode();
}
}
</script> </script>
{#if manager.isInsideGroup}
<div class="breadcrumb-bar">
{#each manager.breadcrumbs as crumb, i}
{#if i > 0}
<span class="sep">›</span>
{/if}
<button
class="crumb"
class:active={i === manager.breadcrumbs.length - 1}
onclick={() => navigateToBreadcrumb(i)}
>
{crumb.name}
</button>
{/each}
</div>
{/if}
<GraphEl {keymap} {safePadding} /> <GraphEl {keymap} {safePadding} />
<style>
.breadcrumb-bar {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
gap: 4px;
background: rgba(10, 15, 28, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
pointer-events: all;
backdrop-filter: blur(8px);
}
.sep {
opacity: 0.4;
font-size: 14px;
}
.crumb {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
font-size: 12px;
transition: color 0.15s, background 0.15s;
}
.crumb:hover {
color: white;
background: rgba(255, 255, 255, 0.08);
}
.crumb.active {
color: white;
cursor: default;
}
.crumb.active:hover {
background: none;
}
</style>

11
app/src/lib/graph-interface/helpers/nodeHelpers.ts
View File

@@ -3,9 +3,6 @@ import type { NodeDefinition, NodeInstance } from '@nodarium/types';
export function getParameterHeight(node: NodeDefinition, inputKey: string) { export function getParameterHeight(node: NodeDefinition, inputKey: string) {
const input = node.inputs?.[inputKey]; const input = node.inputs?.[inputKey];
if (!input) { if (!input) {
if (inputKey.startsWith('__virtual')) {
return 50;
}
return 0; return 0;
} }
@@ -56,9 +53,7 @@ export function getSocketPosition(
const nodeHeightCache: Record<string, number> = {}; const nodeHeightCache: Record<string, number> = {};
export function getNodeHeight(node: NodeDefinition) { export function getNodeHeight(node: NodeDefinition) {
// Don't cache virtual nodes — their inputs can change dynamically if (node.id in nodeHeightCache) {
const isVirtual = (node.id as string).startsWith('__virtual/');
if (!isVirtual && node.id in nodeHeightCache) {
return nodeHeightCache[node.id]; return nodeHeightCache[node.id];
} }
if (!node?.inputs) { if (!node?.inputs) {
@@ -71,8 +66,6 @@ export function getNodeHeight(node: NodeDefinition) {
height += h; height += h;
} }
if (!isVirtual) { nodeHeightCache[node.id] = height;
nodeHeightCache[node.id] = height;
}
return height; return height;
} }

96
app/src/lib/graph-interface/keymaps.ts
View File

@@ -45,26 +45,8 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
keymap.addShortcut({ keymap.addShortcut({
key: 'Escape', key: 'Escape',
description: 'Deselect nodes / Exit group', description: 'Deselect nodes',
callback: () => { callback: () => {
if (graph.isInsideGroup) {
const groupId = graph.currentGroupContext;
if (groupId) {
graphState.groupCameras.set(
groupId,
[...graphState.cameraPosition] as [number, number, number]
);
}
const savedCamera = graph.exitGroup();
if (savedCamera !== false) {
graphState.activeNodeId = -1;
graphState.clearSelection();
graphState.cameraPosition[0] = savedCamera[0];
graphState.cameraPosition[1] = savedCamera[1];
graphState.cameraPosition[2] = savedCamera[2];
return;
}
}
graphState.activeNodeId = -1; graphState.activeNodeId = -1;
graphState.clearSelection(); graphState.clearSelection();
graphState.edgeEndPosition = null; graphState.edgeEndPosition = null;
@@ -177,80 +159,4 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
if (!edge) graph.smartConnect(nodes[1], nodes[0]); if (!edge) graph.smartConnect(nodes[1], nodes[0]);
} }
}); });
keymap.addShortcut({
key: 'g',
ctrl: true,
preventDefault: true,
description: 'Group selected nodes',
callback: () => {
if (!graphState.isBodyFocused()) return;
const nodeIds = Array.from(
new Set([
...(graphState.selectedNodes.size > 0 ? graphState.selectedNodes.values() : []),
...(graphState.activeNodeId !== -1 ? [graphState.activeNodeId] : [])
])
);
if (nodeIds.length === 0) return;
const groupNode = graph.createGroup(nodeIds);
if (groupNode) {
graphState.selectedNodes.clear();
graphState.activeNodeId = groupNode.id;
}
}
});
keymap.addShortcut({
key: 'g',
alt: true,
shift: true,
preventDefault: true,
description: 'Ungroup selected node',
callback: () => {
if (!graphState.isBodyFocused()) return;
const nodeId = graphState.activeNodeId !== -1
? graphState.activeNodeId
: graphState.selectedNodes.size === 1
? [...graphState.selectedNodes.values()][0]
: -1;
if (nodeId === -1) return;
graph.ungroup(nodeId);
graphState.activeNodeId = -1;
graphState.clearSelection();
}
});
keymap.addShortcut({
key: 'Tab',
preventDefault: true,
description: 'Enter focused group node',
callback: () => {
if (!graphState.isBodyFocused()) return;
const entered = graph.enterGroup(
graphState.activeNodeId,
[...graphState.cameraPosition] as [number, number, number]
);
if (entered) {
graphState.activeNodeId = -1;
graphState.clearSelection();
// Restore group-specific camera if we've been here before, else snap to center
const groupId = graph.currentGroupContext;
const saved = groupId ? graphState.groupCameras.get(groupId) : undefined;
if (saved) {
graphState.cameraPosition[0] = saved[0];
graphState.cameraPosition[1] = saved[1];
graphState.cameraPosition[2] = saved[2];
} else {
const nodes = [...graph.nodes.values()];
if (nodes.length) {
const avgX = nodes.reduce((s, n) => s + n.position[0], 0) / nodes.length;
const avgY = nodes.reduce((s, n) => s + n.position[1], 0) / nodes.length;
graphState.cameraPosition[0] = avgX;
graphState.cameraPosition[1] = avgY;
graphState.cameraPosition[2] = 10;
}
}
}
}
});
} }

73
app/src/lib/graph-interface/node/NodeHTML.svelte
View File

@@ -1,13 +1,12 @@
<script lang="ts"> <script lang="ts">
import type { NodeDefinition, NodeInstance } from '@nodarium/types'; import type { NodeInstance } from '@nodarium/types';
import { getGraphManager, getGraphState } from '../graph-state.svelte'; import { getGraphState } from '../graph-state.svelte';
import NodeHeader from './NodeHeader.svelte'; import NodeHeader from './NodeHeader.svelte';
import NodeParameter from './NodeParameter.svelte'; import NodeParameter from './NodeParameter.svelte';
let ref: HTMLDivElement; let ref: HTMLDivElement;
const graphState = getGraphState(); const graphState = getGraphState();
const manager = getGraphManager();
type Props = { type Props = {
node: NodeInstance; node: NodeInstance;
@@ -31,37 +30,9 @@
const zOffset = Math.random() - 0.5; const zOffset = Math.random() - 0.5;
const zLimit = 2 - zOffset; const zLimit = 2 - zOffset;
function buildParameters(node: NodeInstance, inputs: NodeDefinition['inputs']) { const parameters = Object.entries(node.state?.type?.inputs || {}).filter(
let parameters = Object.entries(inputs || {}).filter( (p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
(p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true );
);
if (node.type === '__virtual/group/instance') {
parameters = [['__virtual/groupId', {
type: 'select',
value: node.props?.groupId as string,
options: [...manager?.groups?.keys()]
}], ...parameters];
}
return parameters;
}
const parameters = $derived(buildParameters(node, node?.state?.type?.inputs || {}));
const currentGroupId = $derived((node.props?.groupId as string) ?? '');
function onGroupSelect(event: Event) {
const select = event.target as HTMLSelectElement;
const newGroupId = select.value;
if (!manager || newGroupId === currentGroupId) return;
const newGroupDef = manager.groupNodeDefinitions.get(`__virtual/group/${newGroupId}`);
if (!newGroupDef) return;
node.props = { ...(node.props ?? {}), groupId: newGroupId };
node.state = { type: newGroupDef };
manager.execute();
manager.save();
}
$effect(() => { $effect(() => {
if ('state' in node && !node.state.ref) { if ('state' in node && !node.state.ref) {
@@ -84,22 +55,6 @@
> >
<NodeHeader {node} /> <NodeHeader {node} />
{#if false && node.type === '__virtual/group/instance'}
<div class="group-param">
<select
value={currentGroupId}
onchange={onGroupSelect}
onmousedown={(e) => e.stopPropagation()}
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
>
{#each manager?.groups?.entries() ?? [] as [gid, gdef]}
<option value={gid}>{gdef.name}</option>
{/each}
</select>
</div>
{/if}
{#each parameters as [key, value], i (key)} {#each parameters as [key, value], i (key)}
<NodeParameter <NodeParameter
bind:node bind:node
@@ -111,24 +66,6 @@
</div> </div>
<style> <style>
.group-param {
padding: 5px 8px;
border-bottom: solid 1px var(--color-layer-2);
background: var(--color-layer-1);
}
.group-param select {
width: 100%;
background: var(--color-layer-2);
color: var(--color-text);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
padding: 4px 6px;
font-size: 0.8em;
cursor: pointer;
box-sizing: border-box;
}
.node { .node {
box-sizing: border-box; box-sizing: border-box;
user-select: none !important; user-select: none !important;

2
app/src/lib/graph-interface/node/NodeHeader.svelte
View File

@@ -70,7 +70,7 @@
{#if appSettings.value.debug.advancedMode} {#if appSettings.value.debug.advancedMode}
<span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span> <span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
{/if} {/if}
{node.state?.type?.meta?.title ?? node.type.split('/').pop()} {node.type.split('/').pop()}
</div> </div>
<div <div
class="target" class="target"

2
app/src/lib/graph-interface/node/NodeInput.svelte
View File

@@ -45,7 +45,7 @@
$effect(() => { $effect(() => {
const a = $state.snapshot(value); const a = $state.snapshot(value);
const b = $state.snapshot(node?.props?.[id]) as number | number[] | undefined; const b = $state.snapshot(node?.props?.[id]);
const isDiff = Array.isArray(a) ? diffArray(a, b) : a !== b; const isDiff = Array.isArray(a) ? diffArray(a, b) : a !== b;
if (value !== undefined && isDiff) { if (value !== undefined && isDiff) {
node.props = { ...node.props, [id]: a }; node.props = { ...node.props, [id]: a };

4
app/src/lib/graph-interface/node/NodeParameter.svelte
View File

@@ -36,7 +36,7 @@
}); });
} }
const leftBump = $derived(!id.startsWith('__virtual') && nodeType.inputs?.[id].internal !== true); const leftBump = $derived(nodeType.inputs?.[id].internal !== true);
const cornerBottom = $derived(isLast ? 5 : 0); const cornerBottom = $derived(isLast ? 5 : 0);
const aspectRatio = 0.5; const aspectRatio = 0.5;
@@ -83,7 +83,7 @@
> >
{#key id && graphId} {#key id && graphId}
<div class="content" class:disabled={graph?.inputSockets?.has(socketId)}> <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
{#if inputType?.label !== '' && !id.startsWith('__virtual')} {#if inputType?.label !== ''}
<label for={elementId} title={input.description}>{input.label || id}</label> <label for={elementId} title={input.description}>{input.label || id}</label>
{/if} {/if}
{#if inputType?.external !== true} {#if inputType?.external !== true}

25
app/src/lib/node-registry/groupNodes.ts
View File

@@ -1,25 +0,0 @@
import type { NodeDefinition } from '@nodarium/types';
export const groupInputNode: NodeDefinition = {
id: '__virtual/group/input',
inputs: {},
outputs: [],
execute(_data: Int32Array): Int32Array { return _data; }
} as unknown as NodeDefinition;
export const groupOutputNode: NodeDefinition = {
id: '__virtual/group/output',
inputs: {},
outputs: [],
execute(_data: Int32Array): Int32Array { return _data; }
} as unknown as NodeDefinition;
// Stub registered in the registry so it appears in AddMenu.
// Actual inputs/outputs are resolved from props.groupId at runtime.
export const groupNode: NodeDefinition = {
id: '__virtual/group/instance',
meta: { title: 'Group' },
inputs: {},
outputs: [],
execute(_data: Int32Array): Int32Array { return _data; }
} as unknown as NodeDefinition;

145
app/src/lib/runtime/runtime-executor.ts
View File

@@ -6,142 +6,6 @@ import type {
RuntimeExecutor, RuntimeExecutor,
SyncCache SyncCache
} from '@nodarium/types'; } from '@nodarium/types';
function isGroupInstanceType(type: string): boolean {
return type === '__virtual/group/instance';
}
export function expandGroups(graph: Graph): Graph {
if (!graph.groups || Object.keys(graph.groups).length === 0) {
return graph;
}
let nodes = [...graph.nodes];
let edges = [...graph.edges];
const groups = graph.groups;
let changed = true;
while (changed) {
changed = false;
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if (!isGroupInstanceType(node.type)) continue;
const groupId = (node.props as Record<string, unknown> | undefined)?.groupId as string | undefined;
if (!groupId) continue;
const group = groups[groupId];
if (!group) continue;
changed = true;
// Recursively expand nested groups inside this group's internal graph
const expandedInternal = expandGroups({
id: 0,
nodes: group.graph.nodes,
edges: group.graph.edges,
groups
});
const ID_PREFIX = node.id * 1000000;
const idMap = new Map<number, number>();
const inputVirtualNode = expandedInternal.nodes.find(
n => n.type === '__virtual/group/input'
);
const outputVirtualNode = expandedInternal.nodes.find(
n => n.type === '__virtual/group/output'
);
const realInternalNodes = expandedInternal.nodes.filter(
n => n.type !== '__virtual/group/input' && n.type !== '__virtual/group/output'
);
for (const n of realInternalNodes) {
idMap.set(n.id, ID_PREFIX + n.id);
}
const parentIncomingEdges = edges.filter(e => e[2] === node.id);
const parentOutgoingEdges = edges.filter(e => e[0] === node.id);
// Edges from/to virtual nodes in the expanded internal graph
const edgesFromInput = expandedInternal.edges.filter(
e => e[0] === inputVirtualNode?.id
);
const edgesToOutput = expandedInternal.edges.filter(
e => e[2] === outputVirtualNode?.id
);
const newEdges: Graph['edges'] = [];
// Short-circuit: parent source → internal target (via group input)
for (const parentEdge of parentIncomingEdges) {
const socketName = parentEdge[3];
const socketIdx = group.inputs.findIndex(s => s.name === socketName);
if (socketIdx === -1) continue;
for (const internalEdge of edgesFromInput.filter(e => e[1] === socketIdx)) {
const remappedId = idMap.get(internalEdge[2]);
if (remappedId !== undefined) {
newEdges.push([parentEdge[0], parentEdge[1], remappedId, internalEdge[3]]);
}
}
}
// Short-circuit: internal source → parent target (via group output)
for (const parentEdge of parentOutgoingEdges) {
const outputIdx = parentEdge[1];
const outputSocketName = group.outputs[outputIdx]?.name;
if (!outputSocketName) continue;
for (const internalEdge of edgesToOutput.filter(e => e[3] === outputSocketName)) {
const remappedId = idMap.get(internalEdge[0]);
if (remappedId !== undefined) {
newEdges.push([remappedId, internalEdge[1], parentEdge[2], parentEdge[3]]);
}
}
}
// Remap internal-to-internal edges
const internalEdges = expandedInternal.edges.filter(
e => e[0] !== inputVirtualNode?.id
&& e[0] !== outputVirtualNode?.id
&& e[2] !== inputVirtualNode?.id
&& e[2] !== outputVirtualNode?.id
);
for (const e of internalEdges) {
const fromId = idMap.get(e[0]);
const toId = idMap.get(e[2]);
if (fromId !== undefined && toId !== undefined) {
newEdges.push([fromId, e[1], toId, e[3]]);
}
}
// Remove the group node
nodes.splice(i, 1);
// Add remapped internal nodes
for (const n of realInternalNodes) {
nodes.push({ ...n, id: idMap.get(n.id)! });
}
// Remove group node's edges and add short-circuit edges
const groupEdgeKeys = new Set([
...parentIncomingEdges.map(e => `${e[0]}-${e[1]}-${e[2]}-${e[3]}`),
...parentOutgoingEdges.map(e => `${e[0]}-${e[1]}-${e[2]}-${e[3]}`)
]);
edges = edges.filter(
e => !groupEdgeKeys.has(`${e[0]}-${e[1]}-${e[2]}-${e[3]}`)
);
edges.push(...newEdges);
break; // Restart loop with updated nodes array
}
}
return { ...graph, nodes, edges };
}
import { import {
concatEncodedArrays, concatEncodedArrays,
createLogger, createLogger,
@@ -211,11 +75,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
throw new Error('Node registry is not ready'); throw new Error('Node registry is not ready');
} }
// Only load non-virtual types (virtual nodes are resolved locally) await this.registry.load(graph.nodes.map((node) => node.type));
const nonVirtualTypes = graph.nodes
.map(node => node.type)
.filter(t => !t.startsWith('__virtual/'));
await this.registry.load(nonVirtualTypes as any);
const typeMap = new Map<string, NodeDefinition>(); const typeMap = new Map<string, NodeDefinition>();
for (const node of graph.nodes) { for (const node of graph.nodes) {
@@ -303,9 +163,6 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
let a = performance.now(); let a = performance.now();
this.debugData = {}; this.debugData = {};
// Expand group nodes into a flat graph before execution
graph = expandGroups(graph);
// Then we add some metadata to the graph // Then we add some metadata to the graph
const [outputNode, nodes] = await this.addMetaData(graph); const [outputNode, nodes] = await this.addMetaData(graph);
let b = performance.now(); let b = performance.now();

18
app/src/lib/runtime/worker-runtime-executor-backend.ts
View File

@@ -1,18 +1,12 @@
import { debugNode } from '$lib/node-registry/debugNode'; import { debugNode } from '$lib/node-registry/debugNode';
import { groupInputNode, groupNode, groupOutputNode } from '$lib/node-registry/groupNodes';
import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index'; import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
import type { Graph } from '@nodarium/types'; import type { Graph } from '@nodarium/types';
import { createPerformanceStore } from '@nodarium/utils'; import { createPerformanceStore } from '@nodarium/utils';
import { expandGroups, MemoryRuntimeExecutor } from './runtime-executor'; import { MemoryRuntimeExecutor } from './runtime-executor';
import { MemoryRuntimeCache } from './runtime-executor-cache'; import { MemoryRuntimeCache } from './runtime-executor-cache';
const indexDbCache = new IndexDBCache('node-registry'); const indexDbCache = new IndexDBCache('node-registry');
const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [ const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [debugNode]);
debugNode,
groupInputNode,
groupOutputNode,
groupNode
]);
const cache = new MemoryRuntimeCache(); const cache = new MemoryRuntimeCache();
const executor = new MemoryRuntimeExecutor(nodeRegistry, cache); const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
@@ -40,13 +34,7 @@ export async function executeGraph(
graph: Graph, graph: Graph,
settings: Record<string, unknown> settings: Record<string, unknown>
): Promise<Int32Array> { ): Promise<Int32Array> {
// Expand groups before loading types so we only load real (non-virtual) node types await nodeRegistry.load(graph.nodes.map((n) => n.type));
const expandedGraph = expandGroups(graph);
await nodeRegistry.load(
expandedGraph.nodes
.map(n => n.type)
.filter(t => !t.startsWith('__virtual/')) as any
);
performanceStore.startRun(); performanceStore.startRun();
const res = await executor.execute(graph, settings); const res = await executor.execute(graph, settings);
performanceStore.stopRun(); performanceStore.stopRun();

2
app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
View File

@@ -96,4 +96,6 @@
bind:value={store} bind:value={store}
type={nodeDefinition} type={nodeDefinition}
/> />
{:else}
<p class="mx-4 mt-4">Node has no settings</p>
{/if} {/if}

33
app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
View File

@@ -5,27 +5,22 @@
type Props = { type Props = {
manager: GraphManager; manager: GraphManager;
node: NodeInstance; node: NodeInstance | undefined;
}; };
let { manager, node = $bindable() }: Props = $props(); let { manager, node = $bindable() }: Props = $props();
const inputs = $derived(node?.state?.type?.inputs || {});
const hasSettings = $derived(
Object.values(inputs).find(entry => {
return entry.hidden === true;
}) !== undefined
);
$inspect({ inputs, hasSettings });
</script> </script>
{#key node.id} <div class='{node?"border-l-2 pl-3.5!":""} bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4'>
{#if node && hasSettings} <h3>Node Settings</h3>
<div class="border-l-2 pl-3.5! bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4"> </div>
<h3>Node Settings</h3>
</div> {#if node}
<ActiveNodeSelected {manager} bind:node /> {#key node.id}
{/if} {#if node}
{/key} <ActiveNodeSelected {manager} bind:node />
{/if}
{/key}
{:else}
<p class="mx-4 mt-4">No node selected</p>
{/if}

148
app/src/lib/sidebar/panels/GroupContextPanel.svelte
View File

@@ -1,148 +0,0 @@
<script lang="ts">
import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
import { InputSelect } from '@nodarium/ui';
type Props = { manager: GraphManager; groupId: string };
const { manager, groupId }: Props = $props();
$inspect({ groupId });
const group = $derived(manager.groups.get(groupId));
const COMMON_TYPES = ['plant', 'float', 'int', 'vec3', 'bool'];
let selectedTypeIdx = $state(0);
let customType = $state('');
function rename(e: Event) {
if (!group) return;
const name = (e.target as HTMLInputElement).value.trim();
if (!name) return;
group.name = name;
if (manager.graph.groups?.[groupId]) manager.graph.groups[groupId].name = name;
const def = manager.groupNodeDefinitions.get(`__virtual/group/${groupId}`);
if (def?.meta) def.meta.title = name;
manager.save();
}
function addSocket() {
const type = customType.trim() || COMMON_TYPES[selectedTypeIdx];
if (!type) return;
manager.addGroupSocket('input', type);
customType = '';
}
function removeSocket(index: number) {
manager.removeGroupSocket('input', index);
}
</script>
<div class="bg-layer-2 flex items-center h-[70px] border-b-1 border-outline pl-4">
<h3>Group Settings</h3>
</div>
<div class="px-4 py-3 flex flex-col gap-4">
<div class="flex flex-col gap-1.5">
<span class="section-label">Group name</span>
<input
type="text"
value={group?.name ?? ''}
onchange={rename}
onkeydown={(e) => e.stopPropagation()}
placeholder="Group name"
class="bg-layer-2 text-text rounded-[5px] px-2 py-1.5 text-sm w-full box-border outline outline-1 outline-outline"
/>
</div>
<div class="flex flex-col gap-1.5">
<span class="section-label">Inputs</span>
{#if (group?.inputs?.length ?? 0) === 0}
<p class="text-sm opacity-40 italic m-0">No inputs yet</p>
{:else}
<ul class="socket-list">
{#each group?.inputs ?? [] as socket, i}
<li class="socket-item">
<span class="flex-1 opacity-80 text-sm">{socket.name}</span>
<span class="text-xs opacity-45 italic">{socket.type}</span>
<button class="remove-btn" onclick={() => removeSocket(i)} title="Remove">×</button>
</li>
{/each}
</ul>
{/if}
<div class="flex gap-1.5 items-center">
<InputSelect options={COMMON_TYPES} bind:value={selectedTypeIdx} />
<input
type="text"
placeholder="custom type…"
bind:value={customType}
onkeydown={(e) => {
e.stopPropagation();
if (e.key === 'Enter') addSocket();
}}
class="bg-layer-2 text-text rounded-[5px] px-2 py-1 text-sm flex-1 min-w-0 outline outline-1 outline-outline"
/>
<button class="add-btn" onclick={addSocket}>+ Add</button>
</div>
</div>
</div>
<style>
.section-label {
font-size: 0.72em;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.5;
}
.socket-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.socket-item {
display: flex;
align-items: center;
gap: 6px;
background: var(--color-layer-2);
border-radius: 5px;
padding: 4px 8px;
outline: 1px solid var(--color-outline);
}
.remove-btn {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
opacity: 0.4;
padding: 0 2px;
font-size: 1.1em;
line-height: 1;
}
.remove-btn:hover {
opacity: 1;
}
.add-btn {
background: var(--color-layer-2);
color: var(--color-text);
border: none;
outline: 1px solid var(--color-outline);
border-radius: 5px;
padding: 0.4em 0.7em;
font-size: 0.8em;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-family);
}
.add-btn:hover {
outline-color: var(--color-selected);
}
</style>

24
app/src/routes/+page.svelte
View File

@@ -5,7 +5,6 @@
import { debounceAsyncFunction } from '$lib/helpers'; import { debounceAsyncFunction } from '$lib/helpers';
import { createKeyMap } from '$lib/helpers/createKeyMap'; import { createKeyMap } from '$lib/helpers/createKeyMap';
import { debugNode } from '$lib/node-registry/debugNode.js'; import { debugNode } from '$lib/node-registry/debugNode.js';
import { groupInputNode, groupNode, groupOutputNode } from '$lib/node-registry/groupNodes.js';
import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index'; import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
import NodeStore from '$lib/node-store/NodeStore.svelte'; import NodeStore from '$lib/node-store/NodeStore.svelte';
import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte'; import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
@@ -22,7 +21,6 @@
import Changelog from '$lib/sidebar/panels/Changelog.svelte'; import Changelog from '$lib/sidebar/panels/Changelog.svelte';
import ExportSettings from '$lib/sidebar/panels/ExportSettings.svelte'; import ExportSettings from '$lib/sidebar/panels/ExportSettings.svelte';
import GraphSource from '$lib/sidebar/panels/GraphSource.svelte'; import GraphSource from '$lib/sidebar/panels/GraphSource.svelte';
import GroupContextPanel from '$lib/sidebar/panels/GroupContextPanel.svelte';
import Keymap from '$lib/sidebar/panels/Keymap.svelte'; import Keymap from '$lib/sidebar/panels/Keymap.svelte';
import { panelState } from '$lib/sidebar/PanelState.svelte'; import { panelState } from '$lib/sidebar/PanelState.svelte';
import Sidebar from '$lib/sidebar/Sidebar.svelte'; import Sidebar from '$lib/sidebar/Sidebar.svelte';
@@ -39,12 +37,7 @@
const registryCache = new IndexDBCache('node-registry'); const registryCache = new IndexDBCache('node-registry');
const nodeRegistry = new RemoteNodeRegistry('', registryCache, [ const nodeRegistry = new RemoteNodeRegistry('', registryCache, [debugNode]);
debugNode,
groupInputNode,
groupOutputNode,
groupNode
]);
const workerRuntime = new WorkerRuntimeExecutor(); const workerRuntime = new WorkerRuntimeExecutor();
const runtimeCache = new MemoryRuntimeCache(); const runtimeCache = new MemoryRuntimeCache();
const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache); const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
@@ -348,20 +341,7 @@
type={graphSettingTypes} type={graphSettingTypes}
bind:value={graphSettings} bind:value={graphSettings}
/> />
{#if activeNode?.id} <ActiveNodeSettings {manager} bind:node={activeNode} />
<ActiveNodeSettings {manager} bind:node={activeNode} />
{/if}
{#if manager?.isInsideGroup}
<GroupContextPanel
{manager}
groupId={manager.currentGroupContext!}
/>
{:else if activeNode?.type === '__virtual/group/instance'}
<GroupContextPanel
{manager}
groupId={activeNode?.props?.groupId as string}
/>
{/if}
</Panel> </Panel>
<Panel <Panel
id="changelog" id="changelog"

312
docs/LLM.md
View File

@@ -1,312 +0,0 @@
# Nodarium - LLM Documentation
## Overview
Nodarium is a **WebAssembly-based visual programming language** for creating procedural 3D plants. The app features a node-based interface where users connect WASM modules to generate plant models in real-time. Currently used to develop https://nodes.max-richter.dev, a procedural modelling tool for 3D plants.
## Architecture
### Core Components
#### 1. Node System (`app/static/nodes/`)
WASM-based nodes that perform computations. All nodes must implement the NodeDefinition interface.
- **Node Storage**: `app/static/nodes/max/plantarium/`
- `box.wasm` - Box geometry node
- `branch.wasm` - Branch generation
- `float.wasm` - Float value node
- `gravity.wasm` - Gravity/physics node
- `instance.wasm` - Instance rendering
- `leaf.wasm` - Leaf geometry
- `math.wasm` - Math operations
- `noise.wasm` - Noise generation
- `output.wasm` - Output node
- `random.wasm` - Random value generation
- `rotate.wasm` - Rotation node
- `shape.wasm` - Shape geometry
- `stem.wasm` - Stem generation
- `triangle.wasm` - Triangle geometry
- `vec3.wasm` - Vector3 node
- **Node Registry**: `app/src/lib/node-registry.ts`
- Loads and manages WASM nodes
- `getNodeWasm()` - Creates WASM wrapper from bytes
- `getNode()` - Retrieves node definition
- **Debug Node**: `app/src/lib/node-registry/debugNode.js`
- Special debug node with wildcard inputs
- Variable-height nodes and parameters
- Quick-connect shortcut
#### 2. Graph Interface
Visual node editor built with Svelte 5.
- **Main Wrapper**: `app/src/lib/graph-interface/graph/Wrapper.svelte`
- Entry point for graph interface
- Manages GraphManager and GraphState
- **GraphManager**: `app/src/lib/graph-interface/graph-manager.svelte.ts`
- Core entity managing the node graph
- Handles node connections and execution flow
- **GraphState**: `app/src/lib/graph-interface/graph-state.svelte.ts`
- Tracks UI state (selection, snapping, help, active nodes)
- **Graph Components**:
- `app/src/lib/graph-interface/graph/` - Graph rendering
- `app/src/lib/graph-interface/node/` - Node rendering
- `app/src/lib/graph-interface/edges/` - Edge rendering
- `app/src/lib/graph-interface/components/` - UI components (AddMenu, Socket, etc.)
- `app/src/lib/graph-interface/debug/` - Debug overlays
- `app/src/lib/graph-interface/background/` - Grid/dots backgrounds
- **Helpers**:
- `app/src/lib/helpers/` - Utility functions
- `app/src/lib/helpers/createKeyMap.ts` - Keyboard shortcuts
#### 3. Runtime Execution
Performs graph execution via WASM nodes.
- **Runtime Executors** (`app/src/lib/runtime/`):
- **MemoryRuntime**: Direct WASM execution in main thread
- **WorkerRuntime**: WebWorker-based execution for performance
- Both implement the RuntimeExecutor interface
- **Runtime Cache**: `app/src/lib/runtime/cache.ts`
- Memory-based caching for graph execution
- **Execution Flow**:
1. Graph serialized from graph interface
2. Runtime executes nodes in topological order
3. Results passed through connected edges
4. Final mesh output rendered
#### 4. 3D Viewer (`app/src/lib/result-viewer/`)
Three.js-based rendering for 3D output.
- **Viewer**: `app/src/lib/result-viewer/Viewer.svelte`
- Renders generated 3D meshes
- Uses @threlte/core (Svelte-Three.js wrapper)
#### 5. Application Structure (`app/src/routes/`)
SvelteKit application routing.
- **Main Page**: `app/src/routes/+page.svelte`
- Combines GraphInterface + 3D Viewer
- Manages runtime selection (memory vs worker)
- Handles settings and performance tracking
- **Layout**: `app/src/routes/+layout.svelte`
- Application shell
- **Server**: `app/src/routes/+layout.server.ts`
- Loads git metadata and changelog
#### 6. Settings System (`app/src/lib/settings/`)
Application and graph settings.
- **App Settings**: `app/src/lib/settings/app-settings.svelte.ts`
- Debug mode, themes, node interface options
- **NestedSettings**: `app/src/lib/settings/NestedSettings.svelte`
- Recursive settings UI component
#### 7. Sidebar Panels (`app/src/lib/sidebar/`)
- `app/src/lib/sidebar/Sidebar.svelte` - Main sidebar
- `app/src/lib/sidebar/panels/` - Individual panels:
- `ActiveNodeSettings.svelte` - Selected node properties
- `BenchmarkPanel.svelte` - Performance benchmarking
- `Changelog.svelte` - Version history
- `ExportSettings.svelte` - Export options
- `GraphSource.svelte` - Graph JSON view
- `Keymap.svelte` - Keyboard shortcuts
#### 8. Project Management (`app/src/lib/project-manager/`)
- `app/src/lib/project-manager/project-manager.svelte` - Project save/load
- Uses IndexedDB for persistence
#### 9. Node Store (`app/src/lib/node-store/`)
- `app/src/lib/node-store/NodeStore.svelte`
- Remote node registry management
- IndexDBCache for offline storage
#### 10. Graph Templates (`app/src/lib/graph-templates/`)
Pre-built graph templates for testing:
- Grid, Tree, LottaFaces, LottaNodes, LottaNodesAndFaces
## Key Types (`app/src/lib/types.ts`)
```typescript
interface NodeDefinition {
id: string;
name: string;
inputs: Socket[];
outputs: Socket[];
parameters: Parameter[];
execute: (inputs: any[], parameters: any[]) => any[];
}
interface Socket {
id: string;
name: string;
type: string; // datatype (e.g., "number", "vec3", "*")
defaultValue?: any;
optional?: boolean;
}
interface Parameter {
id: string;
name: string;
type: string;
defaultValue: any;
min?: number;
max?: number;
options?: string[];
}
interface Graph {
nodes: NodeInstance[];
edges: Edge[];
}
interface NodeInstance {
id: number;
nodeId: string;
position: { x: number; y: number };
parameters: Record<string, any>;
}
interface Edge {
id: number;
fromNode: number;
fromSocket: string;
toNode: number;
toSocket: string;
}
```
## Development Workflow
### Prerequisites
- Node.js
- pnpm
- Rust
- wasm-pack
### Build Commands
```bash
# Install dependencies
pnpm i
# Build WASM nodes
pnpm build:nodes
# Start development server
cd app && pnpm dev
# Run tests
cd app && pnpm test
# Lint and typecheck
cd app && pnpm lint
cd app && pnpm check
# Format code
cd app && pnpm format
```
### Creating New Nodes
See `docs/DEVELOPING_NODES.md` for detailed instructions on creating custom WASM nodes.
## Features
### Current Features
- Visual node-based programming with real-time 3D preview
- WebAssembly nodes for high-performance computation
- Debug node with wildcard inputs and runtime integration
- Color-coded node sockets and edges (indicating data types)
- Variable-height nodes and parameters
- Edge dragging with valid socket highlighting
- InputNumber snapping to predefined values (Alt+click)
- Project save/load with IndexedDB
- Performance monitoring and benchmarking
- Changelog viewer
- Advanced mode settings
### UI Components
- **InputNumber**: Numeric input with arrow controls
- **InputColor**: Color picker
- **InputShape**: Shape selector with preview
- **InputSelect**: Dropdown with options
## File Structure
```
nodarium/
├── app/
│ ├── src/
│ │ ├── lib/
│ │ │ ├── config.ts
│ │ │ ├── graph-interface/ # Node editor
│ │ │ ├── graph-manager.svelte.ts
│ │ │ ├── graph-state.svelte.ts
│ │ │ ├── graph-templates/ # Test templates
│ │ │ ├── grid/
│ │ │ ├── helpers/
│ │ │ ├── node-registry.ts
│ │ │ ├── node-registry/ # Node loading
│ │ │ ├── node-store/
│ │ │ ├── performance/
│ │ │ ├── project-manager/
│ │ │ ├── result-viewer/ # 3D viewer
│ │ │ ├── runtime/ # Execution
│ │ │ ├── settings/ # App settings
│ │ │ ├── sidebar/
│ │ │ └── types.ts
│ │ └── routes/
│ │ ├── +page.svelte
│ │ └── +layout.svelte
│ ├── static/
│ │ └── nodes/
│ │ └── max/
│ │ └── plantarium/ # WASM nodes
│ └── package.json
├── docs/
│ ├── ARCHITECTURE.md
│ ├── DEVELOPING_NODES.md
│ ├── NODE_DEFINITION.md
│ └── PLANTARIUM.md
├── nodes/ # WASM node source (Rust)
└── package.json
```
## Release Process
1. Create annotated tag:
```bash
git tag -a v1.0.0 -m "Release notes"
git push origin v1.0.0
```
2. CI workflow:
- Runs lint, format check, type check
- Builds project
- Updates package.json versions
- Generates CHANGELOG.md
- Creates Gitea release

2
packages/types/src/index.ts
View File

@@ -4,9 +4,7 @@ export type {
Box, Box,
Edge, Edge,
Graph, Graph,
GroupSocket,
NodeDefinition, NodeDefinition,
NodeGroupDefinition,
NodeId, NodeId,
NodeInstance, NodeInstance,
SerializedNode, SerializedNode,

32
packages/types/src/types.ts
View File

@@ -51,7 +51,7 @@ export const NodeSchema = z.object({
id: z.number(), id: z.number(),
type: NodeIdSchema, type: NodeIdSchema,
props: z props: z
.record(z.string(), z.union([z.number(), z.array(z.number()), z.string()])) .record(z.string(), z.union([z.number(), z.array(z.number())]))
.optional(), .optional(),
meta: z meta: z
.object({ .object({
@@ -76,33 +76,6 @@ export type Socket = {
export type Edge = [NodeInstance, number, NodeInstance, string]; export type Edge = [NodeInstance, number, NodeInstance, string];
export type GroupSocket = {
name: string;
type: string;
};
export type NodeGroupDefinition = {
id: string;
name: string;
inputs: GroupSocket[];
outputs: GroupSocket[];
graph: {
nodes: SerializedNode[];
edges: [number, number, number, string][];
};
};
const NodeGroupDefinitionSchema: z.ZodType<NodeGroupDefinition> = z.object({
id: z.string(),
name: z.string(),
inputs: z.array(z.object({ name: z.string(), type: z.string() })),
outputs: z.array(z.object({ name: z.string(), type: z.string() })),
graph: z.object({
nodes: z.array(NodeSchema),
edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()]))
})
});
export const GraphSchema = z.object({ export const GraphSchema = z.object({
id: z.number(), id: z.number(),
meta: z meta: z
@@ -113,8 +86,7 @@ export const GraphSchema = z.object({
.optional(), .optional(),
settings: z.record(z.string(), z.any()).optional(), settings: z.record(z.string(), z.any()).optional(),
nodes: z.array(NodeSchema), nodes: z.array(NodeSchema),
edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()])), edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()]))
groups: z.record(z.string(), NodeGroupDefinitionSchema).optional()
}); });
export type Graph = z.infer<typeof GraphSchema>; export type Graph = z.infer<typeof GraphSchema>;