support animated GIF

ui/file_manager/gallery/js/image_editor/image_view.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.
 
 /**
  * The overlay displaying the image.
  *
  * @param {!HTMLElement} container The container element.
  * @param {!Viewport} viewport The viewport.
  * @param {!MetadataModel} metadataModel
@@ skipping 20 matching lines @@
   this.imageLoader_ =
       new ImageUtil.ImageLoader(this.document_, metadataModel);
   // We have a separate image loader for prefetch which does not get cancelled
   // when the selection changes.
   this.prefetchLoader_ =
       new ImageUtil.ImageLoader(this.document_, metadataModel);
 
   this.contentCallbacks_ = [];
 
   /**
-   * The element displaying the current content.
-   * @type {HTMLCanvasElement}
-   * @private
-   */
-  this.screenImage_ = null;
-
-  /**
-   * The content canvas element.
+   * The content image or canvas element.
    * @type {(HTMLCanvasElement|HTMLImageElement)}
    * @private
    */
-  this.contentCanvas_ = null;
+  this.contentImage_ = null;
 
   /**
    * True if the image is a preview (not full res).
    * @type {boolean}
    * @private
    */
   this.preview_ = false;
 
   /**
    * Cached thumbnail image.
@@ skipping 109 matching lines @@
 
 /**
  * @override
  */
 ImageView.prototype.getZIndex = function() { return -1; };
 
 /**
  * @override
  */
 ImageView.prototype.draw = function() {
-  if (!this.contentCanvas_)  // Do nothing if the image content is not set.
+  if (!this.contentImage_)  // Do nothing if the image content is not set.
     return;
   this.setTransform_(
-      this.contentCanvas_,
+      this.contentImage_,
       this.viewport_,
       new ImageView.Effect.None(),
-      ImageView.Effect.DEFAULT_DURATION);
-  if ((this.screenImage_ && this.setupDeviceBuffer(this.screenImage_)) ||
-      this.displayedContentGeneration_ !== this.contentGeneration_) {
-    this.displayedContentGeneration_ = this.contentGeneration_;
-    ImageUtil.trace.resetTimer('paint');
-    this.paintDeviceRect(
-        this.contentCanvas_, ImageRect.createFromImage(this.contentCanvas_));
-    ImageUtil.trace.reportTimer('paint');
-  }
+      0);
 };
 
 /**
  * Applies the viewport change that does not affect the screen cache size (zoom
  * change or offset change) with animation.
  */
 ImageView.prototype.applyViewportChange = function() {
-  var zooming = this.viewport_.getZoom() > 1;
-  if (this.contentCanvas_) {
-    // Show full resolution image only for zooming.
-    this.contentCanvas_.style.opacity = zooming ? '1' : '0';
+  if (this.contentImage_) {
     this.setTransform_(
-        this.contentCanvas_,
+        this.contentImage_,
         this.viewport_,
         new ImageView.Effect.None(),
         ImageView.Effect.DEFAULT_DURATION);
   }
-  if (this.screenImage_) {
-      this.setTransform_(
-          this.screenImage_,
-          this.viewport_,
-          new ImageView.Effect.None(),
-          ImageView.Effect.DEFAULT_DURATION);
-  }
 };
 
 /**
  * @return {number} The cache generation.
  */
 ImageView.prototype.getCacheGeneration = function() {
   return this.contentGeneration_;
 };
 
 /**
  * Invalidates the caches to force redrawing the screen canvas.
  */
 ImageView.prototype.invalidateCaches = function() {
   this.contentGeneration_++;
 };
 
 /**
- * @return {HTMLCanvasElement} The content canvas element.
+ * @return {!HTMLCanvasElement|!HTMLImageElement} The content image(or canvas).
  */
-ImageView.prototype.getCanvas = function() { return this.contentCanvas_; };
+ImageView.prototype.getImage = function() {
+  return assert(this.contentImage_);
+};
 
 /**
  * @return {boolean} True if the a valid image is currently loaded.
  */
 ImageView.prototype.hasValidImage = function() {
-  return !!(!this.preview_ && this.contentCanvas_ && this.contentCanvas_.width);
+  return !!(!this.preview_ && this.contentImage_ && this.contentImage_.width);
 };
 
 /**
  * @return {!HTMLCanvasElement} The cached thumbnail image.
  */
 ImageView.prototype.getThumbnail = function() {
   assert(this.thumbnailCanvas_);
   return this.thumbnailCanvas_;
 };
 
 /**
  * @return {number} The content revision number.
  */
 ImageView.prototype.getContentRevision = function() {
   return this.contentRevision_;
 };
 
 /**
- * Copies an image fragment from a full resolution canvas to a device resolution
- * canvas.
+ * Copies an image fragment to a content image.
  *
  * @param {!HTMLCanvasElement} canvas Canvas containing whole image. The canvas
  *     may not be full resolution (scaled).
  * @param {!ImageRect} imageRect Rectangle region of the canvas to be rendered.
  */
 ImageView.prototype.paintDeviceRect = function(canvas, imageRect) {
   // Map the rectangle in full resolution image to the rectangle in the device
   // canvas.
+  // TODO(ryoh): Shold we prepare a device-res canvas to show?
   var deviceBounds = this.viewport_.getDeviceBounds();
   var scaleX = deviceBounds.width / canvas.width;
   var scaleY = deviceBounds.height / canvas.height;
   var deviceRect = new ImageRect(
       imageRect.left * scaleX,
       imageRect.top * scaleY,
       imageRect.width * scaleX,
       imageRect.height * scaleY);
 
+  var canvas = ImageUtil.ensureCanvas(this.contentImage_);
+  if (canvas !== this.contentImage_) {
+    this.replaceContent_(canvas);
+  }
   ImageRect.drawImage(
-      this.screenImage_.getContext('2d'), canvas, deviceRect, imageRect);
+      this.contentImage_.getContext('2d'), canvas, deviceRect, imageRect);
 };
 
 /**
  * Creates an overlay canvas with properties similar to the screen canvas.
  * Useful for showing quick feedback when editing.
  *
  * @return {!HTMLCanvasElement} Overlay canvas.
  */
 ImageView.prototype.createOverlayCanvas = function() {
   var canvas = assertInstanceof(this.document_.createElement('canvas'),
@@ skipping 19 matching lines @@
   }
   if (canvas.height !== deviceRect.height) {
     canvas.height = deviceRect.height;
     needRepaint = true;
   }
   this.setTransform_(canvas, this.viewport_);
   return needRepaint;
 };
 
 /**
- * Gets screen image data with specified size.
+ * Gets screen image canvas with specified size.
  * @param {number} width
  * @param {number} height
- * @return {!ImageData} A new ImageData object.
+ * @return {!HTMLCanvasElement} A scaled canvas.
  */
