search

MauriceConrad / zoompinch

Apply a pinch-and-zoom experience that’s feels native, communicates the transform reactively and lets you project any layer on top of the transformed canvas.
https://zoompinch.pages.dev
MIT License
54 stars 4 forks source link

Pointer events attach to canvas, not item #3

Open rossb opened 3 weeks ago

rossb commented 3 weeks ago

Hi, this is an amazing library, thanks for creating and sharing it.

As a feature request, could an option be added so events attach to the item being transformed, rather than their containing canvas element?

The use case I have in mind is displaying multiple items in the same canvas where they can be composed next to each other, and being able to zoom and move each based on events over the bounds of each item.

I think this use case may require a second feature request actually, though I've not been able to confirm this in testing — that multiple items could share the same canvas element (so all items can receive pointer events and not be blocked by the frontmost canvas).

Thanks and keep up the great work! This performs amazingly in the browser.

MauriceConrad commented 2 weeks ago

I think it would be not that much pain to implement it. But I think it would mess up the core logic if we would implement it on the same level as the existing logic. If I understood the requirement correctly, we could just make an option that makes the entire component pointer-events: none except a given element within the canvas or the matrix slots. Now, just laying different components on top of each other would lead to the intended behavior, or am I missing something?

rossb commented 2 weeks ago

I think pointer-events: none will work for this case like you say, actually! I've never had the need to test this before, but can see reverting pointer-events on a descendent does re-enable events, while keeping the parent canvas events disabled (my assumption was it couldn't be excluded from parent).

Thanks for the suggestion, I'm going to try this out. The case I'm describing currently uses Panzoom, and I'd love to switch to zoompinch for the amazing mathematically correct pinch projection. The only potential glitch might be if pointer events are momentarily seen as outside the child during pinch, but TBC!