imgui-node-editor icon indicating copy to clipboard operation
imgui-node-editor copied to clipboard

Blueprints example doesn't use the main line version of ImGui

Open cosmicr opened this issue 3 years ago • 1 comments
trafficstars

I've been trying to implement a node type that has pins on all sides (not just left and right) and after a few hours studying the blueprints example I have discovered that the branched version of ImGui has features not merged into the main line.

Specifcally, ImGui::BeginHorizontal and other "stacking" features that were added. I saw that it was created a long time ago now, but never merged.

I'm unsure as to whether ImGui ended up implementing something else instead, but either way are there plans to update the example or provide another way to implement the positioning of pins?

cosmicr avatar Apr 20 '22 08:04 cosmicr

Hi. BeginHorizontal/Vertical is an extension to ImGui I implemented exactly for this purpose, to layout pins in nodes easily. It is alive and maintained. I resolve conflicts and rebase it on master branch when such need arise. Otherwise it is kept as single commit to make cherry-picking trivial. PR was current master today: https://github.com/ocornut/imgui/pull/846#issuecomment-1109956832

Way I see it, ImGui will provide enough flexibility to eventually allow Stack Layouts to be just an extension. At the moment we're at the last two functions: https://github.com/thedmd/imgui/blob/0c00975a647a38a827c4fdfa155299bef5f0ff37/imgui_stacklayout_internal.h#L24-L25

Please note that this extension is used only in blueprints example and node editor does not depend on it.

As to building custom nodes. Node is a rectangle, like window in ImGui and you can use it like this.

ed::BeginNode(myNodeId);
// Place any widget you want
ImGui::Button("Hello", ImVec2(200.0f, 130.0f));

// You can get metrics of last widget with these functions
auto min = ImGui::GetItemRectMin();
auto max = ImGui::GetItemRectMax();

// Add pin in top-right corner of the button
ed::BeginPin(myPinId0, ed::PinKind::Input);
auto pin0Center = ImVec2(max.x, min.y);
auto pin0Size   = ImVec2(20.0f, 20.0f);
ed::PinRect(pin0Center - pin0Size * 0.5f, pin0Center + pin0Size * 0.5f);
ed::PinPivotRect(pin0Center + pin0Size * 0.5f, pin0Center + pin0Size * 0.5f); // origin of the link will be in top-right corner of the pin rect
ed::EndPin();

ed::EndNode();

You can also manually place cursor via ImGui::SetCursorScreenPos and draw widget there.

Please note that pin rects are not real widgets, their rects marks the region they occupy. Node editor will highlight this region, but will not draw anything more.

Does this help?

thedmd avatar Apr 26 '22 18:04 thedmd