We don't have direct support for that, but you could probably add it. The MouseTracker has a nonPrimaryPressHandler and nonPrimaryReleaseHandler. Those two, combined with the moveHandler, should give you the tools you need. Let me know if that makes sense.

Thanks, but I added mouseTarcker, but it didn't work.
var viewer = OpenSeadragon({....})

Could you tell me where I made a mistake?

I don't know... that looks pretty good. It would be easier for me to try if you shared a text version of your code.

Anyway, looks like the viewer already has canvas-nonprimary-press events built in... I didn't realize that! You can just take advantage of those. It doesn't look like it has move events though, so you'll need a MouseTracker for that. I tried this and it worked:

        var nonPrimaryDown = false;

        // Need to prevent the context menu or it'll interfere with dragging.
        viewer.canvas.addEventListener('contextmenu', function(event) {
            event.preventDefault();
        });

        viewer.addHandler('canvas-nonprimary-press', function() {
            console.log('nonprimary press');
            nonPrimaryDown = true;
        });

        viewer.addHandler('canvas-nonprimary-release', function() {
            console.log('nonprimary release');
            nonPrimaryDown = false;
        });

        new OpenSeadragon.MouseTracker({
            element: viewer.canvas,
            moveHandler: function() {
                if (nonPrimaryDown) {
                    console.log('nonprimary drag');
                }
            }
        });

Let me know if that works for you!

Thanks a lot, the OpenSeadragon version I am using is 2.3.1, I use the way you provide, it works, it prints 'non-primary drag', but the image doesn't move when I use the right mouse.

Oh! Of course you still need to pan in the moveHandler. I was just telling you how to get the correct events.

Anyway, panning might look like this:

var nonPrimaryDown = false;
var dragPosition;

// Need to prevent the context menu or it'll interfere with dragging.
viewer.canvas.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

viewer.addHandler('canvas-nonprimary-press', function() {
    console.log('nonprimary press');
    nonPrimaryDown = true;
    dragPosition = event.position.clone();
});

viewer.addHandler('canvas-nonprimary-release', function() {
    console.log('nonprimary release');
    nonPrimaryDown = false;
});

new OpenSeadragon.MouseTracker({
    element: viewer.canvas,
    moveHandler: function(event) {
        if (nonPrimaryDown) {
            console.log('nonprimary drag');
            var delta = event.position.minus(dragPosition);
            viewer.viewport.panBy(viewer.viewport.deltaPointsFromPixels(delta.negate()));
        }
    }
});

I haven't tried running that code, but it's the basic idea at least. If you want to replicate all of the viewer's drag handling, take a look at how it does it, especially this section:

https://github.com/openseadragon/openseadragon/blob/master/src/viewer.js#L2786-L2818

thank you very much! You gave me a lot of help.

WIP Note to self: Add nonprimary-move (and possibly resulting gesture) event support

I am only getting right mouse events using nonPrimaryPressHandler. Why left mouse press is not working?
Also clickHandler and dragHandler does not work. Why is it so!

@chiliblast do you have an example of this issue in action?

@msalsbery any thoughts?

@chiliblast

Only non-primary pointer button events are handled with nonPrimaryPressHandler/nonPrimaryReleaseHandler. Assuming your left pointer button is the primary button, you'd use pressHandler/releaseHandler.

clickHandler and dragHandler only work on primary pointer button presses/releases

@msalsbery
@iangilman

I am trying to get left mouse press and release and drag events in openseadragon. Only nonPrimaryPressHandler, nonPrimaryReleaseHandler and moveHandler are working. but onPrimaryPressHandler, nonPrimaryReleaseHandler are only working for right mouse event. Also canvas events does not work for left mouse events. How can I get left mouse press, release?

this.mouseTracker = new OpenSeadragon.MouseTracker({

element: this.viewer.container,

    clickHandler: function (evt) {
        console.log(evt)
    },
    dragHandler: function (evt) {
        console.log(evt)
  },
  pressHandler: function(evt) {
  console.log(evt)
  },
  moveHandler: function(evt) {
  console.log(evt)
  },
  nonPrimaryPressHandler: function(evt) {
  console.log(evt)
  },
  nonPrimaryReleaseHandler: function(evt) {
  console.log(evt)
  }
});

@chiliblast

Attaching a MouseTracker to the Viewer.container element won't work, as primary button events don't bubble from the Viewer.element element (in v3.0.0 they will)

It may be easier to subscribe to the Viewer canvas-click, canvas-drag, canvas-press, canvas-release, etc. events if you want to handle primary button events on the viewer...

