*
* ***** END LICENSE BLOCK ***** */
-// Guacamole namespace
+/**
+ * Namespace for all Guacamole JavaScript objects.
+ * @namespace
+ */
var Guacamole = Guacamole || {};
var displayWidth = 0;
var displayHeight = 0;
+ var displayScale = 1;
/**
* Translation from Guacamole protocol line caps to Layer line caps.
+ * @private
*/
var lineCap = {
0: "butt",
/**
* Translation from Guacamole protocol line caps to Layer line caps.
+ * @private
*/
var lineJoin = {
0: "bevel",
2: "round"
};
+ // Create bounding div
+ var bounds = document.createElement("div");
+ bounds.style.position = "relative";
+ bounds.style.width = (displayWidth*displayScale) + "px";
+ bounds.style.height = (displayHeight*displayScale) + "px";
+
// Create display
var display = document.createElement("div");
display.style.position = "relative";
display.style.width = displayWidth + "px";
display.style.height = displayHeight + "px";
+ // Ensure transformations on display originate at 0,0
+ display.style.transformOrigin =
+ display.style.webkitTransformOrigin =
+ display.style.MozTransformOrigin =
+ display.style.OTransformOrigin =
+ display.style.msTransformOrigin =
+ "0 0";
+
// Create default layer
var default_layer_container = new Guacamole.Client.LayerContainer(displayWidth, displayHeight);
display.appendChild(default_layer_container.getElement());
display.appendChild(cursor.getElement());
+ // Add display to bounds
+ bounds.appendChild(display);
+
// Initially, only default layer exists
var layers = [default_layer_container];
function moveCursor(x, y) {
- var element = cursor.getElement();
-
- // Update rect
- element.style.left = (x - cursorHotspotX) + "px";
- element.style.top = (y - cursorHotspotY) + "px";
+ // Move cursor layer
+ cursor.translate(x - cursorHotspotX, y - cursorHotspotY);
// Update stored position
cursorX = x;
}
- guac_client.getDisplay = function() {
- return display;
+ /**
+ * Returns an element containing the display of this Guacamole.Client.
+ * Adding the element returned by this function to an element in the body
+ * of a document will cause the client's display to be visible.
+ *
+ * @return {Element} An element containing ths display of this
+ * Guacamole.Client.
+ */
+ this.getDisplay = function() {
+ return bounds;
};
- guac_client.sendKeyEvent = function(pressed, keysym) {
+ /**
+ * Sends a key event having the given properties as if the user
+ * pressed or released a key.
+ *
+ * @param {Boolean} pressed Whether the key is pressed (true) or released
+ * (false).
+ * @param {Number} keysym The keysym of the key being pressed or released.
+ */
+ this.sendKeyEvent = function(pressed, keysym) {
// Do not send requests if not connected
if (!isConnected())
return;
tunnel.sendMessage("key", keysym, pressed);
};
- guac_client.sendMouseState = function(mouseState) {
+ /**
+ * Sends a mouse event having the properties provided by the given mouse
+ * state.
+ *
+ * @param {Guacamole.Mouse.State} mouseState The state of the mouse to send
+ * in the mouse event.
+ */
+ this.sendMouseState = function(mouseState) {
// Do not send requests if not connected
if (!isConnected())
// Update client-side cursor
moveCursor(
- mouseState.x,
- mouseState.y
+ Math.floor(mouseState.x),
+ Math.floor(mouseState.y)
);
// Build mask
if (mouseState.down) buttonMask |= 16;
// Send message
- tunnel.sendMessage("mouse", mouseState.x, mouseState.y, buttonMask);
+ tunnel.sendMessage("mouse", Math.floor(mouseState.x), Math.floor(mouseState.y), buttonMask);
};
- guac_client.setClipboard = function(data) {
+ /**
+ * Sets the clipboard of the remote client to the given text data.
+ *
+ * @param {String} data The data to send as the clipboard contents.
+ */
+ this.setClipboard = function(data) {
// Do not send requests if not connected
if (!isConnected())
tunnel.sendMessage("clipboard", data);
};
- // Handlers
- guac_client.onstatechange = null;
- guac_client.onname = null;
- guac_client.onerror = null;
- guac_client.onclipboard = null;
+ /**
+ * Fired whenever the state of this Guacamole.Client changes.
+ *
+ * @event
+ * @param {Number} state The new state of the client.
+ */
+ this.onstatechange = null;
+
+ /**
+ * Fired when the remote client sends a name update.
+ *
+ * @event
+ * @param {String} name The new name of this client.
+ */
+ this.onname = null;
+
+ /**
+ * Fired when an error is reported by the remote client, and the connection
+ * is being closed.
+ *
+ * @event
+ * @param {String} error A human-readable description of the error.
+ */
+ this.onerror = null;
+
+ /**
+ * Fired when the clipboard of the remote client is changing.
+ *
+ * @event
+ * @param {String} data The new text data of the remote clipboard.
+ */
+ this.onclipboard = null;
// Layers
function getBufferLayer(index) {
/**
* Handlers for all defined layer properties.
+ * @private
*/
var layerPropertyHandlers = {
/**
* Handlers for all instruction opcodes receivable by a Guacamole protocol
* client.
+ * @private
*/
var instructionHandlers = {
var layer_container = getLayerContainer(layer_index).getElement();
// Set layer transform
- layer_container.style.transform =
- layer_container.style.WebkitTransform =
- layer_container.style.MozTransform =
- layer_container.style.OTransform =
- layer_container.style.msTransform =
-
- /* a c e
- * b d f
- * 0 0 1
- */
-
- "matrix(" + a + "," + b + "," + c + "," + d + "," + e + "," + f + ")";
+ layer_container.transform(a, b, c, d, e, f);
}
if (layer_index > 0 && parent_index >= 0) {
// Get container element
- var layer_container = getLayerContainer(layer_index).getElement();
+ var layer_container = getLayerContainer(layer_index);
+ var layer_container_element = layer_container.getElement();
var parent = getLayerContainer(parent_index).getElement();
// Set parent if necessary
- if (!(layer_container.parentNode === parent))
- parent.appendChild(layer_container);
+ if (!(layer_container_element.parentNode === parent))
+ parent.appendChild(layer_container_element);
// Move layer
- layer_container.style.left = x + "px";
- layer_container.style.top = y + "px";
- layer_container.style.zIndex = z;
+ layer_container.translate(x, y);
+ layer_container_element.style.zIndex = z;
}
var width = parseInt(parameters[1]);
var height = parseInt(parameters[2]);
- // Resize layer
- var layer_container = getLayerContainer(layer_index);
- layer_container.resize(width, height);
+ // If not buffer, resize layer and container
+ 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) {
- // If layer is default, resize display
- if (layer_index == 0) {
+ displayWidth = width;
+ displayHeight = height;
- 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";
+ // Update bounds size
+ bounds.style.width = (displayWidth*displayScale) + "px";
+ bounds.style.height = (displayHeight*displayScale) + "px";
+ }
+
+ }
+
+ // If buffer, resize layer only
+ else {
+ var layer = getBufferLayer(parseInt(parameters[0]));
+ layer.resize(width, height);
}
},
};
- guac_client.disconnect = function() {
+ this.disconnect = function() {
// Only attempt disconnection not disconnected.
if (currentState != STATE_DISCONNECTED
};
- guac_client.connect = function(data) {
+ this.connect = function(data) {
setState(STATE_CONNECTING);
setState(STATE_WAITING);
};
-};
+ this.scale = function(scale) {
+
+ display.style.transform =
+ display.style.WebkitTransform =
+ display.style.MozTransform =
+ display.style.OTransform =
+ display.style.msTransform =
+ "scale(" + scale + "," + scale + ")";
+
+ displayScale = scale;
+
+ // Update bounds size
+ bounds.style.width = (displayWidth*displayScale) + "px";
+ bounds.style.height = (displayHeight*displayScale) + "px";
+
+ };
+
+ this.getScale = function() {
+ return displayScale;
+ };
+
+};
/**
* Simple container for Guacamole.Layer, allowing layers to be easily
* @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) {
+ this.resize = function(width, height) {
// Resize layer
layer.resize(width, height);
* Returns the Layer contained within this LayerContainer.
* @returns {Guacamole.Layer} The Layer contained within this LayerContainer.
*/
- layer_container.getLayer = function() {
+ this.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() {
+ this.getElement = function() {
return div;
};
+ /**
+ * The translation component of this LayerContainer's transform.
+ * @private
+ */
+ var translate = "translate(0px, 0px)"; // (0, 0)
+
+ /**
+ * The arbitrary matrix component of this LayerContainer's transform.
+ * @private
+ */
+ var matrix = "matrix(1, 0, 0, 1, 0, 0)"; // Identity
+
+ /**
+ * Moves the upper-left corner of this LayerContainer to the given X and Y
+ * coordinate.
+ *
+ * @param {Number} x The X coordinate to move to.
+ * @param {Number} y The Y coordinate to move to.
+ */
+ this.translate = function(x, y) {
+
+ // Generate translation
+ translate = "translate("
+ + x + "px,"
+ + y + "px)";
+
+ // Set layer transform
+ div.style.transform =
+ div.style.WebkitTransform =
+ div.style.MozTransform =
+ div.style.OTransform =
+ div.style.msTransform =
+
+ translate + " " + matrix;
+
+ };
+
+ /**
+ * Applies the given affine transform (defined with six values from the
+ * transform's matrix).
+ *
+ * @param {Number} a The first value in the affine transform's matrix.
+ * @param {Number} b The second value in the affine transform's matrix.
+ * @param {Number} c The third value in the affine transform's matrix.
+ * @param {Number} d The fourth value in the affine transform's matrix.
+ * @param {Number} e The fifth value in the affine transform's matrix.
+ * @param {Number} f The sixth value in the affine transform's matrix.
+ */
+ this.transform = function(a, b, c, d, e, f) {
+
+ // Generate matrix transformation
+ matrix =
+
+ /* a c e
+ * b d f
+ * 0 0 1
+ */
+
+ "matrix(" + a + "," + b + "," + c + "," + d + "," + e + "," + f + ")";
+
+ // Set layer transform
+ div.style.transform =
+ div.style.WebkitTransform =
+ div.style.MozTransform =
+ div.style.OTransform =
+ div.style.msTransform =
+
+ translate + " " + matrix;
+
+ };
+
};
/**
projects / guacamole-common-js.git / blobdiff