Class: Node

A Node is a singular processing unit in a Flow accepting inputs through input terminals and producing output through output terminals for other connected nodes/flows.

A node can also have interactive UI inside it, using UINodes for showing labels, selectors, toggles, files, sliders, buttons, dials, images, and a lot more.

Hierarchy

extendsHooks

implementsEventsSerializableRenderable

Overview

• constructor

Properties

• flow
• focused
• group
• id
• inputs
• inputsUI
• name
• nodeButtons
• outputs
• outputsUI
• renderers
• renderState
• state
• type
• terminals
• ui
• uiNodes

Accessors

• height
• position
• width
• zIndex
• style

Methods

• addNodeButton
• addTerminal
• addTerminals
• call
• create
• created
• createUI
• dispose
• getInput
• getInputs
• off
• offAll
• on
• process
• removeTerminal
• serialize
• setOutputs
• setupIO
• toggle
• unwatch
• watch

Events

• process
• render
• down
• over
• enter
• exit
• up
• click
• drag
• rightclick
• wheel

Constructor

new Node(): Node

Properties

flow

flow: Flow

Reference to the Flow in which this node exists.

focused

focused: boolean

Node's current focused state.

group

group: Group

Reference to the Group if this node is grouped with other nodes.

id

id: string

A unique identifier.

inputs

inputs: Terminal

Reference to all the input terminals of the node.

inputsUI

inputsUI: Terminal

Reference to all the input terminals of node that are bound to one of the UINodes.
For e.g. A Label can have it's own input/output terminal.

name

name: string

Display name of the node.

nodeButtons

nodeButtons: Map<string, NodeButton>

Collection of all the node-buttons displayed besides the node's name.

outputs

outputs: Terminal

Reference to all the output terminals of the node.

outputsUI

outputsUI: Terminal

Reference to all the output terminals of node that are bound to one of the UINodes.
For e.g. A Label can have it's own input/output terminal.

renderers

renderers: NodeRenderers

A Renderer which is scoped to the Node instance.

Any custom render functions specified using this resolver will affect everything only inside this node instance.

default:

{}

renderState

renderState: RenderState

The RenderState of a node is a collection of various states corresponding to Viewport visibility, maximized/minimized state and level-of-detail to show when zooming in/out.

default:

{
  viewport: ViewPort.INSIDE,
  nodeState: NodeState.MAXIMIZED,
  lod: LOD.LOD2
}

state

state: Record<string, any>

A local reactive state of the node, properties defined within this state is two-way bindable with any UINode.

let customNode = flow.createNode("Custom Node", Vector.create(50, 50), 170, {
  state: {
    name: "John Doe",
    age: 24,
  },
});

style

style: NodeStyle

default:

{
  font: 'arial',
  fontSize: '.75rem',
  titleFont: 'arial',
  titleFontSize: '.85rem',
  color: '#000',
  titleColor: '#000',
  maximizeButtonColor: 'darkgrey',
  nodeButtonSize: 10,
  nodeButtonSpacing: 5,
  expandButtonColor: '#000',
  minimizedTerminalColor: 'green',
  outlineColor: '#000',
  padding: 10,
  spacing: 10,
  rowHeight: 20,
  titleHeight: 29,
  terminalRowHeight: 24,
  terminalStripMargin: 8
}

terminalStyle

terminalStyle: TerminalStyle

terminals

terminals: Map<string, Terminal>

Reference to all the terminals (inputs/outputs) of the node mapped to their id's.

ui

ui: Container

Reference to the UI Container which is also the root UINode.

uiNodes

uiNodes: Map<string, UINode>

Reference to all the UINodes.

Accessors

height

height: number

position

position: Vector

width

width: number

zIndex

zIndex: number

Methods

addNodeButton

addNodeButton(callback: () => void, render: RenderFn<NodeButton, NodeButtonRenderParams>, align: Align): NodeButton

Parameters

• callback() => void
  
• renderRenderFn<NodeButton, NodeButtonRenderParams>
  
• alignAlign
  

Example

node.addNodeButton(
  () => doSomething(),
  (context: CanvasRenderingContext2D, params: NodeButtonRenderParams, nodeButton: NodeButton) => {
    let style = nodeButton.node.style;

    context.strokeStyle = style.color;
    context.beginPath();
    context.arc(params.position.x, params.position.y, 10, 0, 2 * Math.PI);
    context.closePath();

    context.stroke();
  },
  Align.Right
);

