I am working with a Grid that includes the use of vue-panZoom.
Within the Grid, there is a section that utilizes vue-draggable-resizable, similar to what is depicted in the image below:
When I drag the gray square (vue-draggable-resizable), the black rectangle (pan-zoom) also moves concurrently. Furthermore, when the gray square is selected, the functionality should lock the panZoom or be set to the beforeMouseDown & beforeWheel mode.
<panZoom :options="{transformOrigin: null, beforeWheel, beforeMouseDown}">
<vue-draggable-resizable ***@dragging="onDrag"*** ref="draggable" :active="true" @dragstop="updatePreview" @resizestop="updatePreview">
The panzoom documentation suggests a method for pausing and resuming the panzoom feature, but it is uncertain if this would work within Vue as well:
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
Any suggestions on how I can resolve this issue? Thank you in advance.