How to implement zoomIn and zoomout in vue-panzoom

Question

I am trying to implement vue-panzoom 's manual zoom option. panzoom is the parent library and the

default zoom which is well demoed here is what i am trying to acheive https://timmywil.com/panzoom/demo/#Panning%20and%20zooming

As per the original library ( panzoom ), there are zoom,zoomIn and zoomOut functions,

but the instance does not have those methods

the only way i could find till now is using smooth zoom function,and i am not sure how to use it

this.$refs.panZoom.$panZoomInstance.smoothZoom(2.2);

This what i have tried till now

https://codesandbox.io/s/poc-zoompan-dz70x?file=/src/App.vue:737-793 Please take a look at it,any suggestions would be helpful.

Answer 1

You can see here a simply implementation of timmywil panzoom library you can easly use props and slot to create your own component reusable in all of your project

<template>
    <div>
        <div class="command">
            <button @click="zoom(1)">ZoomIn</button>
            <button @click="zoom(-1)">ZoomOut</button>
        </div>
        <div style="overflow: hidden;">
            <div id="panzoom-element">
                <img src="https://picsum.photos/300">
            </div>
        </div>
    </div>
</template>
<script>
import Panzoom from '@panzoom/panzoom'

export default {
    props: {
        options: {type: Object, default: () => {}},
    },
    mounted() {
        this.panzoom = Panzoom(document.getElementById('panzoom-element'), {
            maxScale: 5
        })
    },
    methods : {
        zoom(level){
            level === -1 ? this.panzoom.zoomOut() : this.panzoom.zoomIn()
        }
    }
}