graph(create annotation): refactor, fix two modal after range selection

bind create annotation handler directly to plotclick event, not to global graph-click

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

@@ -79,22 +79,6 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
         }
       }, scope);
 
-      appEvents.on('graph-click', (event) => {
-        // Add event only for selected panel
-        let thisPanelEvent = event.panel.id === ctrl.panel.id;
-
-        // Select time for new annotation
-        let createAnnotation = event.pos.ctrlKey || event.pos.metaKey;
-        if (createAnnotation && thisPanelEvent) {
-          let timeRange = {
-            from: event.pos.x,
-            to: null
-          };
-
-          ctrl.showAddAnnotationModal(timeRange);
-        }
-      }, scope);
-
       function getLegendHeight(panelHeight) {
         if (!panel.legend.show || panel.legend.rightSide) {
           return 0;
@@ -670,6 +654,20 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
         }
       });
 
+      elem.bind("plotclick", function (event, pos, item) {
+        // Skip if range selected (added in "plotselected" event handler)
+        let isRangeSelection = pos.x !== pos.x1;
+        let createAnnotation = !isRangeSelection && (pos.ctrlKey || pos.metaKey);
+        if (createAnnotation) {
+          let timeRange = {
+            from: pos.x,
+            to: null
+          };
+
+          ctrl.showAddAnnotationModal(timeRange);
+        }
+      });
+
       scope.$on('$destroy', function() {
         tooltip.destroy();
         elem.off();