|
|
Downloads
Demos: geexlab-demopack-gl21/d29-imgui/imgui-imnodes/
|
ImNodes support has been added in GeeXLab 0.44+. At the time of writing, ImNodes is supported by Windows and Linux versions of GeeXLab. Raspberry Pi and macOS versions will get ImNodes support after the next compilation.
ImNodes is a node editor library for
ImNodes has four main components:
– the node editor which is essentially the window of the editor with its grid.
– a node
– a link
– a input / output connector (a pin)
Let’s start with the first thing required by ImNodes, the node editor. In the FRAME script, you draw the node editor with:
imgui_frame_begin() local is_open = imgui_window_begin_pos_size_always("ImNodes demo", winW, winH, 0, 0) if (is_open == 1) then gh_imgui.imnodes_begin_node_editor() ... gh_imgui.imnodes_end_node_editor() end gh_imgui.window_end() imgui_frame_end() |
This piece of code will produce:
All node-related components (a node, a pin and a link) are identified by an unique identifier (an ID), a simple integer number.
Let’s draw a node with a title bar and a dummy content:
gh_imgui.imnodes_begin_node_editor() node1_id = 1 gh_imgui.imnodes_begin_node(node1_id ) gh_imgui.imnodes_begin_node_title_bar() gh_imgui.text("Node1") gh_imgui.imnodes_end_node_title_bar() gh_imgui.dummy(80, 40) gh_imgui.imnodes_end_node() gh_imgui.imnodes_end_node_editor() |
In order to be able to be connected to other nodes, a node needs input and output connectors, the pins. Let’s add one input pin and one output pin to our node:
gh_imgui.imnodes_begin_node_editor() ImNodesPinShape_Circle = 0 ImNodesPinShape_CircleFilled = 1 ImNodesPinShape_Triangle = 2 ImNodesPinShape_TriangleFilled = 3 ImNodesPinShape_Quad = 4 ImNodesPinShape_QuadFilled = 5 node1_id = 1 gh_imgui.imnodes_begin_node(node1_id ) gh_imgui.imnodes_begin_node_title_bar() gh_imgui.text("Node1") gh_imgui.imnodes_end_node_title_bar() node1_input1 = 2 node1_output1 = 3 pin_shape = ImNodesPinShape_CircleFilled gh_imgui.imnodes_begin_input_attribute(node1_input1, pin_shape) gh_imgui.text_unformatted_v1("input1 pin") gh_imgui.imnodes_end_input_attribute() gh_imgui.imnodes_begin_output_attribute(node1_output1, pin_shape) gh_imgui.text_unformatted_v1("output1 pin") gh_imgui.imnodes_end_output_attribute() gh_imgui.dummy(80, 40) gh_imgui.imnodes_end_node() gh_imgui.imnodes_end_node_editor() |
Now we can draw 2 nodes:
gh_imgui.imnodes_begin_node_editor() ImNodesPinShape_Circle = 0 ImNodesPinShape_CircleFilled = 1 ImNodesPinShape_Triangle = 2 ImNodesPinShape_TriangleFilled = 3 ImNodesPinShape_Quad = 4 ImNodesPinShape_QuadFilled = 5 node1_id = 1 gh_imgui.imnodes_begin_node(node1_id) gh_imgui.imnodes_begin_node_title_bar() gh_imgui.text("Node1") gh_imgui.imnodes_end_node_title_bar() node1_input1 = 2 node1_output1 = 3 pin_shape = ImNodesPinShape_CircleFilled gh_imgui.imnodes_begin_input_attribute(node1_input1, pin_shape) gh_imgui.text_unformatted_v1("input1 pin") gh_imgui.imnodes_end_input_attribute() gh_imgui.imnodes_begin_output_attribute(node1_output1, pin_shape) gh_imgui.text_unformatted_v1("output1 pin") gh_imgui.imnodes_end_output_attribute() gh_imgui.dummy(80, 40) gh_imgui.imnodes_end_node() node2_id = 4 gh_imgui.imnodes_begin_node(node2_id) gh_imgui.imnodes_begin_node_title_bar() gh_imgui.text("Node2") gh_imgui.imnodes_end_node_title_bar() node2_input1 = 5 node2_output1 = 6 gh_imgui.imnodes_begin_input_attribute(node2_input1, pin_shape) gh_imgui.text_unformatted_v1("input1 pin") gh_imgui.imnodes_end_input_attribute() gh_imgui.imnodes_begin_output_attribute(node2_output1, pin_shape) gh_imgui.text_unformatted_v1("output1 pin") gh_imgui.imnodes_end_output_attribute() gh_imgui.dummy(80, 40) gh_imgui.imnodes_end_node() gh_imgui.imnodes_end_node_editor() |
The last thing we need for our utltra basic node editor demo, is a link between those nodes. As for other components, the link is identified by an unique ID:
gh_imgui.imnodes_end_node_editor() gh_imgui.imnodes_begin_node(node1_id) ... gh_imgui.imnodes_end_node() gh_imgui.imnodes_begin_node(node2_id) ... gh_imgui.imnodes_end_node() link1_2 = 7 gh_imgui.imnodes_link(link1_2, node1_output1, node2_input1) gh_imgui.imnodes_end_node_editor() |
If you want to explore more features of ImNodes, I prepared a demo (geexlab-demopack-gl21/d29-imgui/imgui-imnodes/demo02/ in the OpenGL 2.1 demopack) that allows to dynamically create nodes, pins, and links. Nodes and links can be deleted as well. And the demo shows a minimap too:
