[filebrowser] First step to image editor.

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

 // Copyright (c) 2011 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 ImageBuffer object holds an offscreen canvas object and
  * draws its content on the screen canvas applying scale and offset.
  * Supports pluggable overlays that modify the image appearance and behavior.
  * @constructor
  */
 function ImageBuffer(screenCanvas) {
   this.screenCanvas_ = screenCanvas;
 
   this.viewport_ = new Viewport(this.repaint.bind(this));
   this.viewport_.setScreenSize(screenCanvas.width, screenCanvas.height);
 
   this.content_ = new ImageBuffer.Content(
       this.viewport_, screenCanvas.ownerDocument);
 
   this.overlays_ = [];
   this.addOverlay(new ImageBuffer.Margin(this.viewport_));
   this.addOverlay(this.content_);
-  this.addOverlay(new ImageBuffer.Overview(this.viewport_, this.content_));
+  // TODO(dgozman): consider adding overview in v2.
 }
 
 ImageBuffer.prototype.getViewport = function() { return this.viewport_ };
 
 ImageBuffer.prototype.getContent = function() { return this.content_ };
 
 /**
  * Loads the new content.
  * A string parameter is treated as an image url.
  * @param {String|HTMLImageElement|HTMLCanvasElement} source
@@ skipping 145 matching lines @@
   this.viewport_ = viewport;
 };
 
 ImageBuffer.Margin.prototype = {__proto__: ImageBuffer.Overlay.prototype};
 
 // Draw below everything including the content.
 ImageBuffer.Margin.prototype.getZIndex = function() { return -2 };
 
 ImageBuffer.Margin.prototype.draw = function(context) {
   context.save();
-  context.fillStyle = '#F0F0F0';
+  context.fillStyle = '#000000';
   context.strokeStyle = '#000000';
   Rect.fillBetween(context,
       this.viewport_.getImageBoundsOnScreen(),
       this.viewport_.getScreenBounds());
 
   Rect.outline(context, this.viewport_.getImageBoundsOnScreen());
   context.restore();
 };
 
 /**
@@ skipping 95 matching lines @@
       0, 0, opt_width || this.canvas_.width, opt_height || this.canvas_.height);
 };
 
 /**
  * @param {HTMLImageElement|HTMLCanvasElement} image
  */
 ImageBuffer.Content.prototype.load = function(image) {
   this.canvas_.width = image.width;
   this.canvas_.height = image.height;
 
+  this.clear();
   Rect.drawImage(this.canvas_.getContext("2d"), image);
   this.invalidateCaches();
 
   this.viewport_.setImageSize(image.width, image.height);
   this.viewport_.fitImage();
 };
 
+ImageBuffer.Content.prototype.clear = function() {
+  var context = this.canvas_.getContext("2d");
+  context.globalAlpha = 1;
+  context.fillStyle = '#FFFFFF';
+  Rect.fill(context, new Rect(this.canvas_));
+};
+
 /**
  * @param {ImageData} imageData
  */
 ImageBuffer.Content.prototype.drawImageData = function (imageData, x, y) {
   this.canvas_.getContext("2d").putImageData(imageData, x, y);
   this.invalidateCaches();
 };
 
 /**
  * The overview overlay draws the image thumbnail in the bottom right corner.
@@ skipping 97 matching lines @@
     function scale() { return -self.scale_;}
     function hit(x, y) { return self.bounds_ && self.bounds_.inside(x, y); }
     return this.viewport_.createOffsetSetter(x, y, scale, hit);
   } else if (cursor == 'crosshair') {
     // Force non-draggable behavior.
     return function() {};
   } else {
     return null;
   }
 };