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