FIX: bezier resize without width

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 4f56030..c991fff 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -41623,6 +41623,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                             width: this.canvas_width
                         }
                     ]
+                },
+                {
+                    tag: 'input',
+                    type: 'file',
+                    style: 'display: none'
                 }
             ]
         };
@@ -41659,6 +41664,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         Roo.EventManager.onWindowResize(this.resize, this, true);
         
+        // file input event
+        this.fileEl().on('change', this.uploadImage, this);
+        
         this.clear();
         
         this.resize();
@@ -41668,8 +41676,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         var canvas = this.canvasEl().dom;
         var ctx = this.canvasElCtx();
-        var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        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;
         
@@ -41681,7 +41692,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
         
-        ctx.putImageData(img_data, 0, 0);
+        if(img_data) {
+            ctx.putImageData(img_data, 0, 0);
+        }
     },
     
     _handleMouseDown: function(e)
@@ -41894,6 +41907,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         this.is_empty = true;
     },
     
+    fileEl: function()
+    {
+        return  this.el.select('input',true).first();
+    },
+    
     canvasEl: function()
     {
         return this.el.select('canvas',true).first();
@@ -41927,6 +41945,27 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         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) {