Panzoom in Qwik

[odd onyx]

Hello! I want to make a panzoom in qwik and stumbled across this library: https://github.com/timmywil/panzoom
The problem: I need to register it with the element.
So i will probably have something like this, right?:

export default component$(() => {
  const panzoom = useSignal(Panzoom(elem, { maxScale: 5 })); // here

  return (
    <>
      <div
        onWheel$={panzoom.value.zoomWithWheel}
        // ...
      >
        <h1>Content in draggable and zoomable box</h1>
      </div>
    </>
  );
});

But where i marked // here comes the problem: How can i get a reference to the dom element at that position? Or at all? 😅
Or is there a better library (maybe made for qwik, couldnt found one)

[sturdy estuary]

Hello, I currently don't know, I would like to know if you manage to find any solution!

[odd onyx]

well when nobody here can tell how this is possible i think i have to take the library apart and make my own for qwik

[sturdy estuary]

Well, you will have to try, sometimes they take their time to answer. Likewise, I plan to adapt it to my page later if nothing appears. You know, this way you also learn to do something you don't know, which I guess is good.

[odd onyx]

Well it isn’t „that“ hard iguess but qwik makes it hard. I need somehow do dynamically add and remove eventlisteners and also need to get and set the transform which I tried but still don’t know how

[flint breach]

You may need to adjust the types and import additional stuff from @builderio/qwik but this is what you want

export default component$(() => {
  const ref = useSignal<HTMLElement>();
  const panzoom = useSignal<NoSerialize<Panzoom>>();

  useVisibleTask$(({ track }) => {
    const elem = track(ref);
    const panzoomInstance = Panzoom(elem, { maxScale: 5 }));
    panzoom.value = noSerialize(panzoomInstance);
  });

  return (
    <>
      <div
        ref={ref} // pass ref here
        onWheel$={panzoom.value?.zoomWithWheel}
        // ...
      >
        <h1>Content in draggable and zoomable box</h1>
      </div>
    </>
  );
});

Read more about noSerialize here https://qwik.builder.io/docs/components/state/#noserialize

[old dome]

I was looking at the panzoom source code. I think if it was rewritten in Qwik+Tailwind it would be simpler.

The example above matches the react version (minus the feature to dynamically set the options)
https://github.com/sasza2/react-panzoom/blob/develop/src/Element.tsx

in the docs this is where you can find an example of working with more dom APIs
https://qwik.builder.io/docs/components/events/#synchronous-event-handling

so from what I can see useVisibleTask$ is ran once on the client and if you use track then it will run again if that value changes. If you use cleanup then that will run that when the component is destroyed. The signals are used to create references to the various parts for when you need them in the hooks