Interactive Panning with Mouse Drag

The Principle of Panning

At its heart, panning is simply changing the viewer's offset. In our system, this is the m_pan variable you've already created. When the user clicks and drags the mouse, we want to shift the plot's contents in the opposite direction of the mouse movement, creating the illusion that the user is pulling the data itself.

The core challenge is that user input (mouse movement) is measured in screen pixels, while our m_pan offset exists in world units (e.g., time and value). A direct 1-to-1 mapping would be incorrect, especially when zoomed in.

To understand the basic mechanics, let's revisit the excellent video from our last lesson, this time focusing on the panning implementation.

From Screen Space to World Space

The video gives us the general algorithm, but we need to refine it for our zoomed view. The ImGui::GetIO().MouseDelta provides the mouse movement since the last frame in screen pixels. We cannot simply add this to m_pan.

Think about it: if you are zoomed in by a factor of 10, a 1-pixel mouse movement should correspond to a much smaller pan in the world space. The relationship is straightforward: the amount of world-space movement is the screen-space movement divided by the current zoom level.

World Delta = Screen Delta / Zoom

This is the single most important concept for implementing panning correctly in a zoomable interface.

Implementing Panning with ImGui

Let's integrate this logic into our LODPlotter::handleInput function. We will use ImGui's built-in functions to detect when the user is dragging the mouse within our plot area. A fantastic resource for this is a GitHub issue on the official ImGui repository where a user implements this exact feature for an image viewer.

Now, let's update your handleInput function. We need to check if the user is dragging the mouse (typically with the left button) while the cursor is over our plot.

// In your LODPlotter class
void LODPlotter::handleInput(const ImVec2& canvas_pos, const ImVec2& canvas_size) {
    ImGuiIO& io = ImGui::GetIO();
    
    // An invisible button will create a hit-box for our plot area, allowing us to capture mouse events.
    ImGui::InvisibleButton("##canvas", canvas_size);
    const bool is_hovered = ImGui::IsItemHovered();
    const bool is_active = ImGui::IsItemActive(); // Is the mouse button held down on our widget?

    // --- Panning ---
    // Check if the user is dragging the mouse within our plot area.
    if (is_active && ImGui::IsMouseDragging(ImGuiMouseButton_Left)) {
        // Get mouse movement in screen pixels.
        const ImVec2 mouse_delta = io.MouseDelta;

        // Convert screen-space delta to world-space delta.
        // We must divide by the zoom factor.
        float world_delta_x = mouse_delta.x / m_zoom;
        float world_delta_y = mouse_delta.y / m_zoom;

        // Apply the delta to our pan offset.
        // We subtract for X because moving the mouse right (positive delta) should pan the view left (decrease the offset).
        m_pan.x -= world_delta_x;
        // We add for Y because screen coordinates have Y pointing down, while our graph likely has Y pointing up.
        // Moving the mouse down (positive delta) should pan the view down (increase the Y offset).
        m_pan.y += world_delta_y;
    }

    // --- Zooming ---
    // Only zoom if the plot area is hovered.
    if (is_hovered && io.MouseWheel != 0.0f) {
        const ImVec2 mouse_pos = io.MousePos;
        
        ImVec2 world_pos_before = screenToWorld(mouse_pos);
        
        float zoom_delta = io.MouseWheel * 0.1f;
        m_zoom *= std::pow(2.0f, zoom_delta);
        m_zoom = std::max(0.1f, std::min(m_zoom, 100.0f));

        ImVec2 world_pos_after = screenToWorld(mouse_pos);

        m_pan += (world_pos_before - world_pos_after);
    }
}

To use this, make sure you call handleInput before you start drawing your plot geometry. Notice that the InvisibleButton call now replaces your previous IsMouseHoveringRect check for zooming, creating a more robust input-handling area.

Polishing the Widget: Clipping

When you pan the plot, parts of it will move outside the designated canvas area. While this isn't a critical bug, it looks unprofessional. ImGui provides a simple way to constrain all drawing to a specific rectangle.

The GitHub resource LINK you reviewed earlier contains the solution in section 4. Before you start drawing your plot lines and axes, you can tell ImGui to "clip" anything outside your canvas boundary.

// In your draw() function, right after defining the canvas area
const ImVec2 canvas_p0 = ImGui::GetCursorScreenPos();
const ImVec2 canvas_size = ImGui::GetContentRegionAvail();
const ImVec2 canvas_p1 = {canvas_p0.x + canvas_size.x, canvas_p0.y + canvas_size.y};
ImDrawList* draw_list = ImGui::GetWindowDrawList();

// ... handle input, draw background, etc. ...

// Push a clipping rectangle
draw_list->PushClipRect(canvas_p0, canvas_p1, true);

// ...
// ALL your plot drawing logic (axes, lines, grid) goes here
// ...

// Pop the clipping rectangle
draw_list->PopClipRect();

By wrapping your drawing commands between PushClipRect and PopClipRect, you ensure a clean, professional-looking widget that respects its boundaries.

Conclusion

Excellent work! You have now implemented the two fundamental interactions for any data visualization tool: zooming and panning. Your LODPlotter is no longer just a static display but a proper interactive widget.

Key Takeaways:

• Panning is achieved by updating a world-space offset (m_pan).
• The key to correct panning in a zoomable view is to transform the mouse's screen-space delta into a world-space delta by dividing it by the current zoom factor (m_zoom).
• In ImGui, you can capture mouse drags on a custom widget using ImGui::InvisibleButton, ImGui::IsItemActive(), and ImGui::IsMouseDragging().
• Using PushClipRect and PopClipRect is a professional touch that prevents your custom widget from drawing outside its bounds.

What's Next?

With navigation fully implemented, we can now add features that provide specific information to the user. In our next lesson, we will focus on this learning outcome: Display a tooltip with the precise value and timestamp when hovering the mouse over the plot. This will require you to once again leverage your screenToWorld transformation function, proving just how foundational that piece of your code is.