mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-06 21:27:40 +00:00
GUACAMOLE-724: Move handling of drag/pinch gestures to individual client tiles.
This commit is contained in:
Michael Jumper
@@ -400,112 +400,32 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide menu when the user swipes from the right
|
// Show menu if the user swipes from the left, hide menu when the user
|
||||||
|
// swipes from the right, scroll menu while visible
|
||||||
$scope.menuDrag = function menuDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {
|
$scope.menuDrag = function menuDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {
|
||||||
|
|
||||||
// Hide menu if swipe gesture is detected
|
if ($scope.menu.shown) {
|
||||||
if (Math.abs(currentY - startY) < MENU_DRAG_VERTICAL_TOLERANCE
|
|
||||||
&& startX - currentX >= MENU_DRAG_DELTA)
|
// Hide menu if swipe-from-right gesture is detected
|
||||||
$scope.menu.shown = false;
|
if (Math.abs(currentY - startY) < MENU_DRAG_VERTICAL_TOLERANCE
|
||||||
|
&& startX - currentX >= MENU_DRAG_DELTA)
|
||||||
|
$scope.menu.shown = false;
|
||||||
|
|
||||||
|
// Scroll menu by default
|
||||||
|
else {
|
||||||
|
$scope.menu.scrollState.left -= deltaX;
|
||||||
|
$scope.menu.scrollState.top -= deltaY;
|
||||||
|
}
|
||||||
|
|
||||||
// Scroll menu by default
|
|
||||||
else {
|
|
||||||
$scope.menu.scrollState.left -= deltaX;
|
|
||||||
$scope.menu.scrollState.top -= deltaY;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
// Show menu if swipe-from-left gesture is detected
|
||||||
|
else if (startX <= MENU_DRAG_MARGIN) {
|
||||||
};
|
|
||||||
|
|
||||||
// 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
|
if (Math.abs(currentY - startY) < MENU_DRAG_VERTICAL_TOLERANCE
|
||||||
&& currentX - startX >= MENU_DRAG_DELTA)
|
&& currentX - startX >= MENU_DRAG_DELTA)
|
||||||
$scope.menu.shown = true;
|
$scope.menu.shown = true;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Scroll display if absolute mouse is in use
|
|
||||||
else if ($scope.client.clientProperties.emulateAbsoluteMouse) {
|
|
||||||
$scope.client.clientProperties.scrollLeft -= deltaX;
|
|
||||||
$scope.client.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) {
|
|
||||||
|
|
||||||
// Do not handle pinch gestures if they would conflict with remote
|
|
||||||
// handling of similar gestures
|
|
||||||
if ($scope.client.multiTouchSupport > 1)
|
|
||||||
return false;
|
|
||||||
|
|
||||||
// Do not handle pinch gestures while relative mouse is in use
|
|
||||||
if (!$scope.client.clientProperties.emulateAbsoluteMouse)
|
|
||||||
return false;
|
|
||||||
|
|
||||||
// Stop gesture if not in progress
|
|
||||||
if (!inProgress) {
|
|
||||||
initialScale = null;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set initial scale if gesture has just started
|
|
||||||
if (!initialScale) {
|
|
||||||
initialScale = $scope.client.clientProperties.scale;
|
|
||||||
initialCenterX = (centerX + $scope.client.clientProperties.scrollLeft) / initialScale;
|
|
||||||
initialCenterY = (centerY + $scope.client.clientProperties.scrollTop) / initialScale;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine new scale absolutely
|
|
||||||
var currentScale = initialScale * currentLength / startLength;
|
|
||||||
|
|
||||||
// Fix scale within limits - scroll will be miscalculated otherwise
|
|
||||||
currentScale = Math.max(currentScale, $scope.client.clientProperties.minScale);
|
|
||||||
currentScale = Math.min(currentScale, $scope.client.clientProperties.maxScale);
|
|
||||||
|
|
||||||
// Update scale based on pinch distance
|
|
||||||
$scope.client.clientProperties.autoFit = false;
|
|
||||||
$scope.client.clientProperties.scale = currentScale;
|
|
||||||
|
|
||||||
// Scroll display to keep original pinch location centered within current pinch
|
|
||||||
$scope.client.clientProperties.scrollLeft = initialCenterX * currentScale - centerX;
|
|
||||||
$scope.client.clientProperties.scrollTop = initialCenterY * currentScale - centerY;
|
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -22,463 +22,550 @@
|
|||||||
*/
|
*/
|
||||||
angular.module('client').directive('guacClient', [function guacClient() {
|
angular.module('client').directive('guacClient', [function guacClient() {
|
||||||
|
|
||||||
return {
|
var directive = {
|
||||||
// Element only
|
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
replace: true,
|
replace: true,
|
||||||
scope: {
|
templateUrl: 'app/client/templates/guacClient.html'
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
directive.scope = {
|
||||||
* The client to display within this guacClient directive.
|
|
||||||
*
|
/**
|
||||||
* @type ManagedClient
|
* The client to display within this guacClient directive.
|
||||||
*/
|
*
|
||||||
client : '='
|
* @type ManagedClient
|
||||||
|
*/
|
||||||
|
client : '=',
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether translation of touch to mouse events should emulate an
|
||||||
|
* absolute pointer device, or a relative pointer device.
|
||||||
|
*
|
||||||
|
* @type boolean
|
||||||
|
*/
|
||||||
|
emulateAbsoluteMouse : '='
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
directive.controller = ['$scope', '$injector', '$element',
|
||||||
|
function guacClientController($scope, $injector, $element) {
|
||||||
|
|
||||||
|
// Required types
|
||||||
|
var ManagedClient = $injector.get('ManagedClient');
|
||||||
|
|
||||||
},
|
// Required services
|
||||||
templateUrl: 'app/client/templates/guacClient.html',
|
var $window = $injector.get('$window');
|
||||||
controller: ['$scope', '$injector', '$element', function guacClientController($scope, $injector, $element) {
|
|
||||||
|
/**
|
||||||
// Required types
|
* Whether the local, hardware mouse cursor is in use.
|
||||||
var ManagedClient = $injector.get('ManagedClient');
|
*
|
||||||
|
* @type Boolean
|
||||||
// Required services
|
*/
|
||||||
var $window = $injector.get('$window');
|
var localCursor = false;
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the local, hardware mouse cursor is in use.
|
|
||||||
*
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
var localCursor = false;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The current Guacamole client instance.
|
* The current Guacamole client instance.
|
||||||
*
|
*
|
||||||
* @type Guacamole.Client
|
* @type Guacamole.Client
|
||||||
*/
|
*/
|
||||||
var client = null;
|
var client = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The display of the current Guacamole client instance.
|
* The display of the current Guacamole client instance.
|
||||||
*
|
*
|
||||||
* @type Guacamole.Display
|
* @type Guacamole.Display
|
||||||
*/
|
*/
|
||||||
var display = null;
|
var display = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The element associated with the display of the current
|
* The element associated with the display of the current
|
||||||
* Guacamole client instance.
|
* Guacamole client instance.
|
||||||
*
|
*
|
||||||
* @type Element
|
* @type Element
|
||||||
*/
|
*/
|
||||||
var displayElement = null;
|
var displayElement = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The element which must contain the Guacamole display element.
|
* The element which must contain the Guacamole display element.
|
||||||
*
|
*
|
||||||
* @type Element
|
* @type Element
|
||||||
*/
|
*/
|
||||||
var displayContainer = $element.find('.display')[0];
|
var displayContainer = $element.find('.display')[0];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The main containing element for the entire directive.
|
* The main containing element for the entire directive.
|
||||||
*
|
*
|
||||||
* @type Element
|
* @type Element
|
||||||
*/
|
*/
|
||||||
var main = $element[0];
|
var main = $element[0];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The element which functions as a detector for size changes.
|
* Guacamole mouse event object, wrapped around the main client
|
||||||
*
|
* display.
|
||||||
* @type Element
|
*
|
||||||
*/
|
* @type Guacamole.Mouse
|
||||||
var resizeSensor = $element.find('.resize-sensor')[0];
|
*/
|
||||||
|
var mouse = new Guacamole.Mouse(displayContainer);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Guacamole mouse event object, wrapped around the main client
|
* Guacamole absolute mouse emulation object, wrapped around the
|
||||||
* display.
|
* main client display.
|
||||||
*
|
*
|
||||||
* @type Guacamole.Mouse
|
* @type Guacamole.Mouse.Touchscreen
|
||||||
*/
|
*/
|
||||||
var mouse = new Guacamole.Mouse(displayContainer);
|
var touchScreen = new Guacamole.Mouse.Touchscreen(displayContainer);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Guacamole absolute mouse emulation object, wrapped around the
|
* Guacamole relative mouse emulation object, wrapped around the
|
||||||
* main client display.
|
* main client display.
|
||||||
*
|
*
|
||||||
* @type Guacamole.Mouse.Touchscreen
|
* @type Guacamole.Mouse.Touchpad
|
||||||
*/
|
*/
|
||||||
var touchScreen = new Guacamole.Mouse.Touchscreen(displayContainer);
|
var touchPad = new Guacamole.Mouse.Touchpad(displayContainer);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Guacamole relative mouse emulation object, wrapped around the
|
* Guacamole touch event handling object, wrapped around the main
|
||||||
* main client display.
|
* client dislay.
|
||||||
*
|
*
|
||||||
* @type Guacamole.Mouse.Touchpad
|
* @type Guacamole.Touch
|
||||||
*/
|
*/
|
||||||
var touchPad = new Guacamole.Mouse.Touchpad(displayContainer);
|
var touch = new Guacamole.Touch(displayContainer);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Guacamole touch event handling object, wrapped around the main
|
* Updates the scale of the attached Guacamole.Client based on current window
|
||||||
* client dislay.
|
* size and "auto-fit" setting.
|
||||||
*
|
*/
|
||||||
* @type Guacamole.Touch
|
var updateDisplayScale = function updateDisplayScale() {
|
||||||
*/
|
|
||||||
var touch = new Guacamole.Touch(displayContainer);
|
|
||||||
|
|
||||||
/**
|
if (!display) return;
|
||||||
* Updates the scale of the attached Guacamole.Client based on current window
|
|
||||||
* size and "auto-fit" setting.
|
|
||||||
*/
|
|
||||||
var updateDisplayScale = function updateDisplayScale() {
|
|
||||||
|
|
||||||
if (!display) return;
|
// Calculate scale to fit screen
|
||||||
|
$scope.client.clientProperties.minScale = Math.min(
|
||||||
|
main.offsetWidth / Math.max(display.getWidth(), 1),
|
||||||
|
main.offsetHeight / Math.max(display.getHeight(), 1)
|
||||||
|
);
|
||||||
|
|
||||||
// Calculate scale to fit screen
|
// Calculate appropriate maximum zoom level
|
||||||
$scope.client.clientProperties.minScale = Math.min(
|
$scope.client.clientProperties.maxScale = Math.max($scope.client.clientProperties.minScale, 3);
|
||||||
main.offsetWidth / Math.max(display.getWidth(), 1),
|
|
||||||
main.offsetHeight / Math.max(display.getHeight(), 1)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Calculate appropriate maximum zoom level
|
// Clamp zoom level, maintain auto-fit
|
||||||
$scope.client.clientProperties.maxScale = Math.max($scope.client.clientProperties.minScale, 3);
|
if (display.getScale() < $scope.client.clientProperties.minScale || $scope.client.clientProperties.autoFit)
|
||||||
|
$scope.client.clientProperties.scale = $scope.client.clientProperties.minScale;
|
||||||
|
|
||||||
// Clamp zoom level, maintain auto-fit
|
else if (display.getScale() > $scope.client.clientProperties.maxScale)
|
||||||
if (display.getScale() < $scope.client.clientProperties.minScale || $scope.client.clientProperties.autoFit)
|
$scope.client.clientProperties.scale = $scope.client.clientProperties.maxScale;
|
||||||
$scope.client.clientProperties.scale = $scope.client.clientProperties.minScale;
|
|
||||||
|
|
||||||
else if (display.getScale() > $scope.client.clientProperties.maxScale)
|
};
|
||||||
$scope.client.clientProperties.scale = $scope.client.clientProperties.maxScale;
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scrolls the client view such that the mouse cursor is visible.
|
||||||
|
*
|
||||||
|
* @param {Guacamole.Mouse.State} mouseState The current mouse
|
||||||
|
* state.
|
||||||
|
*/
|
||||||
|
var scrollToMouse = function scrollToMouse(mouseState) {
|
||||||
|
|
||||||
|
// Determine mouse position within view
|
||||||
|
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;
|
||||||
|
var view_height = main.offsetHeight;
|
||||||
|
|
||||||
|
// Determine scroll amounts based on mouse position relative to document
|
||||||
|
|
||||||
|
var scroll_amount_x;
|
||||||
|
if (mouse_view_x > view_width)
|
||||||
|
scroll_amount_x = mouse_view_x - view_width;
|
||||||
|
else if (mouse_view_x < 0)
|
||||||
|
scroll_amount_x = mouse_view_x;
|
||||||
|
else
|
||||||
|
scroll_amount_x = 0;
|
||||||
|
|
||||||
|
var scroll_amount_y;
|
||||||
|
if (mouse_view_y > view_height)
|
||||||
|
scroll_amount_y = mouse_view_y - view_height;
|
||||||
|
else if (mouse_view_y < 0)
|
||||||
|
scroll_amount_y = mouse_view_y;
|
||||||
|
else
|
||||||
|
scroll_amount_y = 0;
|
||||||
|
|
||||||
|
// Scroll (if necessary) to keep mouse on screen.
|
||||||
|
main.scrollLeft += scroll_amount_x;
|
||||||
|
main.scrollTop += scroll_amount_y;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles a mouse event originating from the user's actual mouse.
|
||||||
|
* This differs from handleEmulatedMouseEvent() in that the
|
||||||
|
* software mouse cursor must be shown only if the user's browser
|
||||||
|
* does not support explicitly setting the hardware mouse cursor.
|
||||||
|
*
|
||||||
|
* @param {Guacamole.Mouse.MouseEvent} event
|
||||||
|
* The mouse event to handle.
|
||||||
|
*/
|
||||||
|
var handleMouseEvent = function handleMouseEvent(event) {
|
||||||
|
|
||||||
|
// Do not attempt to handle mouse state changes if the client
|
||||||
|
// or display are not yet available
|
||||||
|
if (!client || !display)
|
||||||
|
return;
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Send mouse state, show cursor if necessary
|
||||||
|
display.showCursor(!localCursor);
|
||||||
|
client.sendMouseState(event.state, true);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles a mouse event originating from one of Guacamole's mouse
|
||||||
|
* emulation objects. This differs from handleMouseState() in that
|
||||||
|
* the software mouse cursor must always be shown (as the emulated
|
||||||
|
* mouse device will not have its own cursor).
|
||||||
|
*
|
||||||
|
* @param {Guacamole.Mouse.MouseEvent} event
|
||||||
|
* The mouse event to handle.
|
||||||
|
*/
|
||||||
|
var handleEmulatedMouseEvent = function handleEmulatedMouseEvent(event) {
|
||||||
|
|
||||||
|
// Do not attempt to handle mouse state changes if the client
|
||||||
|
// or display are not yet available
|
||||||
|
if (!client || !display)
|
||||||
|
return;
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Ensure software cursor is shown
|
||||||
|
display.showCursor(true);
|
||||||
|
|
||||||
|
// Send mouse state, ensure cursor is visible
|
||||||
|
scrollToMouse(event.state);
|
||||||
|
client.sendMouseState(event.state, true);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles a touch event originating from the user's device.
|
||||||
|
*
|
||||||
|
* @param {Guacamole.Touch.Event} touchEvent
|
||||||
|
* The touch event.
|
||||||
|
*/
|
||||||
|
var handleTouchEvent = function handleTouchEvent(event) {
|
||||||
|
|
||||||
|
// Do not attempt to handle touch state changes if the client
|
||||||
|
// or display are not yet available
|
||||||
|
if (!client || !display)
|
||||||
|
return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Send touch state, hiding local cursor
|
||||||
|
display.showCursor(false);
|
||||||
|
client.sendTouchState(event.state, true);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Attach any given managed client
|
||||||
|
$scope.$watch('client', function attachManagedClient(managedClient) {
|
||||||
|
|
||||||
|
// Remove any existing display
|
||||||
|
displayContainer.innerHTML = "";
|
||||||
|
|
||||||
|
// Only proceed if a client is given
|
||||||
|
if (!managedClient)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Get Guacamole client instance
|
||||||
|
client = managedClient.client;
|
||||||
|
|
||||||
|
// Attach possibly new display
|
||||||
|
display = client.getDisplay();
|
||||||
|
display.scale($scope.client.clientProperties.scale);
|
||||||
|
|
||||||
|
// Add display element
|
||||||
|
displayElement = display.getElement();
|
||||||
|
displayContainer.appendChild(displayElement);
|
||||||
|
|
||||||
|
// Do nothing when the display element is clicked on
|
||||||
|
display.getElement().onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
// Size of newly-attached client may be different
|
||||||
* Scrolls the client view such that the mouse cursor is visible.
|
$scope.mainElementResized();
|
||||||
*
|
|
||||||
* @param {Guacamole.Mouse.State} mouseState The current mouse
|
|
||||||
* state.
|
|
||||||
*/
|
|
||||||
var scrollToMouse = function scrollToMouse(mouseState) {
|
|
||||||
|
|
||||||
// Determine mouse position within view
|
});
|
||||||
var mouse_view_x = mouseState.x + displayContainer.offsetLeft - main.scrollLeft;
|
|
||||||
var mouse_view_y = mouseState.y + displayContainer.offsetTop - main.scrollTop;
|
|
||||||
|
|
||||||
// Determine viewport dimensions
|
// Update actual view scrollLeft when scroll properties change
|
||||||
var view_width = main.offsetWidth;
|
$scope.$watch('client.clientProperties.scrollLeft', function scrollLeftChanged(scrollLeft) {
|
||||||
var view_height = main.offsetHeight;
|
main.scrollLeft = scrollLeft;
|
||||||
|
$scope.client.clientProperties.scrollLeft = main.scrollLeft;
|
||||||
|
});
|
||||||
|
|
||||||
// Determine scroll amounts based on mouse position relative to document
|
// Update actual view scrollTop when scroll properties change
|
||||||
|
$scope.$watch('client.clientProperties.scrollTop', function scrollTopChanged(scrollTop) {
|
||||||
|
main.scrollTop = scrollTop;
|
||||||
|
$scope.client.clientProperties.scrollTop = main.scrollTop;
|
||||||
|
});
|
||||||
|
|
||||||
var scroll_amount_x;
|
// Update scale when display is resized
|
||||||
if (mouse_view_x > view_width)
|
$scope.$watch('client.managedDisplay.size', function setDisplaySize() {
|
||||||
scroll_amount_x = mouse_view_x - view_width;
|
$scope.$evalAsync(updateDisplayScale);
|
||||||
else if (mouse_view_x < 0)
|
});
|
||||||
scroll_amount_x = mouse_view_x;
|
|
||||||
else
|
|
||||||
scroll_amount_x = 0;
|
|
||||||
|
|
||||||
var scroll_amount_y;
|
// Keep local cursor up-to-date
|
||||||
if (mouse_view_y > view_height)
|
$scope.$watch('client.managedDisplay.cursor', function setCursor(cursor) {
|
||||||
scroll_amount_y = mouse_view_y - view_height;
|
if (cursor)
|
||||||
else if (mouse_view_y < 0)
|
localCursor = mouse.setCursor(cursor.canvas, cursor.x, cursor.y);
|
||||||
scroll_amount_y = mouse_view_y;
|
});
|
||||||
else
|
|
||||||
scroll_amount_y = 0;
|
|
||||||
|
|
||||||
// Scroll (if necessary) to keep mouse on screen.
|
// Update touch event handling depending on remote multi-touch
|
||||||
main.scrollLeft += scroll_amount_x;
|
// support and mouse emulation mode
|
||||||
main.scrollTop += scroll_amount_y;
|
$scope.$watchGroup([
|
||||||
|
'client.multiTouchSupport',
|
||||||
|
'emulateAbsoluteMouse'
|
||||||
|
], function touchBehaviorChanged() {
|
||||||
|
|
||||||
};
|
// Clear existing event handling
|
||||||
|
touch.offEach(['touchstart', 'touchmove', 'touchend'], handleTouchEvent);
|
||||||
|
touchScreen.offEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
||||||
|
touchPad.offEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
||||||
|
|
||||||
/**
|
// Directly forward local touch events
|
||||||
* Handles a mouse event originating from the user's actual mouse.
|
if ($scope.client.multiTouchSupport)
|
||||||
* This differs from handleEmulatedMouseEvent() in that the
|
touch.onEach(['touchstart', 'touchmove', 'touchend'], handleTouchEvent);
|
||||||
* software mouse cursor must be shown only if the user's browser
|
|
||||||
* does not support explicitly setting the hardware mouse cursor.
|
|
||||||
*
|
|
||||||
* @param {Guacamole.Mouse.MouseEvent} event
|
|
||||||
* The mouse event to handle.
|
|
||||||
*/
|
|
||||||
var handleMouseEvent = function handleMouseEvent(event) {
|
|
||||||
|
|
||||||
// Do not attempt to handle mouse state changes if the client
|
// Switch to touchscreen if mouse emulation is required and
|
||||||
// or display are not yet available
|
// absolute mouse emulation is preferred
|
||||||
if (!client || !display)
|
else if ($scope.emulateAbsoluteMouse)
|
||||||
return;
|
touchScreen.onEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
||||||
|
|
||||||
event.stopPropagation();
|
// Use touchpad for mouse emulation if absolute mouse emulation
|
||||||
event.preventDefault();
|
// is not preferred
|
||||||
|
else
|
||||||
|
touchPad.onEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
||||||
|
|
||||||
// Send mouse state, show cursor if necessary
|
});
|
||||||
display.showCursor(!localCursor);
|
|
||||||
client.sendMouseState(event.state, true);
|
|
||||||
|
|
||||||
};
|
// Adjust scale if modified externally
|
||||||
|
$scope.$watch('client.clientProperties.scale', function changeScale(scale) {
|
||||||
|
|
||||||
/**
|
// Fix scale within limits
|
||||||
* Handles a mouse event originating from one of Guacamole's mouse
|
scale = Math.max(scale, $scope.client.clientProperties.minScale);
|
||||||
* emulation objects. This differs from handleMouseState() in that
|
scale = Math.min(scale, $scope.client.clientProperties.maxScale);
|
||||||
* the software mouse cursor must always be shown (as the emulated
|
|
||||||
* mouse device will not have its own cursor).
|
|
||||||
*
|
|
||||||
* @param {Guacamole.Mouse.MouseEvent} event
|
|
||||||
* The mouse event to handle.
|
|
||||||
*/
|
|
||||||
var handleEmulatedMouseEvent = function handleEmulatedMouseEvent(event) {
|
|
||||||
|
|
||||||
// Do not attempt to handle mouse state changes if the client
|
// If at minimum zoom level, hide scroll bars
|
||||||
// or display are not yet available
|
if (scale === $scope.client.clientProperties.minScale)
|
||||||
if (!client || !display)
|
main.style.overflow = "hidden";
|
||||||
return;
|
|
||||||
|
|
||||||
event.stopPropagation();
|
// If not at minimum zoom level, show scroll bars
|
||||||
event.preventDefault();
|
else
|
||||||
|
main.style.overflow = "auto";
|
||||||
|
|
||||||
// Ensure software cursor is shown
|
// Apply scale if client attached
|
||||||
display.showCursor(true);
|
if (display)
|
||||||
|
display.scale(scale);
|
||||||
// Send mouse state, ensure cursor is visible
|
|
||||||
scrollToMouse(event.state);
|
|
||||||
client.sendMouseState(event.state, true);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handles a touch event originating from the user's device.
|
|
||||||
*
|
|
||||||
* @param {Guacamole.Touch.Event} touchEvent
|
|
||||||
* The touch event.
|
|
||||||
*/
|
|
||||||
var handleTouchEvent = function handleTouchEvent(event) {
|
|
||||||
|
|
||||||
// Do not attempt to handle touch state changes if the client
|
|
||||||
// or display are not yet available
|
|
||||||
if (!client || !display)
|
|
||||||
return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
// Send touch state, hiding local cursor
|
|
||||||
display.showCursor(false);
|
|
||||||
client.sendTouchState(event.state, true);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Attach any given managed client
|
|
||||||
$scope.$watch('client', function attachManagedClient(managedClient) {
|
|
||||||
|
|
||||||
// Remove any existing display
|
|
||||||
displayContainer.innerHTML = "";
|
|
||||||
|
|
||||||
// Only proceed if a client is given
|
|
||||||
if (!managedClient)
|
|
||||||
return;
|
|
||||||
|
|
||||||
// Get Guacamole client instance
|
|
||||||
client = managedClient.client;
|
|
||||||
|
|
||||||
// Attach possibly new display
|
|
||||||
display = client.getDisplay();
|
|
||||||
display.scale($scope.client.clientProperties.scale);
|
|
||||||
|
|
||||||
// Add display element
|
|
||||||
displayElement = display.getElement();
|
|
||||||
displayContainer.appendChild(displayElement);
|
|
||||||
|
|
||||||
// Do nothing when the display element is clicked on
|
|
||||||
display.getElement().onclick = function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Size of newly-attached client may be different
|
|
||||||
$scope.mainElementResized();
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update actual view scrollLeft when scroll properties change
|
|
||||||
$scope.$watch('client.clientProperties.scrollLeft', function scrollLeftChanged(scrollLeft) {
|
|
||||||
main.scrollLeft = scrollLeft;
|
|
||||||
$scope.client.clientProperties.scrollLeft = main.scrollLeft;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update actual view scrollTop when scroll properties change
|
|
||||||
$scope.$watch('client.clientProperties.scrollTop', function scrollTopChanged(scrollTop) {
|
|
||||||
main.scrollTop = scrollTop;
|
|
||||||
$scope.client.clientProperties.scrollTop = main.scrollTop;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update scale when display is resized
|
|
||||||
$scope.$watch('client.managedDisplay.size', function setDisplaySize() {
|
|
||||||
$scope.$evalAsync(updateDisplayScale);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Keep local cursor up-to-date
|
|
||||||
$scope.$watch('client.managedDisplay.cursor', function setCursor(cursor) {
|
|
||||||
if (cursor)
|
|
||||||
localCursor = mouse.setCursor(cursor.canvas, cursor.x, cursor.y);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update touch event handling depending on remote multi-touch
|
|
||||||
// support and mouse emulation mode
|
|
||||||
$scope.$watchGroup([
|
|
||||||
'client.multiTouchSupport',
|
|
||||||
'client.clientProperties.emulateAbsoluteMouse'
|
|
||||||
], function touchBehaviorChanged(emulateAbsoluteMouse) {
|
|
||||||
|
|
||||||
// Clear existing event handling
|
|
||||||
touch.offEach(['touchstart', 'touchmove', 'touchend'], handleTouchEvent);
|
|
||||||
touchScreen.offEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
|
||||||
touchPad.offEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
|
||||||
|
|
||||||
// Directly forward local touch events
|
|
||||||
if ($scope.client.multiTouchSupport)
|
|
||||||
touch.onEach(['touchstart', 'touchmove', 'touchend'], handleTouchEvent);
|
|
||||||
|
|
||||||
// Switch to touchscreen if mouse emulation is required and
|
|
||||||
// absolute mouse emulation is preferred
|
|
||||||
else if ($scope.client.clientProperties.emulateAbsoluteMouse)
|
|
||||||
touchScreen.onEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
|
||||||
|
|
||||||
// Use touchpad for mouse emulation if absolute mouse emulation
|
|
||||||
// is not preferred
|
|
||||||
else
|
|
||||||
touchPad.onEach(['mousedown', 'mousemove', 'mouseup'], handleEmulatedMouseEvent);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Adjust scale if modified externally
|
|
||||||
$scope.$watch('client.clientProperties.scale', function changeScale(scale) {
|
|
||||||
|
|
||||||
// Fix scale within limits
|
|
||||||
scale = Math.max(scale, $scope.client.clientProperties.minScale);
|
|
||||||
scale = Math.min(scale, $scope.client.clientProperties.maxScale);
|
|
||||||
|
|
||||||
// If at minimum zoom level, hide scroll bars
|
|
||||||
if (scale === $scope.client.clientProperties.minScale)
|
|
||||||
main.style.overflow = "hidden";
|
|
||||||
|
|
||||||
// If not at minimum zoom level, show scroll bars
|
|
||||||
else
|
|
||||||
main.style.overflow = "auto";
|
|
||||||
|
|
||||||
// Apply scale if client attached
|
|
||||||
if (display)
|
|
||||||
display.scale(scale);
|
|
||||||
|
|
||||||
if (scale !== $scope.client.clientProperties.scale)
|
|
||||||
$scope.client.clientProperties.scale = scale;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// If autofit is set, the scale should be set to the minimum scale, filling the screen
|
if (scale !== $scope.client.clientProperties.scale)
|
||||||
$scope.$watch('client.clientProperties.autoFit', function changeAutoFit(autoFit) {
|
$scope.client.clientProperties.scale = scale;
|
||||||
if(autoFit)
|
|
||||||
$scope.client.clientProperties.scale = $scope.client.clientProperties.minScale;
|
|
||||||
});
|
|
||||||
|
|
||||||
// If the element is resized, attempt to resize client
|
|
||||||
$scope.mainElementResized = function mainElementResized() {
|
|
||||||
|
|
||||||
// Send new display size, if changed
|
});
|
||||||
if (client && display) {
|
|
||||||
|
// If autofit is set, the scale should be set to the minimum scale, filling the screen
|
||||||
|
$scope.$watch('client.clientProperties.autoFit', function changeAutoFit(autoFit) {
|
||||||
|
if(autoFit)
|
||||||
|
$scope.client.clientProperties.scale = $scope.client.clientProperties.minScale;
|
||||||
|
});
|
||||||
|
|
||||||
|
// If the element is resized, attempt to resize client
|
||||||
|
$scope.mainElementResized = function mainElementResized() {
|
||||||
|
|
||||||
var pixelDensity = $window.devicePixelRatio || 1;
|
// Send new display size, if changed
|
||||||
var width = main.offsetWidth * pixelDensity;
|
if (client && display) {
|
||||||
var height = main.offsetHeight * pixelDensity;
|
|
||||||
|
|
||||||
if (display.getWidth() !== width || display.getHeight() !== height)
|
var pixelDensity = $window.devicePixelRatio || 1;
|
||||||
client.sendSize(width, height);
|
var width = main.offsetWidth * pixelDensity;
|
||||||
|
var height = main.offsetHeight * pixelDensity;
|
||||||
|
|
||||||
}
|
if (display.getWidth() !== width || display.getHeight() !== height)
|
||||||
|
client.sendSize(width, height);
|
||||||
|
|
||||||
$scope.$evalAsync(updateDisplayScale);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Ensure focus is regained via mousedown before forwarding event
|
|
||||||
mouse.on('mousedown', document.body.focus.bind(document.body));
|
|
||||||
|
|
||||||
// Forward all mouse events
|
|
||||||
mouse.onEach(['mousedown', 'mousemove', 'mouseup'], handleMouseEvent);
|
|
||||||
|
|
||||||
// Hide software cursor when mouse leaves display
|
|
||||||
mouse.on('mouseout', function() {
|
|
||||||
if (!display) return;
|
|
||||||
display.showCursor(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update remote clipboard if local clipboard changes
|
|
||||||
$scope.$on('guacClipboard', function onClipboard(event, data) {
|
|
||||||
ManagedClient.setClipboard($scope.client, data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Translate local keydown events to remote keydown events if keyboard is enabled
|
|
||||||
$scope.$on('guacKeydown', function keydownListener(event, keysym, keyboard) {
|
|
||||||
if ($scope.client.clientProperties.keyboardEnabled && $scope.client.clientProperties.focused) {
|
|
||||||
client.sendKeyEvent(1, keysym);
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Translate local keyup events to remote keyup events if keyboard is enabled
|
|
||||||
$scope.$on('guacKeyup', function keyupListener(event, keysym, keyboard) {
|
|
||||||
if ($scope.client.clientProperties.keyboardEnabled && $scope.client.clientProperties.focused) {
|
|
||||||
client.sendKeyEvent(0, keysym);
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Universally handle all synthetic keydown events
|
|
||||||
$scope.$on('guacSyntheticKeydown', function syntheticKeydownListener(event, keysym) {
|
|
||||||
if ($scope.client.clientProperties.focused)
|
|
||||||
client.sendKeyEvent(1, keysym);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Universally handle all synthetic keyup events
|
|
||||||
$scope.$on('guacSyntheticKeyup', function syntheticKeyupListener(event, keysym) {
|
|
||||||
if ($scope.client.clientProperties.focused)
|
|
||||||
client.sendKeyEvent(0, keysym);
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ignores the given event.
|
|
||||||
*
|
|
||||||
* @param {Event} e The event to ignore.
|
|
||||||
*/
|
|
||||||
function ignoreEvent(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle and ignore dragenter/dragover
|
$scope.$evalAsync(updateDisplayScale);
|
||||||
displayContainer.addEventListener("dragenter", ignoreEvent, false);
|
|
||||||
displayContainer.addEventListener("dragover", ignoreEvent, false);
|
|
||||||
|
|
||||||
// File drop event handler
|
};
|
||||||
displayContainer.addEventListener("drop", function(e) {
|
|
||||||
|
|
||||||
e.preventDefault();
|
// Scroll client display if absolute mouse is in use (the same drag
|
||||||
e.stopPropagation();
|
// gesture is needed for moving the mouse pointer with relative mouse)
|
||||||
|
$scope.clientDrag = function clientDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {
|
||||||
|
|
||||||
// Ignore file drops if no attached client
|
if ($scope.emulateAbsoluteMouse) {
|
||||||
if (!$scope.client)
|
$scope.client.clientProperties.scrollLeft -= deltaX;
|
||||||
return;
|
$scope.client.clientProperties.scrollTop -= deltaY;
|
||||||
|
}
|
||||||
|
|
||||||
// Upload each file
|
return false;
|
||||||
var files = e.dataTransfer.files;
|
|
||||||
for (var i=0; i<files.length; i++)
|
|
||||||
ManagedClient.uploadFile($scope.client, files[i]);
|
|
||||||
|
|
||||||
}, 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) {
|
||||||
|
|
||||||
|
// Do not handle pinch gestures if they would conflict with remote
|
||||||
|
// handling of similar gestures
|
||||||
|
if ($scope.client.multiTouchSupport > 1)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// Do not handle pinch gestures while relative mouse is in use (2+
|
||||||
|
// contact point gestures are used by relative mouse emulation to
|
||||||
|
// support right click, middle click, and scrolling)
|
||||||
|
if (!$scope.emulateAbsoluteMouse)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// Stop gesture if not in progress
|
||||||
|
if (!inProgress) {
|
||||||
|
initialScale = null;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set initial scale if gesture has just started
|
||||||
|
if (!initialScale) {
|
||||||
|
initialScale = $scope.client.clientProperties.scale;
|
||||||
|
initialCenterX = (centerX + $scope.client.clientProperties.scrollLeft) / initialScale;
|
||||||
|
initialCenterY = (centerY + $scope.client.clientProperties.scrollTop) / initialScale;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Determine new scale absolutely
|
||||||
|
var currentScale = initialScale * currentLength / startLength;
|
||||||
|
|
||||||
|
// Fix scale within limits - scroll will be miscalculated otherwise
|
||||||
|
currentScale = Math.max(currentScale, $scope.client.clientProperties.minScale);
|
||||||
|
currentScale = Math.min(currentScale, $scope.client.clientProperties.maxScale);
|
||||||
|
|
||||||
|
// Update scale based on pinch distance
|
||||||
|
$scope.client.clientProperties.autoFit = false;
|
||||||
|
$scope.client.clientProperties.scale = currentScale;
|
||||||
|
|
||||||
|
// Scroll display to keep original pinch location centered within current pinch
|
||||||
|
$scope.client.clientProperties.scrollLeft = initialCenterX * currentScale - centerX;
|
||||||
|
$scope.client.clientProperties.scrollTop = initialCenterY * currentScale - centerY;
|
||||||
|
|
||||||
|
return false;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Ensure focus is regained via mousedown before forwarding event
|
||||||
|
mouse.on('mousedown', document.body.focus.bind(document.body));
|
||||||
|
|
||||||
|
// Forward all mouse events
|
||||||
|
mouse.onEach(['mousedown', 'mousemove', 'mouseup'], handleMouseEvent);
|
||||||
|
|
||||||
|
// Hide software cursor when mouse leaves display
|
||||||
|
mouse.on('mouseout', function() {
|
||||||
|
if (!display) return;
|
||||||
|
display.showCursor(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update remote clipboard if local clipboard changes
|
||||||
|
$scope.$on('guacClipboard', function onClipboard(event, data) {
|
||||||
|
ManagedClient.setClipboard($scope.client, data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Translate local keydown events to remote keydown events if keyboard is enabled
|
||||||
|
$scope.$on('guacKeydown', function keydownListener(event, keysym, keyboard) {
|
||||||
|
if ($scope.client.clientProperties.keyboardEnabled && $scope.client.clientProperties.focused) {
|
||||||
|
client.sendKeyEvent(1, keysym);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Translate local keyup events to remote keyup events if keyboard is enabled
|
||||||
|
$scope.$on('guacKeyup', function keyupListener(event, keysym, keyboard) {
|
||||||
|
if ($scope.client.clientProperties.keyboardEnabled && $scope.client.clientProperties.focused) {
|
||||||
|
client.sendKeyEvent(0, keysym);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Universally handle all synthetic keydown events
|
||||||
|
$scope.$on('guacSyntheticKeydown', function syntheticKeydownListener(event, keysym) {
|
||||||
|
if ($scope.client.clientProperties.focused)
|
||||||
|
client.sendKeyEvent(1, keysym);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Universally handle all synthetic keyup events
|
||||||
|
$scope.$on('guacSyntheticKeyup', function syntheticKeyupListener(event, keysym) {
|
||||||
|
if ($scope.client.clientProperties.focused)
|
||||||
|
client.sendKeyEvent(0, keysym);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ignores the given event.
|
||||||
|
*
|
||||||
|
* @param {Event} e The event to ignore.
|
||||||
|
*/
|
||||||
|
function ignoreEvent(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle and ignore dragenter/dragover
|
||||||
|
displayContainer.addEventListener("dragenter", ignoreEvent, false);
|
||||||
|
displayContainer.addEventListener("dragover", ignoreEvent, false);
|
||||||
|
|
||||||
|
// File drop event handler
|
||||||
|
displayContainer.addEventListener("drop", function(e) {
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// Ignore file drops if no attached client
|
||||||
|
if (!$scope.client)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Upload each file
|
||||||
|
var files = e.dataTransfer.files;
|
||||||
|
for (var i=0; i<files.length; i++)
|
||||||
|
ManagedClient.uploadFile($scope.client, files[i]);
|
||||||
|
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
}];
|
||||||
|
|
||||||
|
return directive;
|
||||||
|
|
||||||
/*
|
|
||||||
* END CLIENT DIRECTIVE
|
|
||||||
*/
|
|
||||||
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}]);
|
}]);
|
||||||
|
|||||||
@@ -37,7 +37,15 @@ angular.module('client').directive('guacTiledClients', [function guacTiledClient
|
|||||||
*
|
*
|
||||||
* @type ManagedClientGroup
|
* @type ManagedClientGroup
|
||||||
*/
|
*/
|
||||||
clientGroup : '='
|
clientGroup : '=',
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether translation of touch to mouse events should emulate an
|
||||||
|
* absolute pointer device, or a relative pointer device.
|
||||||
|
*
|
||||||
|
* @type boolean
|
||||||
|
*/
|
||||||
|
emulateAbsoluteMouse : '='
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -6,10 +6,13 @@
|
|||||||
<div class="client-view-content">
|
<div class="client-view-content">
|
||||||
|
|
||||||
<!-- Central portion of view -->
|
<!-- Central portion of view -->
|
||||||
<div class="client-body" guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
|
<div class="client-body" guac-touch-drag="hiddenMenuDrag">
|
||||||
|
|
||||||
<!-- All connections in current display -->
|
<!-- All connections in current display -->
|
||||||
<guac-tiled-clients client-group="clientGroup"></guac-tiled-clients>
|
<guac-tiled-clients
|
||||||
|
client-group="clientGroup"
|
||||||
|
emulate-absolute-mouse="menu.emulateAbsoluteMouse">
|
||||||
|
</guac-tiled-clients>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -78,7 +81,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scrollable body -->
|
<!-- Scrollable body -->
|
||||||
<div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
|
<div class="menu-body" guac-touch-drag="visibleMenuDrag" guac-scroll="menu.scrollState">
|
||||||
|
|
||||||
<!-- Connection sharing -->
|
<!-- Connection sharing -->
|
||||||
<div class="menu-section" id="share-links" ng-show="isShared()">
|
<div class="menu-section" id="share-links" ng-show="isShared()">
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<div class="main" guac-resize="mainElementResized">
|
<div class="main" guac-resize="mainElementResized"
|
||||||
|
guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
|
||||||
|
|
||||||
<!-- Display -->
|
<!-- Display -->
|
||||||
<div class="displayOuter">
|
<div class="displayOuter">
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
ng-click="assignFocus(client)">
|
ng-click="assignFocus(client)">
|
||||||
|
|
||||||
<h3>{{ client.title }}</h3>
|
<h3>{{ client.title }}</h3>
|
||||||
<guac-client client="client"></guac-client>
|
<guac-client client="client" emulate-absolute-mouse="emulateAbsoluteMouse"></guac-client>
|
||||||
|
|
||||||
<!-- Client-specific status/error dialog -->
|
<!-- Client-specific status/error dialog -->
|
||||||
<guac-client-notification client="client"></guac-client-notification>
|
<guac-client-notification client="client"></guac-client-notification>
|
||||||
|
|||||||
Reference in New Issue
Block a user