mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-24 02:36:02 +10:00
Max Litruv Boonzaayer
40fd8e8e42
- Introduced BlogPostNode to render blog posts with metadata and content. - Updated graph.json to include new blog post nodes. - Enhanced MarkdownRenderer to support code block options for max height. - Added CSS styles for improved code block scrolling and syntax highlighting. - Created example blog posts: "Markdown Formatting Test", "Welcome to My Blog", and "Building Interactive Node Graphs". - Implemented dynamic loading of blog data from blogs.json. - Updated WorkspaceNavigator to allow smooth panning over blog nodes.
1.5 KiB
1.5 KiB
title, date, author, tags
| title | date | author | tags |
|---|---|---|---|
| Building Interactive Node Graphs | 2026-04-15 | Max Litruv Boonzaayer | javascript, graph-systems, tutorial |
Building Interactive Node Graphs
In this post, I'll share some insights on building interactive node-based graph systems for the web.
Why Node Graphs?
Node graphs are powerful visual programming tools that make complex logic easier to understand and manipulate:
- Visual Clarity: See the flow of data and execution at a glance
- Modularity: Each node is a self-contained unit
- Flexibility: Easy to add new node types and behaviors
The Architecture
The system is built on several key classes:
NodeBase
The abstract base class that all nodes inherit from. It defines the blueprint interface:
class NodeBase {
static NodeType = "";
static BlueprintPure_GetDefaultPins() { }
BlueprintNativeEvent_OnRender(article, graphNode, renderCtx) { }
async BlueprintCallable_Execute(ctx) { }
}
Node Registry
Automatically registers node types and creates instances based on type strings.
Execution Context
Handles the graph traversal and execution flow when nodes are triggered.
Creating Custom Nodes
To create a new node type:
- Extend
NodeBase - Set a unique
NodeType - Define pins with
BlueprintPure_GetDefaultPins() - Implement rendering in
BlueprintNativeEvent_OnRender() - Implement logic in
BlueprintCallable_Execute()
That's the blueprint system in a nutshell!