Following is a list of useful graph manipulation features.
- Search
- Connect
- Create Data
- Add Mode
- Info Mode
- Data Mode
- Remove Mode
- Change Mode
- Graph | Tree View
- Fullwindow
- Unlock | Lock Component
- Minimap
- Drawing
- Composition
- Enter | Leave Graph
- Undo | Redo
- Save | Load
To start Search you can either focus on the Search Input or press key ; (semicolon).
You can filter the list by typing on the input box.
To add the selected unit either press on the green unit, or the selected search item, or press key Enter.
To connect (also merge) two compatible pins, click on a pin, then click on a compatible target pin.
The compatible pins will be highlighted in green.
Alternatively, you can also drag and drop a node onto a another compatible node.
To start editing a new empty datum, double click on the editor background, then start typing.
You can write any JSON compatible type, including arrays and objects.
Drag and Drop a datum to a compatible input pin to activate it.
To enter Add Mode (also Green Mode) you can either click on the "plus sign" mode button or press key S.
In Add Mode, it is possible to copy a unit (or the currently Selected Subgraph).
A unit can be shallow clonned with a Green Drag and Drop:
Green Click on a unit will Copy To Clipboard. Then Green Double Click on the background will paste whatever is on the Clipboard.
To enter Info Mode you can either click on the "lines" mode button or press key Q.
It will show you documentation about a unit, such as its type, pin types and description.
Info Click on an editable unit name to rename.
To enter Data Mode (also Chartreuse/Yellow Mode) you can either click on the "triangle" mode button or press key A.
In Data Mode, double click on the background to add a random datum. If you click on an input, the system will attempt suggest a suitable compatible random datum.
Yellow Dragging a unit will create a deep copy of it, with the same current state.
To enter Remove Mode (Red Mode) you can either click on the "x" mode button or press key D.
Clicking on any node (unit, datum, etc.) will cut that node out, effectively deactivating, removing it from the graph, and adding to the Clipboard.
This also useful as a quick manual way of deleting data iteratively.
Many nodes can be removed with Multiselection.
To enter Change Mode (Blue Mode) you can either click on the "z" mode button or press key F.
In Change Mode, clicking on an input or output will set it to constant or not.
To switch between Graph View or Tree View, click on the "circle or square" toggle close to the Search.
This view will show only components, which can composed and reordered into a parent-children tree structure, making it possible to build any type of visual layout.
Search will only show component units.
To append children to a parent, enter multiselection mode, select the children, then long press on the parent:
Reversely, to remove all children from parent, enter multiselection mode, then select and long press on the parent:
To go Fullwindow you can press the "transcend" button, usually located at the top.
This will remove the editing GUI and show the final rendering of the graph. This is more interesting when there are components around, so you can see how that unit would look like as a website.
The components that will go fullwindow are dependent on the context. This enables many layout combinations out of shelf.
A component can be resized when it is either selected or unlocked. To resize, pull from one of the components sides or edges.
To unlock a component unit, Double Click on it.
To open or close the minimap drawer, click on the "graph" knob, or press M.
The minimap is useful for navigating the entirety of the graph, especially on small screens.
To start Drawing do a Click + Long Press (also known as Click and Hold).
Draw a line from center to the outside to create an output plug. Inversely, draw a line from the outside to the center to create an input plug.
Draw a circle to create an empty unit. Draw a rectangle to create an empty unit that is a component.
Drawing a contour around a group of nodes, will compose those nosdes.
To compose a subgraph into a new unit, on Multiselect Mode, select a subgraph and do Long Press on the background.
Reversely, on Multiselect Mode, a selected graph can be exploded by a Long Press.
To enter a graph unit, Long Click on it. To leave, Long Click on the background.
You can edit a unit from inside.
To undo last action, press Ctrl + Z. To redo, press Ctrl + Shift + Z.
To save a graph, you can press Ctrl + S or open the "share" drawer and click on the "export" button.
To open a graph file, you can press Ctrl + O or press on the "import" button.
You can also drag and drop a .unit file to the editor to open it.
The opened/dropped unit bundle will be injected into the system and will visible on Search.
If all instances of an injected unit are deleted, the unit spec will be deleted from the system.
Drag and drop a folder into the editor to inject all the specs inside into the system.
The injected specs can't be deleted.