fix(api.zoom): Fix & Update api.zoom() to reflect more intent

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

Closes #25

Author: bcabanes

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

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.
     //};

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() {

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();