Node Editor

The "Node editor" panel is the central part of Webriko. Always show the active page of the project.

The nodes are arranged and connected within the page.

At the top center of the panel, the name of the page being edited is shown.

Nodes can be inserted from the library or can be copied and pasted between pages.

Selecting and editing nodes

Nodes are selected by clicking on them.

Multiple nodes can be selected by holding down the SHIFT key.

You can also select multiple nodes using a selection rectangle.

To create a selection rectangle hold down the ALT key, click and drag the mouse.

Any node that intersects with the rectangle will be selected.

When you select a node, the "Inspector" and "Code editor" panels are updated with information about it.

The nodes can be moved with the mouse wherever you want within the page.

Nodes can be duplicated by moving them while holding down the ALT key.

To delete the selected nodes press the CANCEL or BACKSPACE key.

All operations can be undone or redone via Undo ( Cmd/Ctrl + Z ) and Redo ( Cmd/Ctrl + SHIFT + Z )

To connect two nodes, click on the small circle representing the output property of a node,

drag the mouse, and release the mouse button on the circle representing the input property of the other node.

To remove the link between two nodes, click on the link.

To zoom in or out on the page, use the mouse wheel.

To move the view of the page, horizontally and vertically, click on the background of the page and drag the mouse.

To view the whole page double click at the bottom of the page.

The "node" menu shows the list of all the nodes contained in the page.

By selecting an item from the menu, the node contained in the page will be zoomed and selected.

The "Search" button opens the "Search" panel.

The "Search" panel allows you to find any text within the code of all the nodes contained in the project.

For information on the panel, see the item "Search Panel".

If you closed the "Inspector" or "Pages" panels by clicking on the "x" icon,

you can click on the two icons at the top right of the "Node editor" panel to reopen them.

The "Edit" menu contains the editing operations that can be performed within the "Node Editor" panel.

The "Undo" and "Redo" menu items allow you to undo or redo the operations performed.

The "Cut", "Copy", "Paste" items allow you to perform the cut, copy and paste actions of the selected nodes.

The "Remove" entry deletes the selected nodes.

The "Duplicate" item duplicates the selected nodes.

The "Select All" item selects all the nodes present in the page.

The "Bring to front" entry brings the selected nodes to the front.

The "Send to back" entry sends the selected nodes to back.