From 68ab7856737c1a56fd4e9eccb2a75157117ca6e2 Mon Sep 17 00:00:00 2001
From: bcabanes <benjamin.cabanes@ugroupmedia.com>
Date: Tue, 1 Mar 2016 09:53:31 -0500
Subject: [PATCH] fix(api.zoom): Fix & Update api.zoom() to reflect more intent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change api.zoom() to api.zoomIn() & api.zoomOut(). Zoom factor is automatically calculated 😎

Closes #25
---
 README.md                         |  8 +++++---
 dev/app/app.js                    | 11 ++++++-----
 src/imageCropper.js               | 10 +++++++---
 src/imageCropperDirective.test.js |  4 ++--
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 1ab04f5..44f3b2a 100644
--- a/README.md
+++ b/README.md
@@ -91,7 +91,7 @@ Angular image cropper comes with some options to simplify your development:
 * `image-url` _string_ Source image that will be cropped, can be an URL or base64
 * `width` _string_ Width of the cropped image
 * `height` _string_ Height of the cropped image
-* `zoom-step` _string_ Zoom step, must be `0 < zoomStep < 1` (0.1 is 10%)
+* `zoom-step` _string_ Zoom step
 * `fit-on-init` _boolean_ Fit the image on cropper initialization (keep the ratio)
 * `center-on-init` _boolean_ Center the image on cropper initialization
 * `show-controls` _boolean_ Display or not the control buttons (`true` by default)
@@ -122,7 +122,8 @@ Angular image cropper gives you access to the api, you can see an example [here]
 ```javascript
 // Cropper API available when image is ready.
 vm.getCropperApi = function(api) {
-  api.zoom(3);
+  api.zoomIn(3);
+  api.zoomOut(2);
   api.rotate(270);
   api.fit();
   vm.resultImage = api.crop();
@@ -131,7 +132,8 @@ vm.getCropperApi = function(api) {
 * `crop` _function_ return the cropped image in `base64`
 * `fit` _function_ fit the image to the wrapper dimensions (keep the ratio)
 * `rotate` _function_ Apply the rotation with degrees given, should be a modulo of 90 (90, 180, 270, 360), can be negative 
-* `zoom` _function_ Apply the zoom given, can be negative (fit the image if zoomOut factor is too high)
+* `zoomIn` _function_ Apply the zoomIn given
+* `zoomOut` _function_ Apply the zoomOut given
 * `remove` _function_ Remove the cropper
 
 ## License
diff --git a/dev/app/app.js b/dev/app/app.js
index 2c43747..cd26b1a 100644
--- a/dev/app/app.js
+++ b/dev/app/app.js
@@ -13,7 +13,7 @@ angular
     var vm = this;
 
     // Some cropper options.
-    vm.imageUrl = 'assets/images/unsplash_' + getRandomInt(1,7) + '.jpg';
+    vm.imageUrl = 'assets/images/unsplash_' + getRandomInt(1, 1) + '.jpg';
     vm.showControls = true;
     vm.fit = false;
 
@@ -32,10 +32,11 @@ angular
     };
 
     // Cropper API available when image is ready.
-    //vm.cropperApi = function(cropperApi) {
-    //  cropperApi.zoom(3);
-    //  cropperApi.rotate(270);
-    //  cropperApi.fit();
+    //vm.cropperApi = functigit staon(cropperApi) {
+      //cropperApi.zoomOut(10);
+      //cropperApi.zoomIn(20);
+      //cropperApi.rotate(270);
+      //cropperApi.fit();
     //  vm.resultImage = cropperApi.crop();
     //  $scope.$apply(); // Apply the changes.
     //};
diff --git a/src/imageCropper.js b/src/imageCropper.js
index 2cb65b4..1fe4244 100644
--- a/src/imageCropper.js
+++ b/src/imageCropper.js
@@ -65,7 +65,8 @@ function Cropper(options) {
     crop: this.cropImage.bind(this),
     fit: this.applyFit.bind(this),
     rotate: this.applyRotation.bind(this),
-    zoom: this.applyZoom.bind(this),
+    zoomIn: this.applyZoomIn.bind(this),
+    zoomOut: this.applyZoomOut.bind(this),
     remove: this.remove.bind(this)
   };
 
@@ -133,8 +134,11 @@ Cropper.prototype.applyRotation = function(degree) {
   this.rotateImage(degree);
 };
 
-Cropper.prototype.applyZoom = function(zoom) {
-  this.zoomImage(zoom);
+Cropper.prototype.applyZoomIn = function(zoom) {
+  this.zoomImage(1 + parseFloat(zoom));
+};
+Cropper.prototype.applyZoomOut = function(zoom) {
+  this.zoomImage(1 / ( 1 + parseFloat(zoom)));
 };
 
 Cropper.prototype.applyFit = function() {
diff --git a/src/imageCropperDirective.test.js b/src/imageCropperDirective.test.js
index a05f96d..5ceb01f 100644
--- a/src/imageCropperDirective.test.js
+++ b/src/imageCropperDirective.test.js
@@ -60,7 +60,7 @@ module.exports = function(angular) {
         $scope = $rootScope.$new();
 
       $scope.getCropperApi = function(api) {
-        api.zoom(3);
+        api.zoomIn(3);
         api.rotate(270);
         api.fit();
         var image = api.crop();
@@ -81,7 +81,7 @@ module.exports = function(angular) {
 
       $scope.getCropperApi = function(api) {
         expect(function() {
-          api.zoom(3);
+          api.zoomIn(3);
           api.rotate(25);
         }).to.throw(Error, /Support only multiple of 90° for rotation./gi);
         done();