Node Editor
===========

A Node Editor presents an editable schematic or graph,
displaying nodes and the connections between their attributes.
It allows you to view, modify, and create new node connections.

You can see an example below

.. image:: https://raw.githubusercontent.com/Nelarius/imnodes/master/img/imnodes.gif

**There are 4 main components**

1. **Node Editor** - the area in which the nodes are located
2. **Nodes** - the free floating "windows" which contains attributes
3. **Attributes** - the collections of widgets with pins to create links to/from.
    Can be input, output, or static.
4. **Links** - the connections between attributes

Attributes can contain any UI Items. When a user clicks and drags a node's attribute
the node editor's callback is ran. DPG sends the attributes' tags through the
_app_data_ argument of the callback. 

It's the developer's responsibility to create the link.

Below is a basic example. You can grab an output pin and connect it to an input pin.
You can detach a link by **ctrl** clicking the link and dragging it.

**Code**

.. code-block:: python

    import dearpygui.dearpygui as dpg

    dpg.create_context()

    # callback runs when user attempts to connect attributes
    def link_callback(sender, app_data):
        # app_data -> (link_id1, link_id2)
        dpg.add_node_link(app_data[0], app_data[1], parent=sender)

    # callback runs when user attempts to disconnect attributes
    def delink_callback(sender, app_data):
        # app_data -> link_id
        dpg.delete_item(app_data)

    with dpg.window(label="Tutorial", width=400, height=400):

        with dpg.node_editor(callback=link_callback, delink_callback=delink_callback):
            with dpg.node(label="Node 1"):
                with dpg.node_attribute(label="Node A1"):
                    dpg.add_input_float(label="F1", width=150)

                with dpg.node_attribute(label="Node A2", attribute_type=dpg.mvNode_Attr_Output):
                    dpg.add_input_float(label="F2", width=150)

            with dpg.node(label="Node 2"):
                with dpg.node_attribute(label="Node A3"):
                    dpg.add_input_float(label="F3", width=200)

                with dpg.node_attribute(label="Node A4", attribute_type=dpg.mvNode_Attr_Output):
                    dpg.add_input_float(label="F4", width=200)

    dpg.create_viewport(title='Custom Title', width=800, height=600)
    dpg.setup_dearpygui()
    dpg.show_viewport()
    dpg.start_dearpygui()
    dpg.destroy_context()

Selection Querying
------------------

You can retrieve selected nodes and links (and clear this selections with the following commands)

.. code-block:: python

    dpg.get_selected_nodes(editor_id)
    dpg.get_selected_links(editor_id)
    dpg.clear_selected_nodes(editor_id)
    dpg.clear_selected_links(editor_id)

Node Attribute Types
--------------------

The following constants can be used in the `attribute_type` argument for node attributes

+---------------------------------+
| Attribute                       |
+---------------------------------+
| **mvNode_Attr_Input** (default) |
+---------------------------------+
| **mvNode_Attr_Output**          |
+---------------------------------+
| **mvNode_Attr_Static**          |
+---------------------------------+

Node Attribute Pin Shapes
-------------------------

The following constants can be used in the `shape` argument for node attributes

+--------------------------------------------+
| Shape                                      |
+--------------------------------------------+
| **mvNode_PinShape_Circle**                 |
+--------------------------------------------+
| **mvNode_PinShape_CircleFilled** (default) |
+--------------------------------------------+
| **mvNode_PinShape_Triangle**               |
+--------------------------------------------+
| **mvNode_PinShape_TriangleFilled**         |
+--------------------------------------------+
| **mvNode_PinShape_Quad**                   |
+--------------------------------------------+
| **mvNode_PinShape_QuadFilled**             |
+--------------------------------------------+

Associated Items
--------------------

* **mvNode**
* **mvNodeAttribute**
* **mvNodeLink**