ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-31 14:40:48 +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>
<mct-include key="'bottombar'"></mct-include>
</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".
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.
var midpointPosition = trackTouchPosition(midpoint, bounds),
newMidpointPosition = midpointPosition.positionAsPlotPoint,
newTouchPosition = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint,
trackTouchPosition(touches[1], bounds).positionAsPlotPoint];
console.log("0 Domain :" + newTouchPosition[0].domain);
console.log("0 Range :" + newTouchPosition[0].range);
console.log("1 Domain :" + newTouchPosition[1].domain);
console.log("1 Range :" + newTouchPosition[1].range);
$scope.viewport = {
topLeft: {
domain: (($scope.viewport.topLeft.domain)),
range: (($scope.viewport.topLeft.range))
},
bottomRight: {
domain: (($scope.viewport.bottomRight.domain)),
range: (($scope.viewport.bottomRight.range))
}
};
trackTouchPosition(touches[1], bounds).positionAsPlotPoint],
distanceRatio = firstTouchDistance / distance,
newViewport = calculateViewport(newTouchPosition, distanceRatio);
console.log(newViewport);
//$scope.$emit('user:viewport:change:end', newViewport);
$scope.viewport = newViewport;
}
function startZoom(midpoint, bounds, touches, distance) {
$scope.$emit('user:viewport:change:start');
firstTouches = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint,
trackTouchPosition(touches[1], bounds).positionAsPlotPoint];
firstTouchDistance = distance;
@ -327,17 +358,18 @@ define(
$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) {
$scope.$emit('user:viewport:change:start');
startZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance);
}
function onPinchChange(event, touch) {
updateZoom(touch.midpoint, touch.bounds, touch.touches);
updateZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance);
}
function onPanStart(event, touch) {