Gallery: Store image caches in Gallery items.

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.
 
 'use strict';
 
 /**
  * The overlay displaying the image.
  *
  * @param {HTMLElement} container The container element.
  * @param {Viewport} viewport The viewport.
  * @constructor
  * @extends {ImageBuffer.Overlay}
  */
 function ImageView(container, viewport) {
   ImageBuffer.Overlay.call(this);
 
   this.container_ = container;
   this.viewport_ = viewport;
   this.document_ = container.ownerDocument;
   this.contentGeneration_ = 0;
   this.displayedContentGeneration_ = 0;
 
   this.imageLoader_ = new ImageUtil.ImageLoader(this.document_);
   // We have a separate image loader for prefetch which does not get cancelled
   // when the selection changes.
   this.prefetchLoader_ = new ImageUtil.ImageLoader(this.document_);
 
-  // The content cache is used for prefetching the next image when going
-  // through the images sequentially. The real life photos can be large
-  // (18Mpix = 72Mb pixel array) so we want only the minimum amount of caching.
-  this.contentCache_ = new ImageView.Cache(2);
-
-  // We reuse previously generated screen-scale images so that going back to
-  // a recently loaded image looks instant even if the image is not in
-  // the content cache any more. Screen-scale images are small (~1Mpix)
-  // so we can afford to cache more of them.
-  this.screenCache_ = new ImageView.Cache(5);
   this.contentCallbacks_ = [];
 
   /**
    * The element displaying the current content.
    *
    * @type {HTMLCanvasElement}
    * @private
    */
   this.screenImage_ = null;
 }
@@ skipping 228 matching lines @@
        (time - this.lastLoadTime_) < ImageView.FAST_SCROLL_INTERVAL) {
       effect = null;
     }
     this.lastLoadTime_ = time;
   }
 
   ImageUtil.metrics.startInterval(ImageUtil.getMetricName('DisplayTime'));
 
   var self = this;
 
-  this.contentEntry_ = entry;
+  this.contentItem_ = item;
   this.contentRevision_ = -1;
 
