Horizontal scrollbar doesn't function

[sphaero]

Changing the Window flags to:

    if (ImGui::Begin("ImNodes", nullptr, ImGuiWindowFlags_AlwaysVerticalScrollbar | ImGuiWindowFlags_HorizontalScrollbar))

The horizontal scrollbar doesn't appear to scroll.

[sphaero]

actually the vertical scrollbar also doesn't function. It conflicts with canvas->offset.

A fix would be to do something like:

    canvas->offset.x = -ImGui::GetScrollX();
    canvas->offset.y = -ImGui::GetScrollY();

But then scroll with the mouse fails which could be fixed with something like:

 (ImGui::IsMouseDragging(1))
        {
            canvas->offset += io.MouseDelta;
            ImGui::SetScrollX(-canvas->offset.x);
            ImGui::SetScrollY(-canvas->offset.y);
        }

But this only works if the window is smaller than the canvas. So it bites in the tail again. Perhaps a scrollbar is useless anyway, I'm not sure. Perhaps I'll dive into it again when it's needed.

[rokups]

You could also try putting canvas between BeginChild()/EndChild().

[sphaero]

That would be a nice workaround as well. I'll try that. Hope you don't mind me shooting in these little bugs. I'll get to pull requests once I find more time! Otherwise let me know how I can help.

[rokups]

Hope you don't mind me shooting in these little bugs. I'll get to pull requests once I find more time! Otherwise let me know how I can help.

All of that is greatly appreciated :] This will give more battle-testing before i get around to using this code. I scrapped my initial idea for which i needed nodes so they werent put to use yet.

[rokups]

@sphaero did BeginChild()/EndChild() work?

[sphaero]

From what I tested it doesn't:

