NodeEditor
NodeEditor is a React component for rendering the node editor. It requires portTypes and nodeTypes, and can be rendered with or without existing nodes.
Zooming & Panning
By default, the node editor can be zoomed in and out using the scroll wheel, and panned by dragging anywhere on the background. In this release these are the only methods of zooming and panning, but an upcoming release will likely add an optional UI for using these features.
Importing
Props
portTypes : object
Required. portTypes are generated using the FlumeConfig class.
nodeTypes : object
Required. nodeTypes are generated using the FlumeConfig class.
nodes : object
Optional. An object of nodes previously generated through the node editor.
comments : object
Optional. An object of comments previously generated through the node editor.
defaultNodes : array<object>
Optional. For many logic graphs, it's helpful to have the editor start with a set of default nodes. To define these nodes, pass an array of objects with the type of the node, and an x and y position relative to the center of the editor.
| Key | Type | Default | Required | Description |
|---|---|---|---|---|
| type | string | "" | Required | The type key of the node you want to add as a default. This type must have been previously defined in the nodeTypes object. |
| x | int | float | 0 | Optional | The horizontal starting position of the node, relative to the center of the node editor. |
| y | int | float | 0 | Optional | The vertical starting position of the node, relative to the center of the node editor. |
onChange : function
Optional. This function will be called any time any of the nodes in the node editor change. This includes their position, connections, and the values of their controls.
note
For performance reasons, this function will not be called while the user is dragging a node. As soon as the user releases a dragged node, this function will be called with the updated position.
onCommentsChange : function
Optional. This function will be called any time any of the comments in the node editor change. This includes their position, size, color, and text.
note
For performance reasons, this function will not be called while the user is dragging or resizing a comment. As soon as the user releases a dragged comment, this function will be called with the updated comment.
context : object
Optional. Context is used to pass data to the node editor if your nodes require live data. For example, you may have a node with a dropdown control for selecting a color, but the available colors depend on the state of your app. To allow this kind of calculation, the context object is provided to your node at runtime to aid in these kinds of calculations.
initialScale : int | float
Optional. The initial level of zoom for the node editor. This must be a number between 0.1 and 7. If a number is provided outside of this range it will be clamped to the nearest valid number. Defaults to 1.
disableZoom : boolean
Optional. Prevents the user from zooming in and out of the node editor. This can be helpful if your node editor is on a scrollable page, and you don't want to capture scroll events as the user's mouse passes the editor. Defaults to false.
disablePan : boolean
Optional. Prevents the user from panning inside of the node editor. Defaults to false.
spaceToPan : boolean
Optional. If true, the spacebar must be depressed in order to pan the node editor. The cursor will also be updated to show a draggable indicator when the spacbar is depressed.
hideComments : boolean
Optional. If the current node editor contains comment blocks, they will not be rendered. This can be helpful for providing a UI for toggling comments on and off if desired. Defaults to false.
disableComments : boolean
Optional. Prevents the user from adding additional comments. Defaults to false.
circularBehavior : string
Optional. Can be one of 3 possible values:
prevent: Default. When a user attempts to connect nodes in a way that would create a circular graph, the connection is rejected and a warning is displayed.warn: Creating circular connections is allowed, but a warning is displayed.allow: Creating circular connections is allowed without a warning.
renderNodeHeader : function
Optional. Allows you to override the rendering of the node header. Common use-cases might include overriding the label of a node, or adding custom UI elements like a button to delete the node, or open the node context menu. This prop accepts a function which is expected to return jsx.
Function parameters
The renderNodeHeader function provides three parameters to help you render a custom header. Together they make up the following function signature:
Wrapper
Wrapper is a React component in which you can render your custom UI. Usage of the wrapper is not required, but is recommended for accessibility and consistency with the other components of the UI.
nodeType
nodeType represents the current type definition of the node being rendered. For documentation for the properties available on nodeType see FlumeConfig.
actions
Actions is an object of functions which operate in the context of the current node. Currently the following actions are available:
- openMenu: Opens the context menu for the node.
- closeMenu: Closes the context menu for the node.
- deleteNode: Deletes the current node.