From: Michael Jumper Date: Wed, 15 Feb 2012 05:11:38 +0000 (-0800) Subject: Move cursor layer, rather than redrawing cursor image. X-Git-Url: http://git.alex.org.uk Move cursor layer, rather than redrawing cursor image. --- diff --git a/src/main/resources/guacamole.js b/src/main/resources/guacamole.js index e126348..9461978 100644 --- a/src/main/resources/guacamole.js +++ b/src/main/resources/guacamole.js @@ -75,9 +75,17 @@ Guacamole.Client = function(tunnel) { // Create default layer var default_layer_container = new Guacamole.Client.LayerContainer(displayWidth, displayHeight); + var default_layer_container_element = default_layer_container.getElement(); + default_layer_container_element.style.position = "absolute"; + default_layer_container_element.style.left = "0px"; + default_layer_container_element.style.top = "0px"; // Create cursor layer - var cursor = new Guacamole.Client.LayerContainer(displayWidth, displayHeight); + var cursor = new Guacamole.Client.LayerContainer(0, 0); + var cursor_element = cursor.getElement(); + cursor_element.style.position = "absolute"; + cursor_element.style.left = "0px"; + cursor_element.style.top = "0px"; // Add default layer and cursor to display display.appendChild(default_layer_container.getElement()); @@ -107,18 +115,14 @@ Guacamole.Client = function(tunnel) { || currentState == STATE_WAITING; } - var cursorImage = null; var cursorHotspotX = 0; var cursorHotspotY = 0; - var cursorRectX = 0; - var cursorRectY = 0; - var cursorRectW = 0; - var cursorRectH = 0; - var cursorHidden = 0; - function redrawCursor(x, y) { + function moveCursor(x, y) { + + var element = cursor.getElement(); // Hide hardware cursor if (cursorHidden == 0) { @@ -126,17 +130,9 @@ Guacamole.Client = function(tunnel) { cursorHidden = 1; } - // Erase old cursor - cursor.clearRect(cursorRectX, cursorRectY, cursorRectW, cursorRectH); - // Update rect - cursorRectX = x - cursorHotspotX; - cursorRectY = y - cursorHotspotY; - cursorRectW = cursorImage.width; - cursorRectH = cursorImage.height; - - // Draw new cursor - cursor.drawImage(cursorRectX, cursorRectY, cursorImage); + element.style.left = (x - cursorHotspotX) + "px"; + element.style.top = (y - cursorHotspotY) + "px"; } @@ -158,13 +154,11 @@ Guacamole.Client = function(tunnel) { if (!isConnected()) return; - // Draw client-side cursor - if (cursorImage != null) { - redrawCursor( - mouseState.x, - mouseState.y - ); - } + // Update client-side cursor + moveCursor( + mouseState.x, + mouseState.y + ); // Build mask var buttonMask = 0; @@ -405,24 +399,12 @@ Guacamole.Client = function(tunnel) { "cursor": function(parameters) { - var x = parseInt(parameters[0]); - var y = parseInt(parameters[1]); + cursorHotspotX = parseInt(parameters[0]); + cursorHotspotY = parseInt(parameters[1]); var data = parameters[2]; - // Start cursor image load - var image = new Image(); - image.onload = function() { - cursorImage = image; - - var cursorX = cursorRectX + cursorHotspotX; - var cursorY = cursorRectY + cursorHotspotY; - - cursorHotspotX = x; - cursorHotspotY = y; - - redrawCursor(cursorX, cursorY); - }; - image.src = "data:image/png;base64," + data + // Draw cursor to cursor layer + cursor.draw(0, 0, "data:image/png;base64," + data); },