Pointer events attach to canvas, not item

[rossb]

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.

[ElyaConrad]

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]

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!

[rossb]

To update, the pointer-events: none approach did work for composing multiple items together on the "same" canvas. The only gesture affected is the scroll gesture on trackpad to drag, which stops when you go outside the image bounds. An option to disable this gesture via scroll would be nice, since it's an extra method of dragging.

Also just as feedback, some things I noted that could be nice additions:

• a custom event fired for zoom and drag start and end, that covers all active methods of doing that across devices (this can be achieved manually tracking the same events the plugin does, it's just a bit cumbersome — the trickiest one is zooming via wheel, to detect "zoom end")

• an easy way to reinitialise an instance at any point. There probably is one, but I couldn't spot so worked around (the use case was on each gesture end, I needed to translate everything from absolute to relative position, to save state that way in URL for sharing)

• option to add classes while gestures are in progress would be a nice convenience (but again, can already be done)

• option to free size canvas (not bound to aspect ratio), and to keep item in bounds of canvas would be terrific to be built in (can be done manually)

• option to allow zooming beyond max min limits, but correct to limits on end of zoom gesture (snap back), would be really nice (trickier to do manually, but I'm sure could be)

Anyway those are just quick thoughts from my use case. Excellent library, it really feels like native pinch zooms!