Documentation

Class

Node

Node(x, y, scale, svgEngine) → {Node}

The base Node class. Every complex node should extend this.

Constructor

# new Node(x, y, scale, svgEngine) → {Node}

Initiates a new Node object

Parameters:
Name Type Description
x number

The x position in the current viewport or container.
y number

The y position in the current viewport or container.
scale number

The scale of the Node.
svgEngine object

The SVGEngine object, the node is added to.

View Source index.js, line 1246

The new Node object.

Node

Extends

Members

# identifier

Returns the identifier of the node that's also passed to the program spec.

View Source index.js, line 1406

HTMLElement

# renderContainer

Returns an up-to-date copy of the container of the current parent SVG engine.

View Source index.js, line 1392

Methods

# addAttachment(at) → {void}

Attach an attachment to the node object.

Parameters:
Name Type Description
at Attachment

The attachment that should be attached.

View Source index.js, line 1546

void

# addEventListener(event, cb) → {object}

Add an event listener to the node.

Parameters:
Name Type Description
event "move"

The event that should be listened for.
cb Node~EventCallback

The callback function.

View Source index.js, line 1469

The event listener.

object

# addInputSocket(type, label) → {InputSocketComponent}

Adds an InputSocket. These sockets can be used for data transfer. They are also typed and there are strict rules for which connector type can connect to which socket type.

Parameters:
Name Type Description
type InputSocketComponentType

The type of the socket.
label string

A label for the socket that will be displayed right to it.

View Source index.js, line 1667

The initiated input socket.

InputSocketComponent

# addOutputPlug(type, label, style) → {OutputPlugComponent}

Adds an OutputPlug to the node. These are used to create data connectors.

Parameters:
Name Type Description
type OutputPlugComponentType

The type of the plug
label string

The label of the plug that will be displayed left to it.
style "bezier" | "line"

The style of the connector.
See:

View Source index.js, line 1690

The initiated plug object

OutputPlugComponent

# addPlug(label, style) → {array}

Add a flow plug. Flow plugs can be used to create flow connections to flow sockets.

Parameters:
Name Type Description
label string

A label that will be displayed left to the plug.
style "bezier" | "line"

The style of the connector starting from this plug.
See:

View Source index.js, line 1630

Returns an array of all the attached plugs.

array

# addSocket() → {array}

Add a new program flow socket. Flow sockets/plugs are used to tell ULVS which nodes run when. The flow starts at a start node and then follows all connected flow connectors from node to node, resulting in a program order.

View Source index.js, line 1606

An array containing all of the current flow sockets.

array

# addUserInput(type, label) → {object}

Add a user input to the body of the node. The user can enter values that will be used in the compiling process as constants. Temporary deprecated

Parameters:
Name Type Default Description
type InputSocketComponentType

The data type of the input.
label string ""

The label of thé input that will be displayed next to it.
Deprecated:
  • Temporary deprecated as user inputs are included in input sockets

View Source index.js, line 1721

The input object depending on the data type.

object

# clearConnections() → {void}

Disconnects all incoming or outgoing connectors.

View Source index.js, line 1418

void

# createSVGElement(c) → {HTMLElement}

Puts together the HTML element with all it's sub element, ready to be added to a parent.

Parameters:
Name Type Default Description
c HTMLElement null

(Optional) Equivalent to setting the .renderContainer property.
Overrides:

View Source index.js, line 162

Returns the HTML element, containing all the children.

HTMLElement

# hide() → {void}

Makes the component invisible. Interactions shouldn't be possible anymore.

Overrides:

View Source index.js, line 51

void

# move(deltaX, deltaY) → {Position}

Move the component relative to its current position.

Parameters:
Name Type Description
deltaX number

The amount of
deltaY number

description
Overrides:

View Source index.js, line 192

The new position

Position

# moveToTop() → {boolean}

Moves the svg container to the top of the parent. The parent has to be specified earlier by setting .renderContainer to an HTML element

Overrides:

View Source index.js, line 127

Wether moving could be done or not. Returns false, if renderContainer isn't set.

boolean

# removeEventListener(event, listener, …opts) → {void}

Remove a given listener from the node.

Parameters:
Name Type Attributes Description
event string | "move"

The event of the listener that should be removed
listener object

The listener (returned by Node#addEventListener)
opts object <repeatable>

Other options you might want to pass to the eventTarget; see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters

View Source index.js, line 1481

void

# setClass(c) → {void}

Change the class after initialization.

Parameters:
Name Type Description
c NodeClass

The new class

View Source index.js, line 1585

void

# setComponentScale(newScale) → {number}

Scales the component and its children.

Parameters:
Name Type Description
newScale number

The new scale of the component
Overrides:
Deprecated:
  • Broken in many ways, use .setViewboxScale() instead.

View Source index.js, line 207

The new scale.

number

# setId(id) → {void}

Set the nodeIdentifier of this node. This id will be provided in the program spec on program generation for the compiler.

Parameters:
Name Type Description
id string

The new id of the Node.

View Source index.js, line 1575

void

# setName(name) → {Text#setText}

Change the name of the node after initialization.

Parameters:
Name Type Description
name string

The new name

View Source index.js, line 1557

Text#setText

# setPosition(pos) → {object}

Change the coordinates in the parent svg element

Parameters:
Name Type Description
pos object

The new position object
x number

X coordinate
y number

Y coordinate
Overrides:

View Source index.js, line 149

The new position

object

# setViewboxScale(newScale) → {void}

Change the scale of the element using the viewBox property.

Parameters:
Name Type Description
newScale number

The new scale of the element
Overrides:

View Source index.js, line 232

void

# show() → {void}

Reverts hide

Overrides:

View Source index.js, line 59

void

# updateAttributes() → {void}

Updates the attributes of the SVG element in the DOM

Overrides:

View Source index.js, line 68

Void

void

Type Definitions

# EventCallback(event)

Parameters:
Name Type Description
event object

The event object.
detail object

The data that is delivered if it is a custom event, like the "move" event.
See:

View Source index.js, line 1454