fabric js select object on right click - events

Question

I am trying to make clicking the right mouse button behave like the left mouse button when clicking on objects.
This is the code I have been playing around with:
$(".upper-canvas").bind('contextmenu', function (env) {
canvas.on('mouse:over', function(e) {
canvas.setActiveObject(e.target);
});
return false;
})
But it doesn't behave as I thought it would.
After right clicking on an object, it doesn't select the object, but then it subsequently and continuously selects elements on hovering.
I, perhaps naively, assumed the hover event would only be active one time on right-clicking.

Answer 1

So long as you're only working with objects, this should work:
$(".upper-canvas").bind('contextmenu', function(ev) {
var pointer = canvas.getPointer(ev.originalEvent);
var objects = canvas.getObjects();
for (var i = objects.length - 1; i >= 0; i--) {
if (objects[i].containsPoint(pointer)) {
canvas.setActiveObject(objects[i]);
break;
}
}
if (i < 0) {
canvas.deactivateAll();
}
canvas.renderAll();
ev.preventDefault();
return false;
});
When a user right clicks in the canvas, it gets the (x, y) coordinates of the click. Then it looks through all the objects in the canvas and selects an object if it contains the point. I believe that fabric retains z-order in reverse order in the objects list, so this should respect that since it goes through the list backwards. If the click doesn't select any object, then it will deselect any selected objects. Finally, it prevents default and returns false to prevent the normal right click pop up from occurring.
This should work fairly well with objects, but it probably won't work super well with groups.