Add type annotations to gallery/js/image_editor/image_util.js.

ui/file_manager/gallery/js/image_editor/image_util.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Namespace object for the utilities.
-function ImageUtil() {}
+var ImageUtil = {};
 
 /**
  * Performance trace.
  */
 ImageUtil.trace = (function() {
+  /**
+   * Performance trace.
+   * @constructor
+   * @struct
+   */
   function PerformanceTrace() {
     this.lines_ = {};
     this.timers_ = {};
     this.container_ = null;
   }
 
   PerformanceTrace.prototype.bindToDOM = function(container) {
     this.container_ = container;
   };
 
@@ skipping 45 matching lines @@
  * @param {number} value Value to check.
  * @param {number} max Maximum value.
  * @return {boolean} True if value is between.
  */
 ImageUtil.between = function(min, value, max) {
   return (value - min) * (value - max) <= 0;
 };
 
 /**
  * Rectangle class.
+ *
+ * @param {number} left Left.
+ * @param {number} top Top.
+ * @param {number} width Width.
+ * @param {number} height Height.
+ * @constructor
+ * @struct
  */
-
-/**
- * Rectangle constructor takes 0, 1, 2 or 4 arguments.
- * Supports following variants:
- *   new ImageRect(left, top, width, height)
- *   new ImageRect(width, height)
- *   new ImageRect(rect)         // anything with left, top, width, height.
- *   new ImageRect(bounds)       // anything with left, top, right, bottom.
- *   new ImageRect(canvas|image) // anything with width and height.
- *   new ImageRect()             // empty rectangle.
- * @constructor
- */
-function ImageRect() {
-  switch (arguments.length) {
-    case 4:
-      this.left = arguments[0];
-      this.top = arguments[1];
-      this.width = arguments[2];
-      this.height = arguments[3];
-      return;
-
-    case 2:
-      this.left = 0;
-      this.top = 0;
-      this.width = arguments[0];
-      this.height = arguments[1];
-      return;
-
-    case 1: {
-      var source = arguments[0];
-      if ('left' in source && 'top' in source) {
-        this.left = source.left;
-        this.top = source.top;
-        if ('right' in source && 'bottom' in source) {
-          this.width = source.right - source.left;
-          this.height = source.bottom - source.top;
-          return;
-        }
-      } else {
-        this.left = 0;
-        this.top = 0;
-      }
-      if ('width' in source && 'height' in source) {
-        this.width = source.width;
-        this.height = source.height;
-        return;
-      }
-      break; // Fall through to the error message.
-    }
-
-    case 0:
-      this.left = 0;
-      this.top = 0;
-      this.width = 0;
-      this.height = 0;
-      return;
-  }
-  console.error('Invalid ImageRect constructor arguments:',
-                Array.apply(null, arguments));
+function ImageRect(left, top, width, height) {
+  this.left = left;
+  this.top = top;
+  this.width = width;
+  this.height = height;
 }
 
 /**
  * Creates an image rect with a canvas.
  * @param {!HTMLCanvasElement} canvas A canvas.
  * @return {!ImageRect}
+ *
+ * TODO(yawano) Since createFromImage accepts HTMLCanvasElement, delete this
+ *     method later.
  */
 ImageRect.createFromCanvas = function(canvas) {
-  return new ImageRect(canvas);
+  return ImageRect.createFromImage(canvas);
 };
 
 /**
+ * Creates an image rect with an image or a canvas.
+ * @param {!(HTMLImageElement|HTMLCanvasElement)} image An image or a canvas.
+ * @return {!ImageRect}
+ */
+ImageRect.createFromImage = function(image) {
+  return new ImageRect(0, 0, image.width, image.height);
+};
+
+/**
+ * Clone an image rect.
+ * @param {!ImageRect} imageRect An image rect.
+ * @return {!ImageRect}
+ */
+ImageRect.clone = function(imageRect) {
+  return new ImageRect(imageRect.left, imageRect.top, imageRect.width,
+      imageRect.height);
+};
+
+/**
  * Creates an image rect with a bound.
  * @param {{left: number, top: number, right: number, bottom: number}} bound
  *     A bound.
  * @return {!ImageRect}
  */
 ImageRect.createFromBounds = function(bound) {
-  return new ImageRect(bound);
+  return new ImageRect(bound.left, bound.top,
+      bound.right - bound.left, bound.bottom - bound.top);
 };
 
 /**
  * Creates an image rect with width and height.
  * @param {number} width Width.
  * @param {number} height Height.
  * @return {!ImageRect}
  */
 ImageRect.createFromWidthAndHeight = function(width, height) {
-  return new ImageRect(width, height);
+  return new ImageRect(0, 0, width, height);
 };
 
 /**
  * Creates an image rect with left, top, width and height.
  * @param {number} left Left.
  * @param {number} top Top.
  * @param {number} width Width.
  * @param {number} height Height.
  * @return {!ImageRect}
+ *
+ * TODO(yawano) Remove createWith calls and call constructor directly.

[fukino, 2014/12/11 11:28:16]

nit: We usually use semicolon after the name, like TODO(yawano): Remo...

[yawano, 2014/12/12 01:11:33]

Done.

  */
 ImageRect.createWith = function(left, top, width, height) {
   return new ImageRect(left, top, width, height);
 };
 
-ImageRect.prototype = {
+ImageRect.prototype = /** @struct */ ({
+  // TODO(yawano) Change getters to methods (e.g. getRight()).

[fukino, 2014/12/11 11:28:15]

ditto

[yawano, 2014/12/12 01:11:33]

Done.

+
   /**
    * Obtains the x coordinate of right edge. The most right pixels in the
    * rectangle are (x = right - 1) and the pixels (x = right) are not included
    * in the rectangle.
    * @return {number}
    */
   get right() {
     return this.left + this.width;
   },
 
   /**
    * Obtains the y coordinate of bottom edge. The most bottom pixels in the
    * rectangle are (y = bottom - 1) and the pixels (y = bottom) are not included
    * in the rectangle.
    * @return {number}
    */
   get bottom() {
     return this.top + this.height;
   }
-};
+});
 
 /**
  * @param {number} factor Factor to scale.
- * @return {ImageRect} A rectangle with every dimension scaled.
+ * @return {!ImageRect} A rectangle with every dimension scaled.
  */
 ImageRect.prototype.scale = function(factor) {
   return new ImageRect(
       this.left * factor,
       this.top * factor,
       this.width * factor,
       this.height * factor);
 };
 
 /**
  * @param {number} dx Difference in X.
  * @param {number} dy Difference in Y.
- * @return {ImageRect} A rectangle shifted by (dx,dy), same size.
+ * @return {!ImageRect} A rectangle shifted by (dx,dy), same size.
  */
 ImageRect.prototype.shift = function(dx, dy) {
   return new ImageRect(this.left + dx, this.top + dy, this.width, this.height);
 };
 
 /**
  * @param {number} x Coordinate of the left top corner.
  * @param {number} y Coordinate of the left top corner.
- * @return {ImageRect} A rectangle with left==x and top==y, same size.
+ * @return {!ImageRect} A rectangle with left==x and top==y, same size.
  */
 ImageRect.prototype.moveTo = function(x, y) {
   return new ImageRect(x, y, this.width, this.height);
 };
 
 /**
  * @param {number} dx Difference in X.
  * @param {number} dy Difference in Y.
  * @return {!ImageRect} A rectangle inflated by (dx, dy), same center.
  */
 ImageRect.prototype.inflate = function(dx, dy) {
   return new ImageRect(
       this.left - dx, this.top - dy, this.width + 2 * dx, this.height + 2 * dy);
 };
 
 /**
  * @param {number} x Coordinate of the point.
  * @param {number} y Coordinate of the point.
  * @return {boolean} True if the point lies inside the rectangle.
  */
 ImageRect.prototype.inside = function(x, y) {
   return this.left <= x && x < this.left + this.width &&
          this.top <= y && y < this.top + this.height;
 };
 
 /**
- * @param {ImageRect} rect Rectangle to check.
+ * @param {!ImageRect} rect Rectangle to check.
  * @return {boolean} True if this rectangle intersects with the |rect|.
  */
 ImageRect.prototype.intersects = function(rect) {
   return (this.left + this.width) > rect.left &&
          (rect.left + rect.width) > this.left &&
          (this.top + this.height) > rect.top &&
          (rect.top + rect.height) > this.top;
 };
 
 /**
- * @param {ImageRect} rect Rectangle to check.
+ * @param {!ImageRect} rect Rectangle to check.
  * @return {boolean} True if this rectangle containing the |rect|.
  */
 ImageRect.prototype.contains = function(rect) {
   return (this.left <= rect.left) &&
          (rect.left + rect.width) <= (this.left + this.width) &&
          (this.top <= rect.top) &&
          (rect.top + rect.height) <= (this.top + this.height);
 };
 
 /**
  * @return {boolean} True if rectangle is empty.
  */
 ImageRect.prototype.isEmpty = function() {
   return this.width === 0 || this.height === 0;
 };
 
 /**
  * Clamp the rectangle to the bounds by moving it.
  * Decrease the size only if necessary.
- * @param {ImageRect} bounds Bounds.
- * @return {ImageRect} Calculated rectangle.
+ * @param {!ImageRect} bounds Bounds.
+ * @return {!ImageRect} Calculated rectangle.
  */
 ImageRect.prototype.clamp = function(bounds) {
-  var rect = new ImageRect(this);
+  var rect = ImageRect.clone(this);
 
   if (rect.width > bounds.width) {
     rect.left = bounds.left;
     rect.width = bounds.width;
   } else if (rect.left < bounds.left) {
     rect.left = bounds.left;
   } else if (rect.left + rect.width >
              bounds.left + bounds.width) {
     rect.left = bounds.left + bounds.width - rect.width;
   }
@@ skipping 17 matching lines @@
 ImageRect.prototype.toString = function() {
   return '(' + this.left + ',' + this.top + '):' +
          '(' + (this.left + this.width) + ',' + (this.top + this.height) + ')';
 };
 /*
  * Useful shortcuts for drawing (static functions).
  */
 
 /**
  * Draw the image in context with appropriate scaling.
- * @param {CanvasRenderingContext2D} context Context to draw.
+ * @param {!CanvasRenderingContext2D} context Context to draw.
  * @param {!(HTMLCanvasElement|HTMLImageElement)} image Image to draw.
  * @param {ImageRect=} opt_dstRect Rectangle in the canvas (whole canvas by
  *     default).
  * @param {ImageRect=} opt_srcRect Rectangle in the image (whole image by
  *     default).
  */
 ImageRect.drawImage = function(context, image, opt_dstRect, opt_srcRect) {
-  opt_dstRect = opt_dstRect || new ImageRect(context.canvas);
-  opt_srcRect = opt_srcRect || new ImageRect(image);
+  opt_dstRect = opt_dstRect ||
+      ImageRect.createFromImage(assert(context.canvas));
+  opt_srcRect = opt_srcRect || ImageRect.createFromImage(image);
   if (opt_dstRect.isEmpty() || opt_srcRect.isEmpty())
     return;
   context.drawImage(image,
       opt_srcRect.left, opt_srcRect.top, opt_srcRect.width, opt_srcRect.height,
       opt_dstRect.left, opt_dstRect.top, opt_dstRect.width, opt_dstRect.height);
 };
 
 /**
  * Draw a box around the rectangle.
- * @param {CanvasRenderingContext2D} context Context to draw.
- * @param {ImageRect} rect Rectangle.
+ * @param {!CanvasRenderingContext2D} context Context to draw.
+ * @param {!ImageRect} rect Rectangle.
  */
 ImageRect.outline = function(context, rect) {
   context.strokeRect(
       rect.left - 0.5, rect.top - 0.5, rect.width + 1, rect.height + 1);
 };
 
 /**
  * Fill the rectangle.
- * @param {CanvasRenderingContext2D} context Context to draw.
- * @param {ImageRect} rect Rectangle.
+ * @param {!CanvasRenderingContext2D} context Context to draw.
+ * @param {!ImageRect} rect Rectangle.
  */
 ImageRect.fill = function(context, rect) {
   context.fillRect(rect.left, rect.top, rect.width, rect.height);
 };
 
 /**
  * Fills the space between the two rectangles.
- * @param {CanvasRenderingContext2D} context Context to draw.
- * @param {ImageRect} inner Inner rectangle.
- * @param {ImageRect} outer Outer rectangle.
+ * @param {!CanvasRenderingContext2D} context Context to draw.
+ * @param {!ImageRect} inner Inner rectangle.
+ * @param {!ImageRect} outer Outer rectangle.
  */
 ImageRect.fillBetween = function(context, inner, outer) {
   var innerRight = inner.left + inner.width;
   var innerBottom = inner.top + inner.height;
   var outerRight = outer.left + outer.width;
   var outerBottom = outer.top + outer.height;
   if (inner.top > outer.top) {
     context.fillRect(
         outer.left, outer.top, outer.width, inner.top - outer.top);
   }
@@ skipping 32 matching lines @@
  */
 Circle.prototype.inside = function(x, y) {
   x -= this.x;
   y -= this.y;
   return x * x + y * y <= this.squaredR;
 };
 
 /**
  * Copy an image applying scaling and rotation.
  *
- * @param {HTMLCanvasElement} dst Destination.
- * @param {HTMLCanvasElement|HTMLImageElement} src Source.
+ * @param {!HTMLCanvasElement} dst Destination.
+ * @param {!(HTMLCanvasElement|HTMLImageElement)} src Source.
  * @param {number} scaleX Y scale transformation.
  * @param {number} scaleY X scale transformation.
  * @param {number} angle (in radians).
  */
 ImageUtil.drawImageTransformed = function(dst, src, scaleX, scaleY, angle) {
   var context = dst.getContext('2d');
   context.save();
   context.translate(context.canvas.width / 2, context.canvas.height / 2);
   context.rotate(angle);
   context.scale(scaleX, scaleY);
   context.drawImage(src, -src.width / 2, -src.height / 2);
   context.restore();
 };
 
 /**
  * Adds or removes an attribute to/from an HTML element.
- * @param {HTMLElement} element To be applied to.
+ * @param {!HTMLElement} element To be applied to.
  * @param {string} attribute Name of attribute.
  * @param {boolean} on True if add, false if remove.
  */
 ImageUtil.setAttribute = function(element, attribute, on) {
   if (on)
     element.setAttribute(attribute, '');
   else
     element.removeAttribute(attribute);
 };
 
 /**
  * Adds or removes CSS class to/from an HTML element.
- * @param {HTMLElement} element To be applied to.
+ * @param {!HTMLElement} element To be applied to.
  * @param {string} className Name of CSS class.
  * @param {boolean} on True if add, false if remove.
  */
 ImageUtil.setClass = function(element, className, on) {
   var cl = element.classList;
   if (on)
     cl.add(className);
   else
     cl.remove(className);
 };
 
 /**
  * ImageLoader loads an image from a given Entry into a canvas in two steps:
  * 1. Loads the image into an HTMLImageElement.
  * 2. Copies pixels from HTMLImageElement to HTMLCanvasElement. This is done
  *    stripe-by-stripe to avoid freezing up the UI. The transform is taken into
  *    account.
  *
- * @param {HTMLDocument} document Owner document.
+ * @param {!HTMLDocument} document Owner document.
  * @constructor
+ * @struct
  */
 ImageUtil.ImageLoader = function(document) {
   this.document_ = document;
   this.image_ = new Image();
   this.generation_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.timeout_ = 0;
+
+  /**
+   * @type {?function(!HTMLCanvasElement, string=)}
+   * @private
+   */
+  this.callback_ = null;
+
+  /**
+   * @type {FileEntry}
+   * @private
+   */
+  this.entry_ = null;
 };
 
 /**
  * Loads an image.
  * TODO(mtomasz): Simplify, or even get rid of this class and merge with the
  * ThumbnaiLoader class.
  *
- * @param {Gallery.Item} item Item representing the image to be loaded.
+ * @param {!Gallery.Item} item Item representing the image to be loaded.
  * @param {function(!HTMLCanvasElement, string=)} callback Callback to be
  *     called when loaded. The second optional argument is an error identifier.
  * @param {number=} opt_delay Load delay in milliseconds, useful to let the
  *     animations play out before the computation heavy image loading starts.
  */
 ImageUtil.ImageLoader.prototype.load = function(item, callback, opt_delay) {
   var entry = item.getEntry();
 
   this.cancel();
   this.entry_ = entry;
   this.callback_ = callback;
 
   // The transform fetcher is not cancellable so we need a generation counter.
   var generation = ++this.generation_;
-  var onTransform = function(image, transform) {
+
+  /**
+   * @param {!HTMLImageElement} image Image to be transformed.
+   * @param {Object=} opt_transform Transformation.
+   */
+  var onTransform = function(image, opt_transform) {
     if (generation === this.generation_) {
       this.convertImage_(
-          image, transform || { scaleX: 1, scaleY: 1, rotate90: 0});
+          image, opt_transform || { scaleX: 1, scaleY: 1, rotate90: 0});
     }
-  }.bind(this);
+  };
+  onTransform = onTransform.bind(this);
 
+  /**
+   * @param {string=} opt_error Error.
+   */
   var onError = function(opt_error) {
     this.image_.onerror = null;
     this.image_.onload = null;
     var tmpCallback = this.callback_;
     this.callback_ = null;
-    var emptyCanvas = this.document_.createElement('canvas');
+    var emptyCanvas = assertInstanceof(this.document_.createElement('canvas'),
+        HTMLCanvasElement);
     emptyCanvas.width = 0;
     emptyCanvas.height = 0;
     tmpCallback(emptyCanvas, opt_error);
-  }.bind(this);
+  };
+  onError = onError.bind(this);
 
   var loadImage = function() {
     ImageUtil.metrics.startInterval(ImageUtil.getMetricName('LoadTime'));
     this.timeout_ = null;
 
     this.image_.onload = function() {
       this.image_.onerror = null;
       this.image_.onload = null;
       item.getFetchedMedia().then(function(fetchedMediaMetadata) {
-        onTransform(this.image_, fetchedMediaMetadata.imageTransform);
+        if ('imageTransform' in fetchedMediaMetadata) {

[fukino, 2014/12/11 11:28:15]

Does "if (fetchedMediaMetadata.imageTransform)" have a problem?

[yawano, 2014/12/12 01:11:33]

Done.
I didn't know that we can write in this way with closure compiler. Thank you!

+          onTransform(this.image_,
+              (/** @type {{imageTransform:Object}} */ (fetchedMediaMetadata))
+              .imageTransform);
+        } else {
+          onTransform(this.image_);
+        }
       }.bind(this)).catch(function(error) {
         console.error(error.stack || error);
       });
     }.bind(this);
 
     // The error callback has an optional error argument, which in case of a
     // general error should not be specified
     this.image_.onerror = onError.bind(this, 'GALLERY_IMAGE_ERROR');
 
     // Load the image directly. The query parameter is workaround for
@@ skipping 67 matching lines @@
 };
 
 /**
  * Stops loading image.
  */
 ImageUtil.ImageLoader.prototype.cancel = function() {
   if (!this.callback_) return;
   this.callback_ = null;
   if (this.timeout_) {
     clearTimeout(this.timeout_);
-    this.timeout_ = null;
+    this.timeout_ = 0;
   }
   if (this.image_) {
     this.image_.onload = function() {};
     this.image_.onerror = function() {};
     this.image_.src = '';
   }
   this.generation_++;  // Silence the transform fetcher if it is in progress.
 };
 
 /**
- * @param {HTMLImageElement} image Image to be transformed.
- * @param {Object} transform transformation description to apply to the image.
+ * @param {!HTMLImageElement} image Image to be transformed.
+ * @param {!Object} transform transformation description to apply to the image.
  * @private
  */
 ImageUtil.ImageLoader.prototype.convertImage_ = function(image, transform) {
   var canvas = this.document_.createElement('canvas');
 
   if (transform.rotate90 & 1) {  // Rotated +/-90deg, swap the dimensions.
     canvas.width = image.height;
     canvas.height = image.width;
   } else {
     canvas.width = image.width;
     canvas.height = image.height;
   }
 
   var context = canvas.getContext('2d');
   context.save();
   context.translate(canvas.width / 2, canvas.height / 2);
   context.rotate(transform.rotate90 * Math.PI / 2);
   context.scale(transform.scaleX, transform.scaleY);
 
   var stripCount = Math.ceil(image.width * image.height / (1 << 21));
   var step = Math.max(16, Math.ceil(image.height / stripCount)) & 0xFFFFF0;
 
   this.copyStrip_(context, image, 0, step);
 };
 
 /**
- * @param {CanvasRenderingContext2D} context Context to draw.
- * @param {HTMLImageElement} image Image to draw.
+ * @param {!CanvasRenderingContext2D} context Context to draw.
+ * @param {!HTMLImageElement} image Image to draw.
  * @param {number} firstRow Number of the first pixel row to draw.
  * @param {number} rowCount Count of pixel rows to draw.
  * @private
  */
 ImageUtil.ImageLoader.prototype.copyStrip_ = function(
     context, image, firstRow, rowCount) {
   var lastRow = Math.min(firstRow + rowCount, image.height);
 
   context.drawImage(
       image, 0, firstRow, image.width, lastRow - firstRow,
       -image.width / 2, firstRow - image.height / 2,
       image.width, lastRow - firstRow);
 
   if (lastRow === image.height) {
     context.restore();
     if (this.entry_.toURL().substr(0, 5) !== 'data:') {  // Ignore data urls.
       ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('LoadTime'));
     }
     try {
       setTimeout(this.callback_, 0, context.canvas);
     } catch (e) {
       console.error(e);
     }
     this.callback_ = null;
   } else {
     var self = this;
     this.timeout_ = setTimeout(
         function() {
-          self.timeout_ = null;
+          self.timeout_ = 0;
           self.copyStrip_(context, image, lastRow, rowCount);
         }, 0);
   }
 };
 
 /**
- * @param {HTMLElement} element To remove children from.
+ * @param {!HTMLElement} element To remove children from.
  */
 ImageUtil.removeChildren = function(element) {
   element.textContent = '';
 };
 
 /**
  * @param {string} name File name (with extension).
  * @return {string} File name without extension.
  */
 ImageUtil.getDisplayNameFromName = function(name) {
@@ skipping 11 matching lines @@
 ImageUtil.getExtensionFromFullName = function(name) {
   var index = name.lastIndexOf('.');
   if (index !== -1)
     return name.substring(index);
   else
     return '';
 };
 
 /**
  * Metrics (from metrics.js) itnitialized by the File Manager from owner frame.
- * @type {Object?}
+ * @type {Object}
  */
 ImageUtil.metrics = null;
 
 /**
  * @param {string} name Local name.
  * @return {string} Full name.
  */
 ImageUtil.getMetricName = function(name) {
   return 'PhotoEditor.' + name;
 };
 
 /**
  * Used for metrics reporting, keep in sync with the histogram description.
+ * @type {Array.<string>}
+ * @const
  */
 ImageUtil.FILE_TYPES = ['jpg', 'png', 'gif', 'bmp', 'webp'];