Skip to content

Blazor wrapper for timmywil's panzoom library that helps make zooming and panning of Blazor components and elements easier

License

Notifications You must be signed in to change notification settings

shaigem/BlazorPanzoom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

76 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BlazorPanzoom

Nuget version

BlazorPanzoom is a library for Blazor that wraps around timmywil's JavaScript library, panzoom. It provides an easy way to enable panning and zooming of web components/elements through CSS transformations.

Currently targeting: panzoom v4.4.1

Demo Showcase

View Demo App

The demo app aims to implement all of the same examples from timmywil's panzoom' s demo page.

The list below shows which examples have been implemented.

Demo List

Prerequisites

Installation

Install the NuGet package:

dotnet add package BlazorPanzoom

Add the following to _Imports.razor

@using BlazorPanzoom

Add the following to index.html (client-side) or _Host.cshtml (server-side) in body

<script src="_content/BlazorPanzoom/panzoom.min.js"></script>
<script src="_content/BlazorPanzoom/blazorpanzoom.js"></script>

Client-Side Config (WebAssembly)

In Program.cs...

Import the following

using BlazorPanzoom;

And then add the following to where you register your services

builder.Services.AddBlazorPanzoomServices();

Server-Side Config

Import the following

using BlazorPanzoom;

In Startup.cs...

Import the following

using BlazorPanzoom;

And then add the following to where you register your services

builder.Services.AddBlazorPanzoomServices();

Usage

Simple Example

Wrap the element that you want to enable panning and zooming for with <Panzoom>:

<!-- Using solid border-style to highlight the image's panning & zooming boundary -->
<div class="my-main" style="border-style: solid;">
    <Panzoom>
        <!-- Must set the element's reference (@ref)! -->
        <img @ref="@context.ElementReference"
             src="https://cms.uni-konstanz.de/fileadmin/archive/informatik-saupe/fileadmin/informatik/ag-saupe/Webpages/lehre/dip_w0809/pictures/pool.png"
             alt="image"/>
    </Panzoom>
</div>

Note: you must use @ref="@context.ElementReference" on the element that you want to enable panning and zooming for!

This example enables panning for the <img> component via mouse input. Zooming is not enabled by default on Desktop.

Zoom via Mouse Wheel

To enable zooming of an element through the mouse wheel, pass WheelMode="@WheelMode.ZoomWithWheel" to the <Panzoom> component.

<div class="my-main" style="border-style: solid;">
    <Panzoom WheelMode="WheelMode.ZoomWithWheel">
        <img @ref="@context.ElementReference"
             src="https://cms.uni-konstanz.de/fileadmin/archive/informatik-saupe/fileadmin/informatik/ag-saupe/Webpages/lehre/dip_w0809/pictures/pool.png"
             alt="image"/>
    </Panzoom>
</div>

Full Example

FocalDemo.razor (Live Demo)

Demonstrates:

  • Registering an element to use Panzoom
    • Setting options via PanzoomOptions

See issue #3 for a list of supported options. For documentation on what each option does, see panzoom #doc.

  • Calling Panzoom functions from code (ResetAsync & ZoomWithWheelAsync)
  • Custom zoom wheel handling (zoom only while holding the Shift key)
    <div class="buttons">
        <button @onclick="OnResetClick">Reset</button>
    </div>

    <div class="panzoom-parent" style="border-width: 10px;">
        <!-- We wrap the <img> element with the Panzoom control -->
        <Panzoom @ref="_panzoom" PanzoomOptions="@(new PanzoomOptions {Canvas = true})" WheelMode="@WheelMode.Custom" OnWheel="@OnWheel">
            <!-- MUST set @ref="@context.ElementReference" to the <Panzoom>'s context -->
            <div @ref="@context.ElementReference" class="panzoom" style="width: 400px; height: 400px; margin: 0 auto;">
                <img style="width: 100%; height: 100%;" src="target.png" alt="image"/>
            </div>
        </Panzoom>
    </div>
    
 @code {

    private Panzoom _panzoom;

    private async Task OnResetClick(MouseEventArgs args) => await _panzoom.ResetAsync();

    private async Task OnWheel(CustomWheelEventArgs args)
    {
        if (!args.ShiftKey)
        {
            return;
        }
        await _panzoom.ZoomWithWheelAsync(args);
    }

}

For more examples, see the Demos folder.

Documentation

Please see the wiki for documentation and help.

For documentation on the panzoom JavaScript API, click here.

License

MIT

About

Blazor wrapper for timmywil's panzoom library that helps make zooming and panning of Blazor components and elements easier

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published