The Root Node

The root node is a special node that serves as the final output for our graph. If you've been following along from the previous examples, we're configuring a node editor to control the properties of a page on our website. The node that accepts these final properties is our root node.

Adding a root node

Let's get started adding our root node. We want this node to represent the properties we'll use in our website. Let's head back to our config.js file.

import { FlumeConfig, Colors, Controls } from 'flume'
const config = new FlumeConfig()
config
/* ... */
.addRootNodeType({
type: "homepage",
label: "Homepage",
initialWidth: 170,
inputs: ports => [
ports.string({
name: "title",
label: "Title"
}),
ports.string({
name: "description",
label: "Description"
}),
ports.boolean({
name: "showSignup",
label: "Show Signup"
}),
ports.number({
name: "copyrightYear",
label: "Copyright Year"
})
]
})

You may notice a few things about the above example. First, instead of addNodeType we're using the addRootNodeType function, but the properties you pass to this function are the same. Under the hood, this node type is marked as the "root" node, and by default it can't be manually added or deleted in the node editor.

Default nodes

Let's return to the node editor. You should have what appears to be the same editor as before. If you right-click to add a node, the homepage node doesn't appear. Because this node is the root node, there should be exactly one of this node in the editor at all times. We don't want users to be able to add or delete this node, so we'll provide it to the editor as a default node.

In the file where we're rendering the node editor, we'll add a new prop called defaultNodes.

import React from 'react'
import { NodeEditor } from 'flume'
import config from './config'
const App = () => {
return (
<div style={{width: 800, height: 600}}>
<NodeEditor
portTypes={config.portTypes}
nodeTypes={config.nodeTypes}
defaultNodes={[
{
type: "homepage",
x: 190,
y: -150
}
]}
/>
</div>
)
}

defaultNodes is an array of objects with a type, and an x and y position, relative to the center of the editor. If everything has gone according to plan, you should have an editor that looks like this:

Homepage


Try adding your other nodes and connecting them together. Our node editor is finally starting to take shape, but we need to create some more useful nodes if we really want to create something powerful. Let's head back to our config file and add a few more nodes.

Edit this page