javascriptdom-eventsmousefabricjsopenseadragon

How to drag an Openseadragon canvas with mouse middle wheel button


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?


Solution

  • 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.