-  // Cache has to be evicted in advance, so the returned cached image is not
-  // evicted later by the prefetched image.
-  this.contentCache_.evictLRU();
-
-  var cached = this.contentCache_.getItem(this.contentEntry_);
+  var cached = item.contentImage;
   if (cached) {
     displayMainImage(ImageView.LOAD_TYPE_CACHED_FULL,
         false /* no preview */, cached);
   } else {
-    var cachedScreen = this.screenCache_.getItem(this.contentEntry_);
+    var cachedScreen = item.screenImage;
     var imageWidth = metadata.media && metadata.media.width ||
                      metadata.drive && metadata.drive.imageWidth;
     var imageHeight = metadata.media && metadata.media.height ||
                       metadata.drive && metadata.drive.imageHeight;
     if (cachedScreen) {
       // We have a cached screen-scale canvas, use it instead of a thumbnail.
       displayThumbnail(ImageView.LOAD_TYPE_CACHED_SCREEN, 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'));
@@ skipping 92 matching lines @@
     if (loadCallback) loadCallback(loadType, animationDuration, opt_error);
   }
 };
 
 /**
  * Prefetches an image.
  * @param {Gallery.Item} item The image item.
  * @param {number} delay Image load delay in ms.
  */
 ImageView.prototype.prefetch = function(item, delay) {
-  var self = this;
-  var entry = item.getEntry();
-  function prefetchDone(canvas) {
-    if (canvas.width)
-      self.contentCache_.putItem(entry, canvas);
-  }
-
-  var cached = this.contentCache_.getItem(entry);
-  if (cached) {
-    prefetchDone(cached);
-  } else if (FileType.getMediaType(entry) === 'image') {
-    // Evict the LRU item before we allocate the new canvas to avoid unneeded
-    // strain on memory.
-    this.contentCache_.evictLRU();
-
-    this.prefetchLoader_.load(item, prefetchDone, delay);
-  }
+  if (item.contentImage)
+    return;
+  this.prefetchLoader_.load(item, function(canvas) {
+    if (canvas.width && canvas.height && !item.contentImage)
+      item.contentImage = canvas;
+  }, delay);
 };
 
 /**
- * Renames the current image.
- * @param {FileEntry} newEntry The new image Entry.
- */
-ImageView.prototype.changeEntry = function(newEntry) {
-  this.contentCache_.renameItem(this.contentEntry_, newEntry);
-  this.screenCache_.renameItem(this.contentEntry_, newEntry);
-  this.contentEntry_ = newEntry;
-};
-
-/**
  * Unloads content.
  * @param {Rect} zoomToRect Target rectangle for zoom-out-effect.
  */
 ImageView.prototype.unload = function(zoomToRect) {
   if (this.unloadTimer_) {
     clearTimeout(this.unloadTimer_);
     this.unloadTimer_ = null;
   }
   if (zoomToRect && this.screenImage_) {
     var effect = this.createZoomEffect(zoomToRect);
@@ skipping 36 matching lines @@
 
   this.container_.appendChild(this.screenImage_);
 
   this.preview_ = opt_preview;
   // 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.contentCache_.putItem(this.contentEntry_, this.contentCanvas_, true);
-    this.screenCache_.putItem(this.contentEntry_, this.screenImage_);
+    this.contentItem_.contentImage = this.contentCanvas_;
+    this.contentItem_.screenImage = this.screenImage_;
 
     // 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.contentRevision_++;
     for (var i = 0; i !== this.contentCallbacks_.length; i++) {
       try {
         this.contentCallbacks_[i]();
@@ skipping 171 matching lines @@
   this.setTransform_(oldScreenImage, this,viewport_, effect);
   setTimeout(setFade.bind(null, false), 0);
   setTimeout(function() {
     if (oldScreenImage.parentNode)
       oldScreenImage.parentNode.removeChild(oldScreenImage);
   }, effect.getSafeInterval());
 
   return effect.getSafeInterval();
 };
 
-/**
- * Generic cache with a limited capacity and LRU eviction.
- * @param {number} capacity Maximum number of cached item.
- * @constructor
- */
-ImageView.Cache = function(capacity) {
-  this.capacity_ = capacity;
-  this.map_ = {};
-  this.order_ = [];
-};
-
-/**
- * Fetches the item from the cache.
- * @param {FileEntry} entry The entry.
- * @return {Object} The cached item.
- */
-ImageView.Cache.prototype.getItem = function(entry) {
-  return this.map_[entry.toURL()];
-};
-
-/**
- * Puts the item into the cache.
- *
- * @param {FileEntry} entry The entry.
- * @param {Object} item The item object.
- * @param {boolean=} opt_keepLRU True if the LRU order should not be modified.
- */
-ImageView.Cache.prototype.putItem = function(entry, item, opt_keepLRU) {
-  var pos = this.order_.indexOf(entry.toURL());
-
-  if ((pos >= 0) !== (entry.toURL() in this.map_))
-    throw new Error('Inconsistent cache state');
-
-  if (entry.toURL() in this.map_) {
-    if (!opt_keepLRU) {
-      // Move to the end (most recently used).
-      this.order_.splice(pos, 1);
-      this.order_.push(entry.toURL());
-    }
-  } else {
-    this.evictLRU();
-    this.order_.push(entry.toURL());
-  }
-
-  if ((pos >= 0) && (item !== this.map_[entry.toURL()]))
-    this.deleteItem_(this.map_[entry.toURL()]);
-  this.map_[entry.toURL()] = item;
-
-  if (this.order_.length > this.capacity_)
-    throw new Error('Exceeded cache capacity');
-};
-
-/**
- * Evicts the least recently used items.
- */
-ImageView.Cache.prototype.evictLRU = function() {
-  if (this.order_.length === this.capacity_) {
-    var url = this.order_.shift();
-    this.deleteItem_(this.map_[url]);
-    delete this.map_[url];
-  }
-};
-
-/**
- * Changes the Entry.
- * @param {FileEntry} oldEntry The old Entry.
- * @param {FileEntry} newEntry The new Entry.
- */
-ImageView.Cache.prototype.renameItem = function(oldEntry, newEntry) {
-  if (util.isSameEntry(oldEntry, newEntry))
-    return;  // No need to rename.
-
-  var pos = this.order_.indexOf(oldEntry.toURL());
-  if (pos < 0)
-    return;  // Not cached.
-
-  this.order_[pos] = newEntry.toURL();
-  this.map_[newEntry.toURL()] = this.map_[oldEntry.toURL()];
-  delete this.map_[oldEntry.toURL()];
-};
-
-/**
- * Disposes an object.
- *
- * @param {Object} item The item object.
- * @private
- */
-ImageView.Cache.prototype.deleteItem_ = function(item) {
-  // Trick to reduce memory usage without waiting for gc.
-  if (item instanceof HTMLCanvasElement) {
-    // If the canvas is being used somewhere else (eg. displayed on the screen),
-    // it will be cleared.
-    item.width = 0;
-    item.height = 0;
-  }
-};
-
 /* Transition effects */
 
 /**
  * Base class for effects.
  *
  * @param {number} duration Duration in ms.
  * @param {string=} opt_timing CSS transition timing function name.
  * @constructor
  */
 ImageView.Effect = function(duration, opt_timing) {
@@ skipping 167 matching lines @@
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForRotatedImage(this.orientation_);
 };