Node

Nodes are created by dragging and dropping components in the Visual Scripting panel.

The types of nodes are as follows, and each node type has different inputs and outputs.

Basic Component
User Component
Logic Component
Read & Write Data Component
API Component

1. Port types of a node

Each node in Visual Scripting has some of the following ports.

1.1 Input Port Types

Entry Port: To connect with the previous action.
Input Port: To receive value (parameter).

1.2 Output Port Types

Reference Port: To reference to a logic block which will become its body content.
Output Port: To return value.
Exit Port: To connect with the next action.

2. Port Connection

Each Node in Visual Scripting can connect with others by connecting through their ports as following table.

Connectable	〇
Unconnectable	X

	Entry Port	Input Port	Reference Port	Output Port	Exit Port
Entry Port			〇		〇
Input Port				〇
Reference Port	〇
Output Port		〇
Exit Port	〇

2.1 Connect Exit to Entry Port

Entry Port

BC

UC

API

IF

State

Set State

Data Mapping

Switch

While Loop

For Each Loop

For Loop

Custom

Exit Port

BC

〇

UC

API

〇

IF

〇

State

Set State

〇

Data Mapping

Switch

〇

While Loop

〇

For Each Loop

〇

For Loop

〇

Custom

2.2 Connect Output to Input Port

Input Port

BC

UC

API

IF

State

Set State

Data Mapping

Switch

While Loop

For Each Loop

For Loop

Custom

Output Port

BC

X

〇

X

〇

X

〇

UC

〇

X

〇

API

〇

X

〇

IF

State

〇

X

〇

Set State

Data Mapping

Switch

While Loop

For Each Loop

For Loop

Custom

2.3 Connect Reference to Entry Port

EntryPort

BC

UC

API

IF

State

Set State

Data Mapping

Switch

While Loop

For Each Loop

For Loop

Custom

Reference Port

BC

UC

API

IF

〇

State

Set State

Data Mapping

Switch

〇

While Loop

〇

For Each Loop

〇

For Loop

〇

Custom

2.4 Source code generation

No.	Connection	BC Output (Event)	(Generated source code when connected to other nodes
			Generate source code to the index.tsx file: Import index.VisualScripting.ts CODE `import useLogicSelector from './index.VisualScripting';` CODE `const service = useLogicSelector(this);` Generate event code (corresponded to BC output): <Component type [event name]={() => service.[FunctionName]('Node ID')} [props]={service.[variable]} > Component content </Component type> Details are as follow ↓	Generate source code to the index.VisualScripting.ts file: Declaration for nodes and edges that are generated to Visual Scripting Designer: CODE `const NODES = 'Content here'` CODE `const EDGES = 'Content here'` Generate corresponding function that is called in index.tsx: For example: CODE `const handleClick = async function (id: string) { // Logic here }` Call API/IF/State logic inside above function or inside a child function of above. For example ↓ CODE `const handleClick = async function (id: string) { switch (id) { case 'getPose': getPose_OnClick(); break; case 'moveToPose': moveToPose_OnClick(); break; } }; const getPose_OnClick = async function () { const res_r_1671433182866 = await positionManage.getCurrentPos(1); if (res_r_1671433182866) { } else { } };` }
