From f1c6777d87bb7342a9ce34bf2d640a5efc84107f Mon Sep 17 00:00:00 2001 From: Geoff Chirgwin Date: Tue, 9 Dec 2014 12:37:37 -0800 Subject: [PATCH] Revert "Introduced aspect ratio parameter for rectangle area" --- .gitignore | 50 +- README.md | 6 +- compile/minified/ng-img-crop.css | 2 +- compile/minified/ng-img-crop.js | 2 +- compile/unminified/ng-img-crop.js | 609 ++++++----------------- source/js/classes/crop-area-rectangle.js | 2 +- source/js/classes/crop-area.js | 46 +- source/js/classes/crop-host.js | 33 +- source/js/ng-img-crop.js | 7 +- 9 files changed, 193 insertions(+), 564 deletions(-) diff --git a/.gitignore b/.gitignore index ef8384de..492a6b53 100644 --- a/.gitignore +++ b/.gitignore @@ -1,33 +1,32 @@ -# Windows image file caches -Thumbs.db -ehthumbs.db - -# Folder config file -Desktop.ini - -# Recycle Bin used on file shares -$RECYCLE.BIN/ - -# Windows Installer files -*.cab -*.msi -*.msm -*.msp - -# ========================= -# Operating System Files -# ========================= - -# OSX -# ========================= - +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# ========================= +# Operating System Files +# ========================= + +# OSX +# ========================= + .DS_Store .AppleDouble .LSOverride # Icon must ends with two \r. -Icon - +Icon # Thumbnails ._* @@ -39,7 +38,6 @@ Icon # SASS Cache .sass_cache/ -.sass-cache/ # Installed Bower/Node modules bower_components/ diff --git a/README.md b/README.md index 1578054a..b11680ca 100644 --- a/README.md +++ b/README.md @@ -135,11 +135,7 @@ Assignable angular expression to data-bind to. NgImgCrop puts a data uri of a cr ### area-type -*Optional*. Type of the crop area. Possible values: circle|square|rectangle. Default: circle. - -### aspect-ratio - -*Optional*. Customizable aspect ratio for rectangle area type. Possible values: decimal. Default: none. +*Optional*. Type of the crop area. Possible values: circle|square. Default: circle. ### area-min-size diff --git a/compile/minified/ng-img-crop.css b/compile/minified/ng-img-crop.css index 6a615395..f10fdb83 100644 --- a/compile/minified/ng-img-crop.css +++ b/compile/minified/ng-img-crop.css @@ -1 +1 @@ -img-crop{width:100%;height:100%;display:block;position:relative;overflow:hidden}img-crop canvas{display:block;position:absolute;top:50%;left:50%;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0)} \ No newline at end of file +img-crop{width:100%;height:100%;display:block;position:relative;overflow:hidden}img-crop canvas{display:block;position:absolute;top:50%;left:50%;outline:0;-webkit-tap-highlight-color:transparent} \ No newline at end of file diff --git a/compile/minified/ng-img-crop.js b/compile/minified/ng-img-crop.js index c2609bb2..5a4d3198 100644 --- a/compile/minified/ng-img-crop.js +++ b/compile/minified/ng-img-crop.js @@ -1 +1 @@ -/*! ngImgCrop v0.2.0 License: MIT */!function(){"use strict";var e=angular.module("ngImgCrop",[]);e.factory("cropAreaCircle",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._boxResizeBaseSize=20,this._boxResizeNormalRatio=.9,this._boxResizeHoverRatio=1.2,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._boxResizeNormalSize=this._boxResizeBaseSize*this._boxResizeNormalRatio,this._boxResizeHoverSize=this._boxResizeBaseSize*this._boxResizeHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize={w:0,h:0},this._boxResizeIsHover=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!1,this._areaIsDragging=!1};return t.prototype=new e,t.prototype.getType=function(){return"circle"},t.prototype._calcCirclePerimeterCoords=function(e){var t=this.getCenterPoint(),i=this.getSize(),s=e*(Math.PI/180),r=t.x+i.w/2*Math.cos(s),o=t.y+i.h/2*Math.sin(s);return[r,o]},t.prototype._calcResizeIconCenterCoords=function(){return this._calcCirclePerimeterCoords(-45)},t.prototype._isCoordWithinArea=function(e){var t=this.getCenterPoint();return Math.sqrt((e[0]-t.x)*(e[0]-t.x)+(e[1]-t.y)*(e[1]-t.y))t[0]-i&&e[0]t[1]-i&&e[1]a?this._posResizeStartSize.h+2*a:this._posResizeStartSize.w+2*o;var n=this.getCenterPoint();this.setSize(Math.max(this._minSize.h,r)),this.setCenterPoint(n),this._boxResizeIsHover=!0,s=!0,this._events.trigger("area-resize")}else this._isCoordWithinBoxResize([e,t])?(i="nesw-resize",this._areaIsHover=!1,this._boxResizeIsHover=!0,s=!0):this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0);return angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){this._isCoordWithinBoxResize([e,t])?(this._areaIsDragging=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!0,this._boxResizeIsHover=!0,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._boxResizeIsDragging=!1,this._boxResizeIsHover=!1,this._posDragStartX=e-this.getCenterPoint().x,this._posDragStartY=t-this.getCenterPoint().y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._boxResizeIsDragging&&(this._boxResizeIsDragging=!1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._boxResizeIsHover=!1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropAreaRectangle",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._resizeCtrlBaseRadius=10,this._resizeCtrlNormalRatio=.75,this._resizeCtrlHoverRatio=1,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._resizeCtrlNormalRadius=this._resizeCtrlBaseRadius*this._resizeCtrlNormalRatio,this._resizeCtrlHoverRadius=this._resizeCtrlBaseRadius*this._resizeCtrlHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize={w:0,h:0},this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._resizeCtrlIsDragging=-1,this._areaIsDragging=!1};return t.prototype=new e,t.prototype.getType=function(){return"rectangle"},t.prototype._calcRectangleCorners=function(){var e=this.getSize(),t=this.getSouthEastBound();return[[e.x,e.y],[t.x,e.y],[e.x,t.y],[t.x,t.y]]},t.prototype._calcRectangleDimensions=function(){var e=this.getSize(),t=this.getSouthEastBound();return{left:e.x,top:e.y,right:t.x,bottom:t.y}},t.prototype._isCoordWithinArea=function(e){var t=this._calcRectangleDimensions();return e[0]>=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},t.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcRectangleCorners(),i=-1,s=0,r=t.length;r>s;s++){var o=t[s];if(e[0]>o[0]-this._resizeCtrlHoverRadius&&e[0]o[1]-this._resizeCtrlHoverRadius&&e[1]s;s++){var o=i[s];this._cropCanvas.drawIconResizeCircle(o,this._resizeCtrlBaseRadius,this._resizeCtrlIsHover===s?this._resizeCtrlHoverRatio:this._resizeCtrlNormalRatio)}},t.prototype.processMouseMove=function(e,t){var i="default",s=!1;if(this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._areaIsDragging)this.setCenterPoint({x:e-this._posDragStartX,y:t-this._posDragStartY}),this._areaIsHover=!0,i="move",s=!0,this._events.trigger("area-move");else if(this._resizeCtrlIsDragging>-1){var r=this.getSize(),o=this.getSouthEastBound();switch(this._resizeCtrlIsDragging){case 0:this.setSizeByCorners({x:e,y:t},{x:o.x,y:o.y}),i="nwse-resize";break;case 1:this.setSizeByCorners({x:r.x,y:t},{x:e,y:o.y}),i="nesw-resize";break;case 2:this.setSizeByCorners({x:e,y:r.y},{x:o.x,y:t}),i="nesw-resize";break;case 3:this.setSizeByCorners({x:r.x,y:r.y},{x:e,y:t}),i="nwse-resize"}this._resizeCtrlIsHover=this._resizeCtrlIsDragging,s=!0,this._events.trigger("area-resize")}else{var a=this._isCoordWithinResizeCtrl([e,t]);if(a>-1){switch(a){case 0:i="nwse-resize";break;case 1:i="nesw-resize";break;case 2:i="nesw-resize";break;case 3:i="nwse-resize"}this._areaIsHover=!1,this._resizeCtrlIsHover=a,s=!0}else this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0)}return angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){var i=this._isCoordWithinResizeCtrl([e,t]);if(i>-1)this._areaIsDragging=!1,this._areaIsHover=!1,this._resizeCtrlIsDragging=i,this._resizeCtrlIsHover=i,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start");else if(this._isCoordWithinArea([e,t])){this._areaIsDragging=!0,this._areaIsHover=!0,this._resizeCtrlIsDragging=-1,this._resizeCtrlIsHover=-1;var s=this.getCenterPoint();this._posDragStartX=e-s.x,this._posDragStartY=t-s.y,this._events.trigger("area-move-start")}},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._resizeCtrlIsDragging>-1&&(this._resizeCtrlIsDragging=-1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._resizeCtrlIsHover=-1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropAreaSquare",["cropArea","cropAreaRectangle",function(e,t){var i=function(){t.apply(this,arguments)};return i.prototype=new t,i.prototype.getType=function(){return"square"},i.prototype.processMouseMove=function(e,t){var i="default",s=!1;if(this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._areaIsDragging)this.setCenterPoint({x:e-this._posDragStartX,y:t-this._posDragStartY}),this._areaIsHover=!0,i="move",s=!0,this._events.trigger("area-move");else if(this._resizeCtrlIsDragging>-1){var r,o;switch(this._resizeCtrlIsDragging){case 0:r=-1,o=-1,i="nwse-resize";break;case 1:r=1,o=-1,i="nesw-resize";break;case 2:r=-1,o=1,i="nesw-resize";break;case 3:r=1,o=1,i="nwse-resize"}var a,n=(e-this._posResizeStartX)*r,h=(t-this._posResizeStartY)*o;a=n>h?this._posResizeStartSize.w+h:this._posResizeStartSize.h+n;var c=this.getCenterPoint();this.setSize(Math.max(this._minSize.w,a)),this.setCenterPoint(c),this._resizeCtrlIsHover=this._resizeCtrlIsDragging,s=!0,this._events.trigger("area-resize")}else{var g=this._isCoordWithinResizeCtrl([e,t]);if(g>-1){switch(g){case 0:i="nwse-resize";break;case 1:i="nesw-resize";break;case 2:i="nesw-resize";break;case 3:i="nwse-resize"}this._areaIsHover=!1,this._resizeCtrlIsHover=g,s=!0}else this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0)}return angular.element(this._ctx.canvas).css({cursor:i}),s},i}]),e.factory("cropArea",["cropCanvas",function(e){var t=function(t,i){this._ctx=t,this._events=i,this._aspectRatio=null,this._minSize={x:0,y:0,w:80,h:80},this._cropCanvas=new e(t),this._image=new Image,this._size={x:0,y:0,w:200,h:200}};return t.prototype.getImage=function(){return this._image},t.prototype.setImage=function(e){this._image=e},t.prototype.getSize=function(){return this._size},t.prototype.setSize=function(e){e=this._processSize(e),this._size=this._preventBoundaryCollision(e)},t.prototype.setSizeByCorners=function(e,t){var i={x:e.x,y:e.y,w:t.x-e.x,h:t.y-e.y};this.setSize(i)},t.prototype.getSouthEastBound=function(){return this._southEastBound(this.getSize())},t.prototype.getMinSize=function(){return this._minSize},t.prototype.getCenterPoint=function(){var e=this.getSize();return{x:e.x+e.w/2,y:e.y+e.h/2}},t.prototype.setCenterPoint=function(e){var t=this.getSize();this.setSize({x:e.x-t.w/2,y:e.y-t.h/2,w:t.w,h:t.h})},t.prototype.setAspectRatio=function(e){this._aspectRatio=e,this._minSize=this._processSize(this._minSize),this.setSize(this._minSize)},t.prototype.setMinSize=function(e){this._minSize=this._processSize(e),this.setSize(this._minSize)},t.prototype.getType=function(){return"circle"},t.prototype._preventBoundaryCollision=function(e){var t=this._ctx.canvas.height,i=this._ctx.canvas.width,s={x:e.x,y:e.y},r=this._southEastBound(e);s.x<0&&(s.x=0),s.y<0&&(s.y=0),r.x>i&&(r.x=i),r.y>t&&(r.y=t);var o={x:s.x,y:s.y,w:r.x-s.x,h:r.y-s.y};o.wi&&(r.x=i,s.x=Math.max(r.x-i,r.x-this._minSize.w),o={x:s.x,y:s.y,w:r.x-s.x,h:r.y-s.y})),o.ht&&(r.y=t,s.y=Math.max(r.y-t,r.y-this._minSize.h),o={x:s.x,y:s.y,w:r.x-s.x,h:r.y-s.y}));var a=this.getType();if("circle"===a||"square"===a)o={x:o.x,y:o.y,w:Math.min(o.w,o.h),h:Math.min(o.w,o.h)};else if("rectangle"===a&&null!==this._aspectRatio){var t=this._ctx.canvas.height,n=o.w/this._aspectRatio;t>n&&r.y0&&(r=g(e[a],i,s),c.lineTo(r[0],r[1]));c.lineTo(o[0],o[1]),c.fill(),c.closePath(),c.restore()};this.drawIconMove=function(e,t){u(r,h.moveIconFill,e,t),u(o,h.moveIconFill,e,t),u(a,h.moveIconFill,e,t),u(n,h.moveIconFill,e,t)},this.drawIconResizeCircle=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeCircleStroke,c.lineWidth=2,c.fillStyle=h.resizeCircleFill,c.beginPath(),c.arc(e[0],e[1],s,0,2*Math.PI),c.fill(),c.stroke(),c.closePath(),c.restore()},this.drawIconResizeBoxBase=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeBoxStroke,c.lineWidth=2,c.fillStyle=h.resizeBoxFill,c.fillRect(e[0]-s/2,e[1]-s/2,s,s),c.strokeRect(e[0]-s/2,e[1]-s/2,s,s),c.restore()},this.drawIconResizeBoxNESW=function(e,s,r){this.drawIconResizeBoxBase(e,s,r),u(t,h.resizeBoxArrowFill,e,r),u(i,h.resizeBoxArrowFill,e,r)},this.drawIconResizeBoxNWSE=function(t,i,r){this.drawIconResizeBoxBase(t,i,r),u(e,h.resizeBoxArrowFill,t,r),u(s,h.resizeBoxArrowFill,t,r)},this.drawCropArea=function(e,t,i,s){var r=e.width/c.canvas.width,o=e.height/c.canvas.height,a=i.x,n=i.y;c.save(),c.strokeStyle=h.areaOutline,c.lineWidth=2,c.beginPath(),s(c,t,i),c.stroke(),c.clip(),i.w>0&&i.w>0&&c.drawImage(e,a*r,n*o,i.w*r,i.h*o,a,n,i.w,i.h),c.beginPath(),s(c,t,i),c.stroke(),c.clip(),c.restore()}}}]),e.factory("cropHost",["$document","cropAreaCircle","cropAreaSquare","cropAreaRectangle",function(e,t,i,s){var r=function(e){var t=e.getBoundingClientRect(),i=document.body,s=document.documentElement,r=window.pageYOffset||s.scrollTop||i.scrollTop,o=window.pageXOffset||s.scrollLeft||i.scrollLeft,a=s.clientTop||i.clientTop||0,n=s.clientLeft||i.clientLeft||0,h=t.top+r-a,c=t.left+o-n;return{top:Math.round(h),left:Math.round(c)}};return function(o,a,n){function h(){c.clearRect(0,0,c.canvas.width,c.canvas.height),null!==g&&(c.drawImage(g,0,0,c.canvas.width,c.canvas.height),c.save(),c.fillStyle="rgba(0, 0, 0, 0.65)",c.fillRect(0,0,c.canvas.width,c.canvas.height),c.restore(),u.draw())}var c=null,g=null,u=null,p=this,l=[100,100],_=[300,300],z={w:200,h:200},v=function(){if(null!==g){u.setImage(g);var e=[g.width,g.height],t=g.width/g.height,i=e;i[0]>_[0]?(i[0]=_[0],i[1]=i[0]/t):i[0]_[1]?(i[1]=_[1],i[0]=i[1]*t):i[1]")[0],e=t.getContext("2d");var i=this.getResultImageSize();t.width=i.w,t.height=i.h;var s=u.getCenterPoint(),r={dataURI:null,imageData:null};return null!==g&&(e.drawImage(g,(s.x-u.getSize().w/2)*(g.width/c.canvas.width),(s.y-u.getSize().h/2)*(g.height/c.canvas.height),u.getSize().w*(g.width/c.canvas.width),u.getSize().h*(g.height/c.canvas.height),0,0,i.w,i.h),r.dataURI=t.toDataURL(),r.imageData=t.getContext("2d").getImageData(0,0,t.width,t.height)),r},this.setNewImageSource=function(e){if(g=null,v(),n.trigger("image-updated"),e){var t=new Image;t.onload=function(){n.trigger("load-done"),g=t,v(),n.trigger("image-updated")},t.onerror=function(){n.trigger("load-error")},n.trigger("load-start"),t.src=e}},this.setMaxDimensions=function(e,t){if(_=[e,t],null!==g){var i=c.canvas.width,s=c.canvas.height,r=[g.width,g.height],a=g.width/g.height,n=r;n[0]>_[0]?(n[0]=_[0],n[1]=n[0]/a):n[0]_[1]?(n[1]=_[1],n[0]=n[1]*a):n[1]",controller:["$scope",function(e){e.events=new i}],link:function(i,s){var r,o=i.events,a=new t(s.find("canvas"),{},o),n=function(e){var t=a.getResultImage(),i=t.dataURI;r!==i&&(r=i,angular.isDefined(e.resultImage)&&(e.resultImage=i),angular.isDefined(e.resultImageData)&&(e.resultImageData=t.imageData),e.onChange({$dataURI:e.resultImage}),e.onChange({$imageData:e.resultImageData}))},h=function(t){return function(){e(function(){i.$apply(function(e){t(e)})})}};o.on("load-start",h(function(e){e.onLoadBegin({})})).on("load-done",h(function(e){e.onLoadDone({})})).on("load-error",h(function(e){e.onLoadError({})})).on("area-move area-resize",h(function(e){e.changeOnFly&&n(e)})).on("area-move-end area-resize-end image-updated",h(function(e){n(e)})),i.$watch("image",function(){a.setNewImageSource(i.image)}),i.$watch("areaType",function(){a.setAreaType(i.areaType),n(i)}),i.$watch("aspectRatio",function(){a.setAspectRatio(i.aspectRatio),n(i)}),i.$watch("areaMinSize",function(){a.setAreaMinSize(i.areaMinSize),n(i)}),i.$watch("resultImageSize",function(){a.setResultImageSize(i.resultImageSize),n(i)}),i.$watch(function(){return[s[0].clientWidth,s[0].clientHeight]},function(e){a.setMaxDimensions(e[0],e[1]),n(i)},!0),i.$on("$destroy",function(){a.destroy()})}}}])}(); \ No newline at end of file +/*! ngImgCrop v0.2.0 License: MIT */!function(){"use strict";var e=angular.module("ngImgCrop",[]);e.factory("cropAreaCircle",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._boxResizeBaseSize=20,this._boxResizeNormalRatio=.9,this._boxResizeHoverRatio=1.2,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._boxResizeNormalSize=this._boxResizeBaseSize*this._boxResizeNormalRatio,this._boxResizeHoverSize=this._boxResizeBaseSize*this._boxResizeHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize=0,this._boxResizeIsHover=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!1,this._areaIsDragging=!1};return t.prototype=new e,t.prototype._calcCirclePerimeterCoords=function(e){var t=this._size/2,i=e*(Math.PI/180),s=this._x+t*Math.cos(i),r=this._y+t*Math.sin(i);return[s,r]},t.prototype._calcResizeIconCenterCoords=function(){return this._calcCirclePerimeterCoords(-45)},t.prototype._isCoordWithinArea=function(e){return Math.sqrt((e[0]-this._x)*(e[0]-this._x)+(e[1]-this._y)*(e[1]-this._y))t[0]-i&&e[0]t[1]-i&&e[1]a?this._posResizeStartSize+2*a:this._posResizeStartSize+2*o,this._size=Math.max(this._minSize,r),this._boxResizeIsHover=!0,s=!0,this._events.trigger("area-resize")}else this._isCoordWithinBoxResize([e,t])?(i="nesw-resize",this._areaIsHover=!1,this._boxResizeIsHover=!0,s=!0):this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0);return this._dontDragOutside(),angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){this._isCoordWithinBoxResize([e,t])?(this._areaIsDragging=!1,this._areaIsHover=!1,this._boxResizeIsDragging=!0,this._boxResizeIsHover=!0,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._boxResizeIsDragging=!1,this._boxResizeIsHover=!1,this._posDragStartX=e-this._x,this._posDragStartY=t-this._y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._boxResizeIsDragging&&(this._boxResizeIsDragging=!1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._boxResizeIsHover=!1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropAreaSquare",["cropArea",function(e){var t=function(){e.apply(this,arguments),this._resizeCtrlBaseRadius=10,this._resizeCtrlNormalRatio=.75,this._resizeCtrlHoverRatio=1,this._iconMoveNormalRatio=.9,this._iconMoveHoverRatio=1.2,this._resizeCtrlNormalRadius=this._resizeCtrlBaseRadius*this._resizeCtrlNormalRatio,this._resizeCtrlHoverRadius=this._resizeCtrlBaseRadius*this._resizeCtrlHoverRatio,this._posDragStartX=0,this._posDragStartY=0,this._posResizeStartX=0,this._posResizeStartY=0,this._posResizeStartSize=0,this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._resizeCtrlIsDragging=-1,this._areaIsDragging=!1};return t.prototype=new e,t.prototype._calcSquareCorners=function(){var e=this._size/2;return[[this._x-e,this._y-e],[this._x+e,this._y-e],[this._x-e,this._y+e],[this._x+e,this._y+e]]},t.prototype._calcSquareDimensions=function(){var e=this._size/2;return{left:this._x-e,top:this._y-e,right:this._x+e,bottom:this._y+e}},t.prototype._isCoordWithinArea=function(e){var t=this._calcSquareDimensions();return e[0]>=t.left&&e[0]<=t.right&&e[1]>=t.top&&e[1]<=t.bottom},t.prototype._isCoordWithinResizeCtrl=function(e){for(var t=this._calcSquareCorners(),i=-1,s=0,r=t.length;r>s;s++){var o=t[s];if(e[0]>o[0]-this._resizeCtrlHoverRadius&&e[0]o[1]-this._resizeCtrlHoverRadius&&e[1]i;i++){var r=t[i];this._cropCanvas.drawIconResizeCircle(r,this._resizeCtrlBaseRadius,this._resizeCtrlIsHover===i?this._resizeCtrlHoverRatio:this._resizeCtrlNormalRatio)}},t.prototype.processMouseMove=function(e,t){var i="default",s=!1;if(this._resizeCtrlIsHover=-1,this._areaIsHover=!1,this._areaIsDragging)this._x=e-this._posDragStartX,this._y=t-this._posDragStartY,this._areaIsHover=!0,i="move",s=!0,this._events.trigger("area-move");else if(this._resizeCtrlIsDragging>-1){var r,o;switch(this._resizeCtrlIsDragging){case 0:r=-1,o=-1,i="nwse-resize";break;case 1:r=1,o=-1,i="nesw-resize";break;case 2:r=-1,o=1,i="nesw-resize";break;case 3:r=1,o=1,i="nwse-resize"}var a,n=(e-this._posResizeStartX)*r,h=(t-this._posResizeStartY)*o;a=n>h?this._posResizeStartSize+h:this._posResizeStartSize+n;var c=this._size;this._size=Math.max(this._minSize,a);var _=(this._size-c)/2;this._x+=_*r,this._y+=_*o,this._resizeCtrlIsHover=this._resizeCtrlIsDragging,s=!0,this._events.trigger("area-resize")}else{var g=this._isCoordWithinResizeCtrl([e,t]);if(g>-1){switch(g){case 0:i="nwse-resize";break;case 1:i="nesw-resize";break;case 2:i="nesw-resize";break;case 3:i="nwse-resize"}this._areaIsHover=!1,this._resizeCtrlIsHover=g,s=!0}else this._isCoordWithinArea([e,t])&&(i="move",this._areaIsHover=!0,s=!0)}return this._dontDragOutside(),angular.element(this._ctx.canvas).css({cursor:i}),s},t.prototype.processMouseDown=function(e,t){var i=this._isCoordWithinResizeCtrl([e,t]);i>-1?(this._areaIsDragging=!1,this._areaIsHover=!1,this._resizeCtrlIsDragging=i,this._resizeCtrlIsHover=i,this._posResizeStartX=e,this._posResizeStartY=t,this._posResizeStartSize=this._size,this._events.trigger("area-resize-start")):this._isCoordWithinArea([e,t])&&(this._areaIsDragging=!0,this._areaIsHover=!0,this._resizeCtrlIsDragging=-1,this._resizeCtrlIsHover=-1,this._posDragStartX=e-this._x,this._posDragStartY=t-this._y,this._events.trigger("area-move-start"))},t.prototype.processMouseUp=function(){this._areaIsDragging&&(this._areaIsDragging=!1,this._events.trigger("area-move-end")),this._resizeCtrlIsDragging>-1&&(this._resizeCtrlIsDragging=-1,this._events.trigger("area-resize-end")),this._areaIsHover=!1,this._resizeCtrlIsHover=-1,this._posDragStartX=0,this._posDragStartY=0},t}]),e.factory("cropArea",["cropCanvas",function(e){var t=function(t,i){this._ctx=t,this._events=i,this._minSize=80,this._cropCanvas=new e(t),this._image=new Image,this._x=0,this._y=0,this._size=200};return t.prototype.getImage=function(){return this._image},t.prototype.setImage=function(e){this._image=e},t.prototype.getX=function(){return this._x},t.prototype.setX=function(e){this._x=e,this._dontDragOutside()},t.prototype.getY=function(){return this._y},t.prototype.setY=function(e){this._y=e,this._dontDragOutside()},t.prototype.getSize=function(){return this._size},t.prototype.setSize=function(e){this._size=Math.max(this._minSize,e),this._dontDragOutside()},t.prototype.getMinSize=function(){return this._minSize},t.prototype.setMinSize=function(e){this._minSize=e,this._size=Math.max(this._minSize,this._size),this._dontDragOutside()},t.prototype._dontDragOutside=function(){var e=this._ctx.canvas.height,t=this._ctx.canvas.width;this._size>t&&(this._size=t),this._size>e&&(this._size=e),this._xt-this._size/2&&(this._x=t-this._size/2),this._ye-this._size/2&&(this._y=e-this._size/2)},t.prototype._drawArea=function(){},t.prototype.draw=function(){this._cropCanvas.drawCropArea(this._image,[this._x,this._y],this._size,this._drawArea)},t.prototype.processMouseMove=function(){},t.prototype.processMouseDown=function(){},t.prototype.processMouseUp=function(){},t}]),e.factory("cropCanvas",[function(){var e=[[-.5,-2],[-3,-4.5],[-.5,-7],[-7,-7],[-7,-.5],[-4.5,-3],[-2,-.5]],t=[[.5,-2],[3,-4.5],[.5,-7],[7,-7],[7,-.5],[4.5,-3],[2,-.5]],i=[[-.5,2],[-3,4.5],[-.5,7],[-7,7],[-7,.5],[-4.5,3],[-2,.5]],s=[[.5,2],[3,4.5],[.5,7],[7,7],[7,.5],[4.5,3],[2,.5]],r=[[-1.5,-2.5],[-1.5,-6],[-5,-6],[0,-11],[5,-6],[1.5,-6],[1.5,-2.5]],o=[[-2.5,-1.5],[-6,-1.5],[-6,-5],[-11,0],[-6,5],[-6,1.5],[-2.5,1.5]],a=[[-1.5,2.5],[-1.5,6],[-5,6],[0,11],[5,6],[1.5,6],[1.5,2.5]],n=[[2.5,-1.5],[6,-1.5],[6,-5],[11,0],[6,5],[6,1.5],[2.5,1.5]],h={areaOutline:"#fff",resizeBoxStroke:"#fff",resizeBoxFill:"#444",resizeBoxArrowFill:"#fff",resizeCircleStroke:"#fff",resizeCircleFill:"#444",moveIconFill:"#fff"};return function(c){var _=function(e,t,i){return[i*e[0]+t[0],i*e[1]+t[1]]},g=function(e,t,i,s){c.save(),c.fillStyle=t,c.beginPath();var r,o=_(e[0],i,s);c.moveTo(o[0],o[1]);for(var a in e)a>0&&(r=_(e[a],i,s),c.lineTo(r[0],r[1]));c.lineTo(o[0],o[1]),c.fill(),c.closePath(),c.restore()};this.drawIconMove=function(e,t){g(r,h.moveIconFill,e,t),g(o,h.moveIconFill,e,t),g(a,h.moveIconFill,e,t),g(n,h.moveIconFill,e,t)},this.drawIconResizeCircle=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeCircleStroke,c.lineWidth=2,c.fillStyle=h.resizeCircleFill,c.beginPath(),c.arc(e[0],e[1],s,0,2*Math.PI),c.fill(),c.stroke(),c.closePath(),c.restore()},this.drawIconResizeBoxBase=function(e,t,i){var s=t*i;c.save(),c.strokeStyle=h.resizeBoxStroke,c.lineWidth=2,c.fillStyle=h.resizeBoxFill,c.fillRect(e[0]-s/2,e[1]-s/2,s,s),c.strokeRect(e[0]-s/2,e[1]-s/2,s,s),c.restore()},this.drawIconResizeBoxNESW=function(e,s,r){this.drawIconResizeBoxBase(e,s,r),g(t,h.resizeBoxArrowFill,e,r),g(i,h.resizeBoxArrowFill,e,r)},this.drawIconResizeBoxNWSE=function(t,i,r){this.drawIconResizeBoxBase(t,i,r),g(e,h.resizeBoxArrowFill,t,r),g(s,h.resizeBoxArrowFill,t,r)},this.drawCropArea=function(e,t,i,s){var r=e.width/c.canvas.width,o=e.height/c.canvas.height,a=t[0]-i/2,n=t[1]-i/2;c.save(),c.strokeStyle=h.areaOutline,c.lineWidth=2,c.beginPath(),s(c,t,i),c.stroke(),c.clip(),i>0&&c.drawImage(e,a*r,n*o,i*r,i*o,a,n,i,i),c.beginPath(),s(c,t,i),c.stroke(),c.clip(),c.restore()}}}]),e.factory("cropHost",["$document","cropAreaCircle","cropAreaSquare",function(e,t,i){var s=function(e){var t=e.getBoundingClientRect(),i=document.body,s=document.documentElement,r=window.pageYOffset||s.scrollTop||i.scrollTop,o=window.pageXOffset||s.scrollLeft||i.scrollLeft,a=s.clientTop||i.clientTop||0,n=s.clientLeft||i.clientLeft||0,h=t.top+r-a,c=t.left+o-n;return{top:Math.round(h),left:Math.round(c)}};return function(r,o,a){function n(){h.clearRect(0,0,h.canvas.width,h.canvas.height),null!==c&&(h.drawImage(c,0,0,h.canvas.width,h.canvas.height),h.save(),h.fillStyle="rgba(0, 0, 0, 0.65)",h.fillRect(0,0,h.canvas.width,h.canvas.height),h.restore(),_.draw())}var h=null,c=null,_=null,g=[100,100],u=[300,300],l=200,p=function(){if(null!==c){_.setImage(c);var e=[c.width,c.height],t=c.width/c.height,i=e;i[0]>u[0]?(i[0]=u[0],i[1]=i[0]/t):i[0]u[1]?(i[1]=u[1],i[0]=i[1]*t):i[1]")[0],e=t.getContext("2d"),t.width=l,t.height=l,null!==c&&e.drawImage(c,(_.getX()-_.getSize()/2)*(c.width/h.canvas.width),(_.getY()-_.getSize()/2)*(c.height/h.canvas.height),_.getSize()*(c.width/h.canvas.width),_.getSize()*(c.height/h.canvas.height),0,0,l,l),t.toDataURL()},this.setNewImageSource=function(e){if(c=null,p(),a.trigger("image-updated"),e){var t=new Image;t.onload=function(){a.trigger("load-done"),c=t,p(),a.trigger("image-updated")},t.onerror=function(){a.trigger("load-error")},a.trigger("load-start"),t.src=e}},this.setMaxDimensions=function(e,t){if(u=[e,t],null!==c){var i=h.canvas.width,s=h.canvas.height,o=[c.width,c.height],a=c.width/c.height,l=o;l[0]>u[0]?(l[0]=u[0],l[1]=l[0]/a):l[0]u[1]?(l[1]=u[1],l[0]=l[1]*a):l[1]",controller:["$scope",function(e){e.events=new i}],link:function(i,s){var r,o=i.events,a=new t(s.find("canvas"),{},o),n=function(e){var t=a.getResultImageDataURI();r!==t&&(r=t,angular.isDefined(e.resultImage)&&(e.resultImage=t),e.onChange({$dataURI:e.resultImage}))},h=function(t){return function(){e(function(){i.$apply(function(e){t(e)})})}};o.on("load-start",h(function(e){e.onLoadBegin({})})).on("load-done",h(function(e){e.onLoadDone({})})).on("load-error",h(function(e){e.onLoadError({})})).on("area-move area-resize",h(function(e){e.changeOnFly&&n(e)})).on("area-move-end area-resize-end image-updated",h(function(e){n(e)})),i.$watch("image",function(){a.setNewImageSource(i.image)}),i.$watch("areaType",function(){a.setAreaType(i.areaType),n(i)}),i.$watch("areaMinSize",function(){a.setAreaMinSize(i.areaMinSize),n(i)}),i.$watch("resultImageSize",function(){a.setResultImageSize(i.resultImageSize),n(i)}),i.$watch(function(){return[s[0].clientWidth,s[0].clientHeight]},function(e){a.setMaxDimensions(e[0],e[1]),n(i)},!0),i.$on("$destroy",function(){a.destroy()})}}}])}(); \ No newline at end of file diff --git a/compile/unminified/ng-img-crop.js b/compile/unminified/ng-img-crop.js index e3df4b1f..9f26628d 100644 --- a/compile/unminified/ng-img-crop.js +++ b/compile/unminified/ng-img-crop.js @@ -5,14 +5,13 @@ * Copyright (c) 2014 Alex Kaul * License: MIT * - * Generated at Monday, September 15th, 2014, 1:36:30 PM + * Generated at Tuesday, July 22nd, 2014, 10:37:39 PM */ (function() { 'use strict'; -'use strict'; - var crop = angular.module('ngImgCrop', []); + 'use strict'; crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { @@ -32,7 +31,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { this._posDragStartY=0; this._posResizeStartX=0; this._posResizeStartY=0; - this._posResizeStartSize={w: 0, h: 0}; + this._posResizeStartSize=0; this._boxResizeIsHover = false; this._areaIsHover = false; @@ -42,17 +41,11 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { CropAreaCircle.prototype = new CropArea(); - // return a type string - CropAreaCircle.prototype.getType = function() { - return 'circle'; - } - CropAreaCircle.prototype._calcCirclePerimeterCoords=function(angleDegrees) { - var c = this.getCenterPoint(); - var s = this.getSize(); + var hSize=this._size/2; var angleRadians=angleDegrees * (Math.PI / 180), - circlePerimeterX=c.x + s.w / 2 * Math.cos(angleRadians), - circlePerimeterY=c.y + s.h / 2 * Math.sin(angleRadians); + circlePerimeterX=this._x + hSize * Math.cos(angleRadians), + circlePerimeterY=this._y + hSize * Math.sin(angleRadians); return [circlePerimeterX, circlePerimeterY]; }; @@ -61,8 +54,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { }; CropAreaCircle.prototype._isCoordWithinArea=function(coord) { - var c = this.getCenterPoint(); - return Math.sqrt((coord[0]-c.x)*(coord[0]-c.x) + (coord[1]-c.y)*(coord[1]-c.y)) < this._size.h/2; + return Math.sqrt((coord[0]-this._x)*(coord[0]-this._x) + (coord[1]-this._y)*(coord[1]-this._y)) < this._size/2; }; CropAreaCircle.prototype._isCoordWithinBoxResize=function(coord) { var resizeIconCenterCoords=this._calcResizeIconCenterCoords(); @@ -71,16 +63,15 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { coord[1] > resizeIconCenterCoords[1] - hSize && coord[1] < resizeIconCenterCoords[1] + hSize); }; - CropAreaCircle.prototype._drawArea=function(ctx, center, size){ - ctx.arc(center.x, center.y,size.h/2,0,2*Math.PI); + CropAreaCircle.prototype._drawArea=function(ctx,centerCoords,size){ + ctx.arc(centerCoords[0],centerCoords[1],size/2,0,2*Math.PI); }; CropAreaCircle.prototype.draw=function() { CropArea.prototype.draw.apply(this, arguments); // draw move icon - var c = this.getCenterPoint(); - this._cropCanvas.drawIconMove([c.x, c.y], this._areaIsHover?this._iconMoveHoverRatio:this._iconMoveNormalRatio); + this._cropCanvas.drawIconMove([this._x,this._y], this._areaIsHover?this._iconMoveHoverRatio:this._iconMoveNormalRatio); // draw resize cubes this._cropCanvas.drawIconResizeBoxNESW(this._calcResizeIconCenterCoords(), this._boxResizeBaseSize, this._boxResizeIsHover?this._boxResizeHoverRatio:this._boxResizeNormalRatio); @@ -94,7 +85,8 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { this._areaIsHover = false; if (this._areaIsDragging) { - this.setCenterPoint({x: mouseCurX - this._posDragStartX, y: mouseCurY - this._posDragStartY}); + this._x = mouseCurX - this._posDragStartX; + this._y = mouseCurY - this._posDragStartY; this._areaIsHover = true; cursor='move'; res=true; @@ -105,18 +97,12 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { iFX = mouseCurX - this._posResizeStartX; iFY = this._posResizeStartY - mouseCurY; if(iFX>iFY) { - iFR = this._posResizeStartSize.h + iFY*2; + iFR = this._posResizeStartSize + iFY*2; } else { - iFR = this._posResizeStartSize.w + iFX*2; + iFR = this._posResizeStartSize + iFX*2; } - var prevCenter = this.getCenterPoint(); - - this.setSize(Math.max(this._minSize.h, iFR)); - - //recenter - this.setCenterPoint(prevCenter); - + this._size = Math.max(this._minSize, iFR); this._boxResizeIsHover = true; res=true; this._events.trigger('area-resize'); @@ -131,6 +117,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { res=true; } + this._dontDragOutside(); angular.element(this._ctx.canvas).css({'cursor': cursor}); return res; @@ -151,8 +138,8 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { this._areaIsHover = true; this._boxResizeIsDragging = false; this._boxResizeIsHover = false; - this._posDragStartX = mouseDownX - this.getCenterPoint().x; - this._posDragStartY = mouseDownY - this.getCenterPoint().y; + this._posDragStartX = mouseDownX - this._x; + this._posDragStartY = mouseDownY - this._y; this._events.trigger('area-move-start'); } }; @@ -178,10 +165,11 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) { }]); + 'use strict'; -crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { - var CropAreaRectangle = function() { +crop.factory('cropAreaSquare', ['cropArea', function(CropArea) { + var CropAreaSquare = function() { CropArea.apply(this, arguments); this._resizeCtrlBaseRadius = 10; @@ -197,7 +185,7 @@ crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { this._posDragStartY=0; this._posResizeStartX=0; this._posResizeStartY=0; - this._posResizeStartSize={w: 0, h: 0}; + this._posResizeStartSize=0; this._resizeCtrlIsHover = -1; this._areaIsHover = false; @@ -205,42 +193,35 @@ crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { this._areaIsDragging = false; }; - CropAreaRectangle.prototype = new CropArea(); + CropAreaSquare.prototype = new CropArea(); - // return a type string - CropAreaRectangle.prototype.getType = function() { - return 'rectangle'; + CropAreaSquare.prototype._calcSquareCorners=function() { + var hSize=this._size/2; + return [ + [this._x-hSize, this._y-hSize], + [this._x+hSize, this._y-hSize], + [this._x-hSize, this._y+hSize], + [this._x+hSize, this._y+hSize] + ]; }; - CropAreaRectangle.prototype._calcRectangleCorners=function() { - var size = this.getSize(); - var se = this.getSouthEastBound(); - return [ - [size.x, size.y], //northwest - [se.x, size.y], //northeast - [size.x, se.y], //southwest - [se.x, se.y] //southeast - ]; - }; - - CropAreaRectangle.prototype._calcRectangleDimensions=function() { - var size = this.getSize(); - var se = this.getSouthEastBound(); + CropAreaSquare.prototype._calcSquareDimensions=function() { + var hSize=this._size/2; return { - left: size.x, - top: size.y, - right: se.x, - bottom: se.y + left: this._x-hSize, + top: this._y-hSize, + right: this._x+hSize, + bottom: this._y+hSize }; }; - CropAreaRectangle.prototype._isCoordWithinArea=function(coord) { - var rectangleDimensions=this._calcRectangleDimensions(); - return (coord[0]>=rectangleDimensions.left&&coord[0]<=rectangleDimensions.right&&coord[1]>=rectangleDimensions.top&&coord[1]<=rectangleDimensions.bottom); + CropAreaSquare.prototype._isCoordWithinArea=function(coord) { + var squareDimensions=this._calcSquareDimensions(); + return (coord[0]>=squareDimensions.left&&coord[0]<=squareDimensions.right&&coord[1]>=squareDimensions.top&&coord[1]<=squareDimensions.bottom); }; - CropAreaRectangle.prototype._isCoordWithinResizeCtrl=function(coord) { - var resizeIconsCenterCoords=this._calcRectangleCorners(); + CropAreaSquare.prototype._isCoordWithinResizeCtrl=function(coord) { + var resizeIconsCenterCoords=this._calcSquareCorners(); var res=-1; for(var i=0,len=resizeIconsCenterCoords.length;i-1) { - var s = this.getSize(); - var se = this.getSouthEastBound(); + var xMulti, yMulti; switch(this._resizeCtrlIsDragging) { case 0: // Top Left - this.setSizeByCorners({x: mouseCurX, y: mouseCurY}, {x: se.x, y: se.y}); + xMulti=-1; + yMulti=-1; cursor = 'nwse-resize'; break; case 1: // Top Right - this.setSizeByCorners({x: s.x, y: mouseCurY}, {x: mouseCurX, y: se.y}); + xMulti=1; + yMulti=-1; cursor = 'nesw-resize'; break; case 2: // Bottom Left - this.setSizeByCorners({x: mouseCurX, y: s.y}, {x: se.x, y: mouseCurY}); + xMulti=-1; + yMulti=1; cursor = 'nesw-resize'; break; case 3: // Bottom Right - this.setSizeByCorners({x: s.x, y: s.y}, {x: mouseCurX, y: mouseCurY}); + xMulti=1; + yMulti=1; cursor = 'nwse-resize'; break; } - + var iFX = (mouseCurX - this._posResizeStartX)*xMulti; + var iFY = (mouseCurY - this._posResizeStartY)*yMulti; + var iFR; + if(iFX>iFY) { + iFR = this._posResizeStartSize + iFY; + } else { + iFR = this._posResizeStartSize + iFX; + } + var wasSize=this._size; + this._size = Math.max(this._minSize, iFR); + var posModifier=(this._size-wasSize)/2; + this._x+=posModifier*xMulti; + this._y+=posModifier*yMulti; this._resizeCtrlIsHover = this._resizeCtrlIsDragging; res=true; this._events.trigger('area-resize'); @@ -338,12 +334,13 @@ crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { } } + this._dontDragOutside(); angular.element(this._ctx.canvas).css({'cursor': cursor}); return res; }; - CropAreaRectangle.prototype.processMouseDown=function(mouseDownX, mouseDownY) { + CropAreaSquare.prototype.processMouseDown=function(mouseDownX, mouseDownY) { var isWithinResizeCtrl=this._isCoordWithinResizeCtrl([mouseDownX,mouseDownY]); if (isWithinResizeCtrl>-1) { this._areaIsDragging = false; @@ -359,14 +356,13 @@ crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { this._areaIsHover = true; this._resizeCtrlIsDragging = -1; this._resizeCtrlIsHover = -1; - var center = this.getCenterPoint(); - this._posDragStartX = mouseDownX - center.x; - this._posDragStartY = mouseDownY - center.y; + this._posDragStartX = mouseDownX - this._x; + this._posDragStartY = mouseDownY - this._y; this._events.trigger('area-move-start'); } }; - CropAreaRectangle.prototype.processMouseUp=function(/*mouseUpX, mouseUpY*/) { + CropAreaSquare.prototype.processMouseUp=function(/*mouseUpX, mouseUpY*/) { if(this._areaIsDragging) { this._areaIsDragging = false; this._events.trigger('area-move-end'); @@ -383,112 +379,6 @@ crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { }; - return CropAreaRectangle; -}]); - -'use strict'; - -crop.factory('cropAreaSquare', ['cropArea', 'cropAreaRectangle', function(CropArea, CropAreaRectangle) { - var CropAreaSquare = function() { - CropAreaRectangle.apply(this, arguments); - }; - - CropAreaSquare.prototype = new CropAreaRectangle(); - - // return a type string - CropAreaSquare.prototype.getType = function() { - return 'square'; - } - - // override rectangle's mouse move method - CropAreaSquare.prototype.processMouseMove=function(mouseCurX, mouseCurY) { - var cursor='default'; - var res=false; - - this._resizeCtrlIsHover = -1; - this._areaIsHover = false; - - if (this._areaIsDragging) { - this.setCenterPoint({x: mouseCurX - this._posDragStartX, - y: mouseCurY - this._posDragStartY}); - this._areaIsHover = true; - cursor='move'; - res=true; - this._events.trigger('area-move'); - } else if (this._resizeCtrlIsDragging>-1) { - var xMulti, yMulti; - switch(this._resizeCtrlIsDragging) { - case 0: // Top Left - xMulti=-1; - yMulti=-1; - cursor = 'nwse-resize'; - break; - case 1: // Top Right - xMulti=1; - yMulti=-1; - cursor = 'nesw-resize'; - break; - case 2: // Bottom Left - xMulti=-1; - yMulti=1; - cursor = 'nesw-resize'; - break; - case 3: // Bottom Right - xMulti=1; - yMulti=1; - cursor = 'nwse-resize'; - break; - } - var iFX = (mouseCurX - this._posResizeStartX)*xMulti; - var iFY = (mouseCurY - this._posResizeStartY)*yMulti; - var iFR; - if(iFX>iFY) { - iFR = this._posResizeStartSize.w + iFY; - } else { - iFR = this._posResizeStartSize.h + iFX; - } - var prevCenter = this.getCenterPoint(); - - this.setSize(Math.max(this._minSize.w, iFR)); - - //recenter - this.setCenterPoint(prevCenter); - - this._resizeCtrlIsHover = this._resizeCtrlIsDragging; - res=true; - this._events.trigger('area-resize'); - } else { - var hoveredResizeBox=this._isCoordWithinResizeCtrl([mouseCurX,mouseCurY]); - if (hoveredResizeBox>-1) { - switch(hoveredResizeBox) { - case 0: - cursor = 'nwse-resize'; - break; - case 1: - cursor = 'nesw-resize'; - break; - case 2: - cursor = 'nesw-resize'; - break; - case 3: - cursor = 'nwse-resize'; - break; - } - this._areaIsHover = false; - this._resizeCtrlIsHover = hoveredResizeBox; - res=true; - } else if(this._isCoordWithinArea([mouseCurX,mouseCurY])) { - cursor = 'move'; - this._areaIsHover = true; - res=true; - } - } - - angular.element(this._ctx.canvas).css({'cursor': cursor}); - - return res; - }; - return CropAreaSquare; }]); @@ -499,13 +389,14 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { this._ctx=ctx; this._events=events; - this._aspectRatio=null; - this._minSize={x:0, y: 0, w:80, h:80}; + this._minSize=80; this._cropCanvas=new CropCanvas(ctx); this._image=new Image(); - this._size = {x: 0, y: 0, w:200, h:200}; + this._x = 0; + this._y = 0; + this._size = 200; }; /* GETTERS/SETTERS */ @@ -517,170 +408,56 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { this._image = image; }; - CropArea.prototype.getSize = function () { - return this._size; - }; - - CropArea.prototype.setSize = function (size) { - - size = this._processSize(size); - this._size = this._preventBoundaryCollision(size); + CropArea.prototype.getX = function () { + return this._x; }; - - CropArea.prototype.setSizeByCorners = function (northWestCorner, southEastCorner) { - - var size = {x: northWestCorner.x, - y: northWestCorner.y, - w: southEastCorner.x - northWestCorner.x, - h: southEastCorner.y - northWestCorner.y}; - this.setSize(size); + CropArea.prototype.setX = function (x) { + this._x = x; + this._dontDragOutside(); }; - CropArea.prototype.getSouthEastBound = function () { - return this._southEastBound(this.getSize()); + CropArea.prototype.getY = function () { + return this._y; }; - - CropArea.prototype.getMinSize = function () { - return this._minSize; + CropArea.prototype.setY = function (y) { + this._y = y; + this._dontDragOutside(); }; - CropArea.prototype.getCenterPoint = function () { - var s = this.getSize(); - return {x: s.x + (s.w / 2), - y: s.y + (s.h / 2) }; + CropArea.prototype.getSize = function () { + return this._size; }; - - CropArea.prototype.setCenterPoint = function (point) { - var s = this.getSize(); - this.setSize({x: point.x - s.w / 2, y: point.y - s.h / 2, w: s.w, h: s.h}); + CropArea.prototype.setSize = function (size) { + this._size = Math.max(this._minSize, size); + this._dontDragOutside(); }; - CropArea.prototype.setAspectRatio = function (ratio) { - this._aspectRatio = ratio; - this._minSize = this._processSize(this._minSize); - this.setSize(this._minSize); + CropArea.prototype.getMinSize = function () { + return this._minSize; }; - CropArea.prototype.setMinSize = function (size) { - this._minSize = this._processSize(size); - this.setSize(this._minSize); - }; - - - // return a type string - CropArea.prototype.getType = function() { - //default to circle - return 'circle'; + this._minSize = size; + this._size = Math.max(this._minSize, this._size); + this._dontDragOutside(); }; /* FUNCTIONS */ - CropArea.prototype._preventBoundaryCollision=function(size) { - var canvasH=this._ctx.canvas.height, - canvasW=this._ctx.canvas.width; - - - var nw = {x: size.x, y: size.y}; - var se = this._southEastBound(size); - - // check northwest corner - if(nw.x<0) { nw.x=0; } - if(nw.y<0) { nw.y=0; } - - // check southeast corner - if(se.x>canvasW) { se.x = canvasW } - if(se.y>canvasH) { se.y = canvasH } - - var newSize = {x: nw.x, - y: nw.y, - w: se.x - nw.x, - h: se.y - nw.y}; - - //check size (if < min, adjust nw corner) - if (newSize.w < this._minSize.w) { - newSize.w = this._minSize.w; - se = this._southEastBound(newSize); - //adjust se corner, if it's out of bounds - if(se.x>canvasW) - { - se.x = canvasW; - //adjust nw corner according to min width - nw.x = Math.max(se.x - canvasW, se.x - this._minSize.w); - newSize = {x: nw.x, - y: nw.y, - w: se.x - nw.x, - h: se.y - nw.y}; - } - } - - if (newSize.h < this._minSize.h) { - newSize.h = this._minSize.h; - se = this._southEastBound(newSize); - - if(se.y>canvasH) - { - se.y = canvasH; - //adjust nw corner according to min height - nw.y = Math.max(se.y - canvasH, se.y - this._minSize.h); - newSize = {x: nw.x, - y: nw.y, - w: se.x - nw.x, - h: se.y - nw.y}; - } - } - - //finally, enforce 1:1 aspect ratio for square-like selections - var areaType = this.getType(); - if (areaType === "circle" || areaType === "square") - { - newSize = {x: newSize.x, - y: newSize.y, - w: Math.min(newSize.w, newSize.h), - h: Math.min(newSize.w, newSize.h)}; - } - //allow to set a user-defined aspect ratio for rectangles - else if (areaType === "rectangle" && this._aspectRatio !== null) { - var canvasH = this._ctx.canvas.height; - var heightWithRatio = newSize.w / this._aspectRatio; - - if (heightWithRatio < canvasH && se.y < canvasH) { - newSize.h = newSize.w / this._aspectRatio; - } else { - newSize.w = newSize.h * this._aspectRatio; - } - } - - return newSize; + CropArea.prototype._dontDragOutside=function() { + var h=this._ctx.canvas.height, + w=this._ctx.canvas.width; + if(this._size>w) { this._size=w; } + if(this._size>h) { this._size=h; } + if(this._xw-this._size/2) { this._x=w-this._size/2; } + if(this._yh-this._size/2) { this._y=h-this._size/2; } }; CropArea.prototype._drawArea=function() {}; - CropArea.prototype._processSize=function(size) - { - // make this polymorphic to accept a single floating point number - // for square-like sizes (including circle) - if (typeof size == "number") - { - size = { - w: size, - h: size - }; - } - - return { - x: size.x || this._minSize.x, - y: size.y || this._minSize.y, - w: size.w || this._minSize.w, - h: size.h || this._minSize.h - }; - }; - - CropArea.prototype._southEastBound=function(size) - { - return {x: size.x + size.w, y: size.y + size.h}; - }; CropArea.prototype.draw=function() { // draw crop area - this._cropCanvas.drawCropArea(this._image,this.getCenterPoint(),this._size,this._drawArea); + this._cropCanvas.drawCropArea(this._image,[this._x,this._y],this._size,this._drawArea); }; CropArea.prototype.processMouseMove=function() {}; @@ -793,27 +570,27 @@ crop.factory('cropCanvas', [function() { /* Crop Area */ - this.drawCropArea=function(image, center, size, fnDrawClipPath) { + this.drawCropArea=function(image, centerCoords, size, fnDrawClipPath) { var xRatio=image.width/ctx.canvas.width, yRatio=image.height/ctx.canvas.height, - xLeft=size.x, - yTop=size.y; + xLeft=centerCoords[0]-size/2, + yTop=centerCoords[1]-size/2; ctx.save(); ctx.strokeStyle = colors.areaOutline; ctx.lineWidth = 2; ctx.beginPath(); - fnDrawClipPath(ctx, center, size); + fnDrawClipPath(ctx, centerCoords, size); ctx.stroke(); ctx.clip(); // draw part of original image - if (size.w > 0 && size.w > 0) { - ctx.drawImage(image, xLeft*xRatio, yTop*yRatio, size.w*xRatio, size.h*yRatio, xLeft, yTop, size.w, size.h); + if (size > 0) { + ctx.drawImage(image, xLeft*xRatio, yTop*yRatio, size*xRatio, size*yRatio, xLeft, yTop, size, size); } ctx.beginPath(); - fnDrawClipPath(ctx, center, size); + fnDrawClipPath(ctx, centerCoords, size); ctx.stroke(); ctx.clip(); @@ -825,7 +602,7 @@ crop.factory('cropCanvas', [function() { 'use strict'; -crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'cropAreaRectangle', function($document, CropAreaCircle, CropAreaSquare, CropAreaRectangle) { +crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', function($document, CropAreaCircle, CropAreaSquare) { /* STATIC FUNCTIONS */ // Get Element's Offset @@ -853,15 +630,14 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop // Object Pointers var ctx=null, image=null, - theArea=null, - self=this; + theArea=null; // Dimensions var minCanvasDims=[100,100], maxCanvasDims=[300,300]; // Result Image size - var resImgSize={w: 200, h: 200}; + var resImgSize=200; /* PRIVATE FUNCTIONS */ @@ -911,25 +687,9 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop } elCanvas.prop('width',canvasDims[0]).prop('height',canvasDims[1]).css({'margin-left': -canvasDims[0]/2+'px', 'margin-top': -canvasDims[1]/2+'px'}); - var cw = ctx.canvas.width; - var ch = ctx.canvas.height; - - - var areaType = self.getAreaType(); - // enforce 1:1 aspect ratio for square-like selections - if ((areaType === 'circle') || (areaType === 'square')) { - cw = ch = Math.min(cw, ch); - } - //allow to set a user-defined aspect ratio for rectangles - else if (areaType === "rectangle" && theArea._aspectRatio !== null) { - ch = cw / theArea._aspectRatio; - } - - theArea.setSize({ w: Math.min(200, cw / 2), - h: Math.min(200, ch / 2)}); - //TODO: set top left corner point - theArea.setCenterPoint({x: ctx.canvas.width/2, y: ctx.canvas.height/2}); - + theArea.setX(ctx.canvas.width/2); + theArea.setY(ctx.canvas.height/2); + theArea.setSize(Math.min(200, ctx.canvas.width/2, ctx.canvas.height/2)); } else { elCanvas.prop('width',0).prop('height',0).css({'margin-top': 0}); } @@ -988,22 +748,16 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop }; - this.getResultImage=function() { + this.getResultImageDataURI=function() { var temp_ctx, temp_canvas; temp_canvas = angular.element('')[0]; temp_ctx = temp_canvas.getContext('2d'); - var ris = this.getResultImageSize(); - temp_canvas.width = ris.w; - temp_canvas.height = ris.h; - var center = theArea.getCenterPoint(); - var retObj = {dataURI: null, - imageData: null}; + temp_canvas.width = resImgSize; + temp_canvas.height = resImgSize; if(image!==null){ - temp_ctx.drawImage(image, (center.x-theArea.getSize().w/2)*(image.width/ctx.canvas.width), (center.y-theArea.getSize().h/2)*(image.height/ctx.canvas.height), theArea.getSize().w*(image.width/ctx.canvas.width), theArea.getSize().h*(image.height/ctx.canvas.height), 0, 0, ris.w, ris.h); - retObj.dataURI = temp_canvas.toDataURL(); - retObj.imageData = temp_canvas.getContext("2d").getImageData(0, 0, temp_canvas.width, temp_canvas.height); + temp_ctx.drawImage(image, (theArea.getX()-theArea.getSize()/2)*(image.width/ctx.canvas.width), (theArea.getY()-theArea.getSize()/2)*(image.height/ctx.canvas.height), theArea.getSize()*(image.width/ctx.canvas.width), theArea.getSize()*(image.height/ctx.canvas.height), 0, 0, resImgSize, resImgSize); } - return retObj; + return temp_canvas.toDataURL(); }; this.setNewImageSource=function(imageSource) { @@ -1057,12 +811,9 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop ratioNewCurHeight=ctx.canvas.height/curHeight, ratioMin=Math.min(ratioNewCurWidth, ratioNewCurHeight); - //TODO: use top left corner point - theArea.setSize({w: theArea.getSize().w * ratioMin, - h: theArea.getSize().h * ratioMin}); - var center = theArea.getCenterPoint(); - theArea.setCenterPoint({x: center.x*ratioNewCurWidth, y: center.y*ratioNewCurHeight}); - + theArea.setX(theArea.getX()*ratioNewCurWidth); + theArea.setY(theArea.getY()*ratioNewCurHeight); + theArea.setSize(theArea.getSize()*ratioMin); } else { elCanvas.prop('width',0).prop('height',0).css({'margin-top': 0}); } @@ -1071,94 +822,36 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop }; - this.setAspectRatio=function(ratio) { - if (angular.isUndefined(ratio)) - { - return; - } - ratio=parseFloat(ratio); - if(!isNaN(ratio)) { - theArea.setAspectRatio(ratio); - drawScene(); - } - }; - this.setAreaMinSize=function(size) { - if (angular.isUndefined(size)) - { - return; - } - size={w: parseInt(size.w,10), - h: parseInt(size.h,10)}; - if(!isNaN(size.w) && !isNaN(size.h)) { + size=parseInt(size,10); + if(!isNaN(size)) { theArea.setMinSize(size); drawScene(); } }; - this.getResultImageSize=function() { - if (resImgSize == "selection") - { - return theArea.getSize(); - } - - return resImgSize; - }; this.setResultImageSize=function(size) { - if (angular.isUndefined(size)) - { - return; - } - - //allow setting of size to "selection" for mirroring selection's dimensions - if (angular.isString(size) && isNaN(parseFloat(size))) - { - resImgSize = size; - return; - } - - //allow scalar values for square-like selection shapes - var parsedSize = parseInt(size, 10); - if (!isNaN(parsedSize)) - { - size = {w: parsedSize, - h: parsedSize}; - } else { - size = {w: parseInt(size.w, 10), - h: parseInt(size.h, 10)}; - } - - if(!isNaN(size.w) && !isNaN(size.h)) { + size=parseInt(size,10); + if(!isNaN(size)) { resImgSize=size; - drawScene(); } }; - // returns a string of the selection area's type - this.getAreaType=function() { - return theArea.getType(); - }; - this.setAreaType=function(type) { - var center = theArea.getCenterPoint(); var curSize=theArea.getSize(), curMinSize=theArea.getMinSize(), - curX= center.x, - curY= center.y; + curX=theArea.getX(), + curY=theArea.getY(); var AreaClass=CropAreaCircle; if(type==='square') { AreaClass=CropAreaSquare; - } else if (type==='rectangle') - { - AreaClass=CropAreaRectangle; } theArea = new AreaClass(ctx, events); theArea.setMinSize(curMinSize); theArea.setSize(curSize); - - //TODO: use top left point - theArea.setCenterPoint({x: curX, y: curY}); + theArea.setX(curX); + theArea.setY(curY); // resetCropHost(); if(image!==null) { @@ -1202,6 +895,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop }]); + 'use strict'; crop.factory('cropPubSub', [function() { @@ -1226,7 +920,6 @@ crop.factory('cropPubSub', [function() { }; }; }]); -'use strict'; crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeout, CropHost, CropPubSub) { return { @@ -1234,13 +927,11 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo scope: { image: '=', resultImage: '=', - resultImageData: '=', changeOnFly: '=', areaType: '@', - aspectRatio: '=', areaMinSize: '=', - resultImageSize: '@', + resultImageSize: '=', onChange: '&', onLoadBegin: '&', @@ -1262,18 +953,13 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo var storedResultImage; var updateResultImage=function(scope) { - var resultImageObj=cropHost.getResultImage(); - var resultImage = resultImageObj.dataURI; + var resultImage=cropHost.getResultImageDataURI(); if(storedResultImage!==resultImage) { storedResultImage=resultImage; if(angular.isDefined(scope.resultImage)) { scope.resultImage=resultImage; } - if(angular.isDefined(scope.resultImageData)) { - scope.resultImageData=resultImageObj.imageData; - } scope.onChange({$dataURI: scope.resultImage}); - scope.onChange({$imageData: scope.resultImageData}); } }; @@ -1316,10 +1002,6 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo cropHost.setAreaType(scope.areaType); updateResultImage(scope); }); - scope.$watch('aspectRatio',function(){ - cropHost.setAspectRatio(scope.aspectRatio); - updateResultImage(scope); - }); scope.$watch('areaMinSize',function(){ cropHost.setAreaMinSize(scope.areaMinSize); updateResultImage(scope); @@ -1348,5 +1030,4 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo } }; }]); - }()); \ No newline at end of file diff --git a/source/js/classes/crop-area-rectangle.js b/source/js/classes/crop-area-rectangle.js index f130e6a1..97624f05 100644 --- a/source/js/classes/crop-area-rectangle.js +++ b/source/js/classes/crop-area-rectangle.js @@ -30,7 +30,7 @@ crop.factory('cropAreaRectangle', ['cropArea', function(CropArea) { // return a type string CropAreaRectangle.prototype.getType = function() { return 'rectangle'; - }; + } CropAreaRectangle.prototype._calcRectangleCorners=function() { var size = this.getSize(); diff --git a/source/js/classes/crop-area.js b/source/js/classes/crop-area.js index a2ef662b..bbf16084 100644 --- a/source/js/classes/crop-area.js +++ b/source/js/classes/crop-area.js @@ -5,7 +5,6 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { this._ctx=ctx; this._events=events; - this._aspectRatio=null; this._minSize={x:0, y: 0, w:80, h:80}; this._cropCanvas=new CropCanvas(ctx); @@ -61,12 +60,6 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { this.setSize({x: point.x - s.w / 2, y: point.y - s.h / 2, w: s.w, h: s.h}); }; - CropArea.prototype.setAspectRatio = function (ratio) { - this._aspectRatio = ratio; - this._minSize = this._processSize(this._minSize); - this.setSize(this._minSize); - }; - CropArea.prototype.setMinSize = function (size) { this._minSize = this._processSize(size); this.setSize(this._minSize); @@ -77,7 +70,7 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { CropArea.prototype.getType = function() { //default to circle return 'circle'; - }; + } /* FUNCTIONS */ CropArea.prototype._preventBoundaryCollision=function(size) { @@ -96,6 +89,7 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { if(se.x>canvasW) { se.x = canvasW } if(se.y>canvasH) { se.y = canvasH } + var newSize = {x: nw.x, y: nw.y, w: se.x - nw.x, @@ -134,27 +128,14 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { } } - //finally, enforce 1:1 aspect ratio for square-like selections - var areaType = this.getType(); - if (areaType === "circle" || areaType === "square") + //finally, enforce 1:1 aspect ratio for sqaure-like selections + if (this.getType() === "circle" || this.getType() === "square") { newSize = {x: newSize.x, y: newSize.y, w: Math.min(newSize.w, newSize.h), h: Math.min(newSize.w, newSize.h)}; } - //allow to set a user-defined aspect ratio for rectangles - else if (areaType === "rectangle" && this._aspectRatio !== null) { - var canvasH = this._ctx.canvas.height; - var heightWithRatio = newSize.w / this._aspectRatio; - - if (heightWithRatio < canvasH && se.y < canvasH) { - newSize.h = newSize.w / this._aspectRatio; - } else { - newSize.w = newSize.h * this._aspectRatio; - } - } - return newSize; }; @@ -166,24 +147,19 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) { // for square-like sizes (including circle) if (typeof size == "number") { - size = { - w: size, - h: size - }; + size = {w: size, h: size}; } - return { - x: size.x || this._minSize.x, - y: size.y || this._minSize.y, - w: size.w || this._minSize.w, - h: size.h || this._minSize.h - }; - }; + return {x: size.x || this._minSize.x, + y: size.y || this._minSize.y, + w: size.w || this._minSize.w, + h: size.h || this._minSize.h}; + } CropArea.prototype._southEastBound=function(size) { return {x: size.x + size.w, y: size.y + size.h}; - }; + } CropArea.prototype.draw=function() { // draw crop area this._cropCanvas.drawCropArea(this._image,this.getCenterPoint(),this._size,this._drawArea); diff --git a/source/js/classes/crop-host.js b/source/js/classes/crop-host.js index 0f17caa1..b3e20f02 100644 --- a/source/js/classes/crop-host.js +++ b/source/js/classes/crop-host.js @@ -95,10 +95,6 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop if ((areaType === 'circle') || (areaType === 'square')) { cw = ch = Math.min(cw, ch); } - //allow to set a user-defined aspect ratio for rectangles - else if (areaType === "rectangle" && theArea._aspectRatio !== null) { - ch = cw / theArea._aspectRatio; - } theArea.setSize({ w: Math.min(200, cw / 2), h: Math.min(200, ch / 2)}); @@ -242,18 +238,6 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop }; - this.setAspectRatio=function(ratio) { - if (angular.isUndefined(ratio)) - { - return; - } - ratio=parseFloat(ratio); - if(!isNaN(ratio)) { - theArea.setAspectRatio(ratio); - drawScene(); - } - }; - this.setAreaMinSize=function(size) { if (angular.isUndefined(size)) { @@ -282,23 +266,22 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop } //allow setting of size to "selection" for mirroring selection's dimensions - if (angular.isString(size) && isNaN(parseFloat(size))) + if (angular.isString(size)) { resImgSize = size; return; } //allow scalar values for square-like selection shapes - var parsedSize = parseInt(size, 10); - if (!isNaN(parsedSize)) + if (angular.isNumber(size)) { - size = {w: parsedSize, - h: parsedSize}; - } else { - size = {w: parseInt(size.w, 10), - h: parseInt(size.h, 10)}; + size = parseInt(size, 10); + size = {w: size, + h: size}; } + size={w: parseInt(size.w, 10), + h: parseInt(size.h, 10)}; if(!isNaN(size.w) && !isNaN(size.h)) { resImgSize=size; drawScene(); @@ -308,7 +291,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop // returns a string of the selection area's type this.getAreaType=function() { return theArea.getType(); - }; + } this.setAreaType=function(type) { var center = theArea.getCenterPoint(); diff --git a/source/js/ng-img-crop.js b/source/js/ng-img-crop.js index efd3e7a9..ff7f41eb 100644 --- a/source/js/ng-img-crop.js +++ b/source/js/ng-img-crop.js @@ -9,9 +9,8 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo changeOnFly: '=', areaType: '@', - aspectRatio: '=', areaMinSize: '=', - resultImageSize: '@', + resultImageSize: '=', onChange: '&', onLoadBegin: '&', @@ -82,10 +81,6 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo cropHost.setAreaType(scope.areaType); updateResultImage(scope); }); - scope.$watch('aspectRatio',function(){ - cropHost.setAspectRatio(scope.aspectRatio); - updateResultImage(scope); - }); scope.$watch('areaMinSize',function(){ cropHost.setAreaMinSize(scope.areaMinSize); updateResultImage(scope);