Adding simple filters to ChromeOS 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
  */
@@ skipping 127 matching lines @@
  */
 ImageBuffer.prototype.onClick = function (x, y) {
   for (var i = this.overlays_.length - 1; i >= 0; i--) {
     if (this.overlays_[i].onClick(x, y)) return true;
   }
   return false;
 };
 
 /**
  * Searches for a drag handler in the descending Z-order.
- * @return {Function} A closure to be called on mouse drag.
+ * @return {function(number,number)} A function to be called on mouse drag.
  */
 ImageBuffer.prototype.getDragHandler = function (x, y) {
   for (var i = this.overlays_.length - 1; i >= 0; i--) {
     var handler = this.overlays_[i].getDragHandler(x, y);
     if (handler) return handler;
   }
   return null;
 };
 
 /**
@@ skipping 25 matching lines @@
 // 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.strokeStyle = '#000000';
   Rect.fillBetween(context,
       this.viewport_.getImageBoundsOnScreen(),
       this.viewport_.getScreenBounds());
-  Rect.stroke(context, this.viewport_.getImageBoundsOnScreen());
+
+  Rect.outline(context, this.viewport_.getImageBoundsOnScreen());
   context.restore();
 };
 
 /**
  * The overlay containing the image.
  */
 ImageBuffer.Content = function(viewport, document) {
   this.viewport_ = viewport;
   this.document_ = document;
 
@@ skipping 40 matching lines @@
 };
 
 ImageBuffer.Content.prototype.getCanvas = function() { return this.canvas_ };
 
 /**
  * Replaces the off-screen canvas.
  * To be used when the editor modifies the image dimensions.
  * If the logical width/height are supplied they override the canvas dimensions
  * and the canvas contents is scaled when displayed.
  * @param {HTMLCanvasElement} canvas
- * @param {Number} opt_width Logical width (=canvas.width by default)
- * @param {Number} opt_height Logical height (=canvas.height by default)
+ * @param {number} opt_width Logical width (=canvas.width by default)
+ * @param {number} opt_height Logical height (=canvas.height by default)
  */
 ImageBuffer.Content.prototype.setCanvas = function(
     canvas, opt_width, opt_height) {
   this.canvas_ = canvas;
   this.viewport_.setImageSize(opt_width || canvas.width,
                               opt_height || canvas.height);
 
   this.invalidateCaches();
 };
 
 /**
  * @return {HTMLCanvasElement} A new blank canvas of the required size.
  */
 ImageBuffer.Content.prototype.createBlankCanvas = function (width, height) {
   var canvas = this.document_.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   return canvas;
 };
 
 /**
- * @param {Number} opt_width Width of the copy, original width by default.
- * @param {Number} opt_height Height of the copy, original height by default.
+ * @param {number} opt_width Width of the copy, original width by default.
+ * @param {number} opt_height Height of the copy, original height by default.
  * @return {HTMLCanvasElement} A new canvas with a copy of the content.
  */
 ImageBuffer.Content.prototype.copyCanvas = function (opt_width, opt_height) {
   var canvas = this.createBlankCanvas(opt_width || this.canvas_.width,
                                       opt_height || this.canvas_.height);
   Rect.drawImage(canvas.getContext('2d'), this.canvas_);
   return canvas;
 };
 
 /**
@@ skipping 45 matching lines @@
 ImageBuffer.Overview.RIGHT = 7;
 ImageBuffer.Overview.BOTTOM = 50;
 
 ImageBuffer.Overview.prototype.update = function() {
   var imageBounds = this.viewport_.getImageBounds();
 
   if (this.contentGeneration_ != this.content_.getCacheGeneration()) {
     this.contentGeneration_ = this.content_.getCacheGeneration();
 
     var aspect = imageBounds.width / imageBounds.height;
-    if (aspect > 1) {
-      this.bounds_ = new Rect(ImageBuffer.Overview.MAX_SIZE,
-                              ImageBuffer.Overview.MAX_SIZE / aspect);
-    } else {
-      this.bounds_ = new Rect(ImageBuffer.Overview.MAX_SIZE * aspect,
-                              ImageBuffer.Overview.MAX_SIZE);
-    }
 
-    this.canvas_ =
-        this.content_.copyCanvas(this.bounds_.width, this.bounds_.height);
+    this.canvas_ = this.content_.copyCanvas(
+        ImageBuffer.Overview.MAX_SIZE * Math.min(aspect, 1),
+        ImageBuffer.Overview.MAX_SIZE / Math.max(aspect, 1));
   }
 
+  this.bounds_ = null;
   this.clipped_ = null;
 
   if (this.viewport_.isClipped()) {
     var screenBounds = this.viewport_.getScreenBounds();
 
-    this.bounds_ = this.bounds_.moveTo(
-        screenBounds.width - ImageBuffer.Overview.RIGHT - this.bounds_.width,
-        screenBounds.height - ImageBuffer.Overview.BOTTOM -
-            this.bounds_.height);
+    this.bounds_ = new Rect(
+        screenBounds.width - ImageBuffer.Overview.RIGHT - this.canvas_.width,
+        screenBounds.height - ImageBuffer.Overview.BOTTOM - this.canvas_.height,
+        this.canvas_.width,
+        this.canvas_.height);
 
     this.scale_ = this.bounds_.width / imageBounds.width;
 
     this.clipped_ = this.viewport_.getImageClipped().
         scale(this.scale_).
         shift(this.bounds_.left, this.bounds_.top);
   }
 };
 
 ImageBuffer.Overview.prototype.draw = function(context) {
   this.update();
 
   if (!this.clipped_) return;
 
   // Draw the thumbnail.
   Rect.drawImage(context, this.canvas_, this.bounds_);
 
-  // Draw the thumbnail border.
-  context.strokeStyle = '#000000';
-  Rect.stroke(context, this.bounds_);
-
   // Draw the shadow over the off-screen part of the thumbnail.
   context.globalAlpha = 0.3;
   context.fillStyle = '#000000';
   Rect.fillBetween(context, this.clipped_, this.bounds_);
 
   // Outline the on-screen part of the thumbnail.
   context.strokeStyle = '#FFFFFF';
-  Rect.stroke(context, this.clipped_);
+  Rect.outline(context, this.clipped_);
+
+  context.globalAlpha = 1;
+  // Draw the thumbnail border.
+  context.strokeStyle = '#000000';
+  Rect.outline(context, this.bounds_);
 };
 
 ImageBuffer.Overview.prototype.getCursorStyle = function(x, y) {
   if (!this.bounds_ || !this.bounds_.inside(x, y)) return null;
 
   // Indicate that the on-screen part is draggable.
-  if (this.clipped_.inside(x, y)) return 'move';
+  if (this.clipped_ && this.clipped_.inside(x, y)) return 'move';
 
   // Indicate that the rest of the thumbnail is clickable.
   return 'crosshair';
 };
 
 ImageBuffer.Overview.prototype.onClick = function(x, y) {
   if (this.getCursorStyle(x, y) != 'crosshair') return false;
   this.viewport_.setCenter(
       (x - this.bounds_.left) / this.scale_,
       (y - this.bounds_.top) / this.scale_);
   this.viewport_.repaint();
   return true;
 };
 
 ImageBuffer.Overview.prototype.getDragHandler = function(x, y) {
   var cursor = this.getCursorStyle(x, y);
 
   if (cursor == 'move') {
     var self = this;
     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;
   }
 };