addTerminal

addTerminal(terminal: Terminal | SerializedTerminal): void

Parameters

• terminalTerminal | SerializedTerminal
  

Example

node.addTerminal(new Terminal(node, TerminalType.IN, "string", "first-name"));

addTerminals

addTerminals(terminals: Terminal[] | SerializedTerminal[]): void

Parameters

• terminalTerminal[] | SerializedTerminal[]
  

call

call(eventKey: string, ...args: any): void

from Hooks.call

create

Not Recommended

Using the create method can lead to unexpected results, use the Flow.createNode method instead

create<T extends Node>( type: string, flow: Flow, position: Vector, options: NodeOptions, isDeserialized: boolean ): T

Parameters

• typestring
  
• flowFlow
  
• positionVector
  
• optionsNodeOptions
  
• isDeserializedboolean
  

Returns

T

created

created<T extends NodeOptions>( options: T ): void

Parameters

• optionsT
  

Returns

void

createUI

creatUI<T extends UINode, O extends UINodeOptions>( type: string, options: O ): T

Parameters

• typestring
  
• optionsO
  

Returns

void

Example

let button = node.createUI("core/button", { text: "Click me" });
node.ui.append(button);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 150,
  state: { dialValue: 65 },
});

let dial = node.createUI("core/dial", {
  min: 0,
  max: 100,
  height: 100,
  propName: "dialValue",
});
let label = node.createUI("core/label", {
  text: node.state.dialValue,
  propName: "dialValue",
  style: { align: Align.Center, fontSize: "14px", precision: 0 },
});

node.ui.append([dial, label]);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});

let display = node.createUI("core/display", {
  height: 150,
  customRenderers: [
    {
      auto: true,
      clear: true,
      renderer: (context, width, height) => {
        for (let i = 0; i < 100; i++) {
          context.fillStyle = Color.Random().hexValue;
          context.fillRect(Math.random() * width, Math.random() * height, 5, 5);
        }
        return true;
      },
    },
  ],
});

node.ui.append(display);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});

let envelope = node.createUI("core/envelope", {
  height: 150,
  values: [Vector.create(0.1, 0.1), Vector.create(0.3, 0.8), Vector.create(0.75, 0.3), Vector.create(0.9, 0.7)],
});

node.ui.append(envelope);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});

let hozLayout = node.createUI("core/x-layout", {
  childs: [
    node.createUI("core/label", {
      text: "W: 0.2",
      style: { grow: 0.2, backgroundColor: "#0f0", align: Align.Center },
    }),
    node.createUI("core/label", {
      text: "W: 0.5",
      style: { grow: 0.5, backgroundColor: "#e0e", align: Align.Center },
    }),
    node.createUI("core/label", {
      text: "W: 0.3",
      style: { grow: 0.3, backgroundColor: "#0ff", align: Align.Center },
    }),
  ],
});

node.ui.append(hozLayout);

let node = flow.createNode("cpre/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});
let image = node.createUI("core/image", {
  src: "/assets/hero.png",
  style: { align: Align.Center },
});
node.ui.append(image);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});
let input = node.createUI("core/input", { value: "Sample Text" });
node.ui.append(input);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});
let label = node.createUI("core/label", { text: "Sample Label" });
node.ui.append(label);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});
let radioGroup = node.createUI("core/radio-group", {
  values: ["Sample A", "Sample B", "Sample C"],
  selected: "Sample B",
});
node.ui.append(radioGroup);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
  style: { rowHeight: 10 },
});
let select = node.createUI("core/select", { values: ["Sample A", "Sample B", "Sample C"] });
node.ui.append(select);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
  style: { rowHeight: 10 },
  state: { sliderValue: -18 },
});
let hozLayout = node.createUI("core/x-layout", {
  childs: [
    node.createUI("core/slider", {
      min: -100,
      max: 100,
      propName: "sliderValue",
      style: { grow: 0.8 },
    }),
    node.createUI("core/label", {
      text: node.state.sliderValue,
      propName: "sliderValue",
      style: { grow: 0.2, align: Align.Center, precision: 0 },
    }),
  ],
});
node.ui.append(hozLayout);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
  style: { rowHeight: 10 },
});
let slider2D = node.createUI("core/2d-slider", {
  height: 100,
  value: Vector.create(0.2, 0.8),
});
node.ui.append(slider2D);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
  style: { rowHeight: 20 },
});
let source = node.createUI("core/source");
node.ui.append(source);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
});
let stack = node.createUI("core/stack", {
  childs: [
    node.createUI("core/label", {
      text: "A",
      height: 20,
      style: { backgroundColor: "#0f0", align: Align.Center },
    }),
    node.createUI("core/label", {
      text: "B",
      height: 60,
      style: { backgroundColor: "#e0e", align: Align.Center },
    }),
    node.createLabel("core/label", {
      text: "C",
      height: 30,
      style: { backgroundColor: "#0ff", align: Align.Center },
    }),
  ],
  spacing: 5,
});
node.ui.append(stack);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
  style: { rowHeight: 10 },
});
let toggle = node.createUI("core/toggle");
node.ui.append(toggle);

