How to drag an Openseadragon canvas with mouse middle wheel button Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to drag an Openseadragon canvas with mouse middle wheel button without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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.

We are here to answer your question about How to drag an Openseadragon canvas with mouse middle wheel button - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji