Mouse Wheel Zoom Implementation

The Challenge of Intuitive Zooming

A naive approach to zooming would simply scale the entire plot. If you try this, you'll notice that the plot always zooms in and out relative to a fixed point, usually the top-left corner (the origin). This is disorienting for the user, who naturally expects the zoom to be centered on their mouse cursor.

Our goal is to implement focal point preservation: the point on the graph directly under the mouse cursor should remain stationary as the user zooms in or out.

To understand the concept and the math involved, we'll start with a fantastic video that breaks down the problem from first principles.

The Algorithm for Centered Zoom

As the video explained, the key to centered zooming is to counteract the shift caused by scaling. We can break this down into a clear, step-by-step algorithm that you'll execute every time the mouse wheel is moved over the plot.

Let's define our key variables:

• m_pan: An ImVec2 that stores the view offset in world coordinates. This represents the world-space coordinate that is at the top-left of our plot window.
• m_zoom: A float that stores the current zoom level or scale factor. A value of 1.0f is no zoom.

Here is the algorithm:

1. Capture Mouse Position: Get the current mouse cursor position in screen coordinates using ImGui::GetMousePos().
2. Find World Position (Before Zoom): Convert the mouse's screen position into world coordinates using your existing coordinate transformation logic. Let's call this world_pos_before.
3. Update Zoom Factor: Read the mouse wheel delta from ImGui::GetIO().MouseWheel. Use this value to update m_zoom. An exponential change feels most natural, so we'll multiply m_zoom by a factor derived from the wheel delta.
4. Find World Position (After Zoom): Now that m_zoom has changed, the mapping from screen to world is different. Convert the same screen position from step 1 into world coordinates again. Let's call this world_pos_after.
5. Calculate the Difference: The world position under the mouse has shifted. The required correction is the difference between the two world positions: delta = world_pos_before - world_pos_after.
6. Apply Correction: Add this delta to your m_pan variable. This shifts the entire view, effectively moving world_pos_after back to where world_pos_before was, keeping the point under the cursor stationary.

This logic may seem complex, but it elegantly ensures that the focal point of the zoom is always the user's cursor.

Implementing with ImGui

Now, let's translate this algorithm into C++ code within your LODPlotter class. First, you'll need to add the new member variables to store the view state.

// In your LODPlotter class definition
class LODPlotter {
    // ... existing members
private:
    // ...
    ImVec2 m_pan = {0.0f, 0.0f};  // View offset in world units (time, value)
    float m_zoom = 1.0f;         // Scale factor
};

Next, you'll need a function to handle user input. This function will be called at the start of your draw method.

The following resource provides a direct, practical implementation of this logic in an ImGui context.

Based on that example, your input handling logic will look like this:

// In your LODPlotter class
void LODPlotter::handleInput(const ImVec2& canvas_pos, const ImVec2& canvas_size) {
    ImGuiIO& io = ImGui::GetIO();
    
    // Check if the plot area is hovered
    if (ImGui::IsMouseHoveringRect(canvas_pos, {canvas_pos.x + canvas_size.x, canvas_pos.y + canvas_size.y})) {
        
        // --- Zooming ---
        float wheel = io.MouseWheel;
        if (wheel != 0.0f) {
            const ImVec2 mouse_pos = io.MousePos;
            
            // 1. & 2. Get world position before zoom
            ImVec2 world_pos_before = screenToWorld(mouse_pos);
            
            // 3. Update zoom factor
            float zoom_delta = wheel * 0.1f;
            m_zoom *= std::pow(2.0f, zoom_delta);
            // Clamp zoom to reasonable limits
            m_zoom = std::max(0.1f, std::min(m_zoom, 100.0f));

            // 4. Get world position after zoom
            ImVec2 world_pos_after = screenToWorld(mouse_pos);

            // 5. & 6. Calculate correction and apply to pan
            m_pan += (world_pos_before - world_pos_after);
        }
    }
}

Updating Your Coordinate Transformations

For this to work, your screenToWorld and worldToScreen functions must be updated to use the new m_pan and m_zoom variables. Your coordinate system likely treats time as x and the plotted value as y.

Here are the updated transformation functions. Note the Y-axis inversion, which is common because screen coordinates typically have Y=0 at the top, while graphs have Y=0 at the bottom.

// In your LODPlotter class

// Converts a point from data/world space to screen space
ImVec2 LODPlotter::worldToScreen(const ImVec2& world_pos) const {
    const ImVec2 canvas_pos = ImGui::GetCursorScreenPos(); // Or pass as argument
    const ImVec2 canvas_size = ImGui::GetContentRegionAvail();

    float screen_x = canvas_pos.x + (world_pos.x - m_pan.x) * m_zoom;
    
    // Y is inverted: world 'up' is screen 'down'
    float screen_y = canvas_pos.y + canvas_size.y - (world_pos.y - m_pan.y) * m_zoom;

    return ImVec2(screen_x, screen_y);
}

// Converts a point from screen space to data/world space
ImVec2 LODPlotter::screenToWorld(const ImVec2& screen_pos) const {
    const ImVec2 canvas_pos = ImGui::GetCursorScreenPos(); // Or pass as argument
    const ImVec2 canvas_size = ImGui::GetContentRegionAvail();
    
    float world_x = (screen_pos.x - canvas_pos.x) / m_zoom + m_pan.x;

    // Y is inverted
    float world_y = (canvas_pos.y + canvas_size.y - screen_pos.y) / m_zoom + m_pan.y;

    return ImVec2(world_x, world_y);
}

You must now integrate these updated functions into all your drawing logic. The draw function in your LODPlotter will use worldToScreen to position the lines and rectangles of your plot, and your handleInput function will use screenToWorld to interpret mouse actions.

Conclusion

Congratulations! You have just implemented one of the most important interactive features of your telemetry tool. By understanding and applying the mathematics of coordinate transformations, you've enabled intuitive, mouse-centered zooming.

Key Takeaways:

• Intuitive zooming requires preserving the focal point under the mouse cursor.
• The core algorithm is to calculate the mouse's world position before and after changing the zoom factor, and then adjust the pan/offset to compensate for the difference.
• This logic depends on robust worldToScreen and screenToWorld functions that account for both pan (translation) and zoom (scale).
• Exponential zoom (m_zoom *= ...) provides a more uniform user experience than linear zoom (m_zoom += ...).

What's Next?

With zooming implemented, the next logical step is to add panning. In the next lesson, we will implement interactive panning functionality by dragging the mouse. You'll find that the m_pan variable you introduced today is the key to this next feature, and the groundwork you've laid will make it surprisingly simple to add.