How to register elements in Panzoom

Using the Panzoom component (only supports one element for each Panzoom component)

To enable panning and zooming of an element, you must wrap it with the provided <Panzoom> component and then provide the <Panzoom> component with the element's ElementReference.

For example, I want to enable panning for my <img> element seen here:

<div class="my-main" style="border-style: solid;">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" alt="image"/>
</div>

Now we wrap it with the <Panzoom> component:

<div class="my-main" style="border-style: solid;">
    <Panzoom>
        <!-- Must set the element's reference (@ref)! -->
        <img @ref="@context.ElementReference" src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" alt="image"/>
    </Panzoom>
</div>

The <img> element is now ready to be panned!

What if the element has its @ref set already?

If the element already has its @ref set, then you can register it in the <Panzoom> component in the @code or the C# code section.

1. Make sure you have a reference (@ref) to the Panzoom component
2. Set the ElementReference property of the Panzoom component to the element you wish to register for in the OnAfterRender(bool firstRender) function

See below for an example using the example above:

<div class="my-main" style="border-style: solid;">
    <Panzoom @ref="_panzoom">
        <img @ref="_elementRef" src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" alt="image"/>
    </Panzoom>
</div>


@code {

    private Panzoom _panzoom; // # 1. reference to the Panzoom component
    private ElementReference _elementRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _panzoom.ElementReference = _elementRef; // # 2
        }
        base.OnAfterRender(firstRender);
    }
}

Register multiple elements via CSS selector using PanzoomSelectorSet

...

Register elements using PanzoomHelper (manual way)

...