repository·master·Indexed 24 days ago
https://github.com/newcat/baklavajsA web-based graph and node editor built with VueJS and TypeScript. BaklavaJS features a modular plugin system allowing for visual UI editing and headless graph execution. It provides a core engine for node-based programming, a Vue renderer, and specialized packages for event management, interface types, and calculation execution.
The Forward Engine is an execution model where execution flows forward through explicit connections, while data dependencies are resolved backward on demand. This is similar to Unreal Engine Blueprints or Unity Visual Scripting.
Use the Forward Engine when you need:
Use the Dependency Engine instead if: You only need a simple dataflow graph where all nodes are always calculated based on their dependencies.
Graph is a collection of nodes and the connections (edges) between them. It acts as a workspace that provides specific functions to modify the set of nodes and connections, and allows users to listen to graph-specific events.The Forward Engine has different rules for connection types:
BaklavaJS distinguishes between two types of events:
prevent() function provided in the callback arguments to cancel the action. These events often use the before prefix (e.g., beforeAddConnection).When using a PreventableBaklavaEvent, the .emit() method returns a boolean indicating whether the action was prevented.
import { PreventableBaklavaEvent } from "@baklavajs/events";
const ev = new PreventableBaklavaEvent<string, null>(null);
const token = Symbol();
ev.subscribe(token, (data, prevent) => {
if (data === "prevent me") {
prevent();
return;
}
console.log(data);
});
function emit(data: string) {
if (ev.emit(data)) {
console.log("prevented");
}
}
emit("prevent me");
emit("this works");BaklavaJS uses a modular architecture where the core logic is separated from rendering and execution. This allows you to build different types of applications (e.g., a visual editor, a headless calculation engine, or a type-safe logic builder) by composing different packages.
@baklavajs/renderer-vue for Vue users) that turns the graph data into an interactive UI.The Editor is the central model class in BaklavaJS and serves as the primary container for all other components. Everything in a Baklava application lives inside an editor instance.
Key responsibilities of the Editor include:
An editor instance always contains exactly one main graph, known as the root graph, which is accessible via editor.graph. The editor also maintains a collection of all graph instances (including subgraphs) via editor.graphs.
commandHandler interface (specifically ICommandHandler).The onUpdate(inputValues, outputValues) function determines the target state of a dynamic node's interfaces. It returns a DynamicNodeUpdateResult object.
If a key is present in the returned inputs or outputs object, the interface is created or updated. If a key is missing from the returned object, the corresponding interface is removed from the node. This allows the node to automatically synchronize its interface state with the returned definition.
type DynamicNodeDefinition = Record<string, () => NodeInterface<any>>;
interface DynamicNodeUpdateResult {
inputs?: DynamicNodeDefinition;
outputs?: DynamicNodeDefinition;
forceUpdateInputs?: string[];
forceUpdateOutputs?: string[];
}Subgraphs operate through a relationship between a GraphNode and a GraphTemplate:
GraphNode holds an internal graph that is based on the GraphTemplate of the subgraph.When you edit a subgraph, you are modifying the GraphTemplate. The GraphNode instances in the root graph reference this template. Changes to the template are propagated to the instances when the template is saved.
BaklavaJS uses Engines to execute compute graphs. While the Editor is used for editing, Engines handle the actual computation logic. There are two primary engine types:
Regardless of the engine type, all nodes must implement a calculate function to participate in execution.
BaklavaJS uses a custom event system designed for extensibility and plugin support. Classes supporting this system expose events and/or hook properties.
To support inline arrow functions (which cannot be easily removed via function reference), BaklavaJS uses tokens. A token can be any reference type (object, array, this) or a Symbol. You provide the token when calling .subscribe() and must provide the same token when calling .unsubscribe() to remove the listener.
import { BaklavaEvent } from "@baklavajs/events";
const ev = new BaklavaEvent<string, null>(null);
const token = Symbol();
ev.subscribe(token, (data) => {
console.log("Event triggered:", data);
});
ev.emit("Hello World");
ev.unsubscribe(token);
ev.emit("This won't be printed");