FIX: bezier resize without width

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 916b94c..c991fff 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -7903,7 +7903,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();
@@ -41622,6 +41623,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                             width: this.canvas_width
                         }
                     ]
+                },
+                {
+                    tag: 'input',
+                    type: 'file',
+                    style: 'display: none'
                 }
             ]
         };
@@ -41644,7 +41650,13 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         canvas.on('mousemove', this._handleMouseMove, this);
         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
         
-        if (window.ontouchstart) {
+        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);
@@ -41652,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();
@@ -41659,13 +41674,27 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     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;
         
-        this.canvasEl().dom.width = this.el.dom.clientWidth - padding_left - padding_right;
+        canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
+        
+        if(img_data) {
+            ctx.putImageData(img_data, 0, 0);
+        }
     },
     
     _handleMouseDown: function(e)
@@ -41692,6 +41721,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     },
     
     _handleTouchStart: function (e) {
+        
         e.preventDefault();
         if (e.browserEvent.targetTouches.length === 1) {
             // var touch = e.browserEvent.changedTouches[0];
@@ -41705,7 +41735,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         e.preventDefault();
         // var touch = event.targetTouches[0];
         // _this._strokeMoveUpdate(touch);
-        this._strokeMoveUpdate(e);
+        this.strokeMoveUpdate(e);
     },
     
     _handleTouchEnd: function (e) {
@@ -41877,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();
@@ -41894,16 +41929,41 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         }
         
         // encryption ?
-        return this.canvasEl().dom.toDataURL('image/'+type, false);
+        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.canvasElCtx().drawImage(img, 0, 0);
+        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