safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-07 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Jumper
2014-11-14 14:02:56 -08:00
parent 7956a0302d
commit 38153b49d3
2 changed files with 139 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
guacamole/src/main/webapp/app/client/directives/guacClient.js
View File

@@ -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
$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);
// Send all received mouse events to the client
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
var touchScreen = new Guacamole.Mouse.Touchscreen(displayElement);
var touchPad = new Guacamole.Mouse.Touchpad(displayElement);
// Add display element
displayElement = display.getElement();
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_y = mouseState.y + displayElement.offsetTop - main.scrollTop;
var mouse_view_x = mouseState.x + displayContainer.offsetLeft - main.scrollLeft;
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) {

4
guacamole/src/main/webapp/app/client/styles/client.css
View File

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