support animated GIF

ui/file_manager/gallery/js/image_editor/commands.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.
 
 /**
  * Command queue is the only way to modify images.
  * Supports undo/redo.
  * Command execution is asynchronous (callback-based).
  *
  * @param {!Document} document Document to create canvases in.
- * @param {!HTMLCanvasElement} canvas The canvas with the original image.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} image
+ *    The canvas with the original image.

[yawano, 2016/01/20 06:23:09]

small nit: please use the line until the end. i.e. @param {...} image The canvas
... [New line] ... image.

Same goes for other comments.

[ryoh, 2016/01/21 03:19:55]

Done.

  * @param {function(function())} saveFunction Function to save the image.
  * @constructor
  * @struct
  */
-function CommandQueue(document, canvas, saveFunction) {
+function CommandQueue(document, image, saveFunction) {
   this.document_ = document;
   this.undo_ = [];
   this.redo_ = [];
   this.subscribers_ = [];
-  this.currentImage_ = canvas;
+  this.currentImage_ = image;
 
   // Current image may be null or not-null but with width = height = 0.
   // Copying an image with zero dimensions causes js errors.
   if (this.currentImage_) {
     this.baselineImage_ = document.createElement('canvas');
     this.baselineImage_.width = this.currentImage_.width;
     this.baselineImage_.height = this.currentImage_.height;
     if (this.currentImage_.width > 0 && this.currentImage_.height > 0) {
       var context = this.baselineImage_.getContext('2d');
       context.drawImage(this.currentImage_, 0, 0);
@@ skipping 257 matching lines @@
   return 'Command ' + this.name_;
 };
 
 /**
  * Execute the command and visualize its results.
  *
  * The two actions are combined into one method because sometimes it is nice
  * to be able to show partial results for slower operations.
  *
  * @param {!Document} document Document on which to execute command.
- * @param {!HTMLCanvasElement} srcCanvas Canvas to execute on.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} srcImage Image to execute on.
  * @param {function(HTMLCanvasElement, number=)} callback Callback to call on
  *   completion.
  * @param {!Object} uiContext Context to work in.
  */
-Command.prototype.execute = function(document, srcCanvas, callback, uiContext) {
+Command.prototype.execute = function(document, srcImage, callback, uiContext) {
   console.error('Command.prototype.execute not implemented');
 };
 
 /**
  * Visualize reversion of the operation.
  *
  * @param {!HTMLCanvasElement} canvas Image data to use.
  * @param {!ImageView} imageView ImageView to revert.
  * @return {number} Animation duration in ms.
  */
 Command.prototype.revertView = function(canvas, imageView) {
   imageView.replace(canvas);
   return 0;
 };
 
 /**
  * Creates canvas to render on.
  *
  * @param {!Document} document Document to create canvas in.
- * @param {!HTMLCanvasElement} srcCanvas to copy optional dimensions from.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} srcImage
+ *    to copy optional dimensions from.
  * @param {number=} opt_width new canvas width.
  * @param {number=} opt_height new canvas height.
  * @return {!HTMLCanvasElement} Newly created canvas.
  * @private
  */
 Command.prototype.createCanvas_ = function(
-    document, srcCanvas, opt_width, opt_height) {
+    document, srcImage, opt_width, opt_height) {
   var result = assertInstanceof(document.createElement('canvas'),
       HTMLCanvasElement);
-  result.width = opt_width || srcCanvas.width;
-  result.height = opt_height || srcCanvas.height;
+  result.width = opt_width || srcImage.width;
+  result.height = opt_height || srcImage.height;
   return result;
 };
 
 
 /**
  * Rotate command
  * @param {number} rotate90 Rotation angle in 90 degree increments (signed).
  * @constructor
  * @extends {Command}
  * @struct
  */
 Command.Rotate = function(rotate90) {
   Command.call(this, 'rotate(' + rotate90 * 90 + 'deg)');
   this.rotate90_ = rotate90;
 };
 
 Command.Rotate.prototype = { __proto__: Command.prototype };
 
 /** @override */
 Command.Rotate.prototype.execute = function(
-    document, srcCanvas, callback, uiContext) {
+    document, srcImage, callback, uiContext) {
   var result = this.createCanvas_(
       document,
-      srcCanvas,
-      (this.rotate90_ & 1) ? srcCanvas.height : srcCanvas.width,
-      (this.rotate90_ & 1) ? srcCanvas.width : srcCanvas.height);
+      srcImage,
+      (this.rotate90_ & 1) ? srcImage.height : srcImage.width,
+      (this.rotate90_ & 1) ? srcImage.width : srcImage.height);
   ImageUtil.drawImageTransformed(
-      result, srcCanvas, 1, 1, this.rotate90_ * Math.PI / 2);
+      result, srcImage, 1, 1, this.rotate90_ * Math.PI / 2);
   var delay;
   if (uiContext.imageView) {
     delay = uiContext.imageView.replaceAndAnimate(result, null, this.rotate90_);
   }
   setTimeout(callback, 0, result, delay);
 };
 
 /** @override */
 Command.Rotate.prototype.revertView = function(canvas, imageView) {
   return imageView.replaceAndAnimate(canvas, null, -this.rotate90_);
@@ skipping 49 matching lines @@
 Command.Filter = function(name, filter, message) {
   Command.call(this, name);
   this.filter_ = filter;
   this.message_ = message;
 };
 
 Command.Filter.prototype = { __proto__: Command.prototype };
 
 /** @override */
 Command.Filter.prototype.execute = function(
-    document, srcCanvas, callback, uiContext) {
-  var result = this.createCanvas_(document, srcCanvas);
+    document, srcImage, callback, uiContext) {
+  var result = this.createCanvas_(document, srcImage);
   var self = this;
   var previousRow = 0;
 
   function onProgressVisible(updatedRow, rowCount) {
     if (updatedRow == rowCount) {
       uiContext.imageView.replace(result);
       if (self.message_)
         uiContext.prompt.show(self.message_, 2000);
       callback(result);
     } else {
@@ skipping 13 matching lines @@
       previousRow = updatedRow;
     }
   }
 
   function onProgressInvisible(updatedRow, rowCount) {
     if (updatedRow == rowCount) {
       callback(result);
     }
   }
 
-  filter.applyByStrips(result, srcCanvas, this.filter_,
+  filter.applyByStrips(result, srcImage, this.filter_,
       uiContext.imageView ? onProgressVisible : onProgressInvisible);
 };