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

[Mobile] Gestures

Browse Source 
Currently zooms into center by narrowing each
dimension by 0.01
This commit is contained in:
Shivam Dave 2015-08-31 14:47:02 -07:00
parent 24fe419be4
commit d65e0f820f
2 changed files with 55 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/browse/res/templates/browse.html
View File

@ -48,4 +48,3 @@
</div> </div>
<mct-include key="'bottombar'"></mct-include> <mct-include key="'bottombar'"></mct-include>
</div> </div>

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

@ -271,33 +271,64 @@ define(
// TODO: Discuss whether marqueeBox start should be fixed to data or fixed to canvas element, especially when "isLive is true". // TODO: Discuss whether marqueeBox start should be fixed to data or fixed to canvas element, especially when "isLive is true".
updateAxesForCurrentViewport(); updateAxesForCurrentViewport();
} }
function updateZoom(midpoint, bounds, touches) { function calculateDistance(coordOne, coordTwo) {
return Math.sqrt(Math.pow(coordOne.clientX - coordTwo.clientX, 2) +
Math.pow(coordOne.clientY - coordTwo.clientY, 2));
}
function calculateViewport(touchPostion, ratio) {
var tl, br;
if (ratio < 1) {
tl = {
domain: 0.01,
range: 0.01
};
br = {
domain: 0.01,
range: 0.01
};
} else if (ratio > 1) {
tl = {
domain: - 0.01,
range: - 0.01
};
br = {
domain: - 0.01,
range: - 0.01
};
}
return {
topLeft: {
domain: (($scope.viewport.topLeft.domain) + tl.domain),
range: (($scope.viewport.topLeft.range) - tl.range)
},
bottomRight: {
domain: (($scope.viewport.bottomRight.domain) - br.domain),
range: (($scope.viewport.bottomRight.range) + br.range)
}
};
}
function updateZoom(midpoint, bounds, touches, distance) {
// calculate offset between points. Apply that offset to viewport. // calculate offset between points. Apply that offset to viewport.
var midpointPosition = trackTouchPosition(midpoint, bounds), var midpointPosition = trackTouchPosition(midpoint, bounds),
newMidpointPosition = midpointPosition.positionAsPlotPoint, newMidpointPosition = midpointPosition.positionAsPlotPoint,
newTouchPosition = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint, newTouchPosition = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint,
trackTouchPosition(touches[1], bounds).positionAsPlotPoint]; trackTouchPosition(touches[1], bounds).positionAsPlotPoint],
distanceRatio = firstTouchDistance / distance,
console.log("0 Domain :" + newTouchPosition[0].domain); newViewport = calculateViewport(newTouchPosition, distanceRatio);
console.log("0 Range :" + newTouchPosition[0].range);
console.log("1 Domain :" + newTouchPosition[1].domain); console.log(newViewport);
console.log("1 Range :" + newTouchPosition[1].range);
//$scope.$emit('user:viewport:change:end', newViewport);
$scope.viewport = { $scope.viewport = newViewport;
topLeft: {
domain: (($scope.viewport.topLeft.domain)),
range: (($scope.viewport.topLeft.range))
},
bottomRight: {
domain: (($scope.viewport.bottomRight.domain)),
range: (($scope.viewport.bottomRight.range))
}
};
} }
function startZoom(midpoint, bounds, touches, distance) { function startZoom(midpoint, bounds, touches, distance) {
$scope.$emit('user:viewport:change:start');
firstTouches = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint, firstTouches = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint,
trackTouchPosition(touches[1], bounds).positionAsPlotPoint]; trackTouchPosition(touches[1], bounds).positionAsPlotPoint];
firstTouchDistance = distance; firstTouchDistance = distance;
@ -327,17 +358,18 @@ define(
$scope.$emit('user:viewport:change:start'); $scope.$emit('user:viewport:change:start');
firstTouch = trackTouchPosition(touch, bounds).positionAsPlotPoint; firstTouch = trackTouchPosition(touch, bounds).positionAsPlotPoint;
} }
function endTouch() { function endTouch() {
$scope.$emit('user:viewport:change:end', $scope.viewport); $scope.$emit('user:viewport:change:end', $scope.viewport);
} }
function onPinchStart(event, touch) { function onPinchStart(event, touch) {
$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 onPinchChange(event, touch) { function onPinchChange(event, touch) {
updateZoom(touch.midpoint, touch.bounds, touch.touches); updateZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance);
} }
function onPanStart(event, touch) { function onPanStart(event, touch) {