bug: moving only the arrows instead of the whole diagram

[TBD]

expected: move the whole diagram while using the trackpad (two finger slide). works ok in Chrome.
actual: only the arrows are moved while the boxes are fixed

browser: Safari/macOS

[hmaurer]

On Chrome/macOS the arrows follow the diagram but the page scrolls at the same time. This would be fixed by preventing the default behaviour of mousewheel for the diagram's container.

[mattpocock]

This appears to be a bug with the inspector itself - I think. @davidkpiano is this a known limitation?

[mattpocock]

Interested in how this is performing when you change the layout? (button in the top-right corner)

[penumbra1]

Interested in how this is performing when you change the layout? (button in the top right corner)

Hi! I'm also seeing the whole page scroll when I scroll over the diagram using the touchpad on Chrome/Windows 10. This happens only in the "hamburger" layout. Side-by-side or stacked layouts (the ones marked by arrow icons) are OK: the scroll is trapped in the diagram area.

[midanosi]

Interested in how this is performing when you change the layout? (button in the top right corner)

Hi! I'm also seeing the whole page scroll when I scroll over the diagram using the touchpad on Chrome/Windows 10. This happens only in the "hamburger" layout. Side-by-side or stacked layouts (the ones marked by arrow icons) are OK: the scroll is trapped in the diagram area.

I see the same behaviour as above (bad with hamburger icon, fine with vertical layout and side-by-side layout). Here's a screencap of the behaviour when in hamburger mode, if it helps:

Screen.Recording.2021-04-06.at.17.14.06.mov

[mattpocock]

Thanks for the repro! Super useful. I'm also seeing this too. I'll have a think on how to best fix this, whether e.preventDefault() is the fix or not.

[midanosi]

I had a quick go cloning the repro to put a simple e.preventDefault() on the parent div to the iframe, but my onWheel or onClick on the parent div didn't trigger when interacting with the iframe. That would make me think that the Event isn't being bubbled up, but it clearly is, because the scroll is being applied to the parent div, the bug we're seeing.

It does make me think that the solution is calling .stopPropagation somewhere within code for https://statecharts.io/inspect. I had look around xstate repo to see where the code for that lives, but couldn't find it

[mattpocock]

Spoke to David on Twitter about this - it looks like this is an issue with @xstate/inspect. Nothing we can do in this repo, so closing this.