search

mathisonian / d3-multiaxis-zoom

d3 plugin to zoom along multiple axes independently
MIT License
15 stars 1 forks source link

[FEATURE] Allow customizing which keys control the zoom? #3

Open rsemenov100 opened 7 years ago

rsemenov100 commented 7 years ago

Hi,

First of all, thank you for this plugin. Many apps need independent zooming/panning along X and Y axes. Not sure why d3 does not allow us to do this "out of box"...

The question I have is why the "meta" key was selected for Y axis? The issue with this key is that on windows machine when a user releases "meta" key (after finishing zooming along Y axis), the windows (start) menu pops up.

Wouldn't it be better to use "control" key for Y axis to avoid "extra" stuff for the OS?

rsemenov100 commented 7 years ago

Ah, I got it... Using "ctrl" is even worse as this key is used in so many shortcuts in browsers...

mathisonian commented 7 years ago

Thanks for pointing that out @rsemenov100 - i hadn't considered the issue with meta key for windows users. It may make sense to expose the modifier keys as options to users of this library. I don't have much time to implement this right now, but would happily accept a PR

rsemenov100 commented 7 years ago

@mathisonian, I created a fork for my playground:

GitHub npm

After looking at the tables of existing key combinations for different browsers and operating system, I got an impression that it's very hard to find something that will work everywhere.

What I tried to do is to exclude any key bindings from the plug-in (except the shift key + double click). Instead I have added a function to set a desired zoom mode (from enumeration). This zoom mode can be set from the end-user app. How it is set can vary from app to app: key events, toolbars, a set of toggle buttons, etc.

This approach should have a few advantages:

  1. No conflicts between browsers and operating systems.
  2. For each app, it's possible to choose how exactly to trigger different modes.
  3. Can work on tablet devices if modes are triggered by toggle buttons, for example.