if ( ImGui::Begin("clientspanel", NULL,  ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoBringToFrontOnFocus) )
        {
            ImGui::BeginChild("testchild", ImVec2(0,0), ImGuiWindowFlags_AlwaysVerticalScrollbar | ImGuiWindowFlags_HorizontalScrollbar);
            ImNodes::BeginCanvas(gCanvas);
...

[rokups]

Child should have no scrollbars. if you want them - add them to parent. But that is kind of pointless. Canvas is infinite itself. How can we add scrollbars to something infinite?

[sphaero]

if ( ImGui::Begin("clientspanel", NULL,  ImGuiWindowFlags_AlwaysVerticalScrollbar | ImGuiWindowFlags_HorizontalScrollbar | ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoBringToFrontOnFocus) )
        {
            ImGui::BeginChild("testchild");
            ImNodes::BeginCanvas(gCanvas);
        

still doesn't work.

But the scrollbar should be determined on the rectangle of its contents. The min/max pos of current nodes?

If I look at how it's done in Blender, it's indeed based on the contents of the canvas which makes sense to me. I'm going to read into the scrolling examples of ImGui

[sphaero]

Best working code for now is to set scroll value before calling BeginCanvas

ImGui::BeginChild("testchild");
canvas.offset.y = -ImGui::GetScrollY();
ImNodes::BeginCanvas(&canvas);

However this does not work if you move nodes upward (above pos 0)

[sphaero]

From what I read so far I think the canvas needs a rectangle from which scroll position can be determined. But I have a feeling it could be simpler I just need more experience with ImGui.

[sphaero]

Another test. It seems its easiest to just draw the canvas inside a Begin/EndChild as you suggested. I don't think offset is need then. You'll get a functioning scrolling. Here's concept code:

static ImNodes::CanvasState canvas{};

static ImVector<ImVec2> nodes{};

const ImGuiStyle& style = ImGui::GetStyle();

if (ImGui::Begin("ImNodes", nullptr, ImGuiWindowFlags_AlwaysVerticalScrollbar | ImGuiWindowFlags_AlwaysHorizontalScrollbar))
{
    // child gives our own coordspace
    ImGui::BeginChild("canvaschild", canvas.rect.GetSize() );

    ImVec2 offset = ImVec2(); //offset is not needed I guess

    ImDrawList* draw_list = ImGui::GetWindowDrawList();
    const float grid = 64.0f;

    ImVec2 pos = ImGui::GetWindowPos();
    ImVec2 size = ImGui::GetWindowSize();

    // For the test I added a rect to canvas to maintain the rectangle containing nodes
    // canvas rect is in screen coords
    // set the rect to window size if it's smaller
    if (canvas.rect.GetWidth() < GetWindowWidth() )
    {
        canvas.rect.Min = pos;
        canvas.rect.Max = pos + size;
    }

    ImU32 grid_color = ImColor(1.0f, 1.0f, 0.5f, 1.0f);//canvas->colors[ColCanvasLines]);
    for (float x = fmodf(offset.x, grid); x < size.x;)
    {
        draw_list->AddLine(ImVec2(x, 0) + pos, ImVec2(x, size.y) + pos, grid_color);
        x += grid;
    }

    for (float y = fmodf(offset.y, grid); y < size.y;)
    {
        draw_list->AddLine(ImVec2(0, y) + pos, ImVec2(size.x, y) + pos, grid_color);
        y += grid;
    }
    // Node 1 is just a button to add more nodes
    ImGui::BeginGroup();
    if ( ImGui::Button("Button1") ) {
        // add extra node at random pos
        ImGui::SetCursorPos(ImVec2(0,0));
        ImVec2 pos = ImVec2( rand() % 1000 -200, rand() % 1000 );
        nodes.push_back( pos );
        // add to canvas rectangle
        ImVec2 screenpos = pos + GetCursorScreenPos();
        canvas.rect.Add( ImRect(screenpos, screenpos + ImVec2(200, 100) ) );
    }
    ImGui::EndGroup();
    // draw the rectangle of the first node
    ImGui::GetForegroundDrawList()->AddRect(ImGui::GetItemRectMin(), ImGui::GetItemRectMax(), ImColor(1.0f,0.f,0.f,1.0f) );

    // draw extra nodes
    for (int i=0; i < nodes.size(); i++)
    {
        ImGui::BeginGroup();
        ImGui::PushID(i);
        ImGui::SetCursorPos(nodes[i]);
        ImGui::Button("button");
        ImGui::PopID();
        ImGui::EndGroup();
    }

    // draw canvas.rect
    ImGui::GetForegroundDrawList()->AddRect(canvas.rect.Min, canvas.rect.Max, ImColor(1.0f,1.f,0.f,1.0f) );

    ImGui::EndChild();
}
ImGui::End();

It needs extra code to correct the canvas when nodes have a negative positions.

[sphaero]

Note to self: Another approach would be to render a custom Scrollbar based on ImGui::Scrollbar

[ocornut]

Note to self: Another approach would be to render a custom Scrollbar based on ImGui::Scrollbar

You can call ScrollbarEx() directly for that.

I'm not sure I understand/follow the rest of the thread enough to understand it.
Child scrolling will be based on its content sizes which is based on CursorPosMax-CursorStartPos or explicitely overriden via SetNextWindowContentsSize.

[sphaero]

Hey Omar. Thanks for responding. Forget previous comments. Basically we have an infinite canvas defined by a Begin/EndCanvas.

ImNodes/ImNodes.cpp

Line 213 in a62c20f

void BeginCanvas(CanvasState* canvas)

BeginCanvas draws the grid in the content area of the window and uses an offset to position the grid correctly.

ImNodes/ImNodes.cpp

Lines 249 to 260 in a62c20f

	ImU32 grid_color = ImColor(canvas->colors[ColCanvasLines]);
	for (float x = fmodf(canvas->offset.x, grid); x < size.x;)
	{
	draw_list->AddLine(ImVec2(x, 0) + pos, ImVec2(x, size.y) + pos, grid_color);
	x += grid;
	}
	for (float y = fmodf(canvas->offset.y, grid); y < size.y;)
	{
	draw_list->AddLine(ImVec2(0, y) + pos, ImVec2(size.x, y) + pos, grid_color);
	y += grid;
	}

The offset is controlled using the mouse:

ImNodes/ImNodes.cpp

Lines 225 to 241 in a62c20f

	if (!ImGui::IsMouseDown(0) && ImGui::IsWindowHovered())
	{
	if (ImGui::IsMouseDragging(1))
	canvas->offset += io.MouseDelta;
	if (io.KeyShift && !io.KeyCtrl)
	canvas->offset.x += io.MouseWheel * 16.0f;
	if (!io.KeyShift && !io.KeyCtrl)
	canvas->offset.y += io.MouseWheel * 16.0f;
	if (!io.KeyShift && io.KeyCtrl)
	{
	if (io.MouseWheel != 0)
	canvas->zoom = ImClamp(canvas->zoom + io.MouseWheel * canvas->zoom / 16.f, 0.3f, 3.f);
	canvas->offset += ImGui::GetMouseDragDelta();
	}

Then nodes can be drawn using Begin/EndNode which can contain regular ImGui widgets.

ImNodes/ImNodes.cpp

Line 375 in a62c20f

bool BeginNode(void* node_id, ImVec2* pos, bool* selected)

This works fine. However a user can move around the canvas using the right mouse but can end up with no visible Nodes and no clue where to go to. A scrollbar can give a visual clue of the whereabouts of nodes on the canvas. Hence the quest for adding a scrollbar to the canvas window.

The scrollbar somewhat works but only to the right or down. See this gif for example:

Using the scrollbar to move around the canvas doesn't work yet but I think that would be easier than getting the scrollbar to function in all directions.

So this currently not using any Begin/EndChild. Wrapping it in a Child gives the same result.