custom navigation widget for picture

Started by Nafffen, 18 May 2023, 11:36:51

Nafffen

Hello,
I want to create a custom widget to make navigation easier for big picture.
I first think about a widget that has two scrollbars and draw simply a sprite the user can shrink or expand with mouseScroll.
I have trouble with clipping in draw function. I helped myself with your Label.cpp
bool NavPicture::mouseWheelScrolled(float delta, tgui::Vector2f pos){
    m_sprite.setSize(m_sprite.getSize()+delta*m_sprite.getSize()/20.f);

    m_scrollbar->setSize(16, static_cast<unsigned int>(getSize().y));
    m_scrollbar->setViewportSize(static_cast<unsigned int>(getSize().y));
    m_scrollbar->setMaximum(static_cast<unsigned int>(m_sprite.getSize().y));
    m_scrollbar->setPosition({getSize().x - m_scrollbar->getSize().x, 0});
    m_scrollbar->setScrollAmount(2.f);

    return true;
}

void NavPicture::draw(tgui::BackendRenderTarget& target, tgui::RenderStates states) const
{
    const tgui::RenderStates statesForScrollbar = states;

    // Draw the scrollbar
    if (m_scrollbar->isVisible())
        m_scrollbar->draw(target, statesForScrollbar);

    target.drawBorders(states, {1}, getSize(), tgui::Color::Black);

    target.addClippingLayer(states, {getPosition().x, getPosition().y, getSize().x, getSize().y});

    if (m_scrollbar->isShown())
        states.transform.translate({0, -static_cast<float>(m_scrollbar->getValue())});

    target.drawSprite(states, m_sprite);

    target.removeClippingLayer();
}
With that code, the sprite behavior is very weird, I can't see it in the clipping region but when I zoom in a lot, it appears far from the clipping region, even over the widget size, where I dont want.
When I remove the clipping option "addClippingLayer", the sprite appears well but when I zoom in to much, it is taller than the widget size of course.
Did I miss something with clipping's behavior ?

texus

You don't have to add getPosition() to addClippingLayer, it is already relative to the widget position (since it is relative to the position in the passed states). So the rect should probably be just "{{}, getSize()}".

Nafffen