EasyPZ enabling constructor not working

[ghost]

Hello Michail,

The normal constructor via javascript is not working for me, like below:
var easypz = new EasyPZ( document.querySelectorAll('svg')[0], function() {} );

But it works if I pass all parameters:
var easypz = new EasyPZ( document.querySelectorAll('svg')[0], function() {}, {}, ["SIMPLE_PAN", "HOLD_ZOOM_IN", "CLICK_HOLD_ZOOM_OUT", "WHEEL_ZOOM_EASE", "PINCH_ZOOM", "DBLCLICK_ZOOM_IN", "DBLRIGHTCLICK_ZOOM_OUT"], {}, function() {}, function() {}, function() {}, "svg > *" );

I'm not sure if it's a mistake on my part or some browser update broke it. The SVG looks like this:

<svg width="100%" height="200" style="background-color: antiquewhite;"> <rect id='rect' x='0' y='0' width='100%' height='700'/> <rect x='10' y='20' width='100' height='80'/> </svg>

There's nothing else in it.

Thanks for this great library.

[michaschwab]

Hi Monfeaz,
Thanks for your feedback and taking the time!

To me, it looks like it's working as intended, although the intended usage might be a bit awkward for your use case and I'm open to feedback.

When using the JS-based version of EasyPZ, the default behavior is to detect pan and zoom gestures and call the passed callback functions, but nothing else. It's assuming you want to take care of applying the transformation to the SVG or canvas yourself, unless you pass the last parameter, called "applyTransformTo". You don't need to specify all the enabled pan and zoom modes to use the default ones, so you could call easypz like this:
var easypz = new EasyPZ( document.querySelectorAll('svg')[0], function() {}, null, null, {}, function() {}, function() {}, function() {}, "svg > *" );
What you are doing by passing all these parameters is to tell EasyPZ that you are not interested in using the callback functions, but that you want EasyPZ to automatically apply the transformation to the top level elements of the SVG, the same way as when you use EasyPZ with HTML. Does that answer your question?

The reason this works this way is that when I set up the default behaviors, I assumed that people using EasyPZ with JS want to use custom behavior and probably don't want EasyPZ to automatically apply the transformation, whereas the HTML version of EasyPZ is for easier use and just assumes you don't want to customize much. What is the reason for you wanting to use the JS version of EasyPZ if you're trying to use the default transformation?

Thanks for your feedback, I appreciate it!

[ghost]

Hello Michail,

I wanted to use the JS version in order to have a reference to the EasyPZ object in case I might need it later, and I didn't know how to get it from the HTML declaration.

Thank you for supporting this project still. Let me know if you have something set up for donations.

[michaschwab]

Hey Monfeaz!
Thanks, and please do let me know if you end up needing the reference for something. I'm open to making the initialization of EasyPZ through JS easier, for example with an initialization object rather than a long list of parameters. If that's something you're interested in, let's open a new issue for that - I'll close this for now.

No donations needed, thank you! I'm happy if people are using EasyPZ or even contribute to it.
Micha