Skip to content

Creating Adding new Nodes

bandinopla edited this page Mar 30, 2025 · 3 revisions

Adding new nodes

A "Node" handles not just a single TSL node, but think of it as a "module" that will build and eventually return a single "TSL.Node". It presents a UI with the controls it needs to allow the user to provide the parameters it requires to eventually build this node.

Declaration

New node types should be first declared in src/EditorNodes.tswhich is the class that holds the list of available nodes so the UI list that offers the user the available nodes knows how to create them.

Placing

Nodes live in src/nodes and inside there are folders that represent groups to better organize them related to their nature. Each group has a color that will visually help better distinguish them from other kinds of nodes.

Base

The nodes you see in the interface they all extend src/nodes/WinNode which is the class in charge of making them look like tiny windows with a colored header.

Node lifecycle

These are the methods you will need to work with to implement a new node:

1) constructor

No arguments. Here the node will declare it's UI and hook up to any events on it to collect the information it will need. Here you will add properties what will be either internal properties only used by the node, input or output properties.

2) update()

When the UI of the node changes, it must call the .update() method of the node. From any LayoutElement you can reach the top-most node calling node.root which will respond the last element with no parent.

3) writeScript

Implement the method override writeScript(script: Script): string which will be in charge of "writing" the tsl code for this node. Pulling the data it needs from it's previously collected UI data.

4) serialize

When saving the output file, each node will be asked to provide their "state data" to be able to later restore it when provided back.

5) unserialize

An object that was previously returned by serialize will be provided so the node can restore it's state to represent that data.

Clone this wiki locally