2024-03-12 18:47:50 +01:00
|
|
|
import { writable, type Writable } from "svelte/store";
|
|
|
|
import type { Graph, NodeRegistry as INodeRegistry, NodeType, Node, Edge, Socket } from "./types";
|
2024-03-13 16:18:48 +01:00
|
|
|
import { HistoryManager } from "./history-manager";
|
2024-03-06 18:31:06 +01:00
|
|
|
|
|
|
|
const nodeTypes: NodeType[] = [
|
|
|
|
{
|
|
|
|
id: "input/float",
|
|
|
|
inputs: {
|
|
|
|
"value": { type: "float" },
|
|
|
|
},
|
|
|
|
outputs: ["float"],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "math",
|
|
|
|
inputs: {
|
2024-03-11 22:00:16 +01:00
|
|
|
"type": { type: "select", options: ["add", "subtract", "multiply", "divide"], internal: true },
|
2024-03-06 18:31:06 +01:00
|
|
|
"a": { type: "float" },
|
|
|
|
"b": { type: "float" },
|
|
|
|
},
|
|
|
|
outputs: ["float"],
|
|
|
|
},
|
2024-03-11 22:00:16 +01:00
|
|
|
{
|
|
|
|
id: "output",
|
|
|
|
inputs: {
|
|
|
|
"input": { type: "float" },
|
|
|
|
},
|
|
|
|
outputs: [],
|
|
|
|
}
|
2024-03-06 18:31:06 +01:00
|
|
|
]
|
|
|
|
|
|
|
|
export class NodeRegistry implements INodeRegistry {
|
|
|
|
getNode(id: string): NodeType | undefined {
|
|
|
|
return nodeTypes.find((nodeType) => nodeType.id === id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export class GraphManager {
|
|
|
|
|
|
|
|
status: Writable<"loading" | "idle" | "error"> = writable("loading");
|
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
private _nodes: Map<number, Node> = new Map();
|
|
|
|
nodes: Writable<Map<number, Node>> = writable(new Map());
|
2024-03-11 22:00:16 +01:00
|
|
|
private _edges: Edge[] = [];
|
|
|
|
edges: Writable<Edge[]> = writable([]);
|
2024-03-06 18:31:06 +01:00
|
|
|
|
2024-03-13 16:18:48 +01:00
|
|
|
history: HistoryManager = new HistoryManager(this);
|
|
|
|
|
2024-03-06 18:31:06 +01:00
|
|
|
private constructor(private graph: Graph, private nodeRegistry: NodeRegistry = new NodeRegistry()) {
|
2024-03-11 22:00:16 +01:00
|
|
|
this.nodes.subscribe((nodes) => {
|
|
|
|
this._nodes = nodes;
|
|
|
|
});
|
|
|
|
this.edges.subscribe((edges) => {
|
|
|
|
this._edges = edges;
|
|
|
|
});
|
2024-03-13 14:30:30 +01:00
|
|
|
}
|
|
|
|
|
2024-03-13 16:18:48 +01:00
|
|
|
serialize(): Graph {
|
2024-03-13 14:30:30 +01:00
|
|
|
const nodes = Array.from(this._nodes.values()).map(node => ({
|
|
|
|
id: node.id,
|
2024-03-13 16:18:48 +01:00
|
|
|
position: { x: node.position.x, y: node.position.y },
|
2024-03-13 14:30:30 +01:00
|
|
|
type: node.type,
|
|
|
|
props: node.props,
|
|
|
|
}));
|
2024-03-13 16:18:48 +01:00
|
|
|
const edges = this._edges.map(edge => [edge[0].id, edge[1], edge[2].id, edge[3]]) as Graph["edges"];
|
2024-03-13 14:30:30 +01:00
|
|
|
return { nodes, edges };
|
2024-03-06 18:31:06 +01:00
|
|
|
}
|
|
|
|
|
2024-03-13 16:18:48 +01:00
|
|
|
private _init(graph: Graph) {
|
|
|
|
const nodes = new Map(graph.nodes.map(node => {
|
2024-03-12 18:47:50 +01:00
|
|
|
const nodeType = this.nodeRegistry.getNode(node.type);
|
2024-03-13 16:18:48 +01:00
|
|
|
if (nodeType) {
|
|
|
|
node.tmp = node.tmp || {};
|
|
|
|
node.tmp.type = nodeType;
|
2024-03-06 18:31:06 +01:00
|
|
|
}
|
2024-03-13 16:18:48 +01:00
|
|
|
return [node.id, node]
|
|
|
|
}));
|
2024-03-12 18:47:50 +01:00
|
|
|
|
2024-03-13 16:18:48 +01:00
|
|
|
this.edges.set(graph.edges.map((edge) => {
|
2024-03-12 18:47:50 +01:00
|
|
|
const from = nodes.get(edge[0]);
|
|
|
|
const to = nodes.get(edge[2]);
|
|
|
|
if (!from || !to) {
|
|
|
|
console.error("Edge references non-existing node");
|
|
|
|
return;
|
|
|
|
};
|
|
|
|
from.tmp = from.tmp || {};
|
|
|
|
from.tmp.children = from.tmp.children || [];
|
|
|
|
from.tmp.children.push(to);
|
|
|
|
to.tmp = to.tmp || {};
|
|
|
|
to.tmp.parents = to.tmp.parents || [];
|
|
|
|
to.tmp.parents.push(from);
|
2024-03-11 22:00:16 +01:00
|
|
|
return [from, edge[1], to, edge[3]] as const;
|
|
|
|
})
|
|
|
|
.filter(Boolean) as unknown as [Node, number, Node, string][]
|
|
|
|
);
|
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
this.nodes.set(nodes);
|
2024-03-11 22:00:16 +01:00
|
|
|
|
2024-03-13 16:18:48 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async load() {
|
|
|
|
|
|
|
|
for (const node of this.graph.nodes) {
|
|
|
|
const nodeType = this.nodeRegistry.getNode(node.type);
|
|
|
|
if (!nodeType) {
|
|
|
|
console.error(`Node type not found: ${node.type}`);
|
|
|
|
this.status.set("error");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
node.tmp = node.tmp || {};
|
|
|
|
node.tmp.type = nodeType;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._init(this.graph);
|
|
|
|
|
2024-03-06 18:31:06 +01:00
|
|
|
this.status.set("idle");
|
2024-03-13 16:18:48 +01:00
|
|
|
this.history.save();
|
2024-03-06 18:31:06 +01:00
|
|
|
}
|
|
|
|
|
2024-03-11 22:00:16 +01:00
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
getAllNodes() {
|
|
|
|
return Array.from(this._nodes.values());
|
|
|
|
}
|
|
|
|
|
2024-03-11 19:37:58 +01:00
|
|
|
getNode(id: number) {
|
2024-03-12 18:47:50 +01:00
|
|
|
return this._nodes.get(id);
|
2024-03-06 18:31:06 +01:00
|
|
|
}
|
|
|
|
|
2024-03-13 14:30:30 +01:00
|
|
|
getNodeType(id: string) {
|
|
|
|
return this.nodeRegistry.getNode(id);
|
|
|
|
}
|
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
getChildrenOfNode(node: Node) {
|
|
|
|
const children = [];
|
|
|
|
const stack = node.tmp?.children?.slice(0);
|
|
|
|
while (stack?.length) {
|
|
|
|
const child = stack.pop();
|
|
|
|
if (!child) continue;
|
|
|
|
children.push(child);
|
|
|
|
stack.push(...child.tmp?.children || []);
|
|
|
|
}
|
|
|
|
return children;
|
|
|
|
}
|
2024-03-11 19:37:58 +01:00
|
|
|
|
2024-03-13 14:30:30 +01:00
|
|
|
getNodesBetween(from: Node, to: Node): Node[] | undefined {
|
|
|
|
// < - - - - from
|
|
|
|
const toParents = this.getParentsOfNode(to);
|
|
|
|
// < - - - - from - - - - to
|
|
|
|
const fromParents = this.getParentsOfNode(from);
|
|
|
|
if (toParents.includes(from)) {
|
|
|
|
return toParents.splice(toParents.indexOf(from));
|
|
|
|
} else if (fromParents.includes(to)) {
|
|
|
|
return fromParents.splice(fromParents.indexOf(to));
|
|
|
|
} else {
|
|
|
|
// these two nodes are not connected
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private updateNodeParents(node: Node) {
|
|
|
|
}
|
|
|
|
|
|
|
|
removeNode(node: Node) {
|
|
|
|
const edges = this._edges.filter((edge) => edge[0].id !== node.id && edge[2].id !== node.id);
|
|
|
|
this.edges.set(edges);
|
2024-03-12 18:47:50 +01:00
|
|
|
|
2024-03-13 14:30:30 +01:00
|
|
|
this.nodes.update((nodes) => {
|
|
|
|
nodes.delete(node.id);
|
|
|
|
return nodes;
|
|
|
|
});
|
2024-03-13 16:18:48 +01:00
|
|
|
this.history.save();
|
2024-03-13 14:30:30 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
createEdge(from: Node, fromSocket: number, to: Node, toSocket: string) {
|
2024-03-12 18:47:50 +01:00
|
|
|
|
|
|
|
const existingEdges = this.getEdgesToNode(to);
|
|
|
|
|
|
|
|
// check if this exact edge already exists
|
|
|
|
const existingEdge = existingEdges.find(e => e[0].id === from.id && e[1] === fromSocket && e[3] === toSocket);
|
|
|
|
if (existingEdge) {
|
|
|
|
console.log("Edge already exists");
|
|
|
|
console.log(existingEdge)
|
|
|
|
return;
|
|
|
|
};
|
|
|
|
|
|
|
|
// check if socket types match
|
|
|
|
const fromSocketType = from.tmp?.type?.outputs?.[fromSocket];
|
|
|
|
const toSocketType = to.tmp?.type?.inputs?.[toSocket]?.type;
|
|
|
|
|
|
|
|
if (fromSocketType !== toSocketType) {
|
|
|
|
console.error(`Socket types do not match: ${fromSocketType} !== ${toSocketType}`);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.edges.update((edges) => {
|
|
|
|
return [...edges.filter(e => e[2].id !== to.id || e[3] !== toSocket), [from, fromSocket, to, toSocket]];
|
|
|
|
});
|
2024-03-13 16:18:48 +01:00
|
|
|
|
|
|
|
this.history.save();
|
2024-03-12 18:47:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
getParentsOfNode(node: Node) {
|
|
|
|
const parents = [];
|
|
|
|
const stack = node.tmp?.parents?.slice(0);
|
|
|
|
while (stack?.length) {
|
|
|
|
const parent = stack.pop();
|
|
|
|
if (!parent) continue;
|
|
|
|
parents.push(parent);
|
|
|
|
stack.push(...parent.tmp?.parents || []);
|
|
|
|
}
|
2024-03-13 14:30:30 +01:00
|
|
|
return parents.reverse();
|
2024-03-12 18:47:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
getPossibleSockets({ node, index }: Socket): [Node, string | number][] {
|
|
|
|
|
|
|
|
const nodeType = node?.tmp?.type;
|
2024-03-11 19:37:58 +01:00
|
|
|
if (!nodeType) return [];
|
|
|
|
|
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
const sockets: [Node, string | number][] = []
|
|
|
|
// if index is a string, we are an input looking for outputs
|
|
|
|
if (typeof index === "string") {
|
|
|
|
|
|
|
|
// filter out self and child nodes
|
|
|
|
const children = new Set(this.getChildrenOfNode(node).map(n => n.id));
|
|
|
|
const nodes = this.getAllNodes().filter(n => n.id !== node.id && !children.has(n.id));
|
2024-03-11 19:37:58 +01:00
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
const ownType = nodeType?.inputs?.[index].type;
|
2024-03-11 19:37:58 +01:00
|
|
|
|
|
|
|
for (const node of nodes) {
|
2024-03-12 18:47:50 +01:00
|
|
|
const nodeType = node?.tmp?.type;
|
2024-03-11 19:37:58 +01:00
|
|
|
const inputs = nodeType?.outputs;
|
|
|
|
if (!inputs) continue;
|
|
|
|
for (let index = 0; index < inputs.length; index++) {
|
|
|
|
if (inputs[index] === ownType) {
|
|
|
|
sockets.push([node, index]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
} else if (typeof index === "number") {
|
|
|
|
// if index is a number, we are an output looking for inputs
|
2024-03-11 19:37:58 +01:00
|
|
|
|
2024-03-12 18:47:50 +01:00
|
|
|
// filter out self and parent nodes
|
|
|
|
const parents = new Set(this.getParentsOfNode(node).map(n => n.id));
|
|
|
|
const nodes = this.getAllNodes().filter(n => n.id !== node.id && !parents.has(n.id));
|
|
|
|
|
|
|
|
// get edges from this socket
|
|
|
|
const edges = new Map(this.getEdgesFromNode(node).filter(e => e[1] === index).map(e => [e[2].id, e[3]]));
|
|
|
|
|
|
|
|
const ownType = nodeType.outputs?.[index];
|
2024-03-11 19:37:58 +01:00
|
|
|
|
|
|
|
for (const node of nodes) {
|
2024-03-12 18:47:50 +01:00
|
|
|
const inputs = node?.tmp?.type?.inputs;
|
|
|
|
if (!inputs) continue;
|
|
|
|
for (const key in inputs) {
|
|
|
|
if (inputs[key].type === ownType && edges.get(node.id) !== key) {
|
|
|
|
sockets.push([node, key]);
|
2024-03-11 19:37:58 +01:00
|
|
|
}
|
2024-03-12 18:47:50 +01:00
|
|
|
}
|
2024-03-11 19:37:58 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return sockets;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2024-03-11 22:00:16 +01:00
|
|
|
removeEdge(edge: Edge) {
|
|
|
|
const id0 = edge[0].id;
|
|
|
|
const sid0 = edge[1];
|
|
|
|
const id2 = edge[2].id;
|
|
|
|
const sid2 = edge[3];
|
|
|
|
this.edges.update((edges) => {
|
|
|
|
return edges.filter((e) => e[0].id !== id0 || e[1] !== sid0 || e[2].id !== id2 || e[3] !== sid2);
|
|
|
|
});
|
2024-03-13 16:18:48 +01:00
|
|
|
this.history.save();
|
2024-03-11 22:00:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
getEdgesToNode(node: Node) {
|
|
|
|
return this._edges
|
|
|
|
.filter((edge) => edge[2].id === node.id)
|
2024-03-06 18:31:06 +01:00
|
|
|
.map((edge) => {
|
2024-03-12 18:47:50 +01:00
|
|
|
const from = this.getNode(edge[0].id);
|
|
|
|
const to = this.getNode(edge[2].id);
|
2024-03-06 18:31:06 +01:00
|
|
|
if (!from || !to) return;
|
2024-03-11 22:00:16 +01:00
|
|
|
return [from, edge[1], to, edge[3]] as const;
|
2024-03-06 18:31:06 +01:00
|
|
|
})
|
2024-03-11 22:00:16 +01:00
|
|
|
.filter(Boolean) as unknown as [Node, number, Node, string][];
|
2024-03-06 18:31:06 +01:00
|
|
|
}
|
|
|
|
|
2024-03-11 22:00:16 +01:00
|
|
|
getEdgesFromNode(node: Node) {
|
|
|
|
return this._edges
|
2024-03-12 18:47:50 +01:00
|
|
|
.filter((edge) => edge[0].id === node.id)
|
2024-03-11 22:00:16 +01:00
|
|
|
.map((edge) => {
|
2024-03-12 18:47:50 +01:00
|
|
|
const from = this.getNode(edge[0].id);
|
|
|
|
const to = this.getNode(edge[2].id);
|
2024-03-11 22:00:16 +01:00
|
|
|
if (!from || !to) return;
|
|
|
|
return [from, edge[1], to, edge[3]] as const;
|
|
|
|
})
|
|
|
|
.filter(Boolean) as unknown as [Node, number, Node, string][];
|
|
|
|
}
|
2024-03-06 18:31:06 +01:00
|
|
|
|
2024-03-11 02:02:04 +01:00
|
|
|
static createEmptyGraph({ width = 20, height = 20 } = {}): GraphManager {
|
2024-03-06 18:31:06 +01:00
|
|
|
|
|
|
|
const graph: Graph = {
|
|
|
|
edges: [],
|
|
|
|
nodes: [],
|
|
|
|
};
|
|
|
|
|
2024-03-11 02:02:04 +01:00
|
|
|
const amount = width * height;
|
|
|
|
|
|
|
|
for (let i = 0; i < amount; i++) {
|
|
|
|
const x = i % width;
|
|
|
|
const y = Math.floor(i / height);
|
2024-03-06 18:31:06 +01:00
|
|
|
|
|
|
|
graph.nodes.push({
|
2024-03-11 19:37:58 +01:00
|
|
|
id: i,
|
2024-03-06 18:31:06 +01:00
|
|
|
tmp: {
|
|
|
|
visible: false,
|
|
|
|
},
|
|
|
|
position: {
|
|
|
|
x: x * 7.5,
|
2024-03-11 02:02:04 +01:00
|
|
|
y: y * 10,
|
2024-03-06 18:31:06 +01:00
|
|
|
},
|
|
|
|
props: i == 0 ? { value: 0 } : {},
|
|
|
|
type: i == 0 ? "input/float" : "math",
|
|
|
|
});
|
|
|
|
|
2024-03-11 22:00:16 +01:00
|
|
|
graph.edges.push([i, 0, i + 1, i === amount - 1 ? "input" : "a",]);
|
2024-03-06 18:31:06 +01:00
|
|
|
}
|
|
|
|
|
2024-03-11 22:00:16 +01:00
|
|
|
graph.nodes.push({
|
|
|
|
id: amount,
|
|
|
|
tmp: {
|
|
|
|
visible: false,
|
|
|
|
},
|
|
|
|
position: {
|
|
|
|
x: width * 7.5,
|
|
|
|
y: (height - 1) * 10,
|
|
|
|
},
|
|
|
|
type: "output",
|
|
|
|
props: {},
|
|
|
|
});
|
|
|
|
|
2024-03-06 18:31:06 +01:00
|
|
|
return new GraphManager(graph);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|