[Plot] Use mct-drag from plot

Use mct-drag from plot such that we are able to handle
mouse events which leave the plot area for marquee zoom
and pan. WTD-1273.

platform/commonUI/general/src/directives/MCTDrag.js

@@ -57,13 +57,17 @@ define(
                 // mouse may leave this element during the drag.
                 var body = $document.find('body'),
                     initialPosition,
+                    $event,
                     delta;
 
                 // Utility function to cause evaluation of mctDrag,
                 // mctDragUp, etc
                 function fireListener(name) {
                     // Evaluate the expression, with current delta
-                    scope.$eval(attrs[name], { delta: delta });
+                    scope.$eval(attrs[name], {
+                        delta: delta,
+                        $event: $event
+                    });
 
                     // Trigger prompt digestion
                     scope.$apply();
@@ -82,6 +86,9 @@ define(
                     delta = currentPosition.map(function (v, i) {
                         return v - initialPosition[i];
                     });
+
+                    // Also track the plain event for firing listeners
+                    $event = event;
                 }
 
                 // Called during a drag, on mousemove
@@ -106,7 +113,7 @@ define(
 
                     fireListener("mctDragUp");
 
-                    // Clear out start-of-drag position
+                    // Clear out start-of-drag position, target
                     initialPosition = undefined;
 
                     // Don't show selection highlights, etc
@@ -131,6 +138,7 @@ define(
 
                     // Don't show selection highlights, etc
                     event.preventDefault();
+
                     return false;
                 }
 
@@ -148,4 +156,4 @@ define(
 
         return MCTDrag;
     }
-);
+);

platform/features/plot/res/templates/plot.html

@@ -82,8 +82,9 @@
 
                 <mct-chart draw="subplot.getDrawingObject()"
                            ng-mousemove="subplot.hover($event)"
-                           ng-mousedown="subplot.startMarquee($event)"
+                           mct-drag="subplot.continueDrag($event)"
-                           ng-mouseup="subplot.endMarquee($event); plot.update()">
+                           mct-drag-down="subplot.startDrag($event)"
+                           mct-drag-up="subplot.endDrag($event); plot.update()">
                 </mct-chart>
 
                 <!-- TODO: Move into correct position; make part of group; infer from set of actions -->

platform/features/plot/src/SubPlot.js

@@ -58,6 +58,7 @@ define(
                 marqueeStart,
                 panStart,
                 panStartBounds,
+                subPlotBounds,
                 hoverCoordinates,
                 isHovering = false;
 
@@ -90,8 +91,7 @@ define(
             // pixel coordinates in the canvas area) from a mouse
             // event object.
             function toMousePosition($event) {
-                var target = $event.target,
+                var bounds = subPlotBounds;
-                    bounds = target.getBoundingClientRect();
 
                 return {
                     x: $event.clientX - bounds.left,
@@ -262,6 +262,7 @@ define(
                  */
                 hover: function ($event) {
                     isHovering = true;
+                    subPlotBounds = $event.target.getBoundingClientRect();
                     mousePosition = toMousePosition($event);
                     updateHoverCoordinates();
                     if (marqueeStart) {
@@ -273,11 +274,27 @@ define(
                         updateTicks();
                     }
                 },
+                /**
+                 * Continue a previously-start pan or zoom gesture.
+                 * @param $event the mouse event
+                 */
+                continueDrag: function ($event) {
+                    mousePosition = toMousePosition($event);
+                    if (marqueeStart) {
+                        updateMarqueeBox();
+                    }
+                    if (panStart) {
+                        updatePan();
+                        updateDrawingBounds();
+                        updateTicks();
+                    }
+                },
                 /**
                  * Initiate a marquee zoom action.
                  * @param $event the mouse event
                  */
-                startMarquee: function ($event) {
+                startDrag: function ($event) {
+                    subPlotBounds = $event.target.getBoundingClientRect();
                     mousePosition = toMousePosition($event);
                     if (event.altKey) {
                         // Start panning
@@ -301,8 +318,9 @@ define(
                  * Complete a marquee zoom action.
                  * @param $event the mouse event
                  */
-                endMarquee: function ($event) {
+                endDrag: function ($event) {
                     mousePosition = toMousePosition($event);
+                    subPlotBounds = undefined;
                     if (marqueeStart) {
                         marqueeZoom(marqueeStart, mousePosition);
                         marqueeStart = undefined;