Event propagation when trying to zoom

[glinkot]

One video for two issues :) The first one is, if I use shift-mousewheel, the diagram zooms. If I use mousewheel with no shift modifier, the diagram zooms as well as the page scrolling. I've put a 'show key/mouse action' window in front so you can see what's happening when.

Correct logic might be:

• Shift-Scroll: Work as it does now
• Scroll only: Diagram ignores event, only scroll occurs.

[zHaytam]

Hello.

Shift scroll works because the browser doesn't scroll if shift is pressed. Scroll only will trigger a zoom in the diagram but the browser will also scroll.

So they both work, it's just that the browser has the default behavior of scrolling anyway...

[glinkot]

I propose that UX wise it should work similarly to if you do a google search for nearby restaurants, and you are presented with a map on part of the page. Scroll wheel on the map zooms but does the 'stop event propagation' so the scroll isn't triggered. Scroll wheel elsewhere on the page unaffected. Like below.

[zHaytam]

That would be ideal, except with how events work in Blazor (they are global ones), we can't stop propagation since its passive :/ It will need a custom JS event I believe.

I will see what I can do!

[adrien426]

It's the same problem #281 I solved it with a simple test, but I'm waiting for it to be solved

[glinkot]

@adrien426 what was the simple test?

I tried to use preventDefault and stopPropagation on the wheel events, but came across this (https://github.com/dotnet/aspnetcore/issues/17358) where Steve Sanderson seems to recommend using a css style of touch-actions: none. I didn't find that worked, neither did someone else, but they closed it anyway. It relates to this chrome change apparently - which I think @zHaytam you were referring to when you said it was 'passive' (https://developer.chrome.com/blog/scrolling-intervention/)

I was thinking perhaps I just try to suppress zoom on the control itself, so that only the scroll fires. Then the user would use shift-wheel, or dedicated +/- buttons like we see on the map control above. Disabling onwheel totally means you can't even use shift-zoom, so I guess a test for shift-down should occur before letting the wheel event fire.

[dustinhorne]

There is a workaround. You may need to tweak it to suit your need, but start with the following in your site's CSS:

body:has(div.diagram-canvas:hover) { position: fixed; overflow-y: scroll; width: 100%; }

We could use "overflow-y: hidden", however, this would make the scrollbar pop in and out and would require you to potentially make margin or padding adjustments to account for the width, which could vary slightly per browser. By setting a fixed position and using an overflow value of "scroll", the scrollbar will remain visible but it will get grayed out as it's disabled.

The above will apply this class to every diagram on your site. If you wanted to do it just for a specific diagram you could add your own class to the diagram component and update the selector to look for your class instead of "diagram-canvas".

Bonus: I'm using this solution with Blazor Diagrams in a Blazor app that's hosted inside of a MAUI app running on a Windows Desktop and it works perfectly.