mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-24 02:36:02 +10:00
59 lines
5.0 KiB
HTML
59 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<base href="/">
|
|
<title>Building Interactive Node Graphs - Blog</title>
|
|
<meta name="description" content="Lit.ruv.wtf blog posts.">
|
|
<link rel="canonical" href="https://lit.ruv.wtf/blog/node-graphs/">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/logos/32px.png">
|
|
<link rel="icon" type="image/png" sizes="64x64" href="/logos/64px.png">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
|
|
<link rel="stylesheet" href="/styles/main.css">
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
|
|
</head>
|
|
<body class="blog-page">
|
|
<nav class="quick-links" aria-label="Primary">
|
|
<a href="/blog.html" class="quick-link">blog</a>
|
|
<a href="/docs/" class="quick-link">docs</a>
|
|
<a href="https://github.com/litruv" target="_blank" rel="noopener" class="quick-link">github</a>
|
|
<a href="https://bsky.app/profile/lit.mates.dev" target="_blank" rel="noopener" class="quick-link">bluesky</a>
|
|
<a href="/materials" class="quick-link">materials</a>
|
|
</nav>
|
|
<header class="blog-scroll-topbar" data-blog-scroll-topbar>
|
|
<a class="blog-scroll-logo-link" href="/" aria-label="Back to main site">
|
|
<img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-scroll-logo" />
|
|
</a>
|
|
<nav class="blog-scroll-links" aria-label="Scrolled navigation">
|
|
<a href="/blog.html" class="quick-link">blog</a>
|
|
<a href="/docs/" class="quick-link">docs</a>
|
|
<a href="https://github.com/litruv" target="_blank" rel="noopener" class="quick-link">github</a>
|
|
<a href="https://bsky.app/profile/lit.mates.dev" target="_blank" rel="noopener" class="quick-link">bluesky</a>
|
|
<a href="/materials" class="quick-link">materials</a>
|
|
</nav>
|
|
</header>
|
|
<main class="blog-shell">
|
|
<a class="blog-logo-link" href="/" aria-label="Back to main site">
|
|
<img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-logo" />
|
|
</a>
|
|
<article class="blog-card" aria-labelledby="blog-post-title">
|
|
<header class="blog-post-header">
|
|
<h1 id="blog-post-title" class="blog-post-title">Building Interactive Node Graphs</h1>
|
|
<p class="blog-post-meta"><span>April 15, 2026</span><span aria-hidden="true">-</span><span>Max Litruv Boonzaayer</span></p>
|
|
<div class="blog-post-tags"><span class="blog-tag">javascript</span><span class="blog-tag">graph-systems</span><span class="blog-tag">tutorial</span></div>
|
|
</header>
|
|
<section class="blog-post-content" data-blog-post-content></section>
|
|
<script id="blogPostMarkdown" type="application/json">"\r\n# Building Interactive Node Graphs\r\n\r\nIn this post, I'll share some insights on building interactive node-based graph systems for the web.\r\n\r\n## Why Node Graphs?\r\n\r\nNode graphs are powerful visual programming tools that make complex logic easier to understand and manipulate:\r\n\r\n- **Visual Clarity**: See the flow of data and execution at a glance\r\n- **Modularity**: Each node is a self-contained unit\r\n- **Flexibility**: Easy to add new node types and behaviors\r\n\r\n## The Architecture\r\n\r\nThe system is built on several key classes:\r\n\r\n### NodeBase\r\nThe abstract base class that all nodes inherit from. It defines the blueprint interface:\r\n\r\n```javascript\r\nclass NodeBase {\r\n static NodeType = \"\";\r\n static BlueprintPure_GetDefaultPins() { }\r\n BlueprintNativeEvent_OnRender(article, graphNode, renderCtx) { }\r\n async BlueprintCallable_Execute(ctx) { }\r\n}\r\n```\r\n\r\n### Node Registry\r\nAutomatically registers node types and creates instances based on type strings.\r\n\r\n### Execution Context\r\nHandles the graph traversal and execution flow when nodes are triggered.\r\n\r\n## Creating Custom Nodes\r\n\r\nTo create a new node type:\r\n\r\n1. Extend `NodeBase`\r\n2. Set a unique `NodeType`\r\n3. Define pins with `BlueprintPure_GetDefaultPins()`\r\n4. Implement rendering in `BlueprintNativeEvent_OnRender()`\r\n5. Implement logic in `BlueprintCallable_Execute()`\r\n\r\nThat's the blueprint system in a nutshell!\r\n"</script>
|
|
</article>
|
|
</main>
|
|
<script type="module" src="/scripts/blogPage.js"></script>
|
|
</body>
|
|
</html> |