diff --git a/platform/commonUI/general/src/directives/MCTDrag.js b/platform/commonUI/general/src/directives/MCTDrag.js index b832123f0c..f12aae5c5f 100644 --- a/platform/commonUI/general/src/directives/MCTDrag.js +++ b/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; } -); \ No newline at end of file +); diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index dd1d5356f5..fa74ef14cb 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -82,8 +82,9 @@ + mct-drag="subplot.continueDrag($event)" + mct-drag-down="subplot.startDrag($event)" + mct-drag-up="subplot.endDrag($event); plot.update()"> diff --git a/platform/features/plot/src/SubPlot.js b/platform/features/plot/src/SubPlot.js index c94f9ceaf8..2d5d2cc43d 100644 --- a/platform/features/plot/src/SubPlot.js +++ b/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, - bounds = target.getBoundingClientRect(); + var bounds = subPlotBounds; 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;