Pan with middle mouse button instead of click

[nathan-fiscaletti]

It seems that when using drag for zooming it can interfere with the pan functionality. I don't really mind this, but is there a way to use the middle mouse button instead of the left mouse button for panning? That way left mouse can be exclusively for selecting a region to zoom to.

[bairog]

I'm just a library user - but I have a workaround. AFAIK Hammer.js library doesn't have such a setting, so we have to change it's code. Inside hammer.js file just change if (eventType & INPUT_START && (ev.button === 0 || isTouch)) to if (eventType & INPUT_START && (ev.button === 1 || isTouch)) and Hammer.js library will start to detect middle mouse button for panning.

BUT chartjs-plugin-zoom will still detect middle mouse button clicking and start painting zoom rectangle (if drag=true in settings). So inside chartjs-plugin-zoom.js file just change

  chartInstance.$zoom._mouseDownHandler = function (event) {
  		node.addEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);
  		chartInstance.$zoom._dragZoomStart = event;
  };

to

  chartInstance.$zoom._mouseDownHandler = function (event) {
  	// CHANGED: only left mouse button is clicked - for zooming (drag mode)
  	if (event.button === 0) {
  		node.addEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);
  		chartInstance.$zoom._dragZoomStart = event;
  	}
  };

P. S. If you for example want to use left mouse button + SHIFT key for panning you should use if (eventType & INPUT_START && (((ev.button === 0) && (ev.shiftKey)) || isTouch)) and

  chartInstance.$zoom._mouseDownHandler = function (event) {
  	// CHANGED: left mouse button is clicked AND SHIFT key is up - for zooming (drag mode)
  	if ((event.button === 0) && (!event.shiftKey)) {
  		node.addEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);
  		chartInstance.$zoom._dragZoomStart = event;
  	}
  };

P. P. S. If you for example want to use left mouse button + SHIFT key for panning AND middle mouse button for resetting zoom: if (eventType & INPUT_START && (((ev.button === 0) && (ev.shiftKey)) || isTouch)) and

  chartInstance.$zoom._mouseDownHandler = function (event) {
  	// CHANGED: left mouse button is clicked AND SHIFT key is up - for zooming (drag mode)
  	if ((event.button === 0) && (!event.shiftKey)) {
  		node.addEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);
  		chartInstance.$zoom._dragZoomStart = event;
  	}

  	// CHANGED: middle mouse button is clicked - for resetting zoom
  	if (event.button === 1) {
  		chartInstance.resetZoom();
  	}
  };

Good luck.

[etimberg]

It seems like the best way to handle this kind of functionality is to use hooks that allow the user to block events.