7340e66cb860fa73cc651af31eb8fda2b668cb0d
max
  Wed Apr 5 11:41:31 2017 -0700
Modifying zoom dialog box so one does not have to see it by using
the modifier keys Alt or Ctrl/Cmd. Also allowing user to choose a color for the
highlight and allowing to delete all highlights in the View menu. refs #19118

diff --git src/hg/js/jquery.imgareaselect.js src/hg/js/jquery.imgareaselect.js
index 3a1582f..428a185 100644
--- src/hg/js/jquery.imgareaselect.js
+++ src/hg/js/jquery.imgareaselect.js
@@ -153,46 +153,46 @@
             x1 = viewX(resize[H] == 'w' ? selection.x2 : selection.x1);
             y1 = viewY(resize[V] == 'n' ? selection.y2 : selection.y1);
 
             jQuery(document).mousemove(selectingMouseMove);
             $border2.unbind('mousemove', areaMouseMove);
 
             jQuery(document).one('mouseup', function (event) {
                 selection.event = event;
                 resize = [ ];
 
                 jQuery('body').css('cursor', '');
 
                 if (options.autoHide)
                     $a.add($o).hide();
 
-                options.onSelectEnd(img, selection);
+                options.onSelectEnd(img, selection, event);
 
                 jQuery(document).unbind('mousemove', selectingMouseMove);
                 $border2.mousemove(areaMouseMove);
             });
         }
         else if (options.movable) {
             moveX = selection.x1 + left;
             moveY = selection.y1 + top;
             startX = evX(event);
             startY = evY(event);
 
             jQuery(document).mousemove(movingMouseMove)
                 .one('mouseup', function (event) {
                     selection.event = event;
-                    options.onSelectEnd(img, selection);
+                    options.onSelectEnd(img, selection, event);
 
                     jQuery(document).unbind('mousemove', movingMouseMove);
                 });
         }
         else
             jQuery(img).mousedown(event);
 
         return false;
     }
 
     function aspectRatioXY()
     {
         x2 = Math.max(left, Math.min(left + imgWidth,
             x1 + Math.abs(y2 - y1) * aspectRatio * (x2 >= x1 ? 1 : -1)));
         y2 = Math.round(Math.max(top, Math.min(top + imgHeight,
@@ -315,77 +315,77 @@
 
         if(options.clickClipHeight != null) {
             // This is necessary on IE to support clicks in an image which has map items.
             var found = false;
             if(typeof(options.clickClipHeight) == 'number') {
                 if(selection.y1 < options.clickClipHeight) {
                     found = true;
                 }
             } else {
                 for(var i = 0; !found && i < options.clickClipHeight.length; i++) {
                     if(selection.y1 >= options.clickClipHeight[i].top && selection.y1 < options.clickClipHeight[i].bottom) {
                         found = true;
                     }
                 }
             }
-            found = found || event.shiftKey;
+            found = found || event.shiftKey || event.metaKey || event.altKey || event.ctrlKey;
             if(!found) {
                 return false;
             }
         }
 
         resize = [ ];
 
         update();
         $a.add($o).show();
         $o.css('cursor', "crosshair"); // Outside of borders (needed for dragging right)
         $a.css('cursor', "crosshair"); // Inside borders (needed for dragging left)
 
         jQuery(document).unbind('mouseup', cancelSelection)
             .mousemove(selectingMouseMove);
         $border2.unbind('mousemove', areaMouseMove);
 
         options.onSelectStart(img, selection);
 
         jQuery(document).one('mouseup', function (event) {
             selection.event = event;
             if (options.autoHide || (selection.width * selection.height == 0))
                 $a.add($o).hide();
 
-            options.onSelectEnd(img, selection);
+            options.onSelectEnd(img, selection, event);
 
             //$o.css('cursor', ""); // Not even necessary
             //$a.css('cursor', "");
 
             jQuery(document).unbind('mousemove', selectingMouseMove);
             $border2.mousemove(areaMouseMove);
         });
     }
 
     function cancelSelection(event)
     {
         // The default behavior of imgareaselect is to cancel selection if the user let's go of the mouse before
         // moving it; we change the behavior so we can treat this as a single click, centering event.
         selection.event = event;
         jQuery(document).unbind('mousemove', startSelection);
         $a.add($o).hide();
 
         selection.x1 = selection.x2 = selX(startX = x1 = x2 = evX(event));
         selection.y1 = selection.y2 = selY(startY = y1 = y2 = evY(event));
 
         options.onSelectChange(img, selection);
-        options.onSelectEnd(img, selection);
+        options.onSelectEnd(img, selection, event);
     }
 
     function imgMouseDown(event)
     {
         if (event.which > 1 || event.button > 1) return true;
 
         jQuery(document).one('mousemove', startSelection)
             .one('mouseup', cancelSelection);
 
         return false;
     }
 
     function windowResize()
     {
         adjust();