From fd1ffa2fc4a0490a30721278dd2e6c208072555b Mon Sep 17 00:00:00 2001
From: "john@roojs.com" <john@roojs.com>
Date: Thu, 27 Dec 2018 19:06:58 +0800
Subject: [PATCH] FIX: responsive version

---
 Roo/bootstrap/BezierSignature.js | 37 ++++++++++++++++++++++++++++--
 roojs-bootstrap-debug.js         | 39 ++++++++++++++++++++++++++++----
 roojs-bootstrap.js               | 35 ++++++++++++++--------------
 3 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/Roo/bootstrap/BezierSignature.js b/Roo/bootstrap/BezierSignature.js
index 504e13bdc6..b15c07bf49 100644
--- a/Roo/bootstrap/BezierSignature.js
+++ b/Roo/bootstrap/BezierSignature.js
@@ -17,6 +17,9 @@
 
 Roo.bootstrap.BezierSignature = function(config){
     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
+    this.addEvents({
+        "resize" : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
@@ -27,6 +30,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     _mouseButtonDown: true,
     
+    /**
+     * @cfg(int) canvas height
+     */
+    canvas_height: '200px',
+    
     /**
      * @cfg(float or function) Radius of a single dot.
      */ 
@@ -79,12 +87,25 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     getAutoCreate : function()
     {
-        var cls = 'roo-signature';
+        var cls = 'roo-signature column';
         
         if(this.cls){
             cls += ' ' + this.cls;
         }
         
+        var col_sizes = [
+            'lg',
+            'md',
+            'sm',
+            'xs'
+        ];
+        
+        for(var i = 0; i < col_sizes.length; i++) {
+            if(this[col_sizes[i]]) {
+                cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
+            }
+        }
+        
         var cfg = {
             tag: 'div',
             cls: cls,
@@ -95,7 +116,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                     cn: [
                         {
                             tag: 'canvas',
-                            cls: 'roo-signature-body-canvas'
+                            cls: 'roo-signature-body-canvas',
+                            height: this.canvas_height,
+                            width: this.canvas_width
                         }
                     ]
                 }
@@ -126,7 +149,17 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             canvas.on('touchend', this._handleTouchEnd, this);
         }
         
+        if(this.resize_to_parent_width) {
+            Roo.EventManager.onWindowResize(this.resize, this, true);
+        }
+        
         this.clear();
+        
+        this.resize();
+    },
+    
+    resize: function(){
+        this.canvasEl().dom.width = this.el.dom.offsetWidth;
     },
     
     _handleMouseDown: function(e)
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index dd82b3bbb3..3fa894c7fc 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -41518,6 +41518,9 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
 
 Roo.bootstrap.BezierSignature = function(config){
     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
+    this.addEvents({
+        "resize" : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
@@ -41528,6 +41531,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     _mouseButtonDown: true,
     
+    /**
+     * @cfg(int) canvas height
+     */
+    canvas_height: '200px',
+    
     /**
      * @cfg(float or function) Radius of a single dot.
      */ 
@@ -41580,12 +41588,25 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     getAutoCreate : function()
     {
-        var cls = 'roo-signature';
+        var cls = 'roo-signature column';
         
         if(this.cls){
             cls += ' ' + this.cls;
         }
         
+        var col_sizes = [
+            'lg',
+            'md',
+            'sm',
+            'xs'
+        ];
+        
+        for(var i = 0; i < col_sizes.length; i++) {
+            if(this[col_sizes[i]]) {
+                cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
+            }
+        }
+        
         var cfg = {
             tag: 'div',
             cls: cls,
@@ -41596,7 +41617,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                     cn: [
                         {
                             tag: 'canvas',
-                            cls: 'roo-signature-body-canvas'
+                            cls: 'roo-signature-body-canvas',
+                            height: this.canvas_height,
+                            width: this.canvas_width
                         }
                     ]
                 }
@@ -41627,7 +41650,17 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             canvas.on('touchend', this._handleTouchEnd, this);
         }
         
+        if(this.resize_to_parent_width) {
+            Roo.EventManager.onWindowResize(this.resize, this, true);
+        }
+        
         this.clear();
+        
+        this.resize();
+    },
+    
+    resize: function(){
+        this.canvasEl().dom.width = this.el.dom.offsetWidth;
     },
     
     _handleMouseDown: function(e)
@@ -41865,8 +41898,6 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         img.src = img_src;
         
-        Roo.log(img);
-        
         this.canvasElCtx().drawImage(img, 0, 0);
     },
     
diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 8ed27478d6..5fc76a5b10 100644
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -1731,23 +1731,24 @@ return false;}return true;},validate:function(){if(this.disabled||this.allowBlan
 }var v=this.getValue();if(String(v)!==String(this.startValue)){this.fireEvent('change',this,v,this.startValue);}this.fireEvent("blur",this);},inputEl:function(){return this.el.select('.roo-money-amount-input',true).first();},currencyEl:function(){return this.el.select('.roo-money-currency-input',true).first();
 },hiddenEl:function(){return this.el.select('input.hidden-number-input',true).first();}});
 // Roo/bootstrap/BezierSignature.js