let node = flow.createNode("core/empty", Vector.create(50, 50), {
  name: "Node",
  width: 230,
  state: { vSliderValue: -22 },
});
let stack = node.createUI("core/stack", {
  childs: [
    node.createUI("core/v-slider", {
      min: -50,
      max: 50,
      height: 150,
      propName: "vSliderValue",
    }),
    node.createUI("core/label", {
      text: node.state.vSliderValue,
      propName: "vSliderValue",
      style: { align: Align.Center, fontSize: "16px" },
    }),
  ],
  style: { spacing: 20 },
});
node.ui.append(stack);

dispose

dispose(): void

Remove node from the Flow.

getInput

getInput(terminal: string | number): any

Get input data from the terminal's name or its index.

getInputs

getInputs(): any[]

Get an array of all the inputs to the node.

off

off(eventKey: string, id: number): void

from Hooks.off

offAll

offAll(): void

from Hooks.offAll

on

on(eventKey: string, callback: (...args: any) => void): number

from Hooks.on

See Events.

process

process(inputs: any[]): void

Parameters

• inputsany[]
  

removeTerminal

removeTerminal(terminal: Terminal): void

Removes specified terminal from the node.

Parameters

• terminalTerminal
  

serialize

serialize( persist?: DataPersistenceProvider ): Promise<SerializedNode>

of Serializable.serialize

Returns

Promise<SerializedNode>

setOutputs

setOutputs(outputs: string | number | Record<string, any>, data?: any): void

Set outputs on one or more output terminals.

Parameters

• setOutputsstring | number | Record<string, any>
  
• ?dataany
  

Returns

void

Example

Setting output on single terminal using it's name:

node.setOutputs("first-name", "John");

Setting output on single terminal using it's index:

node.setOutputs(2, "John");

Setting output on mulitple terminals at once:

node.setOutputs({
  "first-name": "John",
  "last-name": "Doe",
  age: 24,
});

setupIO

setupIO(options: NodeOptions): void

Parameters

• optionsNodeOptions
  

Returns

void

toggle

toggle(): void

Returns

void

toggleNodeState

toggleNodeState(): void

Toggles between maximized and minimized state.

Returns

void

watch

watch(propName: string, callback: (oldVal: any, newVal: any) => void): number

Watch for changes on any prop defined in state.

Parameters

• propNamestring
  The name of the prop defined in state that needs to be watched for changes.
  
• callbackf(oldVal: any, newVal: any) => void
  Callback that needs to be triggered whenever specified prop's value changes.
  

Returns

number
A numbered id that can be used to unwatch.

unwatch

unwatch(propName: string, id: number): void

Unwatch any prop defined in state.

Parameters

• propNamestring
  The name of the prop defined in state that needs to be un-watched.
  
• idnumber
  A numbered id returned when doing watch.
  

Returns

void

Events

process

When the node is triggered for processing due to new/changed input.

render

When a single render cycle completes for this node instance.

down

When touch down or mouse left down occurs on the node.

over

When mouse over happens on the node.

enter

When mouse enter happens on the node.

exit

When mouse exit happens on the node

up

When touch up or mouse left up happens on the node.

click

When tap or mouse click happens on the node.

drag

When touch or mouse drag happens on the node.

rightclick

When mouse right-click happens on the node.

wheel

When mouse scroll happens on the node.