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

feat: initial node groups

Browse Source
This commit is contained in:
max_richter
2026-04-26 18:41:25 +02:00
parent a56e8f445e
commit 72f07d0a50
17 changed files with 488 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/graph-interface/components/AddMenu.svelte
+1 -1
View File
@@ -183,7 +183,7 @@
activeNodeId = node.id;
}}
>
{node.id.split('/').at(-1)}
{node.meta?.title ?? node.id.split('/').at(-1)}
</div>
{/each}
</div>
app/src/lib/graph-interface/graph-manager.svelte.ts
+106 -13
View File
@@ -10,6 +10,7 @@ import type {
NodeRegistry,
Socket
} from '@nodarium/types';
import { type GroupDefinition } from '@nodarium/types';
import { fastHashString } from '@nodarium/utils';
import { createLogger } from '@nodarium/utils';
import { SvelteMap, SvelteSet } from 'svelte/reactivity';
@@ -67,7 +68,7 @@ export class GraphManager extends EventEmitter<{
status = $state<'loading' | 'idle' | 'error'>();
loaded = false;
graph: Graph = { id: 0, nodes: [], edges: [] };
graph: Graph = { id: 0, nodes: [], edges: [], groups: [] };
id = $state(0);
nodes = new SvelteMap<number, NodeInstance>();
@@ -110,10 +111,36 @@ export class GraphManager extends EventEmitter<{
edge[2].id,
edge[3]
]) as Graph['edges'];
const groups = this.graph.groups?.map((group) => {
const groupNodes = group.nodes.map((node) => ({
id: node.id,
position: [...node.position],
type: node.type,
props: node.props
})) as NodeInstance[];
const groupEdges = this.edges.map((edge) => [
edge[0].id,
edge[1],
edge[2].id,
edge[3]
]) as Graph['edges'];
return {
id: group.id,
inputs: group.inputs,
outputs: group.outputs,
nodes: groupNodes,
edges: groupEdges
};
});
const serialized = {
id: this.graph.id,
settings: $state.snapshot(this.settings),
meta: $state.snapshot(this.graph.meta),
groups,
nodes,
edges
};
@@ -311,13 +338,16 @@ export class GraphManager extends EventEmitter<{
logger.info('loading graph', { nodes: graph.nodes, edges: graph.edges, id: graph.id });
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(n => !n.startsWith('__internal/'));
await this.registry.load(nodeIds);
// Fetch all nodes from all collections of the loaded nodes
const allCollections = new SvelteSet<`${string}/${string}`>();
for (const id of nodeIds) {
const [user, collection] = id.split('/');
if (user === '__internal') continue;
allCollections.add(`${user}/${collection}`);
}
for (const collection of allCollections) {
@@ -333,7 +363,7 @@ export class GraphManager extends EventEmitter<{
for (const node of this.graph.nodes) {
const nodeType = this.registry.getNode(node.type);
if (!nodeType) {
if (!nodeType && !node.type.startsWith('__internal/')) {
logger.error(`Node type not found: ${node.type}`);
this.status = 'error';
return;
@@ -389,15 +419,47 @@ export class GraphManager extends EventEmitter<{
}
getAllNodes() {
return Array.from(this.nodes.values());
this.graph.groups ??= [];
if (!this.graph.groups.length) {
this.graph.groups.push({
id: 0,
nodes: [],
edges: []
});
}
return Array
.from(this.nodes.values());
}
getNode(id: number) {
return this.nodes.get(id);
}
getNodeType(id: string) {
return this.registry.getNode(id);
getNodeType(node: NodeInstance) {
// Construct the inputs on the fly
if (node.type === '__internal/group/instance') {
const groupDefinition = this.getGroup(node.props?.groupId as number);
const inputs = {
'groupId': {
type: 'select',
label: '',
value: node.props?.groupId.toString(),
internal: true,
options: this.graph.groups.map(g => g.id.toString())
},
...(node.state.type?.inputs || {}),
...groupDefinition?.inputs
};
return {
...node.state.type,
inputs
} as NodeDefinition;
}
return node.state.type;
}
async loadNodeType(id: NodeId) {
@@ -502,6 +564,14 @@ export class GraphManager extends EventEmitter<{
}
}
createGroupId() {
return Math.max(0, ...this.graph.groups.keys()) + 1;
}
getGroup(id: number) {
return this.graph.groups.find(g => g.id === id);
}
createNodeId() {
return Math.max(0, ...this.nodes.keys()) + 1;
}
@@ -579,6 +649,26 @@ export class GraphManager extends EventEmitter<{
return node;
}
createGroupNode(position: [number, number], groupDefinition: GroupDefinition): NodeInstance {
this.graph.groups ??= [];
this.graph.groups.push(groupDefinition);
const node = {
id: this.createNodeId(),
type: '__internal/group/instance',
meta: {
title: 'Group'
},
props: {
groupId: groupDefinition.id
},
position,
state: {}
} as const;
this.nodes.set(node.id, node);
return node;
}
createEdge(
from: NodeInstance,
fromSocket: number,
@@ -597,11 +687,14 @@ export class GraphManager extends EventEmitter<{
return;
}
const fromType = this.getNodeType(from);
const toType = this.getNodeType(to);
// check if socket types match
const fromSocketType = from.state?.type?.outputs?.[fromSocket];
const toSocketType = [to.state?.type?.inputs?.[toSocket]?.type];
if (to.state?.type?.inputs?.[toSocket]?.accepts) {
toSocketType.push(...(to?.state?.type?.inputs?.[toSocket]?.accepts || []));
const fromSocketType = fromType?.outputs?.[fromSocket];
const toSocketType = [toType?.inputs?.[toSocket]?.type];
if (toType?.inputs?.[toSocket]?.accepts) {
toSocketType.push(...(toType?.inputs?.[toSocket]?.accepts || []));
}
if (!areSocketsCompatible(fromSocketType, toSocketType)) {
@@ -724,7 +817,7 @@ export class GraphManager extends EventEmitter<{
}
getPossibleSockets({ node, index }: Socket): [NodeInstance, string | number][] {
const nodeType = node?.state?.type;
const nodeType = this.getNodeType(node);
if (!nodeType) return [];
const sockets: [NodeInstance, string | number][] = [];
@@ -740,7 +833,7 @@ export class GraphManager extends EventEmitter<{
const ownType = nodeType?.inputs?.[index].type;
for (const node of nodes) {
const nodeType = node?.state?.type;
const nodeType = this.getNodeType(node);
const inputs = nodeType?.outputs;
if (!inputs) continue;
for (let index = 0; index < inputs.length; index++) {
@@ -772,7 +865,7 @@ export class GraphManager extends EventEmitter<{
const ownType = nodeType.outputs?.[index];
for (const node of nodes) {
const inputs = node?.state?.type?.inputs;
const inputs = this.getNodeType(node)?.inputs;
if (!inputs) continue;
for (const key in inputs) {
const otherType = [inputs[key].type];
app/src/lib/graph-interface/graph-state.svelte.ts
+154 -7
View File
@@ -1,11 +1,11 @@
import { animate, lerp } from '$lib/helpers';
import type { NodeInstance, Socket } from '@nodarium/types';
import type { Box, Edge, GroupDefinition, NodeInput, NodeInstance, Socket } from '@nodarium/types';
import { getContext, setContext } from 'svelte';
import { SvelteMap, SvelteSet } from 'svelte/reactivity';
import type { OrthographicCamera, Vector3 } from 'three';
import type { GraphManager } from './graph-manager.svelte';
import { ColorGenerator } from './graph/colors';
import { getNodeHeight, getSocketPosition } from './helpers/nodeHelpers';
import { getNodeHeight, getParameterHeight } from './helpers/nodeHelpers';
const graphStateKey = Symbol('graph-state');
export function getGraphState() {
@@ -203,7 +203,7 @@ export class GraphState {
}
const debugNode = this.graph.createNode({
type: 'max/plantarium/debug',
type: '__internal/node/debug',
position: [node.position[0] + 30, node.position[1]],
props: {}
});
@@ -240,6 +240,119 @@ export class GraphState {
};
}
groupSelectedNodes(nodeIds = [...this.selectedNodes.keys(), this.activeNodeId]) {
const ids = new Set(nodeIds);
const nodes = [
...ids.values().map(id => this.graph.getNode(id)).filter(Boolean)
] as NodeInstance[];
const incomingEdges = this.graph.edges.filter((edge) =>
ids.has(edge[2].id) && !ids.has(edge[0].id)
);
const groupInputs = new Map<string, Edge>();
for (const edge of incomingEdges) {
groupInputs.set(`${edge[0].id}-${edge[1]}`, edge);
}
const outgoingEdges = this.graph.edges.filter((edge) =>
ids.has(edge[0].id) && !ids.has(edge[2].id)
);
const groupOutputs = new Map<string, Edge>();
for (const edge of outgoingEdges) {
groupOutputs.set(`${edge[2].id}-${edge[3]}`, edge);
}
const inputs: Record<string, NodeInput> = {};
[...groupInputs.values()].forEach((edge, i) => {
const input = {
label: `Input ${i}`,
type: edge[0].state.type?.outputs?.[edge[1]] || '*'
};
inputs[`input_${i}`] = input as NodeInput;
});
const outputs = [...groupOutputs.values()].map((edge, i) => ({
label: `Output ${i}`,
type: edge[2].state.type?.inputs?.[edge[3]].type
}));
const groupPosition = [0, 0] as [number, number];
const bounds: Box = { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity };
for (const node of nodes) {
groupPosition[0] += node.position[0];
groupPosition[1] += node.position[1];
bounds.minX = Math.min(bounds.minX, node.position[0]);
bounds.maxX = Math.max(bounds.maxX, node.position[0]);
bounds.minY = Math.min(bounds.minY, node.position[1]);
bounds.maxY = Math.max(bounds.maxY, node.position[1]);
}
groupPosition[0] /= nodes.length;
groupPosition[1] /= nodes.length;
const groupInputNode: NodeInstance = {
id: this.graph.createNodeId(),
type: '__internal/group/input',
position: [bounds.minX - 50, (bounds.minY + bounds.maxY) / 2],
state: {}
};
const groupOutputNode: NodeInstance = {
id: this.graph.createNodeId(),
type: '__internal/group/output',
position: [bounds.maxX + 25, (bounds.minY + bounds.maxY) / 2],
state: {}
};
// Edges that are inside the group
const internalEdges = this.graph.edges.filter((edge) => {
return ids.has(edge[0].id) || ids.has(edge[2].id);
}).map((edge) => {
// Going in from the group
if (!ids.has(edge[0].id)) {
return [groupInputNode, 0, edge[2], edge[3]];
// Going out to the group
} else if (!ids.has(edge[2].id)) {
return [edge[0], edge[1], groupOutputNode, 'Out'];
}
return edge;
});
const groupId = this.graph.createGroupId();
const groupDefinition: GroupDefinition = {
id: groupId,
inputs: inputs,
outputs: outputs,
edges: internalEdges,
nodes: [groupInputNode, ...nodes, groupOutputNode]
};
const groupNode = this.graph.createGroupNode(groupPosition, groupDefinition);
// Update the edges that are now inside
// the group to be connected to that group node
const externalEdges = this.graph.edges.map((edge) => {
if (ids.has(edge[2].id)) {
// Edge going into the group
return [edge[0], edge[1], groupNode, 'input_0'] as Edge;
} else if (ids.has(edge[0].id)) {
// Edge going out of the group
return [groupNode, 0, edge[2], edge[3]] as Edge;
}
return edge;
});
for (const node of nodes) {
this.graph.nodes.delete(node.id);
}
this.graph.edges = externalEdges;
this.graph.saveUndoGroup();
console.log(
$state.snapshot({
groupNode,
groupDefinition
})
);
}
centerNode(node?: NodeInstance) {
const average = [0, 0, 4];
if (node) {
@@ -301,7 +414,7 @@ export class GraphState {
if (edge[3] === index) {
node = edge[0];
index = edge[1];
position = getSocketPosition(node, index);
position = this.getSocketPosition(node, index);
this.graph.removeEdge(edge);
break;
}
@@ -321,7 +434,7 @@ export class GraphState {
return {
node,
index,
position: getSocketPosition(node, index)
position: this.getSocketPosition(node, index)
};
});
}
@@ -358,7 +471,7 @@ export class GraphState {
for (const node of this.graph.nodes.values()) {
const x = node.position[0];
const y = node.position[1];
const height = getNodeHeight(node.state.type!);
const height = getNodeHeight(this.graph.getNodeType(node)!);
if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
clickedNodeId = node.id;
break;
@@ -370,7 +483,7 @@ export class GraphState {
}
isNodeInView(node: NodeInstance) {
const height = getNodeHeight(node.state.type!);
const height = getNodeHeight(this.graph.getNodeType(node)!);
const width = 20;
return node.position[0] > this.cameraBounds[0] - width
&& node.position[0] < this.cameraBounds[1]
@@ -381,4 +494,38 @@ export class GraphState {
openNodePalette() {
this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
}
enterGroupNode() {
if (this.activeNodeId === -1) return;
const selectedNode = this.graph.getNode(this.activeNodeId);
if (!selectedNode || selectedNode.type.startsWith('__internal/group/instance')) return;
}
getSocketPosition(
node: NodeInstance,
index: string | number
): [number, number] {
if (typeof index === 'number') {
return [
(node?.state?.x ?? node.position[0]) + 20,
(node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
];
} else {
let height = 5;
const nodeType = this.graph.getNodeType(node)!;
const inputs = nodeType.inputs || {};
for (const inputKey in inputs) {
const h = getParameterHeight(nodeType, inputKey) / 10;
if (inputKey === index) {
height += h / 2;
break;
}
height += h;
}
return [
node?.state?.x ?? node.position[0],
(node?.state?.y ?? node.position[1]) + height
];
}
}
}
app/src/lib/graph-interface/graph/Graph.svelte
+12 -11
View File
@@ -11,7 +11,6 @@
import Debug from '../debug/Debug.svelte';
import EdgeEl from '../edges/Edge.svelte';
import { getGraphManager, getGraphState } from '../graph-state.svelte';
import { getSocketPosition } from '../helpers/nodeHelpers';
import NodeEl from '../node/Node.svelte';
import { maxZoom, minZoom } from './constants';
import { FileDropEventManager } from './drop.events';
@@ -39,8 +38,8 @@
return [0, 0, 0, 0];
}
const pos1 = getSocketPosition(fromNode, edge[1]);
const pos2 = getSocketPosition(toNode, edge[3]);
const pos1 = graphState.getSocketPosition(fromNode, edge[1]);
const pos2 = graphState.getSocketPosition(toNode, edge[3]);
return [pos1[0], pos1[1], pos2[0], pos2[1]];
}
@@ -96,11 +95,13 @@
graphState.addMenuPosition = null;
}
function getSocketType(node: NodeInstance, index: number | string): string {
function getSocketType(node: NodeInstance, index: number | string, e: unknown): string {
const nodeType = graph.getNodeType(node);
console.log($state.snapshot({ nodeType, index, e }));
if (typeof index === 'string') {
return node.state.type?.inputs?.[index].type || 'unknown';
return nodeType?.inputs?.[index].type || 'unknown';
}
return node.state.type?.outputs?.[index] || 'unknown';
return nodeType?.outputs?.[index] || 'unknown';
}
</script>
@@ -182,8 +183,8 @@
{#if graphState.activeSocket}
<EdgeEl
z={graphState.cameraPosition[2]}
inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index, 'c')}
outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index, 'd')}
x1={graphState.activeSocket.position[0]}
y1={graphState.activeSocket.position[1]}
x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]}
@@ -196,8 +197,8 @@
<EdgeEl
id={graph.getEdgeId(edge)}
z={graphState.cameraPosition[2]}
inputType={getSocketType(edge[0], edge[1])}
outputType={getSocketType(edge[2], edge[3])}
inputType={getSocketType(edge[0], edge[1], 'a')}
outputType={getSocketType(edge[2], edge[3], 'b')}
{x1}
{y1}
{x2}
@@ -216,7 +217,7 @@
style:transform={`scale(${graphState.cameraPosition[2] * 0.1})`}
class:hovering-sockets={graphState.activeSocket}
>
{#each graph.nodes.values() as node (node.id)}
{#each graph.getAllNodes() as node (node.id)}
<NodeEl
{node}
inView={graphState.isNodeInView(node)}
app/src/lib/graph-interface/helpers/nodeHelpers.ts
+3 -28
View File
@@ -23,36 +23,11 @@ export function getParameterHeight(node: NodeDefinition, inputKey: string) {
return 50;
}
export function getSocketPosition(
node: NodeInstance,
index: string | number
): [number, number] {
if (typeof index === 'number') {
return [
(node?.state?.x ?? node.position[0]) + 20,
(node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
];
} else {
let height = 5;
const nodeType = node.state.type!;
const inputs = nodeType.inputs || {};
for (const inputKey in inputs) {
const h = getParameterHeight(nodeType, inputKey) / 10;
if (inputKey === index) {
height += h / 2;
break;
}
height += h;
}
return [
node?.state?.x ?? node.position[0],
(node?.state?.y ?? node.position[1]) + height
];
}
}
const nodeHeightCache: Record<string, number> = {};
export function getNodeHeight(node: NodeDefinition) {
if (!node) {
console.trace('Node is undefined', node);
}
if (node.id in nodeHeightCache) {
return nodeHeightCache[node.id];
}
app/src/lib/graph-interface/keymaps.ts
+13
View File
@@ -54,6 +54,19 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
}
});
keymap.addShortcut({
key: 'g',
ctrl: true,
description: 'Group selected nodes',
callback: () => graphState.groupSelectedNodes()
});
keymap.addShortcut({
key: 'Tab',
description: 'Enter selected node group',
callback: () => graphState.enterGroupNode()
});
keymap.addShortcut({
key: 'A',
shift: true,
app/src/lib/graph-interface/node/Node.svelte
+8 -3
View File
@@ -3,13 +3,14 @@
import type { NodeInstance } from '@nodarium/types';
import { T } from '@threlte/core';
import { type Mesh } from 'three';
import { getGraphState } from '../graph-state.svelte';
import { getGraphManager, getGraphState } from '../graph-state.svelte';
import { colors } from '../graph/colors.svelte';
import { getNodeHeight, getParameterHeight } from '../helpers/nodeHelpers';
import NodeFrag from './Node.frag';
import NodeVert from './Node.vert';
import NodeHtml from './NodeHTML.svelte';
const graph = getGraphManager();
const graphState = getGraphState();
type Props = {
@@ -18,7 +19,7 @@
};
let { node = $bindable(), inView }: Props = $props();
const nodeType = $derived(node.state.type!);
const nodeType = $derived(graph.getNodeType(node)!);
const isActive = $derived(graphState.activeNodeId === node.id);
const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -40,7 +41,11 @@
let meshRef: Mesh | undefined = $state();
const height = getNodeHeight(node.state.type!);
const height = $derived(getNodeHeight(nodeType));
if (node.type.startsWith('__internal/')) {
$inspect({ node, nodeType, height, sectionHeights });
}
const zoom = $derived(graphState.cameraPosition[2]);
app/src/lib/graph-interface/node/NodeHTML.svelte
+8 -3
View File
@@ -1,11 +1,12 @@
<script lang="ts">
import type { NodeInstance } from '@nodarium/types';
import { getGraphState } from '../graph-state.svelte';
import { getGraphManager, getGraphState } from '../graph-state.svelte';
import NodeHeader from './NodeHeader.svelte';
import NodeParameter from './NodeParameter.svelte';
let ref: HTMLDivElement;
const graph = getGraphManager();
const graphState = getGraphState();
type Props = {
@@ -30,8 +31,12 @@
const zOffset = Math.random() - 0.5;
const zLimit = 2 - zOffset;
const parameters = Object.entries(node.state?.type?.inputs || {}).filter(
(p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
const nodeType = $derived(graph.getNodeType(node));
const parameters = $derived(
Object.entries(nodeType?.inputs || {}).filter(
(p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
) || {}
);
$effect(() => {
app/src/lib/graph-interface/node/NodeHeader.svelte
+1 -2
View File
@@ -3,7 +3,6 @@
import type { NodeInstance, Socket } from '@nodarium/types';
import { getGraphState } from '../graph-state.svelte';
import { createNodePath } from '../helpers/index.js';
import { getSocketPosition } from '../helpers/nodeHelpers';
const graphState = getGraphState();
@@ -16,7 +15,7 @@
graphState.setDownSocket?.({
node,
index: 0,
position: getSocketPosition?.(node, 0)
position: graphState.getSocketPosition?.(node, 0)
});
}
}
app/src/lib/graph-interface/node/NodeParameter.svelte
+3 -3
View File
@@ -2,7 +2,7 @@
import type { NodeInput, NodeInstance, Socket } from '@nodarium/types';
import { getGraphManager, getGraphState } from '../graph-state.svelte';
import { createNodePath } from '../helpers';
import { getParameterHeight, getSocketPosition } from '../helpers/nodeHelpers';
import { getParameterHeight } from '../helpers/nodeHelpers';
import NodeInputEl from './NodeInput.svelte';
type Props = {
@@ -19,7 +19,7 @@
let { node = $bindable(), input, id, isLast }: Props = $props();
const nodeType = $derived(node.state.type!);
const nodeType = $derived(graph.getNodeType(node)!);
const inputType = $derived(nodeType.inputs?.[id]);
@@ -32,7 +32,7 @@
graphState.setDownSocket({
node,
index: id,
position: getSocketPosition(node, id)
position: graphState.getSocketPosition(node, id)
});
}
app/src/lib/node-registry/debugNode.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export const debugNode = {
id: 'max/plantarium/debug',
id: '__internal/debug/instance',
inputs: {
input: {
type: '*'
app/src/lib/node-registry/groupNode.ts
+13
View File
@@ -0,0 +1,13 @@
export const groupNode = {
id: '__internal/group/instance',
meta: { title: 'Group' },
inputs: {
input: {
type: 'select',
values: []
}
},
execute(_data: Int32Array): Int32Array {
return _data;
}
} as const;
app/src/lib/node-registry/node-registry-client.ts
+3
View File
@@ -88,6 +88,7 @@ export class RemoteNodeRegistry implements NodeRegistry {
}
async fetchNodeDefinition(nodeId: `${string}/${string}/${string}`) {
if (nodeId.startsWith('__internal/')) return;
return this.fetchJson(`nodes/${nodeId}.json`);
}
@@ -109,6 +110,8 @@ export class RemoteNodeRegistry implements NodeRegistry {
return this.nodes.get(id)!;
}
if (id.startsWith('__internal/')) return;
const wasmBuffer = await this.fetchNodeWasm(id);
try {
app/src/lib/runtime/runtime-executor.ts
+147 -1
View File
@@ -6,6 +6,145 @@ import type {
RuntimeExecutor,
SyncCache
} 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 {
concatEncodedArrays,
createLogger,
@@ -75,7 +214,11 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
throw new Error('Node registry is not ready');
}
await this.registry.load(graph.nodes.map((node) => node.type));
// Only load non-virtual types (virtual nodes are resolved locally)
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>();
for (const node of graph.nodes) {
@@ -163,6 +306,9 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
let a = performance.now();
this.debugData = {};
// Expand group nodes into a flat graph before execution
graph = expandGroups(graph);
// Then we add some metadata to the graph
const [outputNode, nodes] = await this.addMetaData(graph);
let b = performance.now();
app/src/routes/+page.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import Grid from '$lib/grid';
import { debounceAsyncFunction } from '$lib/helpers';
import { createKeyMap } from '$lib/helpers/createKeyMap';
import { debugNode } from '$lib/node-registry/debugNode.js';
import { debugNode } from '$lib/node-registry/debugNode';
import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
import NodeStore from '$lib/node-store/NodeStore.svelte';
import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';