[Mobile] Gestures

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

View File

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

View File

@ -272,32 +272,63 @@ define(
updateAxesForCurrentViewport(); updateAxesForCurrentViewport();
} }
function updateZoom(midpoint, bounds, touches) { function calculateDistance(coordOne, coordTwo) {
// calculate offset between points. Apply that offset to viewport. return Math.sqrt(Math.pow(coordOne.clientX - coordTwo.clientX, 2) +
var midpointPosition = trackTouchPosition(midpoint, bounds), Math.pow(coordOne.clientY - coordTwo.clientY, 2));
newMidpointPosition = midpointPosition.positionAsPlotPoint, }
newTouchPosition = [trackTouchPosition(touches[0], bounds).positionAsPlotPoint,
trackTouchPosition(touches[1], bounds).positionAsPlotPoint];
console.log("0 Domain :" + newTouchPosition[0].domain); function calculateViewport(touchPostion, ratio) {
console.log("0 Range :" + newTouchPosition[0].range); var tl, br;
console.log("1 Domain :" + newTouchPosition[1].domain); if (ratio < 1) {
console.log("1 Range :" + newTouchPosition[1].range); 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
};
}
$scope.viewport = { return {
topLeft: { topLeft: {
domain: (($scope.viewport.topLeft.domain)), domain: (($scope.viewport.topLeft.domain) + tl.domain),
range: (($scope.viewport.topLeft.range)) range: (($scope.viewport.topLeft.range) - tl.range)
}, },
bottomRight: { bottomRight: {
domain: (($scope.viewport.bottomRight.domain)), domain: (($scope.viewport.bottomRight.domain) - br.domain),
range: (($scope.viewport.bottomRight.range)) 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],
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) { 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;
@ -333,11 +364,12 @@ define(
} }
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) {