Comments

When programming, it's helpful to use comments to document your code. The same goes for visual programming using the Flume node editor. By default, the node editor allows you to add comment blocks that you can drag around, resize, and recolor. Let's use the final node editor from the previous section as an example.

Add the user's first name to the title

If the user is NOT logged in, show the signup.

Homepage

Title

Description

Show Signup

User

First Name

Last Name

Is Logged-In

Is Admin

Join Text

First text

Second text

Joined Text

Reverse True/False

True/False

Saving comments

Comments have no effect on the function of your logic graphs, so they aren't stored with the nodes. Like with nodes, there are two ways to get comemnts in and out of the node editor.

`onCommentsChange`

First, you can pass an onCommentsChange handler to the node editor. This works the same as the normal onChange handler, but will only be called any time any of the comments change.

import React from 'react'
import { NodeEditor } from 'flume'
import config from './config'

const App = () => {
  const [comments, setComments] = React.useState({})

  return (
    <div style={{width: 800, height: 600}}>
      <NodeEditor
        comments={comments}
        onCommentsChange={setComments}
        portTypes={config.portTypes}
        nodeTypes={config.nodeTypes}
      />
    </div>
  )
}

`getComments`

As with the onChange handler, the onCommentsChange handler may be called quite often. There may be cases where you may not need to save the comments until the user is done editing. For these cases, the node editor exposes an imperative getComments function.

import React from 'react'
import { NodeEditor } from 'flume'
import config from './config'

const App = () => {
  const nodeEditor = React.useRef()

  const saveComments = () => {
    const comments = nodeEditor.current.getComments()
    // Do whatever you want with the comments
  }

  return (
    <div>
      <button onClick={saveComments}>Save</button>
      <div style={{width: 800, height: 600}}>
        <NodeEditor
          ref={nodeEditor}
          portTypes={config.portTypes}
          nodeTypes={config.nodeTypes}
        />
      </div>
    </div>
  )
}