@fasteroid/panzoom-revamped

based on anvaka's panzoom

Actually extensible, mobile-friendly pan & zoom framework. Now with 20% less jank!

Usage Example

<style>
    .flexbox-centerer {
        box-sizing: border-box;
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="flexbox-centerer">
    <img id="cat" src="https://cataas.com/cat">
</div>

<script type="module">
    import { Panzoom } from "../dist/index.js"; // or however else you'd import in your environment
    let pz = new Panzoom( document.getElementById("cat") );
</script>

But what if..?

Is this the right one for me?

• Yes, this is one of the *good* libraries like anvaka's that factor touch and cursor locations into zooming.

• It'll probably work in your favorite framework out-of-the-box since it uses ✨ no dependencies! ✨ Just make sure to call pz.dispose() when you're done with one if being used with a framework!

• It also offers kinetic behavior (on by default) to mimic the smooth scrolling mobile devices tend to implement. If the default is too slidey for you, pz.kinetic.friction can be changed to fit your needs.

• If you need to know when the panzoom updates its transform, pz.onTransformChanged(callback) allows you to attach event handlers. This method returns an Unsubscribable, which you can call .unsubscribe() on to remove the event handler.

• Unlike anvaka's library, transforms here are designed to best fit a centered element inside the panzoom's container. This may or may not make the math easier when doing external calculations (but it did for me!)

Limitations...

Stuff I can't fix because browsers suck

• Currently, any descendant of a panzoom that creates a new stacking context is prone to polluting the entire panzoom with low-quality zooming.  This happens consistently on iOS Safari and its derivatives, and due to their implementation, even scrollable elements inside the panzoom will trigger this bug.

License

MIT License