How to implement drawing only to the specific area of the window?

Question

I'm trying to implement "canvas" where I will display loaded texture and select specific parts of it so I can put them on tilemap, I'm also trying to add zooming and panning only in "canvas" part of the window. I've tried using view and viewport but setting viewport size is what I'm struggling with the most. What I've tried:

First I set the view to be size of the window and its center is offset by (-250, -20) - this the point where properties window ends (x = 250) along with main menu bar (y = 20):

m_view.reset(sf::FloatRect(-250.0f, -20.0f, get_window().getSize().x, get_window().getSize().y));

Then if window has been resized I process the Resized event:

if (event.type == sf::Event::Resized)
{
    m_view.reset(sf::FloatRect(-250.0f, -20.0f, event.size.width, event.size.height));
    get_window().setView(m_view);
}

But if I want to implement panning (moving the view) and zooming I need to set viewport so it will only render in "canvas" area. I can try to set viewport's FloatRect manually but what if window will get resized? How do I deal with this problem?

Godot TileSet/TileMap Editor as reference

Answer 1

The Cherno on YouTube did something similar for his Scene Viewport in his Game Engine series.

It's written in C++/OpenGL/ImGui, but it's easily translated. From a high level, you need to create a viewport panel/window that you draw to as a "Scene Viewport".