* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
+ * Matt Hortman
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
// Guacamole namespace
var Guacamole = Guacamole || {};
+
/**
* Guacamole protocol client. Given a display element and {@link Guacamole.Tunnel},
* automatically handles incoming and outgoing Guacamole instructions via the
* provided tunnel, updating the display using one or more canvas elements.
*
* @constructor
- * @param {Element} display The display element to add canvas elements to.
* @param {Guacamole.Tunnel} tunnel The tunnel to use to send and receive
* Guacamole instructions.
*/
-Guacamole.Client = function(display, tunnel) {
+Guacamole.Client = function(tunnel) {
var guac_client = this;
var currentTimestamp = 0;
var pingInterval = null;
+ var displayWidth = 0;
+ var displayHeight = 0;
+
+ // Create display
+ var display = document.createElement("div");
+ display.style.position = "relative";
+ display.style.width = displayWidth + "px";
+ display.style.height = displayHeight + "px";
+
+ // Create default layer
+ var default_layer_container = new Guacamole.Client.LayerContainer(displayWidth, displayHeight);
+
+ // Position default layer
+ 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(0, 0);
+ cursor.getLayer().setChannelMask(Guacamole.Layer.SRC);
+
+ // Position cursor layer
+ 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());
+ display.appendChild(cursor.getElement());
+
+ // Initially, only default layer exists
+ var layers = [default_layer_container];
+
+ // No initial buffers
+ var buffers = [];
+
tunnel.onerror = function(message) {
if (guac_client.onerror)
guac_client.onerror(message);
};
- // Display must be relatively positioned for mouse to be handled properly
- display.style.position = "relative";
-
function setState(state) {
if (state != currentState) {
currentState = state;
|| 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;
+ var cursorX = 0;
+ var cursorY = 0;
- function redrawCursor(x, y) {
+ function moveCursor(x, y) {
- // Hide hardware cursor
- if (cursorHidden == 0) {
- display.className += " guac-hide-cursor";
- cursorHidden = 1;
- }
-
- // Erase old cursor
- cursor.clearRect(cursorRectX, cursorRectY, cursorRectW, cursorRectH);
+ var element = cursor.getElement();
// Update rect
- cursorRectX = x - cursorHotspotX;
- cursorRectY = y - cursorHotspotY;
- cursorRectW = cursorImage.width;
- cursorRectH = cursorImage.height;
+ element.style.left = (x - cursorHotspotX) + "px";
+ element.style.top = (y - cursorHotspotY) + "px";
+
+ // Update stored position
+ cursorX = x;
+ cursorY = y;
- // Draw new cursor
- cursor.drawImage(cursorRectX, cursorRectY, cursorImage);
}
+ guac_client.getDisplay = function() {
+ return display;
+ };
+
guac_client.sendKeyEvent = function(pressed, keysym) {
// Do not send requests if not connected
if (!isConnected())
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;
guac_client.onclipboard = null;
// Layers
- var displayWidth = 0;
- var displayHeight = 0;
-
- var layers = new Array();
- var buffers = new Array();
- var cursor = null;
-
- guac_client.getLayers = function() {
- return layers;
- };
+ function getBufferLayer(index) {
- function getLayer(index) {
-
- // If negative index, use buffer
- if (index < 0) {
+ index = -1 - index;
+ var buffer = buffers[index];
- index = -1 - index;
- var buffer = buffers[index];
+ // Create buffer if necessary
+ if (buffer == null) {
+ buffer = new Guacamole.Layer(0, 0);
+ buffer.autosize = 1;
+ buffers[index] = buffer;
+ }
- // Create buffer if necessary
- if (buffer == null) {
- buffer = new Guacamole.Layer(0, 0);
- buffer.autosize = 1;
- buffers[index] = buffer;
- }
+ return buffer;
- return buffer;
- }
+ }
- // If non-negative, use visible layer
- else {
+ function getLayerContainer(index) {
- var layer = layers[index];
- if (layer == null) {
+ var layer = layers[index];
+ if (layer == null) {
- // Add new layer
- layer = new Guacamole.Layer(displayWidth, displayHeight);
-
- // Set layer position
- var canvas = layer.getCanvas();
- canvas.style.position = "absolute";
- canvas.style.left = "0px";
- canvas.style.top = "0px";
+ // Add new layer
+ layer = new Guacamole.Client.LayerContainer(displayWidth, displayHeight);
+ layers[index] = layer;
- layers[index] = layer;
+ // Get and position layer
+ var layer_element = layer.getElement();
+ layer_element.style.position = "absolute";
+ layer_element.style.left = "0px";
+ layer_element.style.top = "0px";
- // (Re)-add existing layers in order
- for (var i=0; i<layers.length; i++) {
- if (layers[i]) {
+ // Add to default layer container
+ default_layer_container.getElement().appendChild(layer_element);
- // If already present, remove
- if (layers[i].parentNode === display)
- display.removeChild(layers[i].getCanvas());
+ }
- // Add to end
- display.appendChild(layers[i].getCanvas());
- }
- }
+ return layer;
- // Add cursor layer last
- if (cursor != null) {
- if (cursor.parentNode === display)
- display.removeChild(cursor.getCanvas());
- display.appendChild(cursor.getCanvas());
- }
+ }
- }
- else {
- // Reset size
- layer.resize(displayWidth, displayHeight);
- }
+ function getLayer(index) {
+
+ // If buffer, just get layer
+ if (index < 0)
+ return getBufferLayer(index);
- return layer;
- }
+ // Otherwise, retrieve layer from layer container
+ return getLayerContainer(index).getLayer();
}
"size": function(parameters) {
- displayWidth = parseInt(parameters[0]);
- displayHeight = parseInt(parameters[1]);
+ var layer_index = parseInt(parameters[0]);
+ var width = parseInt(parameters[1]);
+ var height = parseInt(parameters[2]);
+
+ // Only valid for layers (buffers auto-resize)
+ if (layer_index >= 0) {
+
+ // Resize layer
+ var layer_container = getLayerContainer(layer_index);
+ layer_container.resize(width, height);
+
+ // If layer is default, resize display
+ if (layer_index == 0) {
+
+ displayWidth = width;
+ displayHeight = height;
+
+ // Update (set) display size
+ display.style.width = displayWidth + "px";
+ display.style.height = displayHeight + "px";
- // Update (set) display size
- display.style.width = displayWidth + "px";
- display.style.height = displayHeight + "px";
+ }
+
+ } // end if layer (not buffer)
+
+ },
+
+ "move": function(parameters) {
+
+ var layer_index = parseInt(parameters[0]);
+ var parent_index = parseInt(parameters[1]);
+ var x = parseInt(parameters[2]);
+ var y = parseInt(parameters[3]);
+ var z = parseInt(parameters[4]);
+
+ // Only valid for non-default layers
+ if (layer_index > 0 && parent_index >= 0) {
- // Set cursor layer width/height
- if (cursor != null)
- cursor.resize(displayWidth, displayHeight);
+ // Get container element
+ var layer_container = getLayerContainer(layer_index).getElement();
+ var parent = getLayerContainer(parent_index).getElement();
+
+ // Set parent if necessary
+ if (!(layer_container.parentNode === parent))
+ parent.appendChild(layer_container);
+
+ // Move layer
+ layer_container.style.left = x + "px";
+ layer_container.style.top = y + "px";
+ layer_container.style.zIndex = z;
+
+ }
+
+ },
+
+ "dispose": function(parameters) {
+
+ var layer_index = parseInt(parameters[0]);
+
+ // If visible layer, remove from parent
+ if (layer_index > 0) {
+
+ // Get container element
+ var layer_container = getLayerContainer(layer_index).getElement();
+
+ // Remove from parent
+ layer_container.parentNode.removeChild(layer_container);
+
+ // Delete reference
+ delete layers[layer_index];
+
+ }
+
+ // If buffer, just delete reference
+ else if (layer_index < 0)
+ delete buffers[-1 - layer_index];
+
+ // Attempting to dispose the root layer currently has no effect.
},
dstL.setChannelMask(channelMask);
- dstL.copyRect(
+ dstL.copy(
srcL,
srcX,
srcY,
},
- "rect": function(parameters) {
-
- var channelMask = parseInt(parameters[0]);
- var layer = getLayer(parseInt(parameters[1]));
- var x = parseInt(parameters[2]);
- var y = parseInt(parameters[3]);
- var w = parseInt(parameters[4]);
- var h = parseInt(parameters[5]);
- var r = parseInt(parameters[6]);
- var g = parseInt(parameters[7]);
- var b = parseInt(parameters[8]);
- var a = parseInt(parameters[9]);
+ "transfer": function(parameters) {
- layer.setChannelMask(channelMask);
+ var srcL = getLayer(parseInt(parameters[0]));
+ var srcX = parseInt(parameters[1]);
+ var srcY = parseInt(parameters[2]);
+ var srcWidth = parseInt(parameters[3]);
+ var srcHeight = parseInt(parameters[4]);
+ var transferFunction = Guacamole.Client.DefaultTransferFunction[parameters[5]];
+ var dstL = getLayer(parseInt(parameters[6]));
+ var dstX = parseInt(parameters[7]);
+ var dstY = parseInt(parameters[8]);
- layer.drawRect(
- x, y, w, h,
- r, g, b, a
+ dstL.transfer(
+ srcL,
+ srcX,
+ srcY,
+ srcWidth,
+ srcHeight,
+ dstX,
+ dstY,
+ transferFunction
);
},
- "clip": function(parameters) {
+ "rect": function(parameters) {
var layer = getLayer(parseInt(parameters[0]));
var x = parseInt(parameters[1]);
var w = parseInt(parameters[3]);
var h = parseInt(parameters[4]);
- layer.clipRect(x, y, w, h);
+ layer.rect(x, y, w, h);
},
- "cursor": function(parameters) {
+ "clip": function(parameters) {
- var x = parseInt(parameters[0]);
- var y = parseInt(parameters[1]);
- var data = parameters[2];
+ var layer = getLayer(parseInt(parameters[0]));
- if (cursor == null) {
- cursor = new Guacamole.Layer(displayWidth, displayHeight);
-
- var canvas = cursor.getCanvas();
- canvas.style.position = "absolute";
- canvas.style.left = "0px";
- canvas.style.top = "0px";
+ layer.clip();
- display.appendChild(canvas);
- }
+ },
+
+ "cursor": function(parameters) {
- // Start cursor image load
- var image = new Image();
- image.onload = function() {
- cursorImage = image;
+ cursorHotspotX = parseInt(parameters[0]);
+ cursorHotspotY = parseInt(parameters[1]);
+ var srcL = getLayer(parseInt(parameters[2]));
+ var srcX = parseInt(parameters[3]);
+ var srcY = parseInt(parameters[4]);
+ var srcWidth = parseInt(parameters[5]);
+ var srcHeight = parseInt(parameters[6]);
- var cursorX = cursorRectX + cursorHotspotX;
- var cursorY = cursorRectY + cursorHotspotY;
+ // Reset cursor size
+ cursor.resize(srcWidth, srcHeight);
- cursorHotspotX = x;
- cursorHotspotY = y;
+ // Draw cursor to cursor layer
+ cursor.getLayer().copyRect(
+ srcL,
+ srcX,
+ srcY,
+ srcWidth,
+ srcHeight,
+ 0,
+ 0
+ );
- redrawCursor(cursorX, cursorY);
- };
- image.src = "data:image/png;base64," + data
+ // Update cursor position (hotspot may have changed)
+ moveCursor(cursorX, cursorY);
},
// Count active, not-ready layers and install sync tracking hooks
for (var i=0; i<layers.length; i++) {
- var layer = layers[i];
+ var layer = layers[i].getLayer();
if (layer && !layer.isReady()) {
layersToSync++;
layer.sync(syncLayer);
};
+
+/**
+ * Simple container for Guacamole.Layer, allowing layers to be easily
+ * repositioned and nested. This allows certain operations to be accelerated
+ * through DOM manipulation, rather than raster operations.
+ *
+ * @constructor
+ *
+ * @param {Number} width The width of the Layer, in pixels. The canvas element
+ * backing this Layer will be given this width.
+ *
+ * @param {Number} height The height of the Layer, in pixels. The canvas element
+ * backing this Layer will be given this height.
+ */
+Guacamole.Client.LayerContainer = function(width, height) {
+
+ /**
+ * Reference to this LayerContainer.
+ * @private
+ */
+ var layer_container = this;
+
+ // Create layer with given size
+ var layer = new Guacamole.Layer(width, height);
+
+ // Set layer position
+ var canvas = layer.getCanvas();
+ canvas.style.position = "absolute";
+ canvas.style.left = "0px";
+ canvas.style.top = "0px";
+
+ // Create div with given size
+ var div = document.createElement("div");
+ div.appendChild(canvas);
+ div.style.width = width + "px";
+ div.style.height = height + "px";
+
+ /**
+ * Changes the size of this LayerContainer and the contained Layer to the
+ * given width and height.
+ *
+ * @param {Number} width The new width to assign to this Layer.
+ * @param {Number} height The new height to assign to this Layer.
+ */
+ layer_container.resize = function(width, height) {
+
+ // Resize layer
+ layer.resize(width, height);
+
+ // Resize containing div
+ div.style.width = width + "px";
+ div.style.height = height + "px";
+
+ };
+
+ /**
+ * Returns the Layer contained within this LayerContainer.
+ * @returns {Guacamole.Layer} The Layer contained within this LayerContainer.
+ */
+ layer_container.getLayer = function() {
+ return layer;
+ };
+
+ /**
+ * Returns the element containing the Layer within this LayerContainer.
+ * @returns {Element} The element containing the Layer within this LayerContainer.
+ */
+ layer_container.getElement = function() {
+ return div;
+ };
+
+};
+
+/**
+ * Map of all Guacamole binary raster operations to transfer functions.
+ * @private
+ */
+Guacamole.Client.DefaultTransferFunction = {
+
+ /* BLACK */
+ 0x0: function (src, dst) {
+ dst.red = dst.green = dst.blue = 0x00;
+ },
+
+ /* WHITE */
+ 0xF: function (src, dst) {
+ dst.red = dst.green = dst.blue = 0xFF;
+ },
+
+ /* SRC */
+ 0x3: function (src, dst) {
+ dst.red = src.red;
+ dst.green = src.green;
+ dst.blue = src.blue;
+ dst.alpha = src.alpha;
+ },
+
+ /* DEST (no-op) */
+ 0x5: function (src, dst) {
+ // Do nothing
+ },
+
+ /* Invert SRC */
+ 0xC: function (src, dst) {
+ dst.red = 0xFF & ~src.red;
+ dst.green = 0xFF & ~src.green;
+ dst.blue = 0xFF & ~src.blue;
+ dst.alpha = src.alpha;
+ },
+
+ /* Invert DEST */
+ 0xA: function (src, dst) {
+ dst.red = 0xFF & ~dst.red;
+ dst.green = 0xFF & ~dst.green;
+ dst.blue = 0xFF & ~dst.blue;
+ },
+
+ /* AND */
+ 0x1: function (src, dst) {
+ dst.red = ( src.red & dst.red);
+ dst.green = ( src.green & dst.green);
+ dst.blue = ( src.blue & dst.blue);
+ },
+
+ /* NAND */
+ 0xE: function (src, dst) {
+ dst.red = 0xFF & ~( src.red & dst.red);
+ dst.green = 0xFF & ~( src.green & dst.green);
+ dst.blue = 0xFF & ~( src.blue & dst.blue);
+ },
+
+ /* OR */
+ 0x7: function (src, dst) {
+ dst.red = ( src.red | dst.red);
+ dst.green = ( src.green | dst.green);
+ dst.blue = ( src.blue | dst.blue);
+ },
+
+ /* NOR */
+ 0x8: function (src, dst) {
+ dst.red = 0xFF & ~( src.red | dst.red);
+ dst.green = 0xFF & ~( src.green | dst.green);
+ dst.blue = 0xFF & ~( src.blue | dst.blue);
+ },
+
+ /* XOR */
+ 0x6: function (src, dst) {
+ dst.red = ( src.red ^ dst.red);
+ dst.green = ( src.green ^ dst.green);
+ dst.blue = ( src.blue ^ dst.blue);
+ },
+
+ /* XNOR */
+ 0x9: function (src, dst) {
+ dst.red = 0xFF & ~( src.red ^ dst.red);
+ dst.green = 0xFF & ~( src.green ^ dst.green);
+ dst.blue = 0xFF & ~( src.blue ^ dst.blue);
+ },
+
+ /* AND inverted source */
+ 0x4: function (src, dst) {
+ dst.red = 0xFF & (~src.red & dst.red);
+ dst.green = 0xFF & (~src.green & dst.green);
+ dst.blue = 0xFF & (~src.blue & dst.blue);
+ },
+
+ /* OR inverted source */
+ 0xD: function (src, dst) {
+ dst.red = 0xFF & (~src.red | dst.red);
+ dst.green = 0xFF & (~src.green | dst.green);
+ dst.blue = 0xFF & (~src.blue | dst.blue);
+ },
+
+ /* AND inverted destination */
+ 0x2: function (src, dst) {
+ dst.red = 0xFF & ( src.red & ~dst.red);
+ dst.green = 0xFF & ( src.green & ~dst.green);
+ dst.blue = 0xFF & ( src.blue & ~dst.blue);
+ },
+
+ /* OR inverted destination */
+ 0xB: function (src, dst) {
+ dst.red = 0xFF & ( src.red | ~dst.red);
+ dst.green = 0xFF & ( src.green | ~dst.green);
+ dst.blue = 0xFF & ( src.blue | ~dst.blue);
+ }
+
+};
projects / guacamole-common-js.git / blobdiff