thecodealer / vue-panzoom

Vue plugin to zoom/pan dom elements
MIT License
89 stars 20 forks source link

Get instance name of panZoom component #11

Closed alekbless closed 4 years ago

alekbless commented 4 years ago

Hello!

How can I retrieve/set the instance name of the panzoom component? I would like to pause panning but do now know how to access the instance.

From the original package:

var element = document.getElementById('scene');
var instance = panzoom(element);

instance.isPaused(); //  returns false
instance.pause();    //  Pauses event handling
instance.isPaused(); //  returns true now
instance.resume();   //  Resume panzoom
instance.isPaused(); //  returns false again 
mistabiggx commented 4 years ago

You have 2 options

Option 1 (using the init event):

The instance is available as the first argument in the "init" event callback like so: In your template

<panZoom @init="onInit"></panZoom>

Add this to your component's methods

onInit: function(panzoomInstance, id) {
    panzoomInstance.isPaused();
}

Option 2 (using ref):

The instance is available as $panZoomInstance on the panZoom component instance. Here's how it should look: In your template

<panZoom ref="panZoomItem"></panZoom>

Then you can do this in your script

this.$refs['panZoomItem'].$panZoomInstance.isPaused()
alekbless commented 4 years ago

You have 2 options

Option 1 (using the init event):

The instance is available as the first argument in the "init" event callback like so: In your template

<panZoom @init="onInit"></panZoom>

Add this to your component's methods

onInit: function(panzoomInstance, id) {
    panzoomInstance.isPaused();
}

Option 2 (using ref):

The instance is available as $panZoomInstance on the panZoom component instance. Here's how it should look: In your template

<panZoom ref="panZoomItem"></panZoom>

Then you can do this in your script

this.$refs['panZoomItem'].$panZoomInstance.isPaused()

@mistabiggx Thank you for providing this. I was able to pause panning with Option 2 :)