FIX: bezier signature -- draw image should after img.onload
[roojs1] / roojs-bootstrap.js
index 1663693..a021590 100644 (file)
@@ -325,7 +325,7 @@ return this.result;},getUrl:function(A){var B=this.options.url||this.form.url||t
 ,method:'GET',success:function(B){var C=false;var D;try{C=Roo.decode(B.responseText)}catch(e){Roo.log("Invalid data from server..");Roo.log(D);return;}if(!C||!C.success){Roo.log(C);Roo.MessageBox.alert(Roo.encode(C));return;}var E=C.data;if(this.uploadComplete){Roo.MessageBox.hide();
 return;}if(E){Roo.MessageBox.updateProgress(E.bytes_uploaded/E.bytes_total,Math.floor((E.bytes_total-E.bytes_uploaded)/1000)+'k remaining');}this.uploadProgress.defer(2000,this);},failure:function(B){Roo.log('progress url failed ');Roo.log(B);},scope:this}
 );},run:function(){this.form.getValues();var o=this.options;var A=this.getMethod();var B=A=='POST';if(o.clientValidation===false||this.form.isValid()){if(this.form.progressUrl){this.form.findField('UPLOAD_IDENTIFIER').setValue((new Date()*1)+''+Math.random());
-}Roo.Ajax.request(Roo.apply(this.createCallback(),{form:this.form.el.dom,url:this.getUrl(!B),method:A,params:B?this.getParams():null,isUpload:this.form.fileUpload}));this.uploadProgress();}else if(o.clientValidation!==false){this.failureType=Roo.form.Action.CLIENT_INVALID;
+}Roo.Ajax.request(Roo.apply(this.createCallback(),{form:this.form.el.dom,url:this.getUrl(!B),method:A,params:B?this.getParams():null,isUpload:this.form.fileUpload,formData:this.form.formData}));this.uploadProgress();}else if(o.clientValidation!==false){this.failureType=Roo.form.Action.CLIENT_INVALID;
 this.form.afterAction(this,false);}},success:function(A){this.uploadComplete=true;if(this.haveProgress){Roo.MessageBox.hide();}var B=this.processResponse(A);if(B===true||B.success){this.form.afterAction(this,true);return;}if(B.errors){this.form.markInvalid(B.errors);
 this.failureType=Roo.form.Action.SERVER_INVALID;}this.form.afterAction(this,false);},failure:function(A){this.uploadComplete=true;if(this.haveProgress){Roo.MessageBox.hide();}this.response=A;this.failureType=Roo.form.Action.CONNECT_FAILURE;this.form.afterAction(this,false);
 },handleResponse:function(A){if(this.form.errorReader){var rs=this.form.errorReader.read(A);var B=[];if(rs.records){for(var i=0,C=rs.records.length;i<C;i++){var r=rs.records[i];B[i]=r.data;}}if(B.length<1){B=null;}return {success:rs.success,errors:B};}var D=false;
@@ -1734,10 +1734,11 @@ return false;}return true;},validate:function(){if(this.disabled||this.allowBlan
 Roo.bootstrap.BezierSignature=function(A){Roo.bootstrap.BezierSignature.superclass.constructor.call(this,A);this.addEvents({"resize":true});};Roo.extend(Roo.bootstrap.BezierSignature,Roo.bootstrap.Component,{curve_data:[],is_empty:true,mouse_btn_down:true,canvas_height:'200px',dot_size:false,min_width:0.5,max_width:2.5,throttle:16,min_distance:5,bg_color:'rgba(0, 0, 0, 0)',dot_color:'black',velocity_filter_weight:0.7,onBegin:false,onEnd:false,getAutoCreate:function(){var A='roo-signature column';
 if(this.cls){A+=' '+this.cls;}var B=['lg','md','sm','xs'];for(var i=0;i<B.length;i++){if(this[B[i]]){A+=" col-"+B[i]+"-"+this[B[i]];}}var C={tag:'div',cls:A,cn:[{tag:'div',cls:'roo-signature-body',cn:[{tag:'canvas',cls:'roo-signature-body-canvas',height:this.canvas_height,width:this.canvas_width}
 ]}]};return C;},initEvents:function(){Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);var A=this.canvasEl();A.dom.style.touchAction='none';A.dom.style.msTouchAction='none';this.mouse_btn_down=false;A.on('mousedown',this._handleMouseDown,this);
-A.on('mousemove',this._handleMouseMove,this);Roo.select('html').first().on('mouseup',this._handleMouseUp,this);if(window.ontouchstart){A.on('touchstart',this._handleTouchStart,this);A.on('touchmove',this._handleTouchMove,this);A.on('touchend',this._handleTouchEnd,this);
-}Roo.EventManager.onWindowResize(this.resize,this,true);this.clear();this.resize();},resize:function(){var A=window.getComputedStyle?getComputedStyle(this.el.dom,null):this.el.dom.currentStyle;var B=parseInt(A.paddingLeft)||0;var C=parseInt(A.paddingRight)||0;
-this.canvasEl().dom.width=this.el.dom.clientWidth-B-C;},_handleMouseDown:function(e){if(e.browserEvent.which===1){this.mouse_btn_down=true;this.strokeBegin(e);}},_handleMouseMove:function(e){if(this.mouse_btn_down){this.strokeMoveUpdate(e);}},_handleMouseUp:function(e){if(e.browserEvent.which===1&&this.mouse_btn_down){this.mouse_btn_down=false;
-this.strokeEnd(e);}},_handleTouchStart:function(e){e.preventDefault();if(e.browserEvent.targetTouches.length===1){this.strokeBegin(e);}},_handleTouchMove:function(e){e.preventDefault();this._strokeMoveUpdate(e);},_handleTouchEnd:function(e){var A=e.target===this.canvasEl().dom;
+A.on('mousemove',this._handleMouseMove,this);Roo.select('html').first().on('mouseup',this._handleMouseUp,this);if(window.PointerEvent){A.on('pointerdown',this._handleMouseDown,this);A.on('pointermove',this._handleMouseMove,this);Roo.select('html').first().on('pointerup',this._handleMouseUp,this);
+}if('ontouchstart' in window){A.on('touchstart',this._handleTouchStart,this);A.on('touchmove',this._handleTouchMove,this);A.on('touchend',this._handleTouchEnd,this);}Roo.EventManager.onWindowResize(this.resize,this,true);this.clear();this.resize();},resize:function(){var A=this.canvasEl().dom;
+var B=this.canvasElCtx();var C=B.getImageData(0,0,A.width,A.height);A.width=0;var D=window.getComputedStyle?getComputedStyle(this.el.dom,null):this.el.dom.currentStyle;var E=parseInt(D.paddingLeft)||0;var F=parseInt(D.paddingRight)||0;A.width=this.el.dom.clientWidth-E-F;
+B.putImageData(C,0,0);},_handleMouseDown:function(e){if(e.browserEvent.which===1){this.mouse_btn_down=true;this.strokeBegin(e);}},_handleMouseMove:function(e){if(this.mouse_btn_down){this.strokeMoveUpdate(e);}},_handleMouseUp:function(e){if(e.browserEvent.which===1&&this.mouse_btn_down){this.mouse_btn_down=false;
+this.strokeEnd(e);}},_handleTouchStart:function(e){e.preventDefault();if(e.browserEvent.targetTouches.length===1){this.strokeBegin(e);}},_handleTouchMove:function(e){e.preventDefault();this.strokeMoveUpdate(e);},_handleTouchEnd:function(e){var A=e.target===this.canvasEl().dom;
 if(A){e.preventDefault();this.strokeEnd(e);}},reset:function(){this._lastPoints=[];this._lastVelocity=0;this._lastWidth=(this.min_width+this.max_width)/2;this.canvasElCtx().fillStyle=this.dot_color;},strokeMoveUpdate:function(e){this.strokeUpdate(e);if(this.throttle){this.throttle(this.strokeUpdate,this.throttle);
 }else{this.strokeUpdate(e);}},strokeBegin:function(e){var A={color:this.dot_color,points:[]};if(typeof this.onBegin==='function'){this.onBegin(e);}this.curve_data.push(A);this.reset();this.strokeUpdate(e);},strokeUpdate:function(e){var A=this.canvasEl().dom.getBoundingClientRect();
 var B=new this.Point(e.xy[0]-A.left,e.xy[1]-A.top,new Date().getTime());var C=this.curve_data[this.curve_data.length-1];var D=C.points;var E=D.length>0&&D[D.length-1];var F=E?B.distanceTo(E)<=this.min_distance:false;var G=C.color;if(!E||!(E&&F)){var H=this.addPoint(B);
@@ -1748,8 +1749,8 @@ C.beginPath();this.drawCurveSegment(B.x,B.y,D);C.closePath();C.fillStyle=A;C.fil
 i<E;i+=1){var t=i/E;var tt=t*t;var F=tt*t;var u=1-t;var uu=u*u;var G=uu*u;var x=G*B.startPoint.x;x+=3*uu*t*B.control1.x;x+=3*u*tt*B.control2.x;x+=F*B.endPoint.x;var y=G*B.startPoint.y;y+=3*uu*t*B.control1.y;y+=3*u*tt*B.control2.y;y+=F*B.endPoint.y;var H=B.startWidth+F*D;
 this.drawCurveSegment(x,y,H);}C.closePath();C.fill();},drawCurveSegment:function(x,y,A){var B=this.canvasElCtx();B.moveTo(x,y);B.arc(x,y,A,0,2*Math.PI,false);this.is_empty=false;},clear:function(){var A=this.canvasElCtx();var B=this.canvasEl().dom;A.fillStyle=this.bg_color;
 A.clearRect(0,0,B.width,B.height);A.fillRect(0,0,B.width,B.height);this.curve_data=[];this.reset();this.is_empty=true;},canvasEl:function(){return this.el.select('canvas',true).first();},canvasElCtx:function(){return this.el.select('canvas',true).first().dom.getContext('2d');
-},getImage:function(A){if(this.is_empty){return false;}return this.canvasEl().dom.toDataURL('image/'+A,false);},drawFromImage:function(A){var B=new Image();B.src=A;this.canvasElCtx().drawImage(B,0,0);},Point:(function(){function Point(x,y,A){this.x=x;this.y=y;
-this.time=A||Date.now();}Point.prototype.distanceTo=function(A){return Math.sqrt(Math.pow(this.x-A.x,2)+Math.pow(this.y-A.y,2));};Point.prototype.equals=function(A){return this.x===A.x&&this.y===A.y&&this.time===A.time;};Point.prototype.velocityFrom=function(A){return this.time!==A.time?this.distanceTo(A)/(this.time-A.time):0;
+},getImage:function(A){if(this.is_empty){return false;}return this.canvasEl().dom.toDataURL('image/'+A,1);},drawFromImage:function(A){var B=new Image();B.onload=function(){this.canvasElCtx().drawImage(B,0,0);}.bind(this);B.src=A;this.is_empty=false;},Point:(function(){function Point(x,y,A){this.x=x;
+this.y=y;this.time=A||Date.now();}Point.prototype.distanceTo=function(A){return Math.sqrt(Math.pow(this.x-A.x,2)+Math.pow(this.y-A.y,2));};Point.prototype.equals=function(A){return this.x===A.x&&this.y===A.y&&this.time===A.time;};Point.prototype.velocityFrom=function(A){return this.time!==A.time?this.distanceTo(A)/(this.time-A.time):0;
 };return Point;}()),Bezier:(function(){function Bezier(A,B,C,D,E,F){this.startPoint=A;this.control2=B;this.control1=C;this.endPoint=D;this.startWidth=E;this.endWidth=F;}Bezier.fromPoints=function(A,B,C){var c2=this.calculateControlPoints(A[0],A[1],A[2],C).c2;
 var c3=this.calculateControlPoints(A[1],A[2],A[3],C).c1;return new Bezier(A[1],c2,c3,A[2],B.start,B.end);};Bezier.calculateControlPoints=function(s1,s2,s3,A){var B=s1.x-s2.x;var C=s1.y-s2.y;var D=s2.x-s3.x;var E=s2.y-s3.y;var m1={x:(s1.x+s2.x)/2.0,y:(s1.y+s2.y)/2.0}
 ;var m2={x:(s2.x+s3.x)/2.0,y:(s2.y+s3.y)/2.0};var l1=Math.sqrt(B*B+C*C);var l2=Math.sqrt(D*D+E*E);var F=m1.x-m2.x;var G=m1.y-m2.y;var k=l2/(l1+l2);var cm={x:m2.x+F*k,y:m2.y+G*k};var tx=s2.x-cm.x;var ty=s2.y-cm.y;return {c1:new A.Point(m1.x+tx,m1.y+ty),c2:new A.Point(m2.x+tx,m2.y+ty)}