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.
53 lines
1.5 KiB
Markdown
53 lines
1.5 KiB
Markdown
---
|
|
title: Building Interactive Node Graphs
|
|
date: 2026-04-15
|
|
author: Max Litruv Boonzaayer
|
|
tags: 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:
|
|
|
|
```javascript
|
|
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:
|
|
|
|
1. Extend `NodeBase`
|
|
2. Set a unique `NodeType`
|
|
3. Define pins with `BlueprintPure_GetDefaultPins()`
|
|
4. Implement rendering in `BlueprintNativeEvent_OnRender()`
|
|
5. Implement logic in `BlueprintCallable_Execute()`
|
|
|
|
That's the blueprint system in a nutshell!
|