Modifier keys to pan/zoom x or y or xy

[melnibon]

Hi!
I think it could be nice to define 3 separate modifier keys, ctrl, alt, shft, none to pan or zoom in x only, y only and both xy directions.
Maybe something like:

zoom: {
  pan: {
    enabled: true,
    modifierKeysMode: {
      none: 'xy',    // means no modifier puts in mode xy
      shft: 'x',
      ctrl: 'y'
    },
  },
  zoom: {
    enabled: true,
    modifierKeysMode: {
      // absence of none means: modifiers are mandatory to zoom
      shft: 'x',
      ctrl: 'y'
    },
  }
}

Sounds it possible?
Many thanks for your plugin!

[kurkle]

Maybe a scriptable mode could be a better solution for that use case. But I'm not sure if it would be hard to implement and/or have performance impact.

[melnibon]

Yes, this is the way!

pan: {
  enabled: true,
  mode: myModeFunction    // returns 'x' or 'y' or 'xy'
},

But I was not able to get the modifier keys state into that function. Its only parameter is the chart. So, instead, I wrote two listeners who modify the configuration:

var chart = new Chart(..., config);

$(document).keydown(function(event) {
  if (event.shiftKey) {
    chart.config.options.plugins.zoom.pan.mode = 'xy';
    chart.config.options.plugins.zoom.zoom.mode = 'xy';
  }
});

$(document).keyup(function(event) {
  chart.config.options.plugins.zoom.pan.mode = 'x';
  chart.config.options.plugins.zoom.zoom.mode = 'x';
});

And now, the way it zooms and pans is very smart: it keeps the vertical bounds.
Super Thank You !
Have a very nice day!