emptyText : 'Click to upload image',
scale : 0,
+ baseScale : 1,
rotate : 0,
dragable : false,
mouseX : 0,
reset : function()
{
this.scale = 0;
+ this.baseScale = 1;
this.rotate = 0;
this.dragable = false;
this.mouseX = 0;
this.fitThumbBox();
- this.image.setWidth(this.image.OriginWidth * Math.pow(1.1, this.scale));
- this.image.setHeight(this.image.OriginHeight * Math.pow(1.1, this.scale));
+ this.image.setWidth(this.image.OriginWidth * this.getScaleLevel(false));
+ this.image.setHeight(this.image.OriginHeight * this.getScaleLevel(false));
this.footerSection.show();
{
e.stopEvent();
- var scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
+ this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
- var width = this.image.OriginWidth * Math.pow(1.1, scale);
- var height = this.image.OriginHeight * Math.pow(1.1, scale);
+ var width = this.image.OriginWidth * this.getScaleLevel(false);
+ var height = this.image.OriginHeight * this.getScaleLevel(false);
if(
e.getWheelDelta() == -1 &&
(
- width < this.thumb.getWidth() ||
- height < this.thumb.getHeight()
+ (
+ (this.rotate == 0 || this.rotate == 180) && (width < this.thumb.getWidth() || height < this.thumb.getHeight())
+ )
+ ||
+ (
+ (this.rotate == 90 || this.rotate == 270) && (height < this.thumb.getWidth() || width < this.thumb.getHeight())
+ )
)
){
+ this.scale = (e.getWheelDelta() == 1) ? (this.scale - 1) : (this.scale + 1);
return;
}
- this.scale = scale;
-
this.image.setWidth(width);
this.image.setHeight(height);
{
e.stopEvent();
- this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+ if(
+ (
+ (this.rotate == 0 || this.rotate == 180)
+ &&
+ (this.image.getHeight() < this.thumb.getWidth() || this.image.getWidth() < this.thumb.getHeight())
+ )
+ ||
+ (
+ (this.rotate == 90 || this.rotate == 270)
+ &&
+ (this.image.getWidth() < this.thumb.getWidth() || this.image.getHeight() < this.thumb.getHeight())
+ )
+
+ ){
+ return;
+ }
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
this.imageCanvas.setStyle({
'-ms-transform' : 'rotate(' + this.rotate + 'deg)',
'-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
'transform' : 'rotate(' + this.rotate + 'deg)'
});
-
+
this.setCanvasPosition();
+
},
onRotateRight : function(e)
{
e.stopEvent();
- this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+ if(
+ (
+ (this.rotate == 0 || this.rotate == 180)
+ &&
+ (this.image.getHeight() < this.thumb.getWidth() || this.image.getWidth() < this.thumb.getHeight())
+ )
+ ||
+ (
+ (this.rotate == 90 || this.rotate == 270)
+ &&
+ (this.image.getWidth() < this.thumb.getWidth() || this.image.getHeight() < this.thumb.getHeight())
+ )
+
+ ){
+ return false;
+ }
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
this.imageCanvas.setStyle({
'-ms-transform' : 'rotate(' + this.rotate + 'deg)',
'-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
'transform' : 'rotate(' + this.rotate + 'deg)'
});
-
+
this.setCanvasPosition();
+
+
},
crop : function()
var centerX = this.minWidth / 2;
var centerY = this.minHeight / 2;
- var cropWidth = this.thumb.getWidth() * Math.pow(1.1, this.scale * -1);
- var cropHeight = this.thumb.getHeight() * Math.pow(1.1, this.scale * -1);
+ var cropWidth = this.thumb.getWidth() * this.getScaleLevel(true);
+ var cropHeight = this.thumb.getHeight() * this.getScaleLevel(true);
var transform = new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);
var thumbX = this.thumb.getLeft(true) + transform.m41;
var thumbY = this.thumb.getTop(true) + transform.m42;
- var x = (thumbX - this.imageCanvas.getLeft(true)) * Math.pow(1.1, this.scale * -1);
- var y = (thumbY - this.imageCanvas.getTop(true)) * Math.pow(1.1, this.scale * -1);
+ var x = (thumbX - this.imageCanvas.getLeft(true)) * this.getScaleLevel(true);
+ var y = (thumbY - this.imageCanvas.getTop(true)) * this.getScaleLevel(true);
if(this.rotate == 90){
x = thumbY + (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getTop(true);
y = this.image.getHeight() - this.thumb.getWidth() - (thumbX - (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getLeft(true));
- x = x * Math.pow(1.1, this.scale * -1);
- y = y * Math.pow(1.1, this.scale * -1);
+ x = x * this.getScaleLevel(true);
+ y = y * this.getScaleLevel(true);
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
- cropWidth = this.thumb.getHeight() * Math.pow(1.1, this.scale * -1);
- cropHeight = this.thumb.getWidth() * Math.pow(1.1, this.scale * -1);
+ cropWidth = this.thumb.getHeight() * this.getScaleLevel(true);
+ cropHeight = this.thumb.getWidth() * this.getScaleLevel(true);
canvas.width = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
canvas.height = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
x = thumbY + (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getTop(true);
y = thumbX - (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getLeft(true);
- x = (this.image.getWidth() - this.thumb.getHeight() - x) * Math.pow(1.1, this.scale * -1);
- y = y * Math.pow(1.1, this.scale * -1);
+ x = (this.image.getWidth() - this.thumb.getHeight() - x) * this.getScaleLevel(true);
+ y = y * this.getScaleLevel(true);
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
- cropWidth = this.thumb.getHeight() * Math.pow(1.1, this.scale * -1);
- cropHeight = this.thumb.getWidth() * Math.pow(1.1, this.scale * -1);
+ cropWidth = this.thumb.getHeight() * this.getScaleLevel(true);
+ cropHeight = this.thumb.getWidth() * this.getScaleLevel(true);
canvas.width = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
canvas.height = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
}
if(this.rotate == 180){
- x = this.image.OriginWidth - this.thumb.getWidth() * Math.pow(1.1, this.scale * -1) - x;
- y = this.image.OriginHeight - this.thumb.getHeight() * Math.pow(1.1, this.scale * -1) - y;
+ x = this.image.OriginWidth - this.thumb.getWidth() * this.getScaleLevel(true) - x;
+ y = this.image.OriginHeight - this.thumb.getHeight() * this.getScaleLevel(true) - y;
}
x = x < 0 ? 0 : x;
fitThumbBox : function()
{
- var i = 0;
- var width = this.image.OriginWidth;
- var height = this.image.OriginHeight;
+ var width = this.thumb.getWidth();
+ var height = this.image.OriginHeight * width / this.image.OriginWidth;
+
+ this.baseScale = width / this.image.OriginWidth;
if(this.image.OriginWidth > this.image.OriginHeight){
+ height = this.thumb.getHeight();
+ width = this.image.OriginWidth * height / this.image.OriginHeight;
- if(this.image.OriginHeight > this.thumb.getHeight()){
- while (height > this.thumb.getHeight()){
- i = i - 1;
- height = this.image.OriginHeight * Math.pow(1.1, i);
- }
-
- this.scale = (height < this.thumb.getHeight()) ? (i + 1) : i;
-
- return;
- }
-
- while (height < this.thumb.getHeight()){
- i = i + 1;
- height = this.image.OriginWidth * Math.pow(1.1, i);
- }
-
- this.scale = (height > this.thumb.getHeight()) ? (i - 1) : i;
-
- return;
+ this.baseScale = height / this.image.OriginHeight;
}
- if(this.image.OriginWidth > this.thumb.getWidth()){
- while (width > this.thumb.getWidth()){
- i = i - 1;
- width = this.image.OriginWidth * Math.pow(1.1, i);
- }
-
- this.scale = (width < this.thumb.getWidth()) ? (i + 1) : i;
-
- return;
- }
-
- while (width < this.thumb.getWidth()){
- i = i + 1;
- width = this.image.OriginWidth * Math.pow(1.1, i);
- }
-
- this.scale = (width > this.thumb.getWidth()) ? (i - 1) : i;
-
return;
+ },
+
+ getScaleLevel : function(reverse)
+ {
+ if(reverse){
+ return Math.pow(1.1, this.scale * -1) / this.baseScale;
+ }
+
+ return this.baseScale * Math.pow(1.1, this.scale);
}
});
this.weight=A;this.el.select('.alert',true).first().addClass('alert-'+this.weight);},setIcon:function(A){if(this.faicon){this.el.select('.roo-alert-icon',true).first().removeClass(['fa','fa-'+this.faicon]);}
this.faicon=Athis.el.select('.roo-alert-icon',true).first().addClass(['fa','fa-'+this.faicon]);},hide:function(){this.el.hide();},show:function(){this.el.show();}});
//Roo/bootstrap/UploadCropbox.js
-Roo.bootstrap.UploadCropbox=function(A){Roo.bootstrap.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeSelectFile":true,"initial":true,"crop":true});};Roo.extend(Roo.bootstrap.UploadCropbox,Roo.bootstrap.Component,{emptyText:'Click to upload image',scale:0,rotate:0,dragable:false,mouseX:0,mouseY:0,cropImageData:false,cropType:'image/png',minWidth:300,minHeight:300,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'div',cls:'roo-upload-cropbox-image-section',cn:[{tag:'div',cls:'roo-upload-cropbox-canvas',cn:[{tag:'img',cls:'roo-upload-cropbox-image'}]},{tag:'div',cls:'roo-upload-cropbox-thumb'}]},{tag:'div',cls:'roo-upload-cropbox-footer-section',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-left',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-picture',html:'<i class="fa fa-picture-o"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-right',html:'<i class="fa fa-repeat"></i>'}]}]}}]};return A;},initEvents:function(){this.imageSection=this.el.select('.roo-upload-cropbox-image-section',true).first();this.imageSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.imageCanvas=this.el.select('.roo-upload-cropbox-canvas',true).first();this.imageCanvas.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.image=this.el.select('.roo-upload-cropbox-image',true).first();this.image.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumb=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumb.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerSection=this.el.select('.roo-upload-cropbox-footer-section',true).first();this.footerSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerSection.hide();this.rotateLeft=this.el.select('.roo-upload-cropbox-rotate-left',true).first();this.rotateLeft.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.pictureBtn=this.el.select('.roo-upload-cropbox-picture',true).first();this.pictureBtn.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.rotateRight=this.el.select('.roo-upload-cropbox-rotate-right',true).first();this.rotateRight.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.calcThumbBoxSize();this.bind();this.fireEvent('initial',this);},bind:function(){this.image.on('load',this.onLoadCanvasImage,this);if(!this.imageSectionHasOnClickEvent){this.imageSection.on('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=true;}
+Roo.bootstrap.UploadCropbox=function(A){Roo.bootstrap.UploadCropbox.superclass.constructor.call(this,A);this.addEvents({"beforeSelectFile":true,"initial":true,"crop":true});};Roo.extend(Roo.bootstrap.UploadCropbox,Roo.bootstrap.Component,{emptyText:'Click to upload image',scale:0,baseScale:1,rotate:0,dragable:false,mouseX:0,mouseY:0,cropImageData:false,cropType:'image/png',minWidth:300,minHeight:300,getAutoCreate:function(){var A={tag:'div',cls:'roo-upload-cropbox',cn:[{tag:'div',cls:'roo-upload-cropbox-image-section',cn:[{tag:'div',cls:'roo-upload-cropbox-canvas',cn:[{tag:'img',cls:'roo-upload-cropbox-image'}]},{tag:'div',cls:'roo-upload-cropbox-thumb'}]},{tag:'div',cls:'roo-upload-cropbox-footer-section',cn:{tag:'div',cls:'btn-group btn-group-justified roo-upload-cropbox-btn-group',cn:[{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-left',html:'<i class="fa fa-undo"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-picture',html:'<i class="fa fa-picture-o"></i>'}]},{tag:'div',cls:'btn-group',cn:[{tag:'button',cls:'btn btn-default roo-upload-cropbox-rotate-right',html:'<i class="fa fa-repeat"></i>'}]}]}}]};return A;},initEvents:function(){this.imageSection=this.el.select('.roo-upload-cropbox-image-section',true).first();this.imageSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.imageCanvas=this.el.select('.roo-upload-cropbox-canvas',true).first();this.imageCanvas.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.image=this.el.select('.roo-upload-cropbox-image',true).first();this.image.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.thumb=this.el.select('.roo-upload-cropbox-thumb',true).first();this.thumb.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerSection=this.el.select('.roo-upload-cropbox-footer-section',true).first();this.footerSection.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.footerSection.hide();this.rotateLeft=this.el.select('.roo-upload-cropbox-rotate-left',true).first();this.rotateLeft.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.pictureBtn=this.el.select('.roo-upload-cropbox-picture',true).first();this.pictureBtn.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.rotateRight=this.el.select('.roo-upload-cropbox-rotate-right',true).first();this.rotateRight.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay='block';this.calcThumbBoxSize();this.bind();this.fireEvent('initial',this);},bind:function(){this.image.on('load',this.onLoadCanvasImage,this);if(!this.imageSectionHasOnClickEvent){this.imageSection.on('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=true;}
this.imageSection.on('mousedown',this.onMouseDown,this);this.imageSection.on('mousemove',this.onMouseMove,this);var A=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.imageSection.on(A,this.onMouseWheel,this);Roo.get(document).on('mouseup',this.onMouseUp,this);this.pictureBtn.on('click',this.beforeSelectFile,this);this.rotateLeft.on('click',this.onRotateLeft,this);this.rotateRight.on('click',this.onRotateRight,this);},unbind:function(){this.image.un('load',this.onLoadCanvasImage,this);if(this.imageSectionHasOnClickEvent){this.imageSection.un('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=false;}
-this.imageSection.un('mousedown',this.onMouseDown,this);this.imageSection.un('mousemove',this.onMouseMove,this);var A=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.imageSection.un(A,this.onMouseWheel,this);Roo.get(document).un('mouseup',this.onMouseUp,this);this.pictureBtn.un('click',this.beforeSelectFile,this);this.rotateLeft.un('click',this.onRotateLeft,this);this.rotateRight.un('click',this.onRotateRight,this);},reset:function(){this.scale=0;this.rotate=0;this.dragable=false;this.mouseX=0;this.mouseY=0;this.cropImageData=false;this.imageCanvas.dom.removeAttribute('style');this.image.dom.removeAttribute('style');this.image.attr('src','');if(!this.imageSectionHasOnClickEvent){this.imageSection.on('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=true;}},beforeSelectFile:function(e){e.preventDefault();this.fireEvent('beforeSelectFile',this);},loadCanvasImage:function(A){this.reset();this.image.attr('src',A);},onLoadCanvasImage:function(A){if(this.imageSectionHasOnClickEvent){this.imageSection.un('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=false;}
-this.image.OriginWidth=this.image.getWidth();this.image.OriginHeight=this.image.getHeight();this.fitThumbBox();this.image.setWidth(this.image.OriginWidth*Math.pow(1.1,this.scale));this.image.setHeight(this.image.OriginHeight*Math.pow(1.1,this.scale));this.footerSection.show();this.setCanvasPosition();},setCanvasPosition:function(){var pw=(this.imageSection.getWidth(true)-this.image.getWidth())/2;var ph=(this.imageSection.getHeight(true)-this.image.getHeight())/2;this.imageCanvas.setLeft(pw);this.imageCanvas.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.mouseX=e.getPageX();this.mouseY=e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.dragable){return;}var A=new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);var B=this.thumb.getLeft(true)+A.m41;var C=this.thumb.getTop(true)+A.m42;var D=B+this.thumb.getWidth()-this.image.getWidth();var E=C+this.thumb.getHeight()-this.image.getHeight();if(this.rotate==90||this.rotate==270){B=this.thumb.getLeft(true)+A.m41-(this.image.getWidth()-this.image.getHeight())/2;C=this.thumb.getTop(true)+A.m42+(this.image.getWidth()-this.image.getHeight())/2;D=B+this.thumb.getWidth()-this.image.getHeight();E=C+this.thumb.getHeight()-this.image.getWidth();}var x=e.getPageX()-this.mouseX;var y=e.getPageY()-this.mouseY;var F=x+this.imageCanvas.getLeft(true);var G=y+this.imageCanvas.getTop(true);F=(B<F)?B:((D>F)?D:F);G=(C<G)?C:((E>G)?E:G);this.imageCanvas.setLeft(F);this.imageCanvas.setTop(G);this.mouseX=e.getPageX();this.mouseY=e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();var A=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);var B=this.image.OriginWidth*Math.pow(1.1,A);var C=this.image.OriginHeight*Math.pow(1.1,A);if(e.getWheelDelta()==-1&&(B<this.thumb.getWidth()||C<this.thumb.getHeight())){return;}
-this.scale=A;this.image.setWidth(B);this.image.setHeight(C);this.setCanvasPosition();},onRotateLeft:function(e){e.stopEvent();this.rotate=(this.rotate<90)?270:this.rotate-90;this.imageCanvas.setStyle({'-ms-transform':'rotate('+this.rotate+'deg)','-webkit-transform':'rotate('+this.rotate+'deg)','transform':'rotate('+this.rotate+'deg)'});this.setCanvasPosition();},onRotateRight:function(e){e.stopEvent();this.rotate=(this.rotate>180)?0:this.rotate+90;this.imageCanvas.setStyle({'-ms-transform':'rotate('+this.rotate+'deg)','-webkit-transform':'rotate('+this.rotate+'deg)','transform':'rotate('+this.rotate+'deg)'});this.setCanvasPosition();},crop:function(){var A=document.createElement("canvas");var B=A.getContext("2d");A.width=this.minWidth;A.height=this.minHeight;var C=this.minWidth/2;var D=this.minHeight/2;var E=this.thumb.getWidth()*Math.pow(1.1,this.scale*-1);var F=this.thumb.getHeight()*Math.pow(1.1,this.scale*-1);var G=new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);var H=this.thumb.getLeft(true)+G.m41;var I=this.thumb.getTop(true)+G.m42;var x=(H-this.imageCanvas.getLeft(true))*Math.pow(1.1,this.scale*-1);var y=(I-this.imageCanvas.getTop(true))*Math.pow(1.1,this.scale*-1);if(this.rotate==90){x=I+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=this.image.getHeight()-this.thumb.getWidth()-(H-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true));x=x*Math.pow(1.1,this.scale*-1);y=y*Math.pow(1.1,this.scale*-1);x=x<0?0:x;y=y<0?0:y;E=this.thumb.getHeight()*Math.pow(1.1,this.scale*-1);F=this.thumb.getWidth()*Math.pow(1.1,this.scale*-1);A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);var J=document.createElement("canvas");var K=J.getContext("2d");J.width=this.minWidth;J.height=this.minHeight;K.drawImage(A,Math.abs(this.minWidth-this.minHeight),0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);this.cropImageData=J.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==270){x=I+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=H-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true);x=(this.image.getWidth()-this.thumb.getHeight()-x)*Math.pow(1.1,this.scale*-1);y=y*Math.pow(1.1,this.scale*-1);x=x<0?0:x;y=y<0?0:y;E=this.thumb.getHeight()*Math.pow(1.1,this.scale*-1);F=this.thumb.getWidth()*Math.pow(1.1,this.scale*-1);A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);var J=document.createElement("canvas");var K=J.getContext("2d");J.width=this.minWidth;J.height=this.minHeight;K.drawImage(A,0,0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);this.cropImageData=J.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==180){x=this.image.OriginWidth-this.thumb.getWidth()*Math.pow(1.1,this.scale*-1)-x;y=this.image.OriginHeight-this.thumb.getHeight()*Math.pow(1.1,this.scale*-1)-y;}
+this.imageSection.un('mousedown',this.onMouseDown,this);this.imageSection.un('mousemove',this.onMouseMove,this);var A=(/Firefox/i.test(navigator.userAgent))?'DOMMouseScroll':'mousewheel';this.imageSection.un(A,this.onMouseWheel,this);Roo.get(document).un('mouseup',this.onMouseUp,this);this.pictureBtn.un('click',this.beforeSelectFile,this);this.rotateLeft.un('click',this.onRotateLeft,this);this.rotateRight.un('click',this.onRotateRight,this);},reset:function(){this.scale=0;this.baseScale=1;this.rotate=0;this.dragable=false;this.mouseX=0;this.mouseY=0;this.cropImageData=false;this.imageCanvas.dom.removeAttribute('style');this.image.dom.removeAttribute('style');this.image.attr('src','');if(!this.imageSectionHasOnClickEvent){this.imageSection.on('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=true;}},beforeSelectFile:function(e){e.preventDefault();this.fireEvent('beforeSelectFile',this);},loadCanvasImage:function(A){this.reset();this.image.attr('src',A);},onLoadCanvasImage:function(A){if(this.imageSectionHasOnClickEvent){this.imageSection.un('click',this.beforeSelectFile,this);this.imageSectionHasOnClickEvent=false;}
+this.image.OriginWidth=this.image.getWidth();this.image.OriginHeight=this.image.getHeight();this.fitThumbBox();this.image.setWidth(this.image.OriginWidth*this.getScaleLevel(false));this.image.setHeight(this.image.OriginHeight*this.getScaleLevel(false));this.footerSection.show();this.setCanvasPosition();},setCanvasPosition:function(){var pw=(this.imageSection.getWidth(true)-this.image.getWidth())/2;var ph=(this.imageSection.getHeight(true)-this.image.getHeight())/2;this.imageCanvas.setLeft(pw);this.imageCanvas.setTop(ph);},onMouseDown:function(e){e.stopEvent();this.dragable=true;this.mouseX=e.getPageX();this.mouseY=e.getPageY();},onMouseMove:function(e){e.stopEvent();if(!this.dragable){return;}var A=new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);var B=this.thumb.getLeft(true)+A.m41;var C=this.thumb.getTop(true)+A.m42;var D=B+this.thumb.getWidth()-this.image.getWidth();var E=C+this.thumb.getHeight()-this.image.getHeight();if(this.rotate==90||this.rotate==270){B=this.thumb.getLeft(true)+A.m41-(this.image.getWidth()-this.image.getHeight())/2;C=this.thumb.getTop(true)+A.m42+(this.image.getWidth()-this.image.getHeight())/2;D=B+this.thumb.getWidth()-this.image.getHeight();E=C+this.thumb.getHeight()-this.image.getWidth();}var x=e.getPageX()-this.mouseX;var y=e.getPageY()-this.mouseY;var F=x+this.imageCanvas.getLeft(true);var G=y+this.imageCanvas.getTop(true);F=(B<F)?B:((D>F)?D:F);G=(C<G)?C:((E>G)?E:G);this.imageCanvas.setLeft(F);this.imageCanvas.setTop(G);this.mouseX=e.getPageX();this.mouseY=e.getPageY();},onMouseUp:function(e){e.stopEvent();this.dragable=false;},onMouseWheel:function(e){e.stopEvent();this.scale=(e.getWheelDelta()==1)?(this.scale+1):(this.scale-1);var A=this.image.OriginWidth*this.getScaleLevel(false);var B=this.image.OriginHeight*this.getScaleLevel(false);if(e.getWheelDelta()==-1&&(((this.rotate==0||this.rotate==180)&&(A<this.thumb.getWidth()||B<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(B<this.thumb.getWidth()||A<this.thumb.getHeight())))){this.scale=(e.getWheelDelta()==1)?(this.scale-1):(this.scale+1);return;}
+this.image.setWidth(A);this.image.setHeight(B);this.setCanvasPosition();},onRotateLeft:function(e){e.stopEvent();if(((this.rotate==0||this.rotate==180)&&(this.image.getHeight()<this.thumb.getWidth()||this.image.getWidth()<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(this.image.getWidth()<this.thumb.getWidth()||this.image.getHeight()<this.thumb.getHeight()))){return;}
+this.rotate=(this.rotate<90)?270:this.rotate-90;this.imageCanvas.setStyle({'-ms-transform':'rotate('+this.rotate+'deg)','-webkit-transform':'rotate('+this.rotate+'deg)','transform':'rotate('+this.rotate+'deg)'});this.setCanvasPosition();},onRotateRight:function(e){e.stopEvent();if(((this.rotate==0||this.rotate==180)&&(this.image.getHeight()<this.thumb.getWidth()||this.image.getWidth()<this.thumb.getHeight()))||((this.rotate==90||this.rotate==270)&&(this.image.getWidth()<this.thumb.getWidth()||this.image.getHeight()<this.thumb.getHeight()))){return false;}
+this.rotate=(this.rotate>180)?0:this.rotate+90;this.imageCanvas.setStyle({'-ms-transform':'rotate('+this.rotate+'deg)','-webkit-transform':'rotate('+this.rotate+'deg)','transform':'rotate('+this.rotate+'deg)'});this.setCanvasPosition();},crop:function(){var A=document.createElement("canvas");var B=A.getContext("2d");A.width=this.minWidth;A.height=this.minHeight;var C=this.minWidth/2;var D=this.minHeight/2;var E=this.thumb.getWidth()*this.getScaleLevel(true);var F=this.thumb.getHeight()*this.getScaleLevel(true);var G=new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);var H=this.thumb.getLeft(true)+G.m41;var I=this.thumb.getTop(true)+G.m42;var x=(H-this.imageCanvas.getLeft(true))*this.getScaleLevel(true);var y=(I-this.imageCanvas.getTop(true))*this.getScaleLevel(true);if(this.rotate==90){x=I+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=this.image.getHeight()-this.thumb.getWidth()-(H-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true));x=x*this.getScaleLevel(true);y=y*this.getScaleLevel(true);x=x<0?0:x;y=y<0?0:y;E=this.thumb.getHeight()*this.getScaleLevel(true);F=this.thumb.getWidth()*this.getScaleLevel(true);A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);var J=document.createElement("canvas");var K=J.getContext("2d");J.width=this.minWidth;J.height=this.minHeight;K.drawImage(A,Math.abs(this.minWidth-this.minHeight),0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);this.cropImageData=J.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==270){x=I+(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getTop(true);y=H-(this.image.getWidth()-this.image.getHeight())/2-this.imageCanvas.getLeft(true);x=(this.image.getWidth()-this.thumb.getHeight()-x)*this.getScaleLevel(true);y=y*this.getScaleLevel(true);x=x<0?0:x;y=y<0?0:y;E=this.thumb.getHeight()*this.getScaleLevel(true);F=this.thumb.getWidth()*this.getScaleLevel(true);A.width=this.minWidth>this.minHeight?this.minWidth:this.minHeight;A.height=this.minWidth>this.minHeight?this.minWidth:this.minHeight;C=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);D=this.minWidth>this.minHeight?(this.minWidth/2):(this.minHeight/2);B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,this.minHeight,this.minWidth);var J=document.createElement("canvas");var K=J.getContext("2d");J.width=this.minWidth;J.height=this.minHeight;K.drawImage(A,0,0,this.minWidth,this.minHeight,0,0,this.minWidth,this.minHeight);this.cropImageData=J.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropImageData);return;}if(this.rotate==180){x=this.image.OriginWidth-this.thumb.getWidth()*this.getScaleLevel(true)-x;y=this.image.OriginHeight-this.thumb.getHeight()*this.getScaleLevel(true)-y;}
x=x<0?0:x;y=y<0?0:y;B.translate(C,D);B.rotate(this.rotate*Math.PI/180);B.drawImage(this.image.dom,x,y,E,F,C*-1,D*-1,A.width,A.height);this.cropImageData=A.toDataURL(this.cropType);this.fireEvent('crop',this,this.cropImageData);},calcThumbBoxSize:function(){var A,B;B=300;A=this.minWidth*B/this.minHeight;if(this.minWidth>this.minHeight){A=300;B=this.minHeight*A/this.minWidth;}
-this.thumb.setStyle({width:A+'px',height:B+'px'});return;},fitThumbBox:function(){var i=0;var A=this.image.OriginWidth;var B=this.image.OriginHeight;if(this.image.OriginWidth>this.image.OriginHeight){if(this.image.OriginHeight>this.thumb.getHeight()){while(B>this.thumb.getHeight()){i=i-1;B=this.image.OriginHeight*Math.pow(1.1,i);}
-this.scale=(B<this.thumb.getHeight())?(i+1):i;return;}while(B<this.thumb.getHeight()){i=i+1;B=this.image.OriginWidth*Math.pow(1.1,i);}
-this.scale=(B>this.thumb.getHeight())?(i-1):i;return;}if(this.image.OriginWidth>this.thumb.getWidth()){while(A>this.thumb.getWidth()){i=i-1;A=this.image.OriginWidth*Math.pow(1.1,i);}
-this.scale=(A<this.thumb.getWidth())?(i+1):i;return;}while(A<this.thumb.getWidth()){i=i+1;A=this.image.OriginWidth*Math.pow(1.1,i);}
-this.scale=(A>this.thumb.getWidth())?(i-1):i;return;}});
+this.thumb.setStyle({width:A+'px',height:B+'px'});return;},fitThumbBox:function(){var A=this.thumb.getWidth();var B=this.image.OriginHeight*A/this.image.OriginWidth;this.baseScale=A/this.image.OriginWidth;if(this.image.OriginWidth>this.image.OriginHeight){B=this.thumb.getHeight();A=this.image.OriginWidth*B/this.image.OriginHeight;this.baseScale=B/this.image.OriginHeight;}return;},getScaleLevel:function(A){if(A){return Math.pow(1.1,this.scale*-1)/this.baseScale;}return this.baseScale*Math.pow(1.1,this.scale);}});
projects / roojs1 / commitdiff