Fix jsdoc, add missing documentation.
[guacamole-common-js.git] / src / main / resources / layer.js
index f78e519..e6052e7 100644 (file)
  *
  * ***** END LICENSE BLOCK ***** */
 
-// Guacamole namespace
+/**
+ * Namespace for all Guacamole JavaScript objects.
+ * @namespace
+ */
 var Guacamole = Guacamole || {};
 
 /**
@@ -72,6 +75,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
@@ -84,11 +88,18 @@ Guacamole.Layer = function(width, height) {
     /**
      * Whether a new path should be started with the next path drawing
      * operations.
+     * @private
      */
     var pathClosed = true;
 
     /**
      * The number of states on the state stack.
+     * 
+     * Note that there will ALWAYS be one element on the stack, but that
+     * element is not exposed. It is only used to reset the layer to its
+     * initial state.
+     * 
+     * @private
      */
     var stackSize = 0;
 
@@ -163,6 +174,10 @@ Guacamole.Layer = function(width, height) {
         width = newWidth;
         height = newHeight;
 
+        // Acknowledge reset of stack (happens on resize of canvas)
+        stackSize = 0;
+        displayContext.save();
+
     }
 
     /**
@@ -314,6 +329,7 @@ Guacamole.Layer = function(width, height) {
      * as whether the task is blocked depends completely on whether the
      * other layer is currently ready.
      * 
+     * @private
      * @param {Guacamole.Layer} otherLayer The other layer which must be blocked
      *                          until this task completes.
      * @param {function} handler The function to call when possible.
@@ -568,16 +584,86 @@ Guacamole.Layer = function(width, height) {
     };
 
     /**
-     * Add the specified cubic bezier point to the current path.
+     * Starts a new path at the specified point.
      * 
      * @param {Number} x The X coordinate of the point to draw.
      * @param {Number} y The Y coordinate of the point to draw.
+     */
+    this.moveTo = function(x, y) {
+        scheduleTask(function() {
+            
+            // Start a new path if current path is closed
+            if (pathClosed) {
+                displayContext.beginPath();
+                pathClosed = false;
+            }
+            
+            if (layer.autosize != 0) fitRect(x, y, 0, 0);
+            displayContext.moveTo(x, y);
+            
+        });
+    };
+
+    /**
+     * Add the specified line to the current path.
+     * 
+     * @param {Number} x The X coordinate of the endpoint of the line to draw.
+     * @param {Number} y The Y coordinate of the endpoint of the line to draw.
+     */
+    this.lineTo = function(x, y) {
+        scheduleTask(function() {
+            
+            // Start a new path if current path is closed
+            if (pathClosed) {
+                displayContext.beginPath();
+                pathClosed = false;
+            }
+            
+            if (layer.autosize != 0) fitRect(x, y, 0, 0);
+            displayContext.lineTo(x, y);
+            
+        });
+    };
+
+    /**
+     * Add the specified arc to the current path.
+     * 
+     * @param {Number} x The X coordinate of the center of the circle which
+     *                   will contain the arc.
+     * @param {Number} y The Y coordinate of the center of the circle which
+     *                   will contain the arc.
+     * @param {Number} radius The radius of the circle.
+     * @param {Number} startAngle The starting angle of the arc, in radians.
+     * @param {Number} endAngle The ending angle of the arc, in radians.
+     * @param {Boolean} negative Whether the arc should be drawn in order of
+     *                           decreasing angle.
+     */
+    this.arc = function(x, y, radius, startAngle, endAngle, negative) {
+        scheduleTask(function() {
+            
+            // Start a new path if current path is closed
+            if (pathClosed) {
+                displayContext.beginPath();
+                pathClosed = false;
+            }
+            
+            if (layer.autosize != 0) fitRect(x, y, 0, 0);
+            displayContext.arc(x, y, radius, startAngle, endAngle, negative);
+            
+        });
+    };
+
+    /**
+     * Starts a new path at the specified point.
+     * 
      * @param {Number} cp1x The X coordinate of the first control point.
      * @param {Number} cp1y The Y coordinate of the first control point.
      * @param {Number} cp2x The X coordinate of the second control point.
      * @param {Number} cp2y The Y coordinate of the second control point.
+     * @param {Number} x The X coordinate of the endpoint of the curve.
+     * @param {Number} y The Y coordinate of the endpoint of the curve.
      */
-    this.path = function(x, y, cp1x, cp1y, cp2x, cp2y) {
+    this.curveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
         scheduleTask(function() {
             
             // Start a new path if current path is closed
@@ -587,7 +673,21 @@ Guacamole.Layer = function(width, height) {
             }
             
             if (layer.autosize != 0) fitRect(x, y, 0, 0);
-            displayContext.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, y);
+            displayContext.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+            
+        });
+    };
+
+    /**
+     * Closes the current path by connecting the end point with the start
+     * point (if any) with a straight line.
+     */
+    this.close = function() {
+        scheduleTask(function() {
+            
+            // Close path
+            displayContext.closePath();
+            pathClosed = true;
             
         });
     };
@@ -788,16 +888,13 @@ Guacamole.Layer = function(width, height) {
 
             // Clear stack
             while (stackSize > 0) {
-                displaycontext.restore();
+                displayContext.restore();
                 stackSize--;
             }
 
-            // Clear transform
-            displayContext.setTransform(
-                1, 0, 0,
-                0, 1, 0
-              /*0, 0, 1*/
-            );
+            // Restore to initial state
+            displayContext.restore();
+            displayContext.save();
 
             // Clear path
             displayContext.beginPath();
@@ -807,7 +904,32 @@ Guacamole.Layer = function(width, height) {
     };
 
     /**
-     * Applies the given affine transform (defined with three values from the
+     * Sets 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.setTransform = function(a, b, c, d, e, f) {
+        scheduleTask(function() {
+
+            // Set transform
+            displayContext.setTransform(
+                a, b, c,
+                d, e, f
+              /*0, 0, 1*/
+            );
+
+        });
+    };
+
+
+    /**
+     * 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.
@@ -820,7 +942,7 @@ Guacamole.Layer = function(width, height) {
     this.transform = function(a, b, c, d, e, f) {
         scheduleTask(function() {
 
-            // Clear transform
+            // Apply transform
             displayContext.transform(
                 a, b, c,
                 d, e, f