Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
+ _data: [],
+
+ _mouseButtonDown: true,
+
/**
* @cfg(float or function) Radius of a single dot.
*/
*/
onEnd: false,
+ getAutoCreate : function()
+ {
+ var cls = 'roo-signature';
+
+ if(this.cls){
+ cls += ' ' + this.cls;
+ }
+
+ var cfg = {
+ tag: 'div',
+ cls: cls,
+ cn: [
+ {
+ tag: 'div',
+ cls: 'roo-signature-body',
+ cn: [
+ {
+ tag: 'canvas',
+ cls: 'roo-signature-body-canvas'
+ }
+ ]
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
+
+ var canvas = this.canvasEl();
+
+ canvas.dom.style.touchAction = 'none';
+ canvas.dom.style.msTouchAction = 'none';
+
+ this._mouseButtonDown = false;
+ canvas.on('mousedown', this._handleMouseDown, this);
+ canvas.on('mousemove', this._handleMouseMove, this);
+ // catching mouseup for whole doc... any better way to catch it
+ Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
+
+ if (window.ontouchstart) {
+ canvas.on('touchstart', this._handleTouchStart, this);
+ canvas.on('touchmove', this._handleTouchMove, this);
+ canvas.on('touchend', this._handleTouchEnd, this);
+ }
+
+ // this.canvas.on('click', this.onClick, this);
+ },
+
+ _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);
+ }
+ },
+
+ 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 newPointGroup = {
+ color: this.penColor,
+ points: []
+ };
+
+ if (typeof this.onBegin === 'function') {
+ this.onBegin(e);
+ }
+
+ this._data.push(newPointGroup);
+ this.reset();
+ this.strokeUpdate(e);
+ },
+
+ strokeUpdate: function(e)
+ {
+ var rect = this.canvasEl().dom.getBoundingClientRect();
+ var point = new this.Point(e.browserEvent.clientX - rect.left, e.browserEvent.clientY - rect.top, new Date().getTime());
+ var lastPointGroup = this._data[this._data.length - 1];
+ var lastPoints = lastPointGroup.points;
+ var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
+ var isLastPointTooClose = lastPoint
+ ? point.distanceTo(lastPoint) <= this.minDistance
+ : false;
+ var color = lastPointGroup.color;
+ if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+ var curve = this.addPoint(point);
+ if (!lastPoint) {
+ this.drawDot({color: color, point: point});
+ }
+ else if (curve) {
+ this.drawCurve({color: color, curve: curve});
+ }
+ lastPoints.push({
+ time: point.time,
+ x: point.x,
+ y: point.y
+ });
+ }
+ },
+
+ strokeEnd: function(e)
+ {
+ this.strokeUpdate(e);
+ if (typeof this.onEnd === 'function') {
+ this.onEnd(e);
+ }
+ },
+
+ addPoint: function (point) {
+ var _lastPoints = this._lastPoints;
+ _lastPoints.push(point);
+ if (_lastPoints.length > 2) {
+ if (_lastPoints.length === 3) {
+ _lastPoints.unshift(_lastPoints[0]);
+ }
+ var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+ var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
+ _lastPoints.shift();
+ return curve;
+ }
+ return null;
+ },
+
+ calculateCurveWidths: function (startPoint, endPoint) {
+ var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+ (1 - this.velocityFilterWeight) * this._lastVelocity;
+
+ var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+ var widths = {
+ end: newWidth,
+ start: this._lastWidth
+ };
+
+ this._lastVelocity = velocity;
+ this._lastWidth = newWidth;
+ return widths;
+ },
+
+ drawDot: function (_a) {
+ var color = _a.color, point = _a.point;
+ var ctx = this.canvasElCtx();
+ var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+ ctx.beginPath();
+ this.drawCurveSegment(point.x, point.y, width);
+ ctx.closePath();
+ ctx.fillStyle = color;
+ ctx.fill();
+ },
+
+ drawCurve: function (_a) {
+ var color = _a.color, curve = _a.curve;
+ var ctx = this.canvasElCtx();
+ var widthDelta = curve.endWidth - curve.startWidth;
+ var drawSteps = Math.floor(curve.length()) * 2;
+ ctx.beginPath();
+ ctx.fillStyle = color;
+ for (var i = 0; i < drawSteps; i += 1) {
+ var t = i / drawSteps;
+ var tt = t * t;
+ var ttt = tt * t;
+ var u = 1 - t;
+ var uu = u * u;
+ var uuu = uu * u;
+ var x = uuu * curve.startPoint.x;
+ x += 3 * uu * t * curve.control1.x;
+ x += 3 * u * tt * curve.control2.x;
+ x += ttt * curve.endPoint.x;
+ var y = uuu * curve.startPoint.y;
+ y += 3 * uu * t * curve.control1.y;
+ y += 3 * u * tt * curve.control2.y;
+ y += ttt * curve.endPoint.y;
+ var width = curve.startWidth + ttt * widthDelta;
+ this.drawCurveSegment(x, y, width);
+ }
+ ctx.closePath();
+ ctx.fill();
+ },
+
+ drawCurveSegment: function (x, y, width) {
+ var ctx = this.canvasElCtx();
+ ctx.moveTo(x, y);
+ ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+ this._isEmpty = false;
+ },
+
+ isValid: function()
+ {
+ // form cannot detect...
+ },
+
+ canvasEl: function()
+ {
+ return this.el.select('canvas',true).first();
+ },
+
+ canvasElCtx: function()
+ {
+ return this.el.select('canvas',true).first().dom.getContext('2d');
+ },
+
+ // Bezier Point Constructor
Point: (function () {
function Point(x, y, time) {
this.x = x;
return Point;
}()),
+
+ // Bezier Constructor
Bezier: (function () {
function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
this.startPoint = startPoint;
this.startWidth = startWidth;
this.endWidth = endWidth;
}
- Bezier.fromPoints = function (points, widths) {
- var c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
- var c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+ Bezier.fromPoints = function (points, widths, scope) {
+ var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
+ var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
};
- Bezier.calculateControlPoints = function (s1, s2, s3) {
+ Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
var dx1 = s1.x - s2.x;
var dy1 = s1.y - s2.y;
var dx2 = s2.x - s3.x;
var tx = s2.x - cm.x;
var ty = s2.y - cm.y;
return {
- c1: new Point(m1.x + tx, m1.y + ty),
- c2: new Point(m2.x + tx, m2.y + ty)
+ c1: new scope.Point(m1.x + tx, m1.y + ty),
+ c2: new scope.Point(m2.x + tx, m2.y + ty)
};
};
Bezier.prototype.length = function () {
return Bezier;
}()),
- getAutoCreate : function()
- {
- var cls = 'roo-signature';
-
- if(this.cls){
- cls += ' ' + this.cls;
- }
-
- var cfg = {
- tag: 'div',
- cls: cls,
- cn: [
- {
- tag: 'div',
- cls: 'roo-signature-body',
- cn: [
- {
- tag: 'canvas',
- cls: 'roo-signature-body-canvas'
- }
- ]
- }
- ]
- };
-
- return cfg;
- },
-
- initEvents: function()
- {
- Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
- // assign all object in here...
- },
-
- isValid: function()
- {
- // form cannot detect...
- },
-
- canvasEl: function()
- {
- // catching canvas
- }
-
+ throttle: function(fn, wait) {
+ if (wait === void 0) { wait = 250; }
+ var previous = 0;
+ var timeout = null;
+ var result;
+ var storedContext;
+ var storedArgs;
+ var later = function () {
+ previous = Date.now();
+ timeout = null;
+ result = fn.apply(storedContext, storedArgs);
+ if (!timeout) {
+ storedContext = null;
+ storedArgs = [];
+ }
+ };
+ return function wrapper() {
+ var args = [];
+ for (var _i = 0; _i < arguments.length; _i++) {
+ args[_i] = arguments[_i];
+ }
+ var now = Date.now();
+ var remaining = wait - (now - previous);
+ storedContext = this;
+ storedArgs = args;
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
+ }
+ previous = now;
+ result = fn.apply(storedContext, storedArgs);
+ if (!timeout) {
+ storedContext = null;
+ storedArgs = [];
+ }
+ }
+ else if (!timeout) {
+ timeout = window.setTimeout(later, remaining);
+ }
+ return result;
+ };
+ }
+
});
Roo.bootstrap.BezierSignature = function(config){
Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
-
- // this.addEvents({
- // // raw events
- // /**
- // * @event click
- // * When a Brick is click
- // * @param {Roo.bootstrap.Brick} this
- // * @param {Roo.EventObject} e
- // */
- // "click" : true
- // });
};
Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
+ _data: [],
+
+ _mouseButtonDown: true,
+
/**
* @cfg(float or function) Radius of a single dot.
*/
*/
onEnd: false,
+ getAutoCreate : function()
+ {
+ var cls = 'roo-signature';
+
+ if(this.cls){
+ cls += ' ' + this.cls;
+ }
+
+ var cfg = {
+ tag: 'div',
+ cls: cls,
+ cn: [
+ {
+ tag: 'div',
+ cls: 'roo-signature-body',
+ cn: [
+ {
+ tag: 'canvas',
+ cls: 'roo-signature-body-canvas'
+ }
+ ]
+ }
+ ]
+ };
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
+
+ var canvas = this.canvasEl();
+
+ canvas.dom.style.touchAction = 'none';
+ canvas.dom.style.msTouchAction = 'none';
+
+ this._mouseButtonDown = false;
+ canvas.on('mousedown', this._handleMouseDown, this);
+ canvas.on('mousemove', this._handleMouseMove, this);
+ // catching mouseup for whole doc... any better way to catch it
+ Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
+
+ if (window.ontouchstart) {
+ canvas.on('touchstart', this._handleTouchStart, this);
+ canvas.on('touchmove', this._handleTouchMove, this);
+ canvas.on('touchend', this._handleTouchEnd, this);
+ }
+
+ // this.canvas.on('click', this.onClick, this);
+ },
+
+ _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);
+ }
+ },
+
+ 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 newPointGroup = {
+ color: this.penColor,
+ points: []
+ };
+
+ if (typeof this.onBegin === 'function') {
+ this.onBegin(e);
+ }
+
+ this._data.push(newPointGroup);
+ this.reset();
+ this.strokeUpdate(e);
+ },
+
+ strokeUpdate: function(e)
+ {
+ var rect = this.canvasEl().dom.getBoundingClientRect();
+ var point = new this.Point(e.browserEvent.clientX - rect.left, e.browserEvent.clientY - rect.top, new Date().getTime());
+ var lastPointGroup = this._data[this._data.length - 1];
+ var lastPoints = lastPointGroup.points;
+ var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
+ var isLastPointTooClose = lastPoint
+ ? point.distanceTo(lastPoint) <= this.minDistance
+ : false;
+ var color = lastPointGroup.color;
+ if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+ var curve = this.addPoint(point);
+ if (!lastPoint) {
+ this.drawDot({color: color, point: point});
+ }
+ else if (curve) {
+ this.drawCurve({color: color, curve: curve});
+ }
+ lastPoints.push({
+ time: point.time,
+ x: point.x,
+ y: point.y
+ });
+ }
+ },
+
+ strokeEnd: function(e)
+ {
+ this.strokeUpdate(e);
+ if (typeof this.onEnd === 'function') {
+ this.onEnd(e);
+ }
+ },
+
+ addPoint: function (point) {
+ var _lastPoints = this._lastPoints;
+ _lastPoints.push(point);
+ if (_lastPoints.length > 2) {
+ if (_lastPoints.length === 3) {
+ _lastPoints.unshift(_lastPoints[0]);
+ }
+ var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+ var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
+ _lastPoints.shift();
+ return curve;
+ }
+ return null;
+ },
+
+ calculateCurveWidths: function (startPoint, endPoint) {
+ var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+ (1 - this.velocityFilterWeight) * this._lastVelocity;
+
+ var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+ var widths = {
+ end: newWidth,
+ start: this._lastWidth
+ };
+
+ this._lastVelocity = velocity;
+ this._lastWidth = newWidth;
+ return widths;
+ },
+
+ drawDot: function (_a) {
+ var color = _a.color, point = _a.point;
+ var ctx = this.canvasElCtx();
+ var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+ ctx.beginPath();
+ this.drawCurveSegment(point.x, point.y, width);
+ ctx.closePath();
+ ctx.fillStyle = color;
+ ctx.fill();
+ },
+
+ drawCurve: function (_a) {
+ var color = _a.color, curve = _a.curve;
+ var ctx = this.canvasElCtx();
+ var widthDelta = curve.endWidth - curve.startWidth;
+ var drawSteps = Math.floor(curve.length()) * 2;
+ ctx.beginPath();
+ ctx.fillStyle = color;
+ for (var i = 0; i < drawSteps; i += 1) {
+ var t = i / drawSteps;
+ var tt = t * t;
+ var ttt = tt * t;
+ var u = 1 - t;
+ var uu = u * u;
+ var uuu = uu * u;
+ var x = uuu * curve.startPoint.x;
+ x += 3 * uu * t * curve.control1.x;
+ x += 3 * u * tt * curve.control2.x;
+ x += ttt * curve.endPoint.x;
+ var y = uuu * curve.startPoint.y;
+ y += 3 * uu * t * curve.control1.y;
+ y += 3 * u * tt * curve.control2.y;
+ y += ttt * curve.endPoint.y;
+ var width = curve.startWidth + ttt * widthDelta;
+ this.drawCurveSegment(x, y, width);
+ }
+ ctx.closePath();
+ ctx.fill();
+ },
+
+ drawCurveSegment: function (x, y, width) {
+ var ctx = this.canvasElCtx();
+ ctx.moveTo(x, y);
+ ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+ this._isEmpty = false;
+ },
+
+ isValid: function()
+ {
+ // form cannot detect...
+ },
+
+ canvasEl: function()
+ {
+ return this.el.select('canvas',true).first();
+ },
+
+ canvasElCtx: function()
+ {
+ return this.el.select('canvas',true).first().dom.getContext('2d');
+ },
+
+ // Bezier Point Constructor
Point: (function () {
function Point(x, y, time) {
this.x = x;
return Point;
}()),
+
+ // Bezier Constructor
Bezier: (function () {
function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
this.startPoint = startPoint;
this.startWidth = startWidth;
this.endWidth = endWidth;
}
- Bezier.fromPoints = function (points, widths) {
- var c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
- var c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+ Bezier.fromPoints = function (points, widths, scope) {
+ var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
+ var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
};
- Bezier.calculateControlPoints = function (s1, s2, s3) {
+ Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
var dx1 = s1.x - s2.x;
var dy1 = s1.y - s2.y;
var dx2 = s2.x - s3.x;
var tx = s2.x - cm.x;
var ty = s2.y - cm.y;
return {
- c1: new Point(m1.x + tx, m1.y + ty),
- c2: new Point(m2.x + tx, m2.y + ty)
+ c1: new scope.Point(m1.x + tx, m1.y + ty),
+ c2: new scope.Point(m2.x + tx, m2.y + ty)
};
};
Bezier.prototype.length = function () {
return Bezier;
}()),
- getAutoCreate : function()
- {
- Roo.log('runing???');
-
- var cls = 'roo-signature';
-
- if(this.cls){
- cls += ' ' + this.cls;
- }
-
- var cfg = {
- tag: 'div',
- cls: cls,
- cn: [
- {
- tag: 'div',
- cls: 'roo-signature-body',
- cn: [
- {
- tag: 'canvas',
- cls: 'roo-signature-body-canvas'
- }
- ]
- }
- ]
- };
-
- return cfg;
- },
-
- initEvents: function()
- {
- Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
- // assign all object in here...
- },
-
- isValid: function()
- {
- // form cannot detect...
- },
-
- canvasEl: function()
- {
- // catching canvas
- }
-
+ throttle: function(fn, wait) {
+ if (wait === void 0) { wait = 250; }
+ var previous = 0;
+ var timeout = null;
+ var result;
+ var storedContext;
+ var storedArgs;
+ var later = function () {
+ previous = Date.now();
+ timeout = null;
+ result = fn.apply(storedContext, storedArgs);
+ if (!timeout) {
+ storedContext = null;
+ storedArgs = [];
+ }
+ };
+ return function wrapper() {
+ var args = [];
+ for (var _i = 0; _i < arguments.length; _i++) {
+ args[_i] = arguments[_i];
+ }
+ var now = Date.now();
+ var remaining = wait - (now - previous);
+ storedContext = this;
+ storedArgs = args;
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
+ }
+ previous = now;
+ result = fn.apply(storedContext, storedArgs);
+ if (!timeout) {
+ storedContext = null;
+ storedArgs = [];
+ }
+ }
+ else if (!timeout) {
+ timeout = window.setTimeout(later, remaining);
+ }
+ return result;
+ };
+ }
+
});
}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,{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,Point:(function(){function Point(x,y,A){this.x=x;
+Roo.bootstrap.BezierSignature=function(A){Roo.bootstrap.BezierSignature.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.BezierSignature,Roo.bootstrap.Component,{_data:[],_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);}},_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);}},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.browserEvent.clientX-A.left,e.browserEvent.clientY-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;},isValid:function(){},canvasEl:function(){return this.el.select('canvas',true).first();},canvasElCtx:function(){return this.el.select('canvas',true).first().dom.getContext('2d');},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){var c2=this.calculateControlPoints(A[0],A[1],A[2]).c2;
-var c3=this.calculateControlPoints(A[1],A[2],A[3]).c1;return new Bezier(A[1],c2,c3,A[2],B.start,B.end);};Bezier.calculateControlPoints=function(s1,s2,s3){var A=s1.x-s2.x;var B=s1.y-s2.y;var C=s2.x-s3.x;var D=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(A*A+B*B);var l2=Math.sqrt(C*C+D*D);var E=m1.x-m2.x;var F=m1.y-m2.y;var k=l2/(l1+l2);var cm={x:m2.x+E*k,y:m2.y+F*k};var tx=s2.x-cm.x;var ty=s2.y-cm.y;return {c1:new Point(m1.x+tx,m1.y+ty),c2:new Point(m2.x+tx,m2.y+ty)}
+};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;}()),getAutoCreate:function(){Roo.log('runing???');
-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);
-},isValid:function(){},canvasEl:function(){}});
+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;};}});