Refactor the Photo Editor to enable new feature work

chrome/browser/resources/file_manager/js/image_editor/image_view.js

 // Copyright (c) 2012 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 {MetadataCache} metadataCache The metadataCache.
  */
@@ skipping 277 matching lines @@
 ImageView.prototype.cancelLoad = function() {
   this.imageLoader_.cancel();
 };
 
 /**
  * Load and display a new image.
  *
  * Loads the thumbnail first, then replaces it with the main image.
  * Takes into account the image orientation encoded in the metadata.
  *
- * @param {number} id Unique image id for caching purposes.
  * @param {string} url Image url.
  * @param {Object} metadata Metadata.
  * @param {Object} slide Slide-in animation direction.
  * @param {function(number} opt_callback The parameter is the load type.
  */
-ImageView.prototype.load = function(
-    id, url, metadata, slide, opt_callback) {
+ImageView.prototype.load = function(url, metadata, slide, opt_callback) {
 
   metadata = metadata || {};
 
   ImageUtil.metrics.startInterval(ImageUtil.getMetricName('DisplayTime'));
 
   var self = this;
 
-  this.contentID_ = id;
+  this.contentID_ = url;
   this.contentRevision_ = -1;
 
   var loadingVideo = FileType.getMediaType(url) == 'video';
   if (loadingVideo) {
     var video = this.document_.createElement('video');
     if (metadata.thumbnail && metadata.thumbnail.url) {
       video.setAttribute('poster', metadata.thumbnail.url);
       this.replace(video, slide); // Show the poster immediately.
     }
     video.addEventListener('loadedmetadata', onVideoLoad);
     video.addEventListener('error', onVideoLoad);
 
     // Do not try no stream when offline.
     video.src = (navigator.onLine && metadata.streaming &&
                  metadata.streaming.url) || url;
     video.load();
 
     function onVideoLoad() {
       video.removeEventListener('loadedmetadata', onVideoLoad);
       video.removeEventListener('error', onVideoLoad);
       displayMainImage(ImageView.LOAD_TYPE_VIDEO_FILE, slide,
           !!(metadata.thumbnail && metadata.thumbnail.url) /* preview shown */,
           video);
     }
     return;
   }
-  var cached = this.contentCache_.getItem(id);
+  var cached = this.contentCache_.getItem(this.contentID_);
   if (cached) {
     displayMainImage(ImageView.LOAD_TYPE_CACHED_FULL, slide,
         false /* no preview */, cached);
   } else {
-    var cachedScreen = this.screenCache_.getItem(id);
+    var cachedScreen = this.screenCache_.getItem(this.contentID_);
     if (cachedScreen) {
       // We have a cached screen-scale canvas, use it instead of a thumbnail.
       displayThumbnail(ImageView.LOAD_TYPE_CACHED_SCREEN, slide, cachedScreen);
       // As far as the user can tell the image is loaded. We still need to load
       // the full res image to make editing possible, but we can report now.
       ImageUtil.metrics.recordInterval(ImageUtil.getMetricName('DisplayTime'));
     } else if (metadata.thumbnail && metadata.thumbnail.url) {
       this.imageLoader_.load(
           metadata.thumbnail.url,
           function(url, callback) { callback(metadata.thumbnail.transform); },
@@ skipping 13 matching lines @@
     var mainImageSlide = slide;
 
     // Do not do slide-in animation when scrolling very fast.
     if (self.lastLoadTime_ &&
         (time - self.lastLoadTime_) < ImageView.FAST_SCROLL_INTERVAL) {
       mainImageSlide = 0;
     }
     self.lastLoadTime_ = time;
 
     if (canvas.width) {
-      if (!!metadata.media.width) {
+      if (!metadata.media.width) {
         // We do not know the main image size, but chances are that it is large
         // enough. Show the thumbnail at the maximum possible scale.
         var bounds = self.viewport_.getScreenBounds();
         var scale = Math.min(bounds.width / canvas.width,
                              bounds.height / canvas.height);
         self.replace(canvas, slide,
             canvas.width * scale, canvas.height * scale, true /* preview */);
       } else {
         self.replace(canvas, slide,
             metadata.media.width, metadata.media.height, true /* preview */);
@@ skipping 59 matching lines @@
       // |streaming| is set only when the file is not locally cached.
       loadType = ImageView.LOAD_TYPE_OFFLINE;
     }
     if (opt_callback) opt_callback(loadType);
   }
 };
 
 /**
  * Prefetch an image.
  *
- * @param {number} id Unique image id for caching purposes.
  * @param {string} url The image url.
  */
-ImageView.prototype.prefetch = function(id, url) {
+ImageView.prototype.prefetch = function(url) {
   var self = this;
   function prefetchDone(canvas) {
     if (canvas.width)
-      self.contentCache_.putItem(id, canvas);
+      self.contentCache_.putItem(url, canvas);
   }
 
-  var cached = this.contentCache_.getItem(id);
+  var cached = this.contentCache_.getItem(url);
   if (cached) {
     prefetchDone(cached);
   } else if (FileType.getMediaType(url) == 'image') {
     // Evict the LRU item before we allocate the new canvas to avoid unneeded
     // strain on memory.
     this.contentCache_.evictLRU();
 
     this.prefetchLoader_.load(
         url,
         this.localImageTransformFetcher_,
         prefetchDone,
         ImageView.ANIMATION_WAIT_INTERVAL);
   }
 };
 
 /**
+ * Rename the current image.
+ *
+ * @param {string} newUrl The new image url.
+ */
+ImageView.prototype.changeUrl = function(newUrl) {
+  this.contentCache_.renameItem(this.contentID_, newUrl);
+  this.screenCache_.renameItem(this.contentID_, newUrl);
+  this.contentID_ = newUrl;
+};
+
+/**
+ * Unload content.
+ */
+ImageView.prototype.unload = function() {
+  this.container_.textContent = '';
+  this.screenImage_ = null;
+  this.videoElement_ = null;
+};
+
+/**
  *
  * @param {HTMLCanvasElement|HTMLVideoElement} content The image element.
  * @param {boolean} opt_reuseScreenCanvas True if it is OK to reuse the screen
  *   resolution canvas.
  * @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(
@@ skipping 301 matching lines @@
 
 /**
  * Evict the least recently used items.
  */
 ImageView.Cache.prototype.evictLRU = function() {
   if (this.order_.length == this.capacity_) {
     var id = this.order_.shift();
     delete this.map_[id];
   }
 };
+
+/**
+ * Change the id of an entry.
+ * @param {string} oldId The old ID.
+ * @param {string} newId The new ID.
+ */
+ImageView.Cache.prototype.renameItem = function(oldId, newId) {
+  if (oldId == newId)
+    return;  // No need to rename.
+
+  var pos = this.order_.indexOf(oldId);
+  if (pos < 0)
+    return;  // Not cached.
+
+  this.order_[pos] = newId;
+  this.map_[newId] = this.map_[oldId];
+  delete this.map_[oldId];
+};