-ImageView.prototype.getScreenImageDataWith = function(width, height) {
-  // If specified size is same with current screen image size, just return it.
-  if (width === this.screenImage_.width &&
-      height === this.screenImage_.height) {
-    return this.screenImage_.getContext('2d').getImageData(
-        0, 0, this.screenImage_.width, this.screenImage_.height);
-  }
-
+ImageView.prototype.getImageCanvasWith = function(width, height) {
   // Resize if these sizes are different.
-  var resizeCanvas = document.createElement('canvas');
+  var resizeCanvas = assertInstanceof(document.createElement('canvas'),
+      HTMLCanvasElement);
   resizeCanvas.width = width;
   resizeCanvas.height = height;
 
   var context = resizeCanvas.getContext('2d');
-  context.drawImage(this.screenImage_,
-      0, 0, this.screenImage_.width, this.screenImage_.height,
+  context.drawImage(this.contentImage_,
+      0, 0, this.contentImage_.width, this.contentImage_.height,
       0, 0, resizeCanvas.width, resizeCanvas.height);
-  return context.getImageData(0, 0, resizeCanvas.width, resizeCanvas.height);
+  return resizeCanvas;
 };
 
 /**
  * @return {boolean} True if the image is currently being loaded.
  */
 ImageView.prototype.isLoading = function() {
   return this.imageLoader_.isBusy();
 };
 
 /**
@@ skipping 176 matching lines @@
 
 /**
  * Unloads content.
  * @param {ImageRect=} opt_zoomToRect Target rectangle for zoom-out-effect.
  */
 ImageView.prototype.unload = function(opt_zoomToRect) {
   if (this.unloadTimer_) {
     clearTimeout(this.unloadTimer_);
     this.unloadTimer_ = null;
   }
-  if (opt_zoomToRect && this.screenImage_) {
+  if (opt_zoomToRect && this.contentImage_) {
     var effect = this.createZoomEffect(opt_zoomToRect);
-    this.setTransform_(this.screenImage_, this.viewport_, effect);
-    this.screenImage_.setAttribute('fade', true);
+    this.setTransform_(this.contentImage_, this.viewport_, effect);
+    this.contentImage_.setAttribute('fade', true);
     this.unloadTimer_ = setTimeout(function() {
       this.unloadTimer_ = null;
       this.unload(null /* force unload */);
     }.bind(this), effect.getSafeInterval());
     return;
   }
   this.container_.textContent = '';
-  this.contentCanvas_ = null;
-  this.screenImage_ = null;
+  this.contentImage_ = null;
 };
 
 /**
  * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element.
  * @param {number=} opt_width Image width.
  * @param {number=} opt_height Image height.
  * @param {boolean=} opt_preview True if the image is a preview (not full res).
  * @private
  */
 ImageView.prototype.replaceContent_ = function(
     content, opt_width, opt_height, opt_preview) {
 
-  if (this.contentCanvas_ && this.contentCanvas_.parentNode === this.container_)
-    this.container_.removeChild(this.contentCanvas_);
+  if (this.contentImage_ && this.contentImage_.parentNode === this.container_)
+    this.container_.removeChild(this.contentImage_);
 
-  this.screenImage_ = assertInstanceof(this.document_.createElement('canvas'),
-      HTMLCanvasElement);
-  this.screenImage_.className = 'image';
-
-  this.contentCanvas_ = content;
+  this.contentImage_ = content;
+  this.container_.appendChild(content);
+  ImageUtil.setAttribute(this.contentImage_, 'fade', false);
   this.invalidateCaches();
   this.viewport_.setImageSize(
-      opt_width || this.contentCanvas_.width,
-      opt_height || this.contentCanvas_.height);
+      opt_width || this.contentImage_.width,
+      opt_height || this.contentImage_.height);
   this.draw();
 
-  this.container_.appendChild(this.screenImage_);
-
   this.preview_ = opt_preview || false;
   // If this is not a thumbnail, cache the content and the screen-scale image.
   if (this.hasValidImage()) {
     // Insert the full resolution canvas into DOM so that it can be printed.
-    this.container_.appendChild(this.contentCanvas_);
-    this.contentCanvas_.classList.add('fullres');
-    this.setTransform_(
-        this.contentCanvas_, this.viewport_, null, 0);
+    this.contentImage_.classList.add('image');
+    this.setTransform_(this.contentImage_, this.viewport_, null, 0);
 
-    this.contentItem_.contentImage = this.contentCanvas_;
-    this.contentItem_.screenImage = this.screenImage_;
+    this.contentItem_.contentImage = this.contentImage_;
 
-    // TODO(kaznacheev): It is better to pass screenImage_ as it is usually
-    // much smaller than contentCanvas_ and still contains the entire image.
-    // Once we implement zoom/pan we should pass contentCanvas_ instead.
-    this.updateThumbnail_(this.screenImage_);
+    this.updateThumbnail_(this.contentImage_);
 
     this.contentRevision_++;
     for (var i = 0; i !== this.contentCallbacks_.length; i++) {
       try {
         this.contentCallbacks_[i]();
       } catch (e) {
         console.error(e);
       }
     }
   }
 };
 
 /**
  * Adds a listener for content changes.
  * @param {function()} callback Callback.
  */
 ImageView.prototype.addContentCallback = function(callback) {
   this.contentCallbacks_.push(callback);
 };
 
 /**
  * Updates the cached thumbnail image.
  *
- * @param {!HTMLCanvasElement} canvas The source canvas.
+ * @param {!HTMLCanvasElement|!HTMLImageElement} image The source image or
+ *     canvas.
  * @private
  */
-ImageView.prototype.updateThumbnail_ = function(canvas) {
+ImageView.prototype.updateThumbnail_ = function(image) {
   ImageUtil.trace.resetTimer('thumb');
   var pixelCount = 10000;
   var downScale =
-      Math.max(1, Math.sqrt(canvas.width * canvas.height / pixelCount));
+      Math.max(1, Math.sqrt(image.width * image.height / pixelCount));
 
-  this.thumbnailCanvas_ = canvas.ownerDocument.createElement('canvas');
-  this.thumbnailCanvas_.width = Math.round(canvas.width / downScale);
-  this.thumbnailCanvas_.height = Math.round(canvas.height / downScale);
-  ImageRect.drawImage(this.thumbnailCanvas_.getContext('2d'), canvas);
+  this.thumbnailCanvas_ = image.ownerDocument.createElement('canvas');
+  this.thumbnailCanvas_.width = Math.round(image.width / downScale);
+  this.thumbnailCanvas_.height = Math.round(image.height / downScale);
+  ImageRect.drawImage(this.thumbnailCanvas_.getContext('2d'), image);
   ImageUtil.trace.reportTimer('thumb');
 };
 
 /**
  * Replaces the displayed image, possibly with slide-in animation.
  *
- * @param {!(HTMLCanvasElement|HTMLImageElement)} content The image element.
+ * @param {!(HTMLCanvasElement|HTMLImageElement)} newContentImage
+ *    The image element.
  * @param {ImageView.Effect=} opt_effect Transition effect object.
  * @param {number=} opt_width Image width.
  * @param {number=} opt_height Image height.
  * @param {boolean=} opt_preview True if the image is a preview (not full res).
  */
 ImageView.prototype.replace = function(
-    content, opt_effect, opt_width, opt_height, opt_preview) {
-  var oldScreenImage = this.screenImage_;
+    newContentImage, opt_effect, opt_width, opt_height, opt_preview) {
+  var oldContentImage = this.contentImage_;
   var oldViewport = this.viewport_.clone();
-  this.replaceContent_(content, opt_width, opt_height, opt_preview);
+  this.replaceContent_(newContentImage, opt_width, opt_height, opt_preview);
   if (!opt_effect) {
-    if (oldScreenImage)
-      oldScreenImage.parentNode.removeChild(oldScreenImage);
     return;
   }
 
-  assert(this.screenImage_);
-  var newScreenImage = this.screenImage_;
+  assert(this.contentImage_);
   this.viewport_.resetView();
 
-  if (oldScreenImage)
-    ImageUtil.setAttribute(newScreenImage, 'fade', true);
+  if (oldContentImage)
+    this.container_.insertBefore(oldContentImage,this.container_.firstChild);

[hirono, 2016/01/25 04:21:31]

Actually previous code applies 'fade' attribute to new image, so my previous
comment was wrong (sorry...). Please set 'fade' to newContentImage here
otherwise newContentImage is shown immediately. We still need to insert
oldContentImage since we use it at 753, so you don't need to remove this line.

[hirono, 2016/01/25 04:21:31]

nit: Please insert a space after ','.

[ryoh, 2016/01/25 05:18:45]

Done.

[ryoh, 2016/01/25 05:18:45]

That's right! Thank you.

+
   this.setTransform_(
-      newScreenImage, this.viewport_, opt_effect, 0 /* instant */);
-  this.setTransform_(
-      content, this.viewport_, opt_effect, 0 /* instant */);
+      newContentImage, this.viewport_, opt_effect, 0 /* instant */);
 
   // We need to call requestAnimationFrame twice here. The first call is for
   // commiting the styles of beggining of transition that are assigned above.
   // The second call is for assigning and commiting the styles of end of
   // transition, which triggers transition animation.
   requestAnimationFrame(function() {
     requestAnimationFrame(function() {
       this.setTransform_(
-          newScreenImage,
+          newContentImage,
           this.viewport_,
           null,
           opt_effect ? opt_effect.getDuration() : undefined);
-      this.setTransform_(
-          content,
-          this.viewport_,
-          null,
-          opt_effect ? opt_effect.getDuration() : undefined);
-      if (oldScreenImage) {
-        ImageUtil.setAttribute(newScreenImage, 'fade', false);
-        ImageUtil.setAttribute(oldScreenImage, 'fade', true);
+      if (oldContentImage) {
+        ImageUtil.setAttribute(newContentImage, 'fade', false);
+        ImageUtil.setAttribute(oldContentImage, 'fade', true);
         var reverse = opt_effect.getReverse();
         if (reverse) {
-          this.setTransform_(oldScreenImage, oldViewport, reverse);
+          this.setTransform_(oldContentImage, oldViewport, reverse);
           setTimeout(function() {
-            if (oldScreenImage.parentNode)
-              oldScreenImage.parentNode.removeChild(oldScreenImage);
+            if (oldContentImage.parentNode)
+              oldContentImage.parentNode.removeChild(oldContentImage);
           }, reverse.getSafeInterval());
         } else {
-            if (oldScreenImage.parentNode)
-              oldScreenImage.parentNode.removeChild(oldScreenImage);
+            if (oldContentImage.parentNode)
+              oldContentImage.parentNode.removeChild(oldContentImage);
         }
       }
     }.bind(this));
   }.bind(this));
 };
 
 /**
  * @param {!HTMLCanvasElement|!HTMLImageElement} element The element to
  *     transform.
  * @param {!Viewport} viewport Viewport to be used for calculating
@@ skipping 29 matching lines @@
  * the new image to visualize the operation.
  *
  * @param {!HTMLCanvasElement} canvas New content canvas.
  * @param {ImageRect} imageCropRect The crop rectangle in image coordinates.
  *     Null for rotation operations.
  * @param {number} rotate90 Rotation angle in 90 degree increments.
  * @return {number} Animation duration.
  */
 ImageView.prototype.replaceAndAnimate = function(
     canvas, imageCropRect, rotate90) {
-  assert(this.screenImage_);
+  assert(this.contentImage_);
 
   var oldImageBounds = {
     width: this.viewport_.getImageBounds().width,
     height: this.viewport_.getImageBounds().height
   };
-  var oldScreenImage = this.screenImage_;
+  var oldScreenImage = this.contentImage_;
   this.replaceContent_(canvas);
-  var newScreenImage = this.screenImage_;
+  var newScreenImage = this.contentImage_;
   var effect = rotate90 ?
       new ImageView.Effect.Rotate(rotate90 > 0) :
       new ImageView.Effect.Zoom(
           oldImageBounds.width, oldImageBounds.height, assert(imageCropRect));
 
   this.setTransform_(newScreenImage, this.viewport_, effect, 0 /* instant */);
 
-  oldScreenImage.parentNode.appendChild(newScreenImage);
-  oldScreenImage.parentNode.removeChild(oldScreenImage);
-
   // Let the layout fire, then animate back to non-transformed state.
   setTimeout(
       this.setTransform_.bind(
           this, newScreenImage, this.viewport_, null, effect.getDuration()),
       0);
 
   return effect.getSafeInterval();
 };
 
 /**
  * Visualizes "undo crop". Shrink the current image to the given crop rectangle
  * while fading in the new image.
  *
  * @param {!HTMLCanvasElement} canvas New content canvas.
  * @param {!ImageRect} imageCropRect The crop rectangle in image coordinates.
  * @return {number} Animation duration.
  */
 ImageView.prototype.animateAndReplace = function(canvas, imageCropRect) {
-  var oldScreenImage = this.screenImage_;
+  var oldScreenImage = assert(this.contentImage_);
+  oldScreenImage.style.zIndex = 1000;
   this.replaceContent_(canvas);
-  var newScreenImage = this.screenImage_;
-  var setFade = ImageUtil.setAttribute.bind(null, assert(newScreenImage),
-      'fade');
-  setFade(true);
-  oldScreenImage.parentNode.insertBefore(newScreenImage, oldScreenImage);
+  this.container_.appendChild(oldScreenImage);
+  var newScreenImage = this.contentImage_;
+  ImageUtil.setAttribute(newScreenImage, 'fade', true);
   var effect = new ImageView.Effect.Zoom(
       this.viewport_.getImageBounds().width,
       this.viewport_.getImageBounds().height,
       imageCropRect);
+  // Animate to the transformed state.
+  requestAnimationFrame(function() {
+    requestAnimationFrame(function() {
+      this.setTransform_(oldScreenImage, this.viewport_, effect);
+      ImageUtil.setAttribute(newScreenImage, 'fade', false);
+    }.bind(this));
+  }.bind(this));
 
-  // Animate to the transformed state.
-  this.setTransform_(oldScreenImage, this.viewport_, effect);
-  setTimeout(setFade.bind(null, false), 0);
   setTimeout(function() {
-    if (oldScreenImage.parentNode)
+  if (oldScreenImage.parentNode)
       oldScreenImage.parentNode.removeChild(oldScreenImage);
+      oldScreenImage.style.zIndex = '';
   }, effect.getSafeInterval());
 
   return effect.getSafeInterval();
 };
 
 /* Transition effects */
 
 /**
  * Base class for effects.
  *
@@ skipping 201 matching lines @@
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getRotatingTransformation(
       element.width, element.height, this.orientation_ ? -1 : 1);
 };