graphql-voyager icon indicating copy to clipboard operation
graphql-voyager copied to clipboard

disable mouse scroll

Open marchenko1985 opened this issue 1 year ago • 0 comments

Hello

for a use cases when Voyager is used as additional widget not taking whole screen it may be useful to disable scroll handler

imagine UI where you have more than one Voyager and / or Voayger somewhere in the middle of the page, because it does catch mouse scroll it breaks page behavior

here is an example of what I mean (as soon as I try to scroll page and my mouse lands on Voyager everything behaves strange)

https://github.com/user-attachments/assets/1fcc36ae-6751-4912-9c1c-85215639c34c

from what I see in code, there is no such an option, but it is available in underlying pan to zoom library, so probably it may be added as optional, backward compatible parameter, e.g.:

image

note: by intent name is disableMouseWheelZoom so it is backward compatible, opt-in setting, from one side you may complain why not pass all pan to zoom properties, but what if it will be changed tomorrow, probably it should not be exposed, and with this approach, new params may be exposed as needed in future

and here is how implementation part may look like

image

note: here, Viewport is internal, so we are free to "expose" all options, so we can pass them as needed from other places, alternatively we may continue add constructor parameters, but I am afraid it can become messy very quickly

and finally here we are wiring up everything togther

image

note: once again, setting is opt-in and backward compatible, so should not brake anything

Hopefully it may be interesting of maintainers, so just in case will create small accompanying pull request just to not loose changes

marchenko1985 avatar Jan 01 '25 06:01 marchenko1985