panzoom 4.2.0. breaks the drag functionality of jsplumb

[akreienbring]

Describe the bug

Hello,
yesterday I updated from version 4.1.0 to 4.2.0. After that my (jsplumb) draggable elements could not be dragged anymore.

Your environment

• see above
  -Chrome latest

Expected behavior

Actual behavior

• see above

Steps to reproduce

Easiest way may be do download my repo from here and running it from the dist folder. (Description available in the README...

You'll need to "Create Table" to get the draggable element on the canvas.

Then update panzoom with npm to 4.2.0. after running "npm run webpack" there's a new distribution in the dist folder. If you start it up, dragging does not work anymore.

[akreienbring]

And if you might wonder what jsplumb is, you can have a look here: https://github.com/jsplumb/jsplumb

[timmywil]

Thanks for opening an issue. I can tell you one difference between 4.1.0 and 4.2.0 that may be the culprit. Looks like you were using the disablePan option. This used to skip binding any event handlers. That was a problem because those handlers were still needed to do focal point zooming and respect the contain option, even if panning was disabled. These handlers could interfere with other libraries that do dragging because Panzoom calls event.preventDefault and event.stopPropagation on the start event. You can change that with the handleStartEvent option. Also consider event.stopImmediatePropagation conditionally in any of your handlers.

Alternatively, I've just added an option that will allow you to restore the old behavior. Pass noBind: true to Panzoom options.

[akreienbring]

Yes, I definetely use the "disablePan" option in my makeTableZoomable method.

Guess that will be a 4.2.1 release? As soon as I can install it, I'll give the new option a try! Thanks for looking into this.

[timmywil]

🎉 This issue has been resolved in version 4.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[timmywil]

Released in 4.3.0.

[akreienbring]

Hm... thinking about it: I heavily rely on an event that fires if the zoom animation is done. Only then I can reposition jsplumb endpoints.
To rely on "animationend transitionend..." is a workaround because panzoom does not fire an event when the css transformation has finished.

I hope that these still bubble up with the new implementation... :-)

[akreienbring]

I tried the new option. Success! After upgrading to 4.3.0 and adding the option the issue is fixed! :-D