diff --git a/guacamole/src/main/webapp/app/client/clientModule.js b/guacamole/src/main/webapp/app/client/clientModule.js index 38eee4bbb..cb66904a6 100644 --- a/guacamole/src/main/webapp/app/client/clientModule.js +++ b/guacamole/src/main/webapp/app/client/clientModule.js @@ -23,4 +23,4 @@ /** * The module for code used to connect to a connection or balancing group. */ -angular.module('client', ['auth', 'history', 'osk', 'rest', 'textInput']); +angular.module('client', ['auth', 'history', 'osk', 'rest', 'textInput', 'touch']); diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index e0efc341c..d5367c31e 100644 --- a/guacamole/src/main/webapp/app/client/controllers/clientController.js +++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js @@ -26,6 +26,30 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams', '$injector', function clientController($scope, $routeParams, $injector) { + /** + * The minimum number of pixels a drag gesture must move to result in the + * menu being shown or hidden. + * + * @type Number + */ + var MENU_DRAG_DELTA = 64; + + /** + * The maximum X location of the start of a drag gesture for that gesture + * to potentially show the menu. + * + * @type Number + */ + var MENU_DRAG_MARGIN = 64; + + /** + * When showing or hiding the menu via a drag gesture, the maximum number + * of pixels the touch can move vertically and still affect the menu. + * + * @type Number + */ + var MENU_DRAG_VERTICAL_TOLERANCE = 10; + /* * In order to open the guacamole menu, we need to hit ctrl-alt-shift. There are * several possible keysysms for each key. @@ -201,6 +225,99 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams', return true; } + // Hide menu when the user swipes from the right + $scope.menuDrag = function menuDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) { + + if (Math.abs(currentY - startY) < MENU_DRAG_VERTICAL_TOLERANCE + && startX - currentX >= MENU_DRAG_DELTA) + $scope.menuShown = false; + + }; + + // Update menu or client based on dragging gestures + $scope.clientDrag = function clientDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) { + + // Show menu if the user swipes from the left + if (startX <= MENU_DRAG_MARGIN) { + + if (Math.abs(currentY - startY) < MENU_DRAG_VERTICAL_TOLERANCE + && currentX - startX >= MENU_DRAG_DELTA) + $scope.menuShown = true; + + } + + // Scroll display if absolute mouse is in use + else if ($scope.clientProperties.emulateAbsoluteMouse) { + $scope.clientProperties.scrollLeft -= deltaX; + $scope.clientProperties.scrollTop -= deltaY; + } + + return false; + + }; + + /** + * If a pinch gesture is in progress, the scale of the client display when + * the pinch gesture began. + * + * @type Number + */ + var initialScale = null; + + /** + * If a pinch gesture is in progress, the X coordinate of the point on the + * client display that was centered within the pinch at the time the + * gesture began. + * + * @type Number + */ + var initialCenterX = 0; + + /** + * If a pinch gesture is in progress, the Y coordinate of the point on the + * client display that was centered within the pinch at the time the + * gesture began. + * + * @type Number + */ + var initialCenterY = 0; + + // Zoom and pan client via pinch gestures + $scope.clientPinch = function clientPinch(inProgress, startLength, currentLength, centerX, centerY) { + + // Stop gesture if not in progress + if (!inProgress) { + initialScale = null; + return false; + } + + // Set initial scale if gesture has just started + if (!initialScale) { + initialScale = $scope.clientProperties.scale; + initialCenterX = (centerX + $scope.clientProperties.scrollLeft) / initialScale; + initialCenterY = (centerY + $scope.clientProperties.scrollTop) / initialScale; + } + + // Determine new scale absolutely + currentScale = initialScale * currentLength / startLength; + + // Fix scale within limits - scroll will be miscalculated otherwise + currentScale = Math.max(currentScale, $scope.clientProperties.minScale); + currentScale = Math.min(currentScale, $scope.clientProperties.maxScale); + + // Update scale based on pinch distance + $scope.autoFit = false; + $scope.clientProperties.autoFit = false; + $scope.clientProperties.scale = currentScale; + + // Scroll display to keep original pinch location centered within current pinch + $scope.clientProperties.scrollLeft = initialCenterX * currentScale - centerX; + $scope.clientProperties.scrollTop = initialCenterY * currentScale - centerY; + + return false; + + }; + // Show/hide UI elements depending on input method $scope.$watch('inputMethod', function setInputMethod(inputMethod) { diff --git a/guacamole/src/main/webapp/app/client/directives/guacClient.js b/guacamole/src/main/webapp/app/client/directives/guacClient.js index 8c330805a..1ef3bcdec 100644 --- a/guacamole/src/main/webapp/app/client/directives/guacClient.js +++ b/guacamole/src/main/webapp/app/client/directives/guacClient.js @@ -318,6 +318,20 @@ angular.module('client').directive('guacClient', [function guacClient() { client.setClipboard(data); }); + /* + * SCROLLING + */ + + $scope.$watch('clientProperties.scrollLeft', function scrollLeftChanged(scrollLeft) { + main.scrollLeft = scrollLeft; + $scope.clientProperties.scrollLeft = main.scrollLeft; + }); + + $scope.$watch('clientProperties.scrollTop', function scrollTopChanged(scrollTop) { + main.scrollTop = scrollTop; + $scope.clientProperties.scrollTop = main.scrollTop; + }); + /* * CONNECT / RECONNECT */ diff --git a/guacamole/src/main/webapp/app/client/styles/display.css b/guacamole/src/main/webapp/app/client/styles/display.css index a606514e4..41b635915 100644 --- a/guacamole/src/main/webapp/app/client/styles/display.css +++ b/guacamole/src/main/webapp/app/client/styles/display.css @@ -35,6 +35,7 @@ div.main { width: 100%; height: 100%; position: relative; + font-size: 0px; } .resize-sensor { diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index 4528040d2..bde23deee 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -24,7 +24,7 @@
-
+
-