Allow interacting with canvas through other interactive elements #1473
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix #1388. As discussed in the issue, I take advantage of event bubbling by listening for "canvas events" on
canvasWrapper
instead of on thecanvas
itself.Property
pointer-events: none
has to remain oncanvasWrapper
for the stacking order to work, so this part doesn't change: any element that needs to respond to pointer events (hover, click, drag, etc.) must setpointer-events
back toauto
.However, from now on, children of
canvasWrapper
withpointer-events: auto
no longer "block" events by default. Events are allowed to bubble up tocanvasWrapper
, where they may contribute to canvas interactions (zoom, pan, select-to-zoom, etc.)To prevent a canvas interaction from occurring while interacting with an element (like an annotation), consumers must manually listen for the relevant events and stop their propagation explicitly with
evt.stopPropagation()
. We expect that in most cases, stopping the propagation ofpointerdown
events should suffice, since this event controls the beginning of all click-and-drag interactions (pan, select-to-zoom, etc.)The only place where this new behaviour can be observed currently is on the
SvgElement
story. One of the rectangles is hoverable; using the wheel to zoom or clicking-and-dragging while hovering the rectangle used to have no effect -- now the canvas zooms and pans as expected.I'm opening this PR as draft, as I'm planning to write a few more stories to test and demonstrate how to make elements interactive -- maybe even a dedicated documentation page.