From: john@roojs.com <john@roojs.com>
Date: Fri, 28 Dec 2018 03:27:49 +0000 (+0800)
Subject: FIX: bezierSignature var naming convention
X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=48e8cb4a707b143b3916ae8b5e4b9b418baf15ca

FIX: bezierSignature var naming convention
---

diff --git a/Roo/bootstrap/BezierSignature.js b/Roo/bootstrap/BezierSignature.js
index b15c07bf49..2dcd4fea17 100644
--- a/Roo/bootstrap/BezierSignature.js
+++ b/Roo/bootstrap/BezierSignature.js
@@ -24,11 +24,11 @@ Roo.bootstrap.BezierSignature = function(config){
 
 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
-    _data: [],
+    curve_data: [],
     
-    _isEmpty: true,
+    is_empty: true,
     
-    _mouseButtonDown: true,
+    mouse_btn_down: true,
     
     /**
      * @cfg(int) canvas height
@@ -38,17 +38,17 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     /**
      * @cfg(float or function) Radius of a single dot.
      */ 
-    dotSize: false,
+    dot_size: false,
     
     /**
      * @cfg(float) Minimum width of a line. Defaults to 0.5.
      */
-    minWidth: 0.5,
+    min_width: 0.5,
     
     /**
      * @cfg(float) Maximum width of a line. Defaults to 2.5.
      */
-    maxWidth: 2.5,
+    max_width: 2.5,
     
     /**
      * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
@@ -58,22 +58,22 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     /**
      * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
      */
-    minDistance: 5,
+    min_distance: 5,
     
     /**
      * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
      */
-    backgroundColor: 'rgba(0, 0, 0, 0)',
+    bg_color: 'rgba(0, 0, 0, 0)',
     
     /**
      * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
      */
-    penColor: 'black',
+    dot_color: 'black',
     
     /**
      * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
      */
-    velocityFilterWeight: 0.7,
+    velocity_filter_weight: 0.7,
     
     /**
      * @cfg(function) Callback when stroke begin.
@@ -138,7 +138,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         canvas.dom.style.touchAction = 'none';
         canvas.dom.style.msTouchAction = 'none';
         
-        this._mouseButtonDown = false;
+        this.mouse_btn_down = false;
         canvas.on('mousedown', this._handleMouseDown, this);
         canvas.on('mousemove', this._handleMouseMove, this);
         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
@@ -149,9 +149,7 @@ 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);
-        }
+        Roo.EventManager.onWindowResize(this.resize, this, true);
         
         this.clear();
         
@@ -159,28 +157,35 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     },
     
     resize: function(){
-        this.canvasEl().dom.width = this.el.dom.offsetWidth;
+        
+        var style = window.getComputedStyle ? 
+            getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
+        
+        var padding_left = parseInt(style.paddingLeft) || 0;
+        var padding_right = parseInt(style.paddingRight) || 0;
+        
+        this.canvasEl().dom.width = this.el.dom.clientWidth - padding_left - padding_right;
     },
     
     _handleMouseDown: function(e)
     {
         if (e.browserEvent.which === 1) {
-            this._mouseButtonDown = true;
+            this.mouse_btn_down = true;
             this.strokeBegin(e);
         }
     },
     
     _handleMouseMove: function (e)
     {
-        if (this._mouseButtonDown) {
+        if (this.mouse_btn_down) {
             this.strokeMoveUpdate(e);
         }
     },
     
     _handleMouseUp: function (e)
     {
-        if (e.browserEvent.which === 1 && this._mouseButtonDown) {
-            this._mouseButtonDown = false;
+        if (e.browserEvent.which === 1 && this.mouse_btn_down) {
+            this.mouse_btn_down = false;
             this.strokeEnd(e);
         }
     },
@@ -215,8 +220,8 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     reset: function () {
         this._lastPoints = [];
         this._lastVelocity = 0;
-        this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-        this.canvasElCtx().fillStyle = this.penColor;
+        this._lastWidth = (this.min_width + this.max_width) / 2;
+        this.canvasElCtx().fillStyle = this.dot_color;
     },
     
     strokeMoveUpdate: function(e)
@@ -234,7 +239,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     strokeBegin: function(e)
     {
         var newPointGroup = {
-            color: this.penColor,
+            color: this.dot_color,
             points: []
         };
         
@@ -242,7 +247,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             this.onBegin(e);
         }
         
-        this._data.push(newPointGroup);
+        this.curve_data.push(newPointGroup);
         this.reset();
         this.strokeUpdate(e);
     },
@@ -251,11 +256,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     {
         var rect = this.canvasEl().dom.getBoundingClientRect();
         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
-        var lastPointGroup = this._data[this._data.length - 1];
+        var lastPointGroup = this.curve_data[this.curve_data.length - 1];
         var lastPoints = lastPointGroup.points;
         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
         var isLastPointTooClose = lastPoint
-            ? point.distanceTo(lastPoint) <= this.minDistance
+            ? point.distanceTo(lastPoint) <= this.min_distance
             : false;
         var color = lastPointGroup.color;
         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
@@ -298,10 +303,10 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     },
     
     calculateCurveWidths: function (startPoint, endPoint) {
-        var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-            (1 - this.velocityFilterWeight) * this._lastVelocity;
+        var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
+            (1 - this.velocity_filter_weight) * this._lastVelocity;
 
-        var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+        var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
         var widths = {
             end: newWidth,
             start: this._lastWidth
@@ -315,7 +320,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     drawDot: function (_a) {
         var color = _a.color, point = _a.point;
         var ctx = this.canvasElCtx();
-        var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+        var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
         ctx.beginPath();
         this.drawCurveSegment(point.x, point.y, width);
         ctx.closePath();
@@ -356,19 +361,19 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         var ctx = this.canvasElCtx();
         ctx.moveTo(x, y);
         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
-        this._isEmpty = false;
+        this.is_empty = false;
     },
     
     clear: function()
     {
         var ctx = this.canvasElCtx();
         var canvas = this.canvasEl().dom;
-        ctx.fillStyle = this.backgroundColor;
+        ctx.fillStyle = this.bg_color;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.fillRect(0, 0, canvas.width, canvas.height);
-        this._data = [];
+        this.curve_data = [];
         this.reset();
-        this._isEmpty = true;
+        this.is_empty = true;
     },
     
     canvasEl: function()
@@ -383,7 +388,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     getImage: function(type)
     {
-        if(this._isEmpty) {
+        if(this.is_empty) {
             return false;
         }
         
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 3fa894c7fc..916b94c800 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -41525,11 +41525,11 @@ Roo.bootstrap.BezierSignature = function(config){
 
 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
-    _data: [],
+    curve_data: [],
     
-    _isEmpty: true,
+    is_empty: true,
     
-    _mouseButtonDown: true,
+    mouse_btn_down: true,
     
     /**
      * @cfg(int) canvas height
@@ -41539,17 +41539,17 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     /**
      * @cfg(float or function) Radius of a single dot.
      */ 
-    dotSize: false,
+    dot_size: false,
     
     /**
      * @cfg(float) Minimum width of a line. Defaults to 0.5.
      */
-    minWidth: 0.5,
+    min_width: 0.5,
     
     /**
      * @cfg(float) Maximum width of a line. Defaults to 2.5.
      */
-    maxWidth: 2.5,
+    max_width: 2.5,
     
     /**
      * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
@@ -41559,22 +41559,22 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     /**
      * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
      */
-    minDistance: 5,
+    min_distance: 5,
     
     /**
      * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
      */
-    backgroundColor: 'rgba(0, 0, 0, 0)',
+    bg_color: 'rgba(0, 0, 0, 0)',
     
     /**
      * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
      */
-    penColor: 'black',
+    dot_color: 'black',
     
     /**
      * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
      */
-    velocityFilterWeight: 0.7,
+    velocity_filter_weight: 0.7,
     
     /**
      * @cfg(function) Callback when stroke begin.
@@ -41639,7 +41639,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         canvas.dom.style.touchAction = 'none';
         canvas.dom.style.msTouchAction = 'none';
         
-        this._mouseButtonDown = false;
+        this.mouse_btn_down = false;
         canvas.on('mousedown', this._handleMouseDown, this);
         canvas.on('mousemove', this._handleMouseMove, this);
         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
@@ -41650,9 +41650,7 @@ 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);
-        }
+        Roo.EventManager.onWindowResize(this.resize, this, true);
         
         this.clear();
         
@@ -41660,28 +41658,35 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     },
     
     resize: function(){
-        this.canvasEl().dom.width = this.el.dom.offsetWidth;
+        
+        var style = window.getComputedStyle ? 
+            getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
+        
+        var padding_left = parseInt(style.paddingLeft) || 0;
+        var padding_right = parseInt(style.paddingRight) || 0;
+        
+        this.canvasEl().dom.width = this.el.dom.clientWidth - padding_left - padding_right;
     },
     
     _handleMouseDown: function(e)
     {
         if (e.browserEvent.which === 1) {
-            this._mouseButtonDown = true;
+            this.mouse_btn_down = true;
             this.strokeBegin(e);
         }
     },
     
     _handleMouseMove: function (e)
     {
-        if (this._mouseButtonDown) {
+        if (this.mouse_btn_down) {
             this.strokeMoveUpdate(e);
         }
     },
     
     _handleMouseUp: function (e)
     {
-        if (e.browserEvent.which === 1 && this._mouseButtonDown) {
-            this._mouseButtonDown = false;
+        if (e.browserEvent.which === 1 && this.mouse_btn_down) {
+            this.mouse_btn_down = false;
             this.strokeEnd(e);
         }
     },
@@ -41716,8 +41721,8 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     reset: function () {
         this._lastPoints = [];
         this._lastVelocity = 0;
-        this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-        this.canvasElCtx().fillStyle = this.penColor;
+        this._lastWidth = (this.min_width + this.max_width) / 2;
+        this.canvasElCtx().fillStyle = this.dot_color;
     },
     
     strokeMoveUpdate: function(e)
@@ -41735,7 +41740,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     strokeBegin: function(e)
     {
         var newPointGroup = {
-            color: this.penColor,
+            color: this.dot_color,
             points: []
         };
         
@@ -41743,7 +41748,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             this.onBegin(e);
         }
         
-        this._data.push(newPointGroup);
+        this.curve_data.push(newPointGroup);
         this.reset();
         this.strokeUpdate(e);
     },
@@ -41752,11 +41757,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     {
         var rect = this.canvasEl().dom.getBoundingClientRect();
         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
-        var lastPointGroup = this._data[this._data.length - 1];
+        var lastPointGroup = this.curve_data[this.curve_data.length - 1];
         var lastPoints = lastPointGroup.points;
         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
         var isLastPointTooClose = lastPoint
-            ? point.distanceTo(lastPoint) <= this.minDistance
+            ? point.distanceTo(lastPoint) <= this.min_distance
             : false;
         var color = lastPointGroup.color;
         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
@@ -41799,10 +41804,10 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     },
     
     calculateCurveWidths: function (startPoint, endPoint) {
-        var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-            (1 - this.velocityFilterWeight) * this._lastVelocity;
+        var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
+            (1 - this.velocity_filter_weight) * this._lastVelocity;
 
-        var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+        var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
         var widths = {
             end: newWidth,
             start: this._lastWidth
@@ -41816,7 +41821,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     drawDot: function (_a) {
         var color = _a.color, point = _a.point;
         var ctx = this.canvasElCtx();
-        var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+        var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
         ctx.beginPath();
         this.drawCurveSegment(point.x, point.y, width);
         ctx.closePath();
@@ -41857,19 +41862,19 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         var ctx = this.canvasElCtx();
         ctx.moveTo(x, y);
         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
-        this._isEmpty = false;
+        this.is_empty = false;
     },
     
     clear: function()
     {
         var ctx = this.canvasElCtx();
         var canvas = this.canvasEl().dom;
-        ctx.fillStyle = this.backgroundColor;
+        ctx.fillStyle = this.bg_color;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.fillRect(0, 0, canvas.width, canvas.height);
-        this._data = [];
+        this.curve_data = [];
         this.reset();
-        this._isEmpty = true;
+        this.is_empty = true;
     },
     
     canvasEl: function()
@@ -41884,7 +41889,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     getImage: function(type)
     {
-        if(this._isEmpty) {
+        if(this.is_empty) {
             return false;
         }
         
diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 5fc76a5b10..1663693cd7 100644
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -1731,29 +1731,29 @@ 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);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';
+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._mouseButtonDown=false;A.on('mousedown',this._handleMouseDown,this);
+]}]};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);
-}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);
-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)};};Bezier.prototype.length=function(){var A=10;var B=0;var px;var py;
-for(var i=0;i<=A;i+=1){var t=i/A;var cx=this.point(t,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x);var cy=this.point(t,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(i>0){var C=cx-px;var D=cy-py;B+=Math.sqrt(C*C+D*D);
-}px=cx;py=cy;}return B;};Bezier.prototype.point=function(t,A,c1,c2,B){return (A*(1.0-t)*(1.0-t)*(1.0-t))+(3.0*c1*(1.0-t)*(1.0-t)*t)+(3.0*c2*(1.0-t)*t*t)+(B*t*t*t);};return Bezier;}()),throttle:function(fn,A){if(A===void 0){A=250;}var B=0;var C=null;var D;
-var E;var F;var G=function(){B=Date.now();C=null;D=fn.apply(E,F);if(!C){E=null;F=[];}};return function H(){var I=[];for(var _i=0;_i<arguments.length;_i++){I[_i]=arguments[_i];}var J=Date.now();var K=A-(J-B);E=this;F=I;if(K<=0||K>A){if(C){clearTimeout(C);C=null;
-}B=J;D=fn.apply(E,F);if(!C){E=null;F=[];}}else if(!C){C=window.setTimeout(G,K);}return D;};}});
+}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;
+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);
+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.velocity_filter_weight*B.velocityFrom(A)+(1-this.velocity_filter_weight)*this._lastVelocity;
+var D=Math.max(this.max_width/(C+1),this.min_width);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.dot_size==='function'?this.dot_size():this.dot_size;
+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.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;
+};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)}
+;};Bezier.prototype.length=function(){var A=10;var B=0;var px;var py;for(var i=0;i<=A;i+=1){var t=i/A;var cx=this.point(t,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x);var cy=this.point(t,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);
+if(i>0){var C=cx-px;var D=cy-py;B+=Math.sqrt(C*C+D*D);}px=cx;py=cy;}return B;};Bezier.prototype.point=function(t,A,c1,c2,B){return (A*(1.0-t)*(1.0-t)*(1.0-t))+(3.0*c1*(1.0-t)*(1.0-t)*t)+(3.0*c2*(1.0-t)*t*t)+(B*t*t*t);};return Bezier;}()),throttle:function(fn,A){if(A===void 0){A=250;
+}var B=0;var C=null;var D;var E;var F;var G=function(){B=Date.now();C=null;D=fn.apply(E,F);if(!C){E=null;F=[];}};return function H(){var I=[];for(var _i=0;_i<arguments.length;_i++){I[_i]=arguments[_i];}var J=Date.now();var K=A-(J-B);E=this;F=I;if(K<=0||K>A){if(C){clearTimeout(C);
+C=null;}B=J;D=fn.apply(E,F);if(!C){E=null;F=[];}}else if(!C){C=window.setTimeout(G,K);}return D;};}});