Getting Started
It is important to understand how components are named and what's their role in the visual tree of the editor in order to understand the code and the documentation.
The root component is an editor which holds nodes and connections together with a few additional UI elements such as a selection rectangle and a pending connection in order to make the editor interactive.
Nodes are containers for connectors or the node itself can be a connector (e.g. State Node).
Connectors can create pending connections that can become real connections when completed.
A picture is worth a thousand words
You may wonder how a node can be a connector itself and still behave like a normal node. The editor contains three big layers which help solve this problem:
- The items layer (
NodifyEditor.ItemsSource) - here, each control is wrapped inside an Item Container making it selectable, draggable, etc and it is possible to have any control rendered (e.g a connector, a text block). - The connections layer (
NodifyEditor.Connections) - this is where all the connections coexist and are rendered behind the items layer by default - The decorators layer (
NodifyEditor.Decorators) - here, each control is given a location inside the graph
Having those layers separated enables the possibility of asynchronously loading each one of them.