e.g.

    this.viewer.addHandler('canvas-click', (event) => {
      if (event.quick) {
        // ... do something ...

        // Prevent default click-to-zoom behavior
        event.preventDefaultAction = true;
      }
    });

@msalsbery
Thanks, It worked

I have a question. There is a speed exceeding problem when the right button moves, and it cannot be controlled by the speed like the left button.I added event throttling but it didn't take effect.

@Ghostisme I'm not sure what you're referring to. Can you explain further, or share a video, or a link? What settings did you use and what effect are you seeing?

@iangilman sure, The demo case I quoted above is to achieve panning, but I found it is not very friendly, it is not as smooth as the left key panning. So I want to ask how to make the translation of the right button as smooth as the left button.And I also tried to use the source code to implement it, but it doesn't work.
The following is a screenshot of some of my processing logic.

@Ghostisme Gotcha. You might be interested in #2258... Sounds like it might do what you're talking about?

@iangilman Oh, it's not #2258, it's the current issue, it's just the right-click translation that I need to complete

@Ghostisme I see! As I mentioned there, I hadn't tried running the code when I wrote it. I've now tried it, and sure enough, there were a couple of bugs. Here's the correct version:

var dragPosition;

// Need to prevent the context menu or it'll interfere with dragging.
viewer.canvas.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

viewer.addHandler('canvas-nonprimary-press', function(event) { // The event parameter was missing here
    console.log('nonprimary press');
    nonPrimaryDown = true;
    dragPosition = event.position.clone();
});

viewer.addHandler('canvas-nonprimary-release', function() {
    console.log('nonprimary release');
    nonPrimaryDown = false;
});

new OpenSeadragon.MouseTracker({
    element: viewer.canvas,
    moveHandler: function(event) {
        if (nonPrimaryDown) {
            console.log('nonprimary drag', event);
            var delta = event.position.minus(dragPosition);
            viewer.viewport.panBy(viewer.viewport.deltaPointsFromPixels(delta.negate()));
            dragPosition = event.position.clone(); // This line was missing
        }
    }
});

Let me know if that works! I've added comments on the bits that needed fixing.

@iangilman Whoa, cool, I tried it and it was exactly what I was looking for, thanks a lot

@iangilman Hi! I have tried your code:

var dragPosition;

// Need to prevent the context menu or it'll interfere with dragging.
viewer.canvas.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

viewer.addHandler('canvas-nonprimary-press', function(event) { // The event parameter was missing here
    console.log('nonprimary press');
    nonPrimaryDown = true;
    dragPosition = event.position.clone();
});

viewer.addHandler('canvas-nonprimary-release', function() {
    console.log('nonprimary release');
    nonPrimaryDown = false;
});

new OpenSeadragon.MouseTracker({
    element: viewer.canvas,
    moveHandler: function(event) {
        if (nonPrimaryDown) {
            console.log('nonprimary drag', event);
            var delta = event.position.minus(dragPosition);
            viewer.viewport.panBy(viewer.viewport.deltaPointsFromPixels(delta.negate()));
            dragPosition = event.position.clone(); // This line was missing
        }
    }
});

And it works really well. However, how do I make these config: visibilityRatio: 1.0, constrainDuringPan: true, to work as well when using the right mouse? It seems that the config only applies to the left click. Is there a way to move the function of left click to the right click?

If you want to apply the constraints while you pan you can add viewer.viewport.applyConstraints(true).

There is currently no way to just swap left and right button handling.

I see. I understand. Thank you!

WIP Note to self: Add nonprimary-move (and possibly resulting gesture) event support

WIP #2258

Hi @iangilman — this is helpful! Although it differs from the standard left-mouse pan behavior in that the Mousetracker doesn't fire when you drag past the edge of the canvas, nor does the canvas-nonprimary-release event fire if you release outside of the canvas. The left-mouse drag doesn't have this problem—it correctly tracks even if you drag past the edge of the canvas.

Hi @iangilman — this is helpful! Although it differs from the standard left-mouse pan behavior in that the Mousetracker doesn't fire when you drag past the edge of the canvas, nor does the canvas-nonprimary-release event fire if you release outside of the canvas. The left-mouse drag doesn't have this problem—it correctly tracks even if you drag past the edge of the canvas.

Pointer capture needs to be used to get the primary button behavior when the pointer moves outside the tracked element. Pointer capture, along with "chorded" button presses, is what complicates implementing the feature enhancement. Hopefully I'll have something working soon...