How to drag an Openseadragon canvas with mouse middle wheel button

Question

I am using Openseadragon library with fabricjs overlay. I have a case where I want to drag the canvas but instead of mouse primary button, I want to drag it with middle mouse button press. Could anyone please help me get the desired behavior?

Answer 1

OpenSeadragon doesn't have a flag for that, but you can easily build it using the MouseTracker. Here's an example (coded from memory and not tested, but it should give you the idea).

var drag;

var mouseTracker = new OpenSeadragon.MouseTracker({
  element: viewer.container, 
  nonPrimaryPressHandler: function(event) {
    if (event.button === 1) { // Middle
      drag = { 
        lastPos: event.position.clone()
      };
    }
  },
  moveHandler: function(event) {
    if (drag) {
      var deltaPixels = drag.lastPos.minus(event.position);
      var deltaPoints = viewer.viewport.deltaPointsFromPixels(deltaPixels);
      viewer.viewport.panBy(deltaPoints);
      drag.lastPos = event.position.clone();
    }
  },
  nonPrimaryReleaseHandler: function(event) {
    if (event.button === 1) {
      drag = null;
    }
  }
});

EDIT: I had a bug in the example code above; fixed.

Answer 2

Expanding on @iangilman 's answer...

To improve the user experience when the middle button is released outside the MouseTracker's element while dragging, causing the nonPrimaryReleaseHandler to never get called, the pointer can be captured...something like this:

var trackerElement = viewer.container;
var drag;

function capturePointer(event) {
  if (OpenSeadragon.MouseTracker.havePointerCapture) {
    if (OpenSeadragon.MouseTracker.havePointerEvents) {
      // Can throw InvalidPointerId
      try {
        trackerElement.setPointerCapture(event.originalEvent.pointerId);
      } catch () {
        //
      }
    } else {
        trackerElement.setCapture(true);
    }
  }
}

function releasePointer(event) {
  if (OpenSeadragon.MouseTracker.havePointerCapture) {
    if (OpenSeadragon.MouseTracker.havePointerEvents) {
      // Can throw InvalidPointerId
      try {
        trackerElement.releasePointerCapture(event.originalEvent.pointerId);
      } catch () {
        //
      }
    } else {
        trackerElement.releaseCapture();
    }
  }
}

var mouseTracker = new OpenSeadragon.MouseTracker({
  element: trackerElement,
  nonPrimaryPressHandler: function(event) {
    if (event.button === 1) { // Middle
      capturePointer(event);
      drag = {
        lastPos: event.position.clone()
      };
    }
  },
  moveHandler: function(event) {
    if (drag) {
      var deltaPixels = drag.lastPos.minus(event.position);
      var deltaPoints = viewer.viewport.deltaPointsFromPixels(deltaPixels);
      viewer.viewport.panBy(deltaPoints);
      drag.lastPos = event.position.clone();
    }
  },
  nonPrimaryReleaseHandler: function(event) {
    if (event.button === 1) {
      releasePointer(event);
      drag = null;
    }
  }
});