Nelarius / imnodes

A small, dependency-free node editor for dear imgui
MIT License
1.97k stars 241 forks source link

Grid aligned pins & inputs/outputs #104

Open muit opened 3 years ago

muit commented 3 years ago

Hi!

Thank you for your awesome work :) I have a couple questions if you don't mind.

Is there a way to modify pins to be aligned exactly with the grid? That is considering that the node is already snapped to the grid.

The second question is if its possible to split the node's inputs and outputs so that they are aligned horizontally. So instead of this:

--------------
| Input      |
|     Output |
--------------

This:

-----------------
| Input  Output |
-----------------
muit commented 3 years ago

Well, solved the second issue using groups :)

Essentially surrounding inputs in a group and outputs in another group, then adding a SameLine:

ImGui::BeginGroup();    // Inputs
{
    ImNodes::BeginInputAttribute(2, ImNodesPinShape_QuadFilled);
    ImGui::Text("");
    ImNodes::EndInputAttribute();

    ImNodes::BeginInputAttribute(3, ImNodesPinShape_CircleFilled);
    ImGui::Text("Value");
    ImNodes::EndInputAttribute();
}
ImGui::EndGroup();

ImGui::SameLine();
ImGui::BeginGroup();    // Outputs
{
    ImNodes::BeginOutputAttribute(4, ImNodesPinShape_QuadFilled);
    ImGui::Text("True");
    ImNodes::EndOutputAttribute();

    ImNodes::BeginOutputAttribute(5, ImNodesPinShape_QuadFilled);
    ImGui::Text("False");
    ImNodes::EndOutputAttribute();
}
ImGui::EndGroup();
UnidayStudio commented 2 years ago

How can I right align the output text? Getting the remaining Width does not seem to work...

david-rokeby commented 2 years ago

I was able to right align the output text, but it required calculating the text width, and calculating a position that would right align and then draw the text to the draw list, instead of the normal call to draw the text, then added a dummy.

I needed to save the size of my node elsewhere in my code, for use in this chunk of code. There may be a better way to do it, but this does the trick.

`

ImNodes::BeginOutputAttribute(uuid);
ImVec2 p = ImGui::GetCursorScreenPos();
ImDrawList *draw_list = ImGui::GetWindowDrawList();
const char *label_start = label.c_str();
const char *label_end = ImGui::FindRenderedTextEnd(label_start);
ImVec2 text_size = ImGui::CalcTextSize(label_start, label_end, false, 0.0f);
float lineHeight = ImGui::GetTextLineHeight();
if(node)
    p.x += (node -> nodeSize.x - text_size.x - lineHeight);

draw_list -> AddText( p, ImGui::GetColorU32(ImVec4(1.0f, 1.0f, 1.0f, 1.0f)), label_start, label_end);
ImGuiContext& g = *GImGui;
const ImGuiStyle& style = g.Style;
ImGui::Dummy(ImVec2(text_size.x + style.FramePadding.x * 4, lineHeight));

ImNodes::EndOutputAttribute();

`