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 173 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 130 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;
   }
 };