ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-18 08:23:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] Clean Up

Browse Source 
Reorganizaed MCTPlot touch
functions to be in suitable order. Also
made code DRYer by removing unnecessary functions
and combining statements that are used once. Also
renamed variables to differentiate similar ones
from one another. Added marks to show where
comments are needed (will be edited in next
commit).
This commit is contained in:
Shivam Dave 2015-09-02 12:45:52 -07:00
parent d1055f0839
commit f9be00a70f
1 changed files with 65 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
platform/features/plot-reborn/src/directives/MCTPlot.js
View File

@ -45,10 +45,9 @@ define(
marqueeBox = {}, marqueeBox = {},
marqueeRect, // Set when exists. marqueeRect, // Set when exists.
chartElementBounds, chartElementBounds,
firstTouches,
firstTouch, firstTouch,
firstTouchDistance, firstTouchDistance,
lastTouchDistance, prevTouchDistance,
$canvas = $element.find('canvas'); $canvas = $element.find('canvas');
function updateAxesForCurrentViewport() { function updateAxesForCurrentViewport() {
@ -274,6 +273,38 @@ define(
updateAxesForCurrentViewport(); updateAxesForCurrentViewport();
} }
//
function updatePan(touch, bounds) {
var panPosition = trackTouchPosition(touch, bounds).positionAsPlotPoint,
dDomain = firstTouch.domain - panPosition.domain,
dRange = firstTouch.range - panPosition.range;
$scope.viewport = {
topLeft: {
domain: (($scope.viewport.topLeft.domain) + dDomain),
range: (($scope.viewport.topLeft.range) + dRange)
},
bottomRight: {
domain: (($scope.viewport.bottomRight.domain) + dDomain),
range: (($scope.viewport.bottomRight.range) + dRange)
}
};
}
function startPan(touch, bounds) {
$scope.$emit('user:viewport:change:start');
firstTouch = trackTouchPosition(touch, bounds).positionAsPlotPoint;
}
//
function onPanStart(event, touch) {
startPan(touch.touch, touch.bounds);
}
function onPanChange(event, touch) {
updatePan(touch.touch, touch.bounds);
}
function setDimensions(midpoint) { function setDimensions(midpoint) {
return { return {
tl: { tl: {
@ -288,127 +319,82 @@ define(
} }
function calculateViewport(midpoint, ratio) { function calculateViewport(midpoint, ratio) {
var tl, var zoomTL, zoomBR,
br,
dimensions = setDimensions(midpoint), dimensions = setDimensions(midpoint),
checkRatio = (ratio - 1) || 0, checkRatio = (ratio - 1) || 0,
type = (-1 * (checkRatio / Math.abs(checkRatio))) || 1; type = (-1 * (checkRatio / Math.abs(checkRatio))) || 1,
zoomAmt = type * ZOOM_AMT;
tl = { zoomTL = {
domain: type * ZOOM_AMT * dimensions.tl.domain, domain: zoomAmt * dimensions.tl.domain,
range: type * ZOOM_AMT * dimensions.tl.range range: zoomAmt * dimensions.tl.range
}; };
br = { zoomBR = {
domain: type * ZOOM_AMT * dimensions.br.domain, domain: zoomAmt * dimensions.br.domain,
range: type * ZOOM_AMT * dimensions.br.range range: zoomAmt * dimensions.br.range
}; };
return { return {
topLeft: { topLeft: {
domain: (($scope.viewport.topLeft.domain) + tl.domain), domain: (($scope.viewport.topLeft.domain) + zoomTL.domain),
range: (($scope.viewport.topLeft.range) - tl.range) range: (($scope.viewport.topLeft.range) - zoomTL.range)
}, },
bottomRight: { bottomRight: {
domain: (($scope.viewport.bottomRight.domain) - br.domain), domain: (($scope.viewport.bottomRight.domain) - zoomBR.domain),
range: (($scope.viewport.bottomRight.range) + br.range) range: (($scope.viewport.bottomRight.range) + zoomBR.range)
} }
}; };
} }
function updateZoom(midpoint, bounds, distance) { function updateZoom(midpoint, bounds, distance) {
// calculate offset between points. Apply that offset to viewport. var midpointPosition = trackTouchPosition(midpoint, bounds).positionAsPlotPoint,
var midpointPosition = trackTouchPosition(midpoint, bounds), distanceRatio = ((prevTouchDistance || firstTouchDistance) / distance);
newMidpointPosition = midpointPosition.positionAsPlotPoint,
distanceRatio = (lastTouchDistance / distance) || (firstTouchDistance / distance),
newViewport = calculateViewport(newMidpointPosition, distanceRatio);
$scope.viewport = newViewport; $scope.viewport = calculateViewport(midpointPosition, distanceRatio);
} }
function startZoom(midpoint, bounds, touches, distance) { function startZoom(midpoint, bounds, touches, distance) {
firstTouches = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint,
trackTouchPosition(touches[1], bounds).positionAsPlotPoint];
firstTouchDistance = distance; firstTouchDistance = distance;
firstTouch = trackTouchPosition(midpoint, bounds).positionAsPlotPoint; firstTouch = trackTouchPosition(midpoint, bounds).positionAsPlotPoint;
} }
function updatePan(touch, bounds) {
// calculate offset between points. Apply that offset to viewport.
var panPosition = trackTouchPosition(touch, bounds),
newPanPosition = panPosition.positionAsPlotPoint,
dDomain = firstTouch.domain - newPanPosition.domain,
dRange = firstTouch.range - newPanPosition.range;
$scope.viewport = {
topLeft: {
domain: (($scope.viewport.topLeft.domain) + dDomain),
range: (($scope.viewport.topLeft.range) + dRange)
},
bottomRight: {
domain: (($scope.viewport.bottomRight.domain) + dDomain),
range: (($scope.viewport.bottomRight.range) + dRange)
}
};
}
function startPan(touch, bounds) {
$scope.$emit('user:viewport:change:start');
firstTouch = trackTouchPosition(touch, bounds).positionAsPlotPoint;
}
function endTouch() {
$scope.$emit('user:viewport:change:end', $scope.viewport);
}
//
function onPinchStart(event, touch) { function onPinchStart(event, touch) {
$scope.$emit('user:viewport:change:start'); $scope.$emit('user:viewport:change:start');
startZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance); startZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance);
} }
function comparePinchDrag(distance, prevDistance) {
function comparePinchDrag(distance, firstDistance, lastDistance) { return ((prevDistance + PINCH_DRAG_AMT) >= distance) &&
return (((firstDistance + PINCH_DRAG_AMT) >= distance) && ((prevDistance - PINCH_DRAG_AMT) <= distance);
((firstDistance - PINCH_DRAG_AMT) <= distance)) ||
(((lastDistance + PINCH_DRAG_AMT) >= distance) &&
((lastDistance - PINCH_DRAG_AMT) <= distance));
} }
function onPinchChange(event, touch) { function onPinchChange(event, touch) {
if(comparePinchDrag(Math.round(touch.distance), if(comparePinchDrag(Math.round(touch.distance),
Math.round(firstTouchDistance), Math.round(prevTouchDistance || firstTouchDistance))) {
Math.round(lastTouchDistance))) {
//console.log("# PINCH PAN");
updatePan(touch.midpoint, touch.bounds); updatePan(touch.midpoint, touch.bounds);
} else { } else {
//console.log("# PINCH ZOOM");
updateZoom(touch.midpoint, touch.bounds, touch.distance); updateZoom(touch.midpoint, touch.bounds, touch.distance);
} }
lastTouchDistance = touch.distance; prevTouchDistance = touch.distance;
}
function onPanStart(event, touch) {
startPan(touch.touch, touch.bounds);
}
function onPanChange(event, touch) {
updatePan(touch.touch, touch.bounds);
} }
//
function onTouchEnd() { function onTouchEnd() {
endTouch(); $scope.$emit('user:viewport:change:end', $scope.viewport);
} }
$scope.$watchCollection('viewport', onViewportChange);
$scope.$on('mct:pan:start', onPanStart);
$scope.$on('mct:pan:change', onPanChange);
$scope.$on('mct:pinch:start', onPinchStart); $scope.$on('mct:pinch:start', onPinchStart);
$scope.$on('mct:pinch:change', onPinchChange); $scope.$on('mct:pinch:change', onPinchChange);
$scope.$on('mct:pan:start', onPanStart);
$scope.$on('mct:pan:change', onPanChange);
$scope.$on('mct:ptouch:end', onTouchEnd); $scope.$on('mct:ptouch:end', onTouchEnd);
$scope.$on('$destroy', stopWatching); $scope.$on('$destroy', stopWatching);
$scope.$watchCollection('viewport', onViewportChange);
} }
return { return {