Handle mouse events for an entire LayerCake
jackc opened this issue · comments
I have a LayerCake where I want to respond to mouse events in areas where nothing is drawn. I would like to set on:click, on:mousemove, etc. on the LayerCake component but that doesn't seem to be possible.
I've looked into binding the element property. I've also tried using an empty layer to receive mouse events. I think that either might be possible with enough awkward glue code, but neither approach is very elegant.
Is there a simple way to get all mouse events for a LayerCake and translate the coordinates to my data domain?
I’d make an HTML layer with a div that’s 100% wide and tall and put the listener on that element. Let me know if that doesn’t work.
Thanks for the response. I would have expected this to work, but no luck.
See https://svelte.dev/repl/684daab5525c45eeaec0a026dc63509a?version=3.57.0
I have a background Html layer with a div that has a on:click handler. Above that I have an svg layer that draws a grid inside of a g. The g has a on:click handler. Both on:click handlers write to console log.
If I click on the actual lines on the Svg I get a click event from the svg child element. But if I click on the empty area, I get no event at all. The higher Svg layer seems to be blocking or consuming the click event, but since it isn't actually on a solid part of the g the event disappears.
Finding a way to get the mouse click would unblock my use case.
But beyond that, there is also a potential ease-of-use improvement. In my case here, the grid isn't actually data that it makes sense to click on. Even if the above approach worked, I would still need to handle clicks on the background Html layer and on the grid layer (and any other decorative layers). It would be more convenient to have one place that would get all clicks on the LayerCake as a whole.
I think I have found a solution. A background layer doesn't work because the layers on top prevent mouse events from reaching it. But a container component with a slot that all layers go inside of does work. e.g. https://svelte.dev/repl/ac6536a9cdb0486eaf44deb74eac0c69?version=3.57.0
This works well enough for me, so feel free to close this issue. But it still could make sense to somehow make this extra component unnecessary or to document that this is the expected approach to handle mouse events for an entire LayerCake.
Thanks a bunch. I'll add a section to the documentation. I also renamed this issue so anyone looking to do something similar can find it easily.
I added this to the docs