GUAC-605: Move mouse and touch handling outside client attach.

guacamole/src/main/webapp/app/client/directives/guacClient.js

@@ -87,6 +87,44 @@ angular.module('client').directive('guacClient', [function guacClient() {
              */
             var displayElement = null;
 
+            /**
+             * The element which must contain the Guacamole display element.
+             *
+             * @type Element
+             */
+            var displayContainer = $element.find('.display')[0];
+
+            /**
+             * The main containing element for the entire directive.
+             * 
+             * @type Element
+             */
+            var main = $element[0];
+
+            /**
+             * Guacamole mouse event object, wrapped around the main client
+             * display.
+             *
+             * @type Guacamole.Mouse
+             */
+            var mouse = new Guacamole.Mouse(displayContainer);
+
+            /**
+             * Guacamole absolute mouse emulation object, wrapped around the
+             * main client display.
+             *
+             * @type Guacamole.Mouse.Touchscreen
+             */
+            var touchScreen = new Guacamole.Mouse.Touchscreen(displayContainer);
+
+            /**
+             * Guacamole relative mouse emulation object, wrapped around the
+             * main client display.
+             *
+             * @type Guacamole.Mouse.Touchpad
+             */
+            var touchPad = new Guacamole.Mouse.Touchpad(displayContainer);
+
             var $window             = $injector.get('$window'),
                 guacAudio           = $injector.get('guacAudio'),
                 guacVideo           = $injector.get('guacVideo'),
@@ -94,9 +132,6 @@ angular.module('client').directive('guacClient', [function guacClient() {
                 guacClientFactory   = $injector.get('guacClientFactory'),
                 localStorageUtility = $injector.get('localStorageUtility');
  
-            // Get elements for DOM manipulation
-            var main = $element[0];
-
             /**
              * Updates the scale of the attached Guacamole.Client based on current window
              * size and "auto-fit" setting.
@@ -163,51 +198,7 @@ angular.module('client').directive('guacClient', [function guacClient() {
 
             };
 
-            // Update active client if clipboard changes
+            // Send all received mouse events to the client
-            $scope.$watch('clipboard', function clipboardChange(data) {
-                if (client)
-                    client.setClipboard(data);
-            });
-
-            // Connect to given ID whenever ID changes
-            $scope.$watch('id', function(id) {
-
-                // If a client is already attached, ensure it is disconnected
-                if (client)
-                    client.disconnect();
-
-                // Only proceed if a new client is attached
-                if (!id)
-                    return;
-
-                // Get new client instance
-                var tunnel = guacTunnelFactory.getInstance();
-                client = guacClientFactory.getInstance(tunnel);
-
-                // Init display
-                display = client.getDisplay();
-                display.scale($scope.clientProperties.scale);
-
-                // Update the scale of the display when the client display size changes.
-                display.onresize = function() {
-                    $scope.safeApply(updateDisplayScale);
-                };
-
-                // Add display element
-                displayElement = display.getElement();
-                $element.find('.display').html("").append(displayElement);
-
-                // Do nothing when the display element is clicked on.
-                displayElement.onclick = function(e) {
-                    e.preventDefault();
-                    return false;
-                };
-
-                // Connect
-                client.connect(getConnectString());
-
-                // Directly handle mouse events on client display
-                var mouse = new Guacamole.Mouse(displayElement);
             mouse.onmousedown =
             mouse.onmouseup   =
             mouse.onmousemove = function(mouseState) {
@@ -238,26 +229,70 @@ angular.module('client').directive('guacClient', [function guacClient() {
                 display.showCursor(false);
             };
 
+            // Update active client if clipboard changes
+            $scope.$watch('clipboard', function clipboardChange(data) {
+                if (client)
+                    client.setClipboard(data);
+            });
+
+            // Connect to given ID whenever ID changes
+            $scope.$watch('id', function(id) {
+
+                // If a client is already attached, ensure it is disconnected
+                if (client)
+                    client.disconnect();
+
+                // Only proceed if a new client is attached
+                if (!id)
+                    return;
+
+                // Get new client instance
+                var tunnel = guacTunnelFactory.getInstance();
+                client = guacClientFactory.getInstance(tunnel);
+
+                // Init display
+                display = client.getDisplay();
+                display.scale($scope.clientProperties.scale);
+
+                // Update the scale of the display when the client display size changes.
+                display.onresize = function() {
+                    $scope.safeApply(updateDisplayScale);
+                };
+
                 // Use local cursor if possible, update localCursor flag
                 display.oncursor = function(canvas, x, y) {
                     localCursor = mouse.setCursor(canvas, x, y);
                 };
 
-                // Mouse emulation objects
+                // Add display element
-                var touchScreen = new Guacamole.Mouse.Touchscreen(displayElement);
+                displayElement = display.getElement();
-                var touchPad    = new Guacamole.Mouse.Touchpad(displayElement);
+                displayContainer.innerHTML = "";
+                displayContainer.appendChild(displayElement);
+
+                // Do nothing when the display element is clicked on.
+                displayElement.onclick = function(e) {
+                    e.preventDefault();
+                    return false;
+                };
+
+                // Connect
+                client.connect(getConnectString());
+
+            });
 
             // Watch for changes to mouse emulation mode
             $scope.$watch('clientProperties.emulateAbsoluteMouse', function(emulateAbsoluteMouse) {
 
+                if (!client || !display) return;
+
                 var handleMouseState = function handleMouseState(mouseState) {
 
                     // Ensure software cursor is shown
                     display.showCursor(true);
 
                     // Determine mouse position within view
-                        var mouse_view_x = mouseState.x + displayElement.offsetLeft - main.scrollLeft;
+                    var mouse_view_x = mouseState.x + displayContainer.offsetLeft - main.scrollLeft;
-                        var mouse_view_y = mouseState.y + displayElement.offsetTop  - main.scrollTop;
+                    var mouse_view_y = mouseState.y + displayContainer.offsetTop  - main.scrollTop;
 
                     // Determine viewport dimensions
                     var view_width  = main.offsetWidth;
@@ -329,8 +364,6 @@ angular.module('client').directive('guacClient', [function guacClient() {
 
             });
 
-            });
-
             // Adjust scale if modified externally
             $scope.$watch('clientProperties.scale', function changeScale(scale) {
 

guacamole/src/main/webapp/app/client/styles/client.css

@@ -76,6 +76,10 @@ div.displayMiddle {
     text-align: center;
 }
 
+div.display {
+    display: inline-block;
+}
+
 div.display * {
     position: relative;
 }