Documentation is missing Panzoom Controls implementation

[roenfeldt]

Hey @fancyapps,

Thank you for your amazing work!

I was wondering, what's the proper way to implement the Controls for vanilla JS, similar to the React example from the documentation?

What I want to achieve, is exactly the demo in the Panzooom Overview section of the documentation.

Thank you!

[fancyapps]

Hi, @roenfeldt

Would you be willing to give the upcoming major release a try? Please, join https://discord.gg/R35cVGNw for details.

[roenfeldt]

Hey @fancyapps and thanks for the invite. I will definitely give the v5 a try very soon, thank you.

But for now, I just want to make this work, so could you please provide the code that makes the demo Controls work? Thanks so much :)

[fancyapps]

Well, include CSS file (panzoom.controls.css) and also JS file, but it depends on how you are using the package - NPM or CDN ESM/UMD. For example:

import { Controls } from "panzoom.controls.esm.js";
Panzoom.Plugins.Controls  = Controls;

And then those controls should appear. In v5 there will be plenty of buttons to choose from and you will be able to easily create your own controls (just by adding data attributes).

[roenfeldt]

@fancyapps Thank you for your efforts. Unfortunately, importing the controls file and instantiating them didn't make any difference. I'll just give the v5 a go.

[npaskooi]

I was really hoping for some documentation on using Controls in the current version too!

[fancyapps]

Sorry, but there are no resources to work simultaneously on two major releases. As v5 is available, please, check out the docs and upgrade.