-Roo.bootstrap.BezierSignature=function(A){Roo.bootstrap.BezierSignature.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.BezierSignature,Roo.bootstrap.Component,{_data:[],_isEmpty:true,_mouseButtonDown:true,dotSize:false,minWidth:0.5,maxWidth:2.5,throttle:16,minDistance:5,backgroundColor:'rgba(0, 0, 0, 0)',penColor:'black',velocityFilterWeight:0.7,onBegin:false,onEnd:false,getAutoCreate:function(){var A='roo-signature';
-if(this.cls){A+=' '+this.cls;}var B={tag:'div',cls:A,cn:[{tag:'div',cls:'roo-signature-body',cn:[{tag:'canvas',cls:'roo-signature-body-canvas'}]}]};return B;},initEvents:function(){Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);var A=this.canvasEl();
-A.dom.style.touchAction='none';A.dom.style.msTouchAction='none';this._mouseButtonDown=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);}this.clear();},_handleMouseDown:function(e){if(e.browserEvent.which===1){this._mouseButtonDown=true;this.strokeBegin(e);}},_handleMouseMove:function(e){if(this._mouseButtonDown){this.strokeMoveUpdate(e);
-}},_handleMouseUp:function(e){if(e.browserEvent.which===1&&this._mouseButtonDown){this._mouseButtonDown=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.minWidth+this.maxWidth)/2;this.canvasElCtx().fillStyle=this.penColor;
-},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.penColor,points:[]};if(typeof this.onBegin==='function'){this.onBegin(e);
-}this._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._data[this._data.length-1];var D=C.points;
-var E=D.length>0&&D[D.length-1];var F=E?B.distanceTo(E)<=this.minDistance:false;var G=C.color;if(!E||!(E&&F)){var H=this.addPoint(B);if(!E){this.drawDot({color:G,point:B});}else if(H){this.drawCurve({color:G,curve:H});}D.push({time:B.time,x:B.x,y:B.y});}}
-,strokeEnd:function(e){this.strokeUpdate(e);if(typeof this.onEnd==='function'){this.onEnd(e);}},addPoint:function(A){var B=this._lastPoints;B.push(A);if(B.length>2){if(B.length===3){B.unshift(B[0]);}var C=this.calculateCurveWidths(B[1],B[2]);var D=this.Bezier.fromPoints(B,C,this);
-B.shift();return D;}return null;},calculateCurveWidths:function(A,B){var C=this.velocityFilterWeight*B.velocityFrom(A)+(1-this.velocityFilterWeight)*this._lastVelocity;var D=Math.max(this.maxWidth/(C+1),this.minWidth);var E={end:D,start:this._lastWidth};this._lastVelocity=C;
-this._lastWidth=D;return E;},drawDot:function(_a){var A=_a.color,B=_a.point;var C=this.canvasElCtx();var D=typeof this.dotSize==='function'?this.dotSize():this.dotSize;C.beginPath();this.drawCurveSegment(B.x,B.y,D);C.closePath();C.fillStyle=A;C.fill();},drawCurve:function(_a){var A=_a.color,B=_a.curve;
-var C=this.canvasElCtx();var D=B.endWidth-B.startWidth;var E=Math.floor(B.length())*2;C.beginPath();C.fillStyle=A;for(var i=0;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._isEmpty=false;},clear:function(){var A=this.canvasElCtx();var B=this.canvasEl().dom;A.fillStyle=this.backgroundColor;A.clearRect(0,0,B.width,B.height);A.fillRect(0,0,B.width,B.height);this._data=[];this.reset();this._isEmpty=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._isEmpty){return false;}return this.canvasEl().dom.toDataURL('image/'+A,false);
-},drawFromImage:function(A){var B=new Image();B.src=A;Roo.log(B);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));
+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,{_data:[],_isEmpty:true,_mouseButtonDown:true,canvas_height:'200px',dotSize:false,minWidth:0.5,maxWidth:2.5,throttle:16,minDistance:5,backgroundColor:'rgba(0, 0, 0, 0)',penColor:'black',velocityFilterWeight: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._mouseButtonDown=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);
+}if(this.resize_to_parent_width){Roo.EventManager.onWindowResize(this.resize,this,true);}this.clear();this.resize();},resize:function(){this.canvasEl().dom.width=this.el.dom.offsetWidth;},_handleMouseDown:function(e){if(e.browserEvent.which===1){this._mouseButtonDown=true;
+this.strokeBegin(e);}},_handleMouseMove:function(e){if(this._mouseButtonDown){this.strokeMoveUpdate(e);}},_handleMouseUp:function(e){if(e.browserEvent.which===1&&this._mouseButtonDown){this._mouseButtonDown=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.minWidth+this.maxWidth)/2;this.canvasElCtx().fillStyle=this.penColor;},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.penColor,points:[]};if(typeof this.onBegin==='function'){this.onBegin(e);}this._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._data[this._data.length-1];var D=C.points;var E=D.length>0&&D[D.length-1];var F=E?B.distanceTo(E)<=this.minDistance:false;var G=C.color;if(!E||!(E&&F)){var H=this.addPoint(B);if(!E){this.drawDot({color:G,point:B});}else if(H){this.drawCurve({color:G,curve:H}
+);}D.push({time:B.time,x:B.x,y:B.y});}},strokeEnd:function(e){this.strokeUpdate(e);if(typeof this.onEnd==='function'){this.onEnd(e);}},addPoint:function(A){var B=this._lastPoints;B.push(A);if(B.length>2){if(B.length===3){B.unshift(B[0]);}var C=this.calculateCurveWidths(B[1],B[2]);
+var D=this.Bezier.fromPoints(B,C,this);B.shift();return D;}return null;},calculateCurveWidths:function(A,B){var C=this.velocityFilterWeight*B.velocityFrom(A)+(1-this.velocityFilterWeight)*this._lastVelocity;var D=Math.max(this.maxWidth/(C+1),this.minWidth);
+var E={end:D,start:this._lastWidth};this._lastVelocity=C;this._lastWidth=D;return E;},drawDot:function(_a){var A=_a.color,B=_a.point;var C=this.canvasElCtx();var D=typeof this.dotSize==='function'?this.dotSize():this.dotSize;C.beginPath();this.drawCurveSegment(B.x,B.y,D);
+C.closePath();C.fillStyle=A;C.fill();},drawCurve:function(_a){var A=_a.color,B=_a.curve;var C=this.canvasElCtx();var D=B.endWidth-B.startWidth;var E=Math.floor(B.length())*2;C.beginPath();C.fillStyle=A;for(var i=0;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._isEmpty=false;},clear:function(){var A=this.canvasElCtx();var B=this.canvasEl().dom;A.fillStyle=this.backgroundColor;A.clearRect(0,0,B.width,B.height);
+A.fillRect(0,0,B.width,B.height);this._data=[];this.reset();this._isEmpty=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._isEmpty){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;};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);
-- 
2.39.2