Uncommited changes synced
[roojs1] / roojs-bootstrap-debug.js
index a260690..bcb5ad7 100644 (file)
@@ -2060,13 +2060,13 @@ Roo.bootstrap.Menu = function(config){
     this.addEvents({
         /**
          * @event beforeshow
-         * Fires before this menu is displayed
+         * Fires before this menu is displayed (return false to block)
          * @param {Roo.menu.Menu} this
          */
         beforeshow : true,
         /**
          * @event beforehide
-         * Fires before this menu is hidden
+         * Fires before this menu is hidden (return false to block)
          * @param {Roo.menu.Menu} this
          */
         beforehide : true,
@@ -2268,7 +2268,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     isVisible : function(){
         return !this.hidden;
     },
-     onMouseOut : function(e){
+    onMouseOut : function(e){
         var t  = this.findTargetItem(e);
         
         //if(t ){
@@ -2288,12 +2288,17 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
      * the element (defaults to this.defaultAlign)
      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
      */
-    show : function(el, pos, parentMenu){
-        this.parentMenu = parentMenu;
+    show : function(el, pos, parentMenu)
+    {
+        if (false === this.fireEvent("beforeshow", this)) {
+           Roo.log("show canceled");
+           return;
+       }
+       this.parentMenu = parentMenu;
         if(!this.el){
             this.render();
         }
-        this.fireEvent("beforeshow", this);
+        
         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
     },
      /**
@@ -2356,10 +2361,13 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
      */
     hide : function(deep)
     {
-        
+        if (false === this.fireEvent("beforehide", this)) {
+           Roo.log("hide canceled");
+           return;
+       }
         this.hideMenuItems();
         if(this.el && this.isVisible()){
-            this.fireEvent("beforehide", this);
+           
             if(this.activeItem){
                 this.activeItem.deactivate();
                 this.activeItem = null;
@@ -2426,16 +2434,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         if (!this.el) { 
             return;
         }
-        //$(backdrop).remove()
+        
         this.el.select('.open',true).each(function(aa) {
             
             aa.removeClass('open');
-          //var parent = getParent($(this))
-          //var relatedTarget = { relatedTarget: this }
-          
-           //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
-          //if (e.isDefaultPrevented()) return
-           //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+         
         });
     },
     addxtypeChild : function (tree, cntr) {
@@ -3875,46 +3878,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     initEvents :function ()
     {
         //Roo.log(this.el.select('.navbar-toggle',true));
-        this.el.select('.navbar-toggle',true).on('click', function() {
-            if(this.fireEvent('beforetoggle', this) !== false){
-                var ce = this.el.select('.navbar-collapse',true).first();
-                ce.toggleClass('in'); // old...
-                if (ce.hasClass('collapse')) {
-                    // show it...
-                    ce.removeClass('collapse');
-                    ce.addClass('show');
-                    var h = ce.getHeight();
-                    Roo.log(h);
-                    ce.removeClass('show');
-                    // at this point we should be able to see it..
-                    ce.addClass('collapsing');
-                    
-                    ce.setHeight(0); // resize it ...
-                    ce.on('transitionend', function() {
-                        Roo.log('done transition');
-                        ce.removeClass('collapsing');
-                        ce.addClass('show');
-                        ce.removeClass('collapse');
-
-                        ce.dom.style.height = '';
-                    }, this, { single: true} );
-                    ce.setHeight(h);
-                    
-                } else {
-                    ce.setHeight(ce.getHeight());
-                    ce.removeClass('show');
-                    ce.addClass('collapsing');
-                    
-                    ce.on('transitionend', function() {
-                        ce.dom.style.height = '';
-                        ce.removeClass('collapsing');
-                        ce.addClass('collapse');
-                    }, this, { single: true} );
-                    ce.setHeight(0);
-                }
-            }
-            
-        }, this);
+        this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
         
         var mark = {
             tag: "div",
@@ -3936,7 +3900,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     
     getChildContainer : function()
     {
-        if (this.el.select('.collapse').getCount()) {
+        if (this.el && this.el.select('.collapse').getCount()) {
             return this.el.select('.collapse',true).first();
         }
         
@@ -3951,8 +3915,80 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     unmask : function()
     {
         this.maskEl.hide();
-    } 
+    },
+    onToggle : function()
+    {
+        
+        if(this.fireEvent('beforetoggle', this) === false){
+            return;
+        }
+        var ce = this.el.select('.navbar-collapse',true).first();
+      
+        if (!ce.hasClass('show')) {
+           this.expand();
+        } else {
+            this.collapse();
+        }
+        
+        
     
+    },
+    /**
+     * Expand the navbar pulldown 
+     */
+    expand : function ()
+    {
+       
+        var ce = this.el.select('.navbar-collapse',true).first();
+        if (ce.hasClass('collapsing')) {
+            return;
+        }
+        ce.dom.style.height = '';
+               // show it...
+        ce.addClass('in'); // old...
+        ce.removeClass('collapse');
+        ce.addClass('show');
+        var h = ce.getHeight();
+        Roo.log(h);
+        ce.removeClass('show');
+        // at this point we should be able to see it..
+        ce.addClass('collapsing');
+        
+        ce.setHeight(0); // resize it ...
+        ce.on('transitionend', function() {
+            //Roo.log('done transition');
+            ce.removeClass('collapsing');
+            ce.addClass('show');
+            ce.removeClass('collapse');
+
+            ce.dom.style.height = '';
+        }, this, { single: true} );
+        ce.setHeight(h);
+        ce.dom.scrollTop = 0;
+    },
+    /**
+     * Collapse the navbar pulldown 
+     */
+    collapse : function()
+    {
+         var ce = this.el.select('.navbar-collapse',true).first();
+       
+        if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
+            // it's collapsed or collapsing..
+            return;
+        }
+        ce.removeClass('in'); // old...
+        ce.setHeight(ce.getHeight());
+        ce.removeClass('show');
+        ce.addClass('collapsing');
+        
+        ce.on('transitionend', function() {
+            ce.dom.style.height = '';
+            ce.removeClass('collapsing');
+            ce.addClass('collapse');
+        }, this, { single: true} );
+        ce.setHeight(0);
+    }
     
     
     
@@ -5125,7 +5161,7 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
             e.preventDefault();
         }
         
-        this.fireEvent('click', this);
+        this.fireEvent('click', this, e);
     },
     
     disable : function()
@@ -7903,7 +7939,8 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
                 url:this.getUrl(!isPost),
                 method: method,
                 params:isPost ? this.getParams() : null,
-                isUpload: this.form.fileUpload
+                isUpload: this.form.fileUpload,
+                formData : this.form.formData
             }));
             
             this.uploadProgress();
@@ -12378,7 +12415,7 @@ Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
         params = params || {};
         var result;
         try {
-            result = reader.readRecords(this.data);
+            result = reader.readRecords(params.data ? params.data :this.data);
         }catch(e){
             this.fireEvent("loadexception", this, arg, null, e);
             callback.call(scope, null, arg, false);
@@ -12985,24 +13022,31 @@ var myReader = new Roo.data.ArrayReader({
  * <pre><code>
 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
   </code></pre>
- * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
  * @constructor
  * Create a new JsonReader
  * @param {Object} meta Metadata configuration options.
- * @param {Object} recordType Either an Array of field definition objects
+ * @param {Object|Array} recordType Either an Array of field definition objects
+ * 
+ * @cfg {Array} fields Array of field definition objects
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
  * as specified to {@link Roo.data.Record#create},
  * or an {@link Roo.data.Record} object
+ *
+ * 
  * created using {@link Roo.data.Record#create}.
  */
 Roo.data.ArrayReader = function(meta, recordType){
-    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
+    
+     
+    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
 };
 
 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
     /**
      * Create a data block containing Roo.data.Records from an XML document.
      * @param {Object} o An Array of row objects which represents the dataset.
-     * @return {Object} data A data block which is used by an Roo.data.Store object as
+     * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
      * a cache of Roo.data.Records.
      */
     readRecords : function(o){
@@ -24041,6 +24085,7 @@ Roo.namespace('Roo.bootstrap.htmleditor');
  * @class Roo.bootstrap.HtmlEditorToolbar1
  * Basic Toolbar
  * 
+ * @example
  * Usage:
  *
  new Roo.bootstrap.HtmlEditor({
@@ -27167,17 +27212,15 @@ Roo.apply(Roo.bootstrap.LocationPicker, {
     }
     
     
-});/*
- * - LGPL
- *
- * Alert
- * 
- */
-
-/**
+});/**
  * @class Roo.bootstrap.Alert
  * @extends Roo.bootstrap.Component
- * Bootstrap Alert class
+ * Bootstrap Alert class - shows an alert area box
+ * eg
+ * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
+  Enter a valid email address
+</div>
+ * @licence LGPL
  * @cfg {String} title The title of alert
  * @cfg {String} html The content of alert
  * @cfg {String} weight (  success | info | warning | danger )
@@ -41500,17 +41543,14 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
     }
     
 });/**
-*    This script refer to:
-*    Title: Signature Pad
-*    Author: szimek
-*    Availability: https://github.com/szimek/signature_pad
-**/
-
-/**
  * @class Roo.bootstrap.BezierSignature
  * @extends Roo.bootstrap.Component
  * Bootstrap BezierSignature class
- * 
+ * This script refer to:
+ *    Title: Signature Pad
+ *    Author: szimek
+ *    Availability: https://github.com/szimek/signature_pad
+ *
  * @constructor
  * Create a new BezierSignature
  * @param {Object} config The config object
@@ -41518,71 +41558,455 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
 
 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
-    // });
+    this.addEvents({
+        "resize" : true
+    });
 };
 
-Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
+Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
+{
+     
+    curve_data: [],
+    
+    is_empty: true,
+    
+    mouse_btn_down: true,
     
     /**
-     * @cfg(float or function) Radius of a single dot.
+     * @cfg {int} canvas height
+     */
+    canvas_height: '200px',
+    
+    /**
+     * @cfg {float|function} Radius of a single dot.
      */ 
-    dotSize: false,
+    dot_size: false,
     
     /**
-     * @cfg(float) Minimum width of a line. Defaults to 0.5.
+     * @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.
+     * @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.
+     * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
      */
     throttle: 16,
     
     /**
-     * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
+     * @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.
+     * @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".
+     * @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,
+     * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
+     */ 
+    velocity_filter_weight: 0.7,
     
     /**
-     * @cfg(function) Callback when stroke begin.
+     * @cfg {function} Callback when stroke begin. 
      */
     onBegin: false,
     
     /**
-     * @cfg(function) Callback when stroke end.
+     * @cfg {function} Callback when stroke end.
      */
     onEnd: false,
     
+    getAutoCreate : function()
+    {
+        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,
+            cn: [
+                {
+                    tag: 'div',
+                    cls: 'roo-signature-body',
+                    cn: [
+                        {
+                            tag: 'canvas',
+                            cls: 'roo-signature-body-canvas',
+                            height: this.canvas_height,
+                            width: this.canvas_width
+                        }
+                    ]
+                },
+                {
+                    tag: 'input',
+                    type: 'file',
+                    style: 'display: none'
+                }
+            ]
+        };
+        
+        return cfg;
+    },
+    
+    initEvents: function() 
+    {
+        Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
+        
+        var canvas = this.canvasEl();
+        
+        // mouse && touch event swapping...
+        canvas.dom.style.touchAction = 'none';
+        canvas.dom.style.msTouchAction = 'none';
+        
+        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);
+        
+        if (window.PointerEvent) {
+            canvas.on('pointerdown', this._handleMouseDown, this);
+            canvas.on('pointermove', this._handleMouseMove, this);
+            Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
+        }
+        
+        if ('ontouchstart' in window) {
+            canvas.on('touchstart', this._handleTouchStart, this);
+            canvas.on('touchmove', this._handleTouchMove, this);
+            canvas.on('touchend', this._handleTouchEnd, this);
+        }
+        
+        Roo.EventManager.onWindowResize(this.resize, this, true);
+        
+        // file input event
+        this.fileEl().on('change', this.uploadImage, this);
+        
+        this.clear();
+        
+        this.resize();
+    },
+    
+    resize: function(){
+        
+        var canvas = this.canvasEl().dom;
+        var ctx = this.canvasElCtx();
+        var img_data = false;
+        
+        if(canvas.width > 0) {
+            var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        }
+        // setting canvas width will clean img data
+        canvas.width = 0;
+        
+        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;
+        
+        canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
+        
+        if(img_data) {
+            ctx.putImageData(img_data, 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) {
+            // var touch = e.browserEvent.changedTouches[0];
+            // this.strokeBegin(touch);
+            
+             this.strokeBegin(e); // assume e catching the correct xy...
+        }
+    },
+    
+    _handleTouchMove: function (e) {
+        e.preventDefault();
+        // var touch = event.targetTouches[0];
+        // _this._strokeMoveUpdate(touch);
+        this.strokeMoveUpdate(e);
+    },
+    
+    _handleTouchEnd: function (e) {
+        var wasCanvasTouched = e.target === this.canvasEl().dom;
+        if (wasCanvasTouched) {
+            e.preventDefault();
+            // var touch = event.changedTouches[0];
+            // _this._strokeEnd(touch);
+            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.throttleStroke(this.strokeUpdate, this.throttle);
+        }
+        else {
+            this.strokeUpdate(e);
+        }
+    },
+    
+    strokeBegin: function(e)
+    {
+        var newPointGroup = {
+            color: this.dot_color,
+            points: []
+        };
+        
+        if (typeof this.onBegin === 'function') {
+            this.onBegin(e);
+        }
+        
+        this.curve_data.push(newPointGroup);
+        this.reset();
+        this.strokeUpdate(e);
+    },
+    
+    strokeUpdate: function(e)
+    {
+        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.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.min_distance
+            : 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.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
+            (1 - this.velocity_filter_weight) * this._lastVelocity;
+
+        var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
+        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.dot_size === 'function' ? this.dot_size() : this.dot_size;
+        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.is_empty = false;
+    },
+    
+    clear: function()
+    {
+        var ctx = this.canvasElCtx();
+        var canvas = this.canvasEl().dom;
+        ctx.fillStyle = this.bg_color;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        this.curve_data = [];
+        this.reset();
+        this.is_empty = true;
+    },
+    
+    fileEl: function()
+    {
+        return  this.el.select('input',true).first();
+    },
+    
+    canvasEl: function()
+    {
+        return this.el.select('canvas',true).first();
+    },
+    
+    canvasElCtx: function()
+    {
+        return this.el.select('canvas',true).first().dom.getContext('2d');
+    },
+    
+    getImage: function(type)
+    {
+        if(this.is_empty) {
+            return false;
+        }
+        
+        // encryption ?
+        return this.canvasEl().dom.toDataURL('image/'+type, 1);
+    },
+    
+    drawFromImage: function(img_src)
+    {
+        var img = new Image();
+        
+        img.onload = function(){
+            this.canvasElCtx().drawImage(img, 0, 0);
+        }.bind(this);
+        
+        img.src = img_src;
+        
+        this.is_empty = false;
+    },
+    
+    selectImage: function()
+    {
+        this.fileEl().dom.click();
+    },
+    
+    uploadImage: function(e)
+    {
+        var reader = new FileReader();
+        
+        reader.onload = function(e){
+            var img = new Image();
+            img.onload = function(){
+                this.reset();
+                this.canvasElCtx().drawImage(img, 0, 0);
+            }.bind(this);
+            img.src = e.target.result;
+        }.bind(this);
+        
+        reader.readAsDataURL(e.target.files[0]);
+    },
+    
+    // Bezier Point Constructor
     Point: (function () {
         function Point(x, y, time) {
             this.x = x;
@@ -41603,6 +42027,8 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         return Point;
     }()),
     
+    
+    // Bezier Constructor
     Bezier: (function () {
         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
             this.startPoint = startPoint;
@@ -41612,12 +42038,12 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             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;
@@ -41633,8 +42059,8 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             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 () {
@@ -41665,52 +42091,50 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         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
-    }
-    
+    throttleStroke: 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;
+      };
+  }
+  
 });