Logic Nodes

So far we've created some basic nodes. We've created text, number, and boolean nodes, and a root node for the final output. While this is fine and well, let's take a minute and think about some nodes we could create that could make our editor more powerful. Here's a few ideas:

  • A user node, that outputs attributes of the current user
  • A time node that outputs the current time
  • A text join node, that combines two strings of text
  • Nodes representing mathmatical operations (+, -, *, ÷)
  • A find and replace node, for replacing strings of text
  • Boolean operation nodes (and, or)
  • A window node to expose attributes of the window
  • Logical comparison nodes (greater than, less than, equals)

The kinds of nodes your present to your users are entirely up to you. When making this determination, ask yourself questions like,

  • What kind of data inputs will my users need access to?
  • What kind of logic will be intuitive for my users to use?
  • What capabilities make sense to expose to the end user?

Let's get back to our example app.

Adding logic nodes

Let's pick a few ideas from the list above. We'll first create a node that represents the current user, a node that concatenates strings, and a node that reverses a boolean. We already have all the ports we need, so let's add a new user node in config.js:

import { FlumeConfig, Colors, Controls } from 'flume'
const config = new FlumeConfig()
config
/* ... */
.addNodeType({
type: "user",
label: "User",
description: "Outputs attributes of the current user",
initialWidth: 130,
outputs: ports => [
ports.string({
name: "firstName",
label: "First Name"
}),
ports.string({
name: "lastName",
label: "Last Name"
}),
ports.boolean({
name: "isLoggedIn",
label: "Is Logged-In"
}),
ports.boolean({
name: "isAdmin",
label: "Is Admin"
})
]
})

Nothing new to see here, we've just added a node type called user, with 4 outputs and no inputs. In a later section we'll walk through how to actually hook up the data for this node, but for now let's save and return to our node editor. You should now have a new node available like this:

Homepage

User


Let's head back to config.js and add our "Join Text" node.

import { FlumeConfig, Colors, Controls } from 'flume'
const config = new FlumeConfig()
config
/* ... */
.addNodeType({
type: "joinText",
label: "Join Text",
description: "Combines two strings of text into one string",
initialWidth: 160,
inputs: ports => [
ports.string({
name: "string1",
label: "First text"
}),
ports.string({
name: "string2",
label: "Second text"
})
],
outputs: ports => [
ports.string({
name: "joinedText",
label: "Joined Text"
}),
]
})

As you can see, this node will take in two strings as inputs, and outputs a single combined string. You should now have a new node available in your editor like this:

Homepage

Join Text

Now let's add our last node that reverses a boolean.

import { FlumeConfig, Colors, Controls } from 'flume'
const config = new FlumeConfig()
config
/* ... */
.addNodeType({
type: "reverseBoolean",
label: "Reverse True/False",
description: "Reverses a true/false value",
initialWidth: 140,
inputs: ports => [
ports.boolean(),
],
outputs: ports => [
ports.boolean(),
]
})

This node just takes in a boolean, and outputs its inverse. Heading back to the node editor this new node should be available:

Homepage

Reverse True/False

Summary

So far we've created a useful node editor, but we don't have a way to get our logic graph in and out of the editor. In the next section we'll look at how to save the nodes in our editor so we can use them later.

Edit this page