var displayWidth = 0;
var displayHeight = 0;
+ var displayScale = 1;
+
+ /**
+ * Translation from Guacamole protocol line caps to Layer line caps.
+ */
+ var lineCap = {
+ 0: "butt",
+ 1: "round",
+ 2: "square"
+ };
+
+ /**
+ * Translation from Guacamole protocol line caps to Layer line caps.
+ */
+ var lineJoin = {
+ 0: "bevel",
+ 1: "miter",
+ 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.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);
default_layer_container_element.style.position = "absolute";
default_layer_container_element.style.left = "0px";
default_layer_container_element.style.top = "0px";
+ default_layer_container_element.style.overflow = "hidden";
// Create cursor layer
var cursor = new Guacamole.Client.LayerContainer(0, 0);
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;
+ return bounds;
};
guac_client.sendKeyEvent = function(pressed, keysym) {
layer_element.style.position = "absolute";
layer_element.style.left = "0px";
layer_element.style.top = "0px";
+ layer_element.style.overflow = "hidden";
// Add to default layer container
default_layer_container.getElement().appendChild(layer_element);
}
+ /**
+ * Handlers for all defined layer properties.
+ */
+ var layerPropertyHandlers = {
+
+ "miter-limit": function(layer, value) {
+ layer.setMiterLimit(parseFloat(value));
+ }
+
+ };
+
+ /**
+ * Handlers for all instruction opcodes receivable by a Guacamole protocol
+ * client.
+ */
var instructionHandlers = {
+ "arc": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+ var x = parseInt(parameters[1]);
+ var y = parseInt(parameters[2]);
+ var radius = parseInt(parameters[3]);
+ var startAngle = parseFloat(parameters[4]);
+ var endAngle = parseFloat(parameters[5]);
+ var negative = parseInt(parameters[6]);
+
+ layer.arc(x, y, radius, startAngle, endAngle, negative != 0);
+
+ },
+
"cfill": function(parameters) {
var channelMask = parseInt(parameters[0]);
if (guac_client.onclipboard) guac_client.onclipboard(parameters[0]);
},
+ "close": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+
+ layer.close();
+
+ },
+
"copy": function(parameters) {
var srcL = getLayer(parseInt(parameters[0]));
},
+ "cstroke": function(parameters) {
+
+ var channelMask = parseInt(parameters[0]);
+ var layer = getLayer(parseInt(parameters[1]));
+ var cap = lineCap[parseInt(parameters[2])];
+ var join = lineJoin[parseInt(parameters[3])];
+ var thickness = parseInt(parameters[4]);
+ var r = parseInt(parameters[5]);
+ var g = parseInt(parameters[6]);
+ var b = parseInt(parameters[7]);
+ var a = parseInt(parameters[8]);
+
+ layer.setChannelMask(channelMask);
+
+ layer.strokeColor(cap, join, thickness, r, g, b, a);
+
+ },
+
"cursor": function(parameters) {
cursorHotspotX = parseInt(parameters[0]);
},
+ "curve": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+ var cp1x = parseInt(parameters[1]);
+ var cp1y = parseInt(parameters[2]);
+ var cp2x = parseInt(parameters[3]);
+ var cp2y = parseInt(parameters[4]);
+ var x = parseInt(parameters[5]);
+ var y = parseInt(parameters[6]);
+
+ layer.curveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+
+ },
+
"dispose": function(parameters) {
var layer_index = parseInt(parameters[0]);
},
+ "distort": function(parameters) {
+
+ var layer_index = parseInt(parameters[0]);
+ var a = parseFloat(parameters[1]);
+ var b = parseFloat(parameters[2]);
+ var c = parseFloat(parameters[3]);
+ var d = parseFloat(parameters[4]);
+ var e = parseFloat(parameters[5]);
+ var f = parseFloat(parameters[6]);
+
+ // Only valid for visible layers (not buffers)
+ if (layer_index >= 0) {
+
+ // Get container element
+ var layer_container = getLayerContainer(layer_index).getElement();
+
+ // Set layer transform
+ layer_container.transform(a, b, c, d, e, f);
+
+ }
+
+ },
+
"error": function(parameters) {
if (guac_client.onerror) guac_client.onerror(parameters[0]);
guac_client.disconnect();
},
+ "identity": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+
+ layer.setTransform(1, 0, 0, 1, 0, 0);
+
+ },
+
+ "lfill": function(parameters) {
+
+ var channelMask = parseInt(parameters[0]);
+ var layer = getLayer(parseInt(parameters[1]));
+ var srcLayer = getLayer(parseInt(parameters[2]));
+
+ layer.setChannelMask(channelMask);
+
+ layer.fillLayer(srcLayer);
+
+ },
+
+ "line": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+ var x = parseInt(parameters[1]);
+ var y = parseInt(parameters[2]);
+
+ layer.lineTo(x, y);
+
+ },
+
+ "lstroke": function(parameters) {
+
+ var channelMask = parseInt(parameters[0]);
+ var layer = getLayer(parseInt(parameters[1]));
+ var srcLayer = getLayer(parseInt(parameters[2]));
+
+ layer.setChannelMask(channelMask);
+
+ layer.strokeLayer(srcLayer);
+
+ },
+
"move": function(parameters) {
var layer_index = parseInt(parameters[0]);
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;
}
},
+ "pop": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+
+ layer.pop();
+
+ },
+
+ "push": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+
+ layer.push();
+
+ },
+
"rect": function(parameters) {
var layer = getLayer(parseInt(parameters[0]));
layer.reset();
},
-
+
+ "set": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+ var name = parameters[1];
+ var value = parameters[2];
+
+ // Call property handler if defined
+ var handler = layerPropertyHandlers[name];
+ if (handler)
+ handler(layer, value);
+
+ },
+
+ "shade": function(parameters) {
+
+ var layer_index = parseInt(parameters[0]);
+ var a = parseInt(parameters[1]);
+
+ // Only valid for visible layers (not buffers)
+ if (layer_index >= 0) {
+
+ // Get container element
+ var layer_container = getLayerContainer(layer_index).getElement();
+
+ // Set layer opacity
+ layer_container.style.opacity = a/255.0;
+
+ }
+
+ },
+
"size": function(parameters) {
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);
- // 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";
- }
+ }
- } // end if layer (not buffer)
+ },
+
+ "start": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+ var x = parseInt(parameters[1]);
+ var y = parseInt(parameters[2]);
+
+ layer.moveTo(x, y);
},
transferFunction
);
+ },
+
+ "transform": function(parameters) {
+
+ var layer = getLayer(parseInt(parameters[0]));
+ var a = parseFloat(parameters[1]);
+ var b = parseFloat(parameters[2]);
+ var c = parseFloat(parameters[3]);
+ var d = parseFloat(parameters[4]);
+ var e = parseFloat(parameters[5]);
+ var f = parseFloat(parameters[6]);
+
+ layer.transform(a, b, c, d, e, f);
+
}
};
setState(STATE_WAITING);
};
+ guac_client.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";
+
+ };
+
};
return div;
};
+ /**
+ * The translation component of this LayerContainer's transform.
+ */
+ var translate = "translate(0px, 0px)"; // (0, 0)
+
+ /**
+ * The arbitrary matrix component of this LayerContainer's transform.
+ */
+ 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.
+ */
+ layer_container.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.
+ */
+ layer_container.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