1	BC Node → API Node	onClick()	CODE `<Accordion onClick={() => service.handleClick('Node ID')}> Accordion Name </Accordion>` CODE `<Button onClick={() => service.handleClick('Node ID')}> Button Name </Button>` CODE `<Dialog onClick={() => service.handleClick('Node ID')}> Dialog Name </Dialog>` CODE `<Fab onClick={() => service.handleClick('Node ID')}> Fab Name </Fab>` CODE `<ToggleButton onClick={() => service.handleClick('Node ID')}> ToggleButton Name </ToggleButton>`
2		onChange()	CODE `<Accordion onChange={() => service.handleChange('Node ID')}> Accordion Name </Accordion>` CODE `<Checkbox onChange={() => service.handleChange('Node ID')}> Checkbox Name </Checkbox>` CODE `<CircularProgress onChange={() => service.handleChange('Node ID')}> CircularProgress Name </CircularProgress>` CODE `<Radio onChange={() => service.handleChange('Node ID')}> Radio Name </Radio>` CODE `<RadioGroup onChange={() => service.handleChange('Node ID')}> RadioGroup Name </RadioGroup>` CODE `<Select onChange={() => service.handleChange('Node ID')}> Select Name </Select>` CODE `<Slider onChange={() => service.handleChange('Node ID')}> Slider Name </Slider>` CODE `<Switch onChange={() => service.handleChange('Node ID')}> Switch Name </Switch>` CODE `<Tab onChange={() => service.handleChange('Node ID')}> TextField Name </Accordion>` CODE `<ToggleButton onChange={() => service.handleChange('Node ID')}> ToggleButton Name </ToggleButton>` CODE `<ToggleButtonGroup onChange={() => service.handleChange('Node ID')}> ToggleButtonGroup Name </ToggleButtonGroup>`
3		onClose()	CODE `<Alert onClose={() => service.handleClose('Node ID')}> Alert Name </Alert>` CODE `<Dialog onClose={() => service.handleClose('Node ID')}> Dialog Name </Dialog>` CODE `<Select onClose={() => service.handleClose('Node ID')}> Select Name </Select>` CODE `<Snackbar onClose={() => service.handleClose('Node ID')}> Snackbar Name </Snackbar>` CODE `<Tooltip onClose={() => service.handleClose('Node ID')}> Tooltip Name </Tooltip>`
4		onBackdropClick()	CODE `<Dialog onBackdropClick={() => service.handleBackdropClick('Node ID')}> Dialog Name </Dialog>`
5		onOpen()	CODE `<Select onOpen={() => service.handleOpen('Node ID')}> Select Name </Select>` CODE `<Tooltip onOpen={() => service.handleOpen('Node ID')}> Tooltip Name </Tooltip>`
6		onChangeCommitted()	CODE `<Slider onChangeCommitted={() => service.handleChangeCommitted('Node ID')}> Slider Name </Slider>`
7	BC Node → IF Node		CODE `<Button onClick={() => service.handleClick('Node ID')}> Button Name </Button>`	CODE `const handleClick = async function (id: string) { switch (id) { case 'getPose': getPose_OnClick(); break; case 'moveToPose': moveToPose_OnClick(); break; } }; const getPose_OnClick = async function () { if (condition) { // data output } else { } };`
8	BC Node → State Node		CODE `<Button onClick={() => service.handleClick('Node ID')}> Button Name </Button>`
9	UC Node →IF Node		TBD	TBD
10	UC Node → State Node		TBD	TBD
11	API Node → State Node		TBD	TBD
12	IF Node → BC Node		TBD	TBD
13	IF Node → State Node		TBD	TBD
14	IF Node → API Node		TBD	TBD
15	Switch Node → BC Node		TBD	TBD
16	Switch Node → State Node		TBD	TBD
17	Switch Node → API Node		TBD	TBD
18	Looping Node → BC Node		TBD	TBD
19	Looping Node → State Node		TBD	TBD
20	Looping Node → API Node		TBD	TBD
21	State Node → BC Node		TBD	TBD
22	State Node → UC Node		TBD	TBD
23	State Node → API Node		TBD	TBD
24	State Node → API Node		TBD	TBD
25	State Node → Switch Node		TBD	TBD
26	State Node → Looping Node		TBD	TBD
27	State Node → Custom Node		TBD	TBD
28	State Node → IF Node		TBD	TBD
29	State Node → Data Mapping Node		TBD	TBD
30	Custom Node → State Node		TBD	TBD
31	Data Mapping Node → X		TBD	TBD

3. The Source Code of Each Node Before Connecting With Others

No.	Node	Source code generated to .tsx file	Source code generated to VisualScripting.ts file
1	BC Node	N/A (Because will generate same as UI Preview)	N/A
2	UC Node	N/A (Because will generate same as UI Preview)	N/A
3	IF Node	N/A (Because need to connect to another node to generate source)	N/A
4	SWITCH Node	(TBD)	(TBD)
5	LOOPING Node	(TBD)	(TBD)
6	CUSTOM Node	(TBD)	(TBD)
7	API Node	N/A (Because need to connect to another node to generate source)	N/A
8	STATE Node	N/A	N/A
9	SET STATE Node	N/A (Because need to connect to another node to generate source)	N/A
10	DATA MAPPING Node	DataMapping.tsx CODE <DataMapping content={(item, index) => { return ( <Box sx={{ '&.MuiBox-root': { '&:empty': { width: '100%', 'min-height': '200px', }, }, }} ></Box> ); }} ></DataMapping>	N/A

4. The Source Code of Port Connection

No.	Connection case	Example	Source code generated to .tsx file	Source code generated to VisualScripting.ts file
1	Exit Port ⇔ Entry Port	Example 1: Button: onClick() ⇔API: f getCurrentPos()	CODE `<Button onClick={(event: any) => service.handleClick('buttonID', event)}> Button Name </Button>`	CODE `const handleClick = async function (id: string, event: any) { switch (id) { case 'buttonID': buttonID_OnClick(event); break; default: break; } }; const buttonID_OnClick = async function (event: any) { const res_r_1671433182866 = await positionManage.getCurrentPos(1); };`
	Exit Port ⇔ Entry Port	Example 2: Button: onClick() ⇔ API: f moveJoint()	CODE `<Button onClick={(event: any) => service.handleClick('buttonID', event)}> Button Name </Button>`	CODE `const handleClick = async function (id: string, event: any) { switch (id) { case 'buttonID': buttonID_OnClick(event); break; default: break; } }; const buttonID_OnClick = async function (event: any) { const res_r_1671433182866 = await positionManage.moveJoint(params); };`
2	Output Port ⇔ Input Port	Example 1: ①API getCurrentPos(): SixNumArray ⇔ Set State: Entry ②API getCurrentPos(): SixNumArray ⇔ Set State: Value ③State: State Name ⇔ Set State: State Name	N/A	CODE `const res_r_1671433182866 = await positionManage.getCurrentPos(1); setPosState(res_r_1671433182866);`
	Output Port ⇔ Input Port	Example 2: State: State Value ⇔ Data Mapping: Data Source	CODE `<DataMapping source={} />`
3	Reference Port ⇔ Entry Port Example:		TBD	TBD