Rect and clip instructions.

guacamole-common-js/src/main/resources/guacamole.js

@@ -302,6 +302,40 @@ Guacamole.Client = function(display, tunnel) {
 
         },
 
+        "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]);
+
+            layer.setChannelMask(channelMask);
+
+            layer.drawRect(
+                x, y, w, h,
+                r, g, b, a
+            );
+
+        },
+
+        "clip": function(parameters) {
+
+            var layer = getLayer(parseInt(parameters[0]));
+            var x = parseInt(parameters[1]);
+            var y = parseInt(parameters[2]);
+            var w = parseInt(parameters[3]);
+            var h = parseInt(parameters[4]);
+
+            layer.clipRect(x, y, w, h);
+
+        },
+
         "cursor": function(parameters) {
 
             var x = parseInt(parameters[0]);

guacamole-common-js/src/main/resources/layer.js

@@ -54,6 +54,7 @@ Guacamole.Layer = function(width, height) {
      * @private
      */
     var displayContext = display.getContext("2d");
+    displayContext.save();
 
     /**
      * The queue of all pending Tasks. Tasks will be run in order, with new
@@ -204,8 +205,8 @@ Guacamole.Layer = function(width, height) {
         // Draw all pending tasks.
         var task;
         while ((task = tasks[0]) != null && task.handler) {
-            task.handler();
             tasks.shift();
+            task.handler();
         }
 
     }
@@ -386,6 +387,56 @@ Guacamole.Layer = function(width, height) {
         });
     };
 
+    /**
+     * Fill the specified rectangle of image data with the specified color.
+     * 
+     * @param {Number} x The X coordinate of the upper-left corner of the
+     *                   rectangle to draw.
+     * @param {Number} y The Y coordinate of the upper-left corner of the
+     *                   rectangle to draw.
+     * @param {Number} w The width of the rectangle to draw.
+     * @param {Number} h The height of the rectangle to draw.
+     * @param {Number} r The red component of the color of the rectangle.
+     * @param {Number} g The green component of the color of the rectangle.
+     * @param {Number} b The blue component of the color of the rectangle.
+     * @param {Number} a The alpha component of the color of the rectangle.
+     */
+    this.drawRect = function(x, y, w, h, r, g, b, a) {
+        scheduleTask(function() {
+            if (layer.autosize != 0) fitRect(x, y, w, h);
+            displayContext.fillStyle = "rgba("
+                        + r + "," + g + "," + b + "," + a + ")";
+            displayContext.fillRect(x, y, w, h);
+        });
+    };
+
+    /**
+     * Clip all future drawing operations by the specified rectangle.
+     * 
+     * @param {Number} x The X coordinate of the upper-left corner of the
+     *                   rectangle to use for the clipping region.
+     * @param {Number} y The Y coordinate of the upper-left corner of the
+     *                   rectangle to use for the clipping region.
+     * @param {Number} w The width of the rectangle to use for the clipping region.
+     * @param {Number} h The height of the rectangle to use for the clipping region.
+     */
+    this.clipRect = function(x, y, w, h) {
+        scheduleTask(function() {
+
+            // Clear any current clipping region
+            displayContext.restore();
+            displayContext.save();
+
+            if (layer.autosize != 0) fitRect(x, y, w, h);
+
+            // Set new clipping region
+            displayContext.beginPath();
+            displayContext.rect(x, y, w, h);
+            displayContext.clip();
+
+        });
+    };
+
     /**
      * Provides the given filtering function with a writable snapshot of
      * image data and the current width and height of the Layer.