ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-29 17:38:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Plot] Use mct-drag from plot

Browse Source 
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.
This commit is contained in:
Victor Woeltjen 2015-06-20 11:47:10 -07:00
parent bc7342b127
commit 8199d1d9d9
3 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
platform/commonUI/general/src/directives/MCTDrag.js
View File

@ -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;
}
);
);

5
platform/features/plot/res/templates/plot.html
View File

@ -82,8 +82,9 @@
<mct-chart draw="subplot.getDrawingObject()"
ng-mousemove="subplot.hover($event)"
ng-mousedown="subplot.startMarquee($event)"
ng-mouseup="subplot.endMarquee($event); plot.update()">
mct-drag="subplot.continueDrag($event)"
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 -->

26
platform/features/plot/src/SubPlot.js
View File

@ -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;