roojs-bootstrap.js
authoredward <edward@roojs.com>
Thu, 21 Jan 2016 08:02:06 +0000 (16:02 +0800)
committeredward <edward@roojs.com>
Thu, 21 Jan 2016 08:02:06 +0000 (16:02 +0800)
roojs-bootstrap-debug.js

roojs-bootstrap-debug.js
roojs-bootstrap.js

index c12e086..8cbc2f3 100644 (file)
@@ -23924,4 +23924,453 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
     
 });
 
\ No newline at end of file
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.UploadCropbox
+ * @extends Roo.bootstrap.Component
+ * Bootstrap UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * 
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.UploadCropbox = function(config){
+    Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+        /**
+         * @event beforeSelectFile
+         * Fire before select file
+         * @param {Roo.bootstrap.UploadCropbox} this
+         */
+        "beforeSelectFile" : true,
+        /**
+         * @event initial
+         * Fire after initEvent
+         * @param {Roo.bootstrap.UploadCropbox} this
+         */
+        "initial" : true,
+        /**
+         * @event crop
+         * Fire after initEvent
+         * @param {Roo.bootstrap.UploadCropbox} this
+         * @param {String} imageData
+         */
+        "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 cfg = {
+            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 cfg;
+    },
+    
+    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 mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+        
+        this.imageSection.on(mousewheel, 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 mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+        
+        this.imageSection.un(mousewheel, 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(src)
+    {   
+        this.reset();
+        
+        this.image.attr('src', src);
+    },
+    
+    onLoadCanvasImage : function(src)
+    {   
+        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.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 transform = new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);
+        
+        var minX = this.thumb.getLeft(true) + transform.m41;
+        var minY = this.thumb.getTop(true) + transform.m42;
+        
+        var maxX = minX + this.thumb.getWidth() - this.image.getWidth();
+        var maxY = minY + this.thumb.getHeight() - this.image.getHeight();
+        
+        if(this.rotate == 90 || this.rotate == 270){
+            minX = this.thumb.getLeft(true) + transform.m41 - (this.image.getWidth() - this.image.getHeight()) / 2;
+            minY = this.thumb.getTop(true) + transform.m42 + (this.image.getWidth() - this.image.getHeight()) / 2;
+            
+            maxX = minX + this.thumb.getWidth() - this.image.getHeight();
+            maxY = minY + this.thumb.getHeight() - this.image.getWidth();
+        }
+        
+        var x = e.getPageX() - this.mouseX;
+        var y = e.getPageY() - this.mouseY;
+        
+        var bgX = x + this.imageCanvas.getLeft(true);
+        var bgY = y + this.imageCanvas.getTop(true);
+        
+        bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
+        bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
+        
+        this.imageCanvas.setLeft(bgX);
+        this.imageCanvas.setTop(bgY);
+        
+        this.mouseX = e.getPageX();
+        this.mouseY = e.getPageY();
+    },
+    
+    onMouseUp : function(e)
+    {   
+        e.stopEvent();
+        
+        this.dragable = false;
+    },
+    
+    onMouseWheel : function(e)
+    {   
+        e.stopEvent();
+        
+        var 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)
+        
+        if(
+                e.getWheelDelta() == -1 &&
+                (
+                    width < this.thumb.getWidth() ||
+                    height < this.thumb.getHeight()
+                )
+        ){
+            return;
+        }
+        
+        this.scale = scale;
+        
+        this.image.setWidth(width);
+        this.image.setHeight(height);
+        
+        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 canvas = document.createElement("canvas");
+        
+        var thumbWidth = this.thumb.getWidth();
+        var thumbHeight = this.thumb.getHeight();
+        
+        var centerX = thumbWidth / 2;
+        var centerY = thumbHeight / 2
+        
+        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 cropWidth = thumbWidth * Math.pow(1.1, this.scale * -1);
+        var cropHeight = thumbHeight * Math.pow(1.1, this.scale * -1);
+        
+        canvas.width = thumbWidth;
+        canvas.height = thumbHeight;
+        
+        var context = canvas.getContext("2d");
+        
+        context.translate(centerX, centerY);
+
+        context.rotate(this.rotate * Math.PI / 180);
+        
+        context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, thumbWidth, thumbHeight);
+        
+        this.cropImageData = canvas.toDataURL(this.cropType);
+        
+        this.fireEvent('crop', this, this.cropImageData);
+    },
+    
+    calcThumbBoxSize : function()
+    {
+        var width, height;
+        
+        height = 300;
+        width = this.minWidth * height / this.minHeight;
+        
+        if(this.minWidth > this.minHeight){
+            width = 300;
+            height = this.minHeight * width / this.minWidth;
+        }
+        
+        this.thumb.setStyle({
+            width : width + 'px',
+            height : height + 'px'
+        });
+
+        return;
+            
+    }
+    
+});
index bf82774..8d27fb5 100644 (file)
@@ -543,3 +543,10 @@ this.el.hide();this.fireEvent('hide',this);}});Roo.apply(Roo.bootstrap.LocationP
 Roo.bootstrap.Alert=function(A){Roo.bootstrap.Alert.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.Alert,Roo.bootstrap.Component,{title:'',html:'',weight:false,faicon:false,getAutoCreate:function(){var A={tag:'div',cls:'alert',cn:[{tag:'i',cls:'roo-alert-icon'},{tag:'b',cls:'roo-alert-title',html:this.title},{tag:'span',cls:'roo-alert-text',html:this.html}]};if(this.faicon){A.cn[0].cls+=' fa '+this.faicon;}if(this.weight){A.cls+=' alert-'+this.weight;}return A;},initEvents:function(){this.el.setVisibilityMode(Roo.Element.DISPLAY);},setTitle:function(A){this.el.select('.roo-alert-title',true).first().dom.innerHTML=A;},setText:function(A){this.el.select('.roo-alert-text',true).first().dom.innerHTML=A;},setWeight:function(A){if(this.weight){this.el.select('.alert',true).first().removeClass('alert-'+this.weight);}
 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;}
+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.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=this.thumb.getWidth();var C=this.thumb.getHeight();var D=B/2;var E=C/2var transform=new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);var F=this.thumb.getLeft(true)+transform.m41;var G=this.thumb.getTop(true)+transform.m42;var x=(F-this.imageCanvas.getLeft(true))*Math.pow(1.1,this.scale*-1);var y=(G-this.imageCanvas.getTop(true))*Math.pow(1.1,this.scale*-1);var H=B*Math.pow(1.1,this.scale*-1);var I=C*Math.pow(1.1,this.scale*-1);A.width=B;A.height=C;var J=A.getContext("2d");J.translate(D,E);J.rotate(this.rotate*Math.PI/180);J.drawImage(this.image.dom,x,y,H,I,D*-1,E*-1,B,C);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;}});