Callback when zoom changes via MouseWheel

[Webreaper]

When I zoom with the mouse wheel, my range control doesn't update, so gets out of sync. Is there a way (or can one be added) to get a callback when the zoom level changes via the Scroll Wheel, so I can call StateHasChanged etc? I was going to use OnWheel, but that seems to be for custom wheel implementations, so not quite what I want.

Thanks!

[shaigem]

Hey sorry for the late response. Here's an example of how you can keep the range control in sync when zooming in. Take a look at the OnWheel function:

@page "/"

<Demo Title="Panning and zooming" DemoType="GetType()">
    <div class="buttons">
        <button @onclick="OnZoomInClick">Zoom in</button>
        <button @onclick="OnZoomOutClick">Zoom out</button>
        <button @onclick="OnResetClick">Reset</button>
        <input type="range" min="0.1" max="4" step="0.1" @bind-value="RangeValue" @bind-value:event="oninput"/>
        <input id="disable-pan" type="checkbox" @bind="PanEnabled"/>
        <label htmlFor="disable-pan">Enable panning</label>
    </div>

    <div class="panzoom-parent">
        <Panzoom @ref="_panzoom" WheelMode="@WheelMode.Custom" OnWheel="@OnWheel">
            <div @ref="@context.ElementReference" class="panzoom">
                <img style="width: 400px; height: 400px" src="awesome_tiger.svg" alt="image"/>
            </div>
        </Panzoom>
    </div>
</Demo>

@code {

    private double _rangeValue = 1.0;

    private double RangeValue
    {
        get => _rangeValue;
        set
        {
            _rangeValue = value;
            _panzoom.ZoomAsync(value);
        }
    }

    private bool _panEnabled = true;

    private bool PanEnabled
    {
        get => _panEnabled;
        set
        {
            _panEnabled = value;
            _panzoom.SetOptionsAsync(new PanzoomOptions {DisablePan = !_panEnabled});
        }
    }

    private Panzoom _panzoom;

    private async Task OnWheel(CustomWheelEventArgs args)
    {
       
        await _panzoom.ZoomWithWheelAsync(args);
        await UpdateSlider();
    }
    
    private async Task OnZoomInClick(MouseEventArgs args)
    {
        await _panzoom.ZoomInAsync();
        await UpdateSlider();
    }

    private async Task OnZoomOutClick(MouseEventArgs args)
    {
        await _panzoom.ZoomOutAsync();
        await UpdateSlider();
    }

    private async Task OnResetClick(MouseEventArgs args)
    {
        await _panzoom.ResetAsync();
        await UpdateSlider();
    }

    private async Task UpdateSlider()
    {
        var scale = await _panzoom.GetScaleAsync();
        _rangeValue = scale;
    }

}

The GetScaleAsync function lets you get the current zoom value.

I hope this answers your question.