how can i Pause vue-panZoom

Question

I have a Grid with vue-panZoom

inside it there is a vue-draggable-resizable area like in the image below

Image

When i drag the (vue-draggable-resizable) gray square, the black (pan-zoom) rectangle also moves. when the gray square is selected, the panZoom must be locked or in the beforeMouseDown & beforeWheel mode state.

<panZoom :options="{transformOrigin: null, beforeWheel, beforeMouseDown}">

<vue-draggable-resizable ***@dragging="onDrag"*** ref="draggable" :active="true"  @dragstop="updatePreview" @resizestop="updatePreview">

there is also this method in the panzoom documentation but i don't know if it could work in vue too:

Pause/resume the panzoom You can pause and resume the panzoom by calling the following methods:

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


    

how can i solve? Thanks in advance

Answer 1

Yes, those methods should work with Vue.js. All you have to do is access $panZoomInstance via ref.

<pan-zoom ref='panZoom'>
  <img src="https://picsum.photos/300">
</pan-zoom>

methods: {
  pause() {
    this.$refs.panZoom.$panZoomInstance.pause()
  },
  resume() {
    this.$refs.panZoom.$panZoomInstance.resume()
  }
}

Example