graph(add annotation): refactor

pass ctrlKey and metaKey through flot events

public/app/plugins/panel/graph/graph.ts

@@ -84,7 +84,8 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
         let thisPanelEvent = event.panel.id === ctrl.panel.id;
 
         // Select time for new annotation
-        if (ctrl.inAddAnnotationMode && thisPanelEvent) {
+        let createAnnotation = ctrl.inAddAnnotationMode || event.pos.ctrlKey || event.pos.metaKey;
+        if (createAnnotation && thisPanelEvent) {
           let timeRange = {
             from: event.pos.x,
             to: null
@@ -95,22 +96,6 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
         }
       }, scope);
 
-      // Add keybinding for Add Annotation mode
-      $(document).keydown(onCtrlKeyDown);
-      $(document).keyup(onCtrlKeyUp);
-
-      function onCtrlKeyDown(event) {
-        if (event.key === 'Control') {
-          ctrl.inAddAnnotationMode = true;
-        }
-      }
-
-      function onCtrlKeyUp(event) {
-        if (event.key === 'Control') {
-          ctrl.inAddAnnotationMode = false;
-        }
-      }
-
       function getLegendHeight(panelHeight) {
         if (!panel.legend.show || panel.legend.rightSide) {
           return 0;
@@ -671,8 +656,8 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
       }
 
       elem.bind("plotselected", function (event, ranges) {
-        if (ctrl.inAddAnnotationMode) {
-          // Select time range for new annotation
+        if (ctrl.inAddAnnotationMode || ranges.ctrlKey || ranges.metaKey) {
+          // Create new annotation from time range
           let timeRange = ranges.xaxis;
           ctrl.showAddAnnotationModal(timeRange);
           plot.clearSelection();

public/vendor/flot/jquery.flot.js

@@ -2972,6 +2972,10 @@ Licensed under the MIT license.
             pos.pageX = event.pageX;
             pos.pageY = event.pageY;
 
+            // Add ctrlKey and metaKey to event
+            pos.ctrlKey = event.ctrlKey;
+            pos.metaKey = event.metaKey;
+
             var item = findNearbyItem(canvasX, canvasY, seriesFilter);
 
             if (item) {

public/vendor/flot/jquery.flot.selection.js

@@ -145,7 +145,7 @@ The plugin allso adds the following methods to the plot object:
             updateSelection(e);
 
             if (selectionIsSane())
-                triggerSelectedEvent();
+                triggerSelectedEvent(e);
             else {
                 // this counts as a clear
                 plot.getPlaceholder().trigger("plotunselected", [ ]);
@@ -180,9 +180,13 @@ The plugin allso adds the following methods to the plot object:
             return r;
         }
 
-        function triggerSelectedEvent() {
+        function triggerSelectedEvent(event) {
             var r = getSelection();
 
+            // Add ctrlKey and metaKey to event
+            r.ctrlKey = event.ctrlKey;
+            r.metaKey = event.metaKey;
+
             plot.getPlaceholder().trigger("plotselected", [ r ]);
 
             // backwards-compat stuff, to be removed in future