Fixed remaining mouseup bug

jquery.sketchable.js

@@ -44,7 +44,7 @@
           var sketch = new jSketch(this, {
             fillStyle: options.graphics.fillStyle,
             strokeStyle: options.graphics.strokeStyle,
-            lineWidth: options.graphics.lineWidth
+            lineWidth: options.graphics.lineWidth,
           });
           // Flag drawing state on a per-canvas basis.
           sketch.isDrawing = false;
@@ -129,6 +129,7 @@
         var elem = $(this), data = elem.data(_ns), options = data.options;
         data.sketch.clear();
         data.strokes = [];
+        data.coords  = [];
         if (typeof options.events.clear === 'function') {
           options.events.clear(elem, data);
         }
@@ -220,7 +221,7 @@
    *     destroy: function(elem, data){}, 
    *     mousedown: function(elem, data, evt){}, 
    *     mousemove: function(elem, data, evt){}, 
-   *     mouseup: function(elem, data, evt){}
+   *     mouseup: function(elem, data, evt){}, 
    *   },
    *   graphics: {
    *     firstPointSize: 0,    
@@ -246,7 +247,7 @@
       // destroy: function(elem, data){}, 
       // mousedown: function(elem, data, evt){}, 
       // mousemove: function(elem, data, evt){}, 
-      // mouseup: function(elem, data, evt){}
+      // mouseup: function(elem, data, evt){}, 
     },
     // TODO: add more jSketch config options
     graphics: {
@@ -254,9 +255,9 @@
       lineWidth: 3,
       strokeStyle: '#F0F',
       fillStyle: '#F0F'
-      //lineCap: "round",
+      //lineCap: 
-      //lineJoin: "round",
+      //lineJoin: 
-      //miterLimit: 10
+      //miterLimit: 
     }
   };
 
@@ -279,9 +280,9 @@
   
   function mousemoveHandler(e) {
     var elem = $(e.target), data = elem.data(_ns), options = data.options;
-    if (!options.mouseupMovements && !data.sketch.isDrawing) return;
+    //if (!options.mouseupMovements && !data.sketch.isDrawing) return;
-    // This would grab all penup strokes before drawing anythong on the canvas.
+    // This would grab all penup strokes AFTER drawing something on the canvas for the first time.
-    //if ( (!options.mouseupMovements || data.strokes.length === 0) && !data.sketch.isDrawing ) return;
+    if ( (!options.mouseupMovements || data.strokes.length === 0) && !data.sketch.isDrawing ) return;
     
     var p = getMousePos(e);
     if (data.sketch.isDrawing) data.sketch.lineTo(p.x, p.y);
@@ -319,11 +320,11 @@
   
   function touchHandler(e) {
     e.preventDefault();
-    var elem  = $(e.target);
+    var elem = $(e.target);
     var touch = e.originalEvent.changedTouches[0];
     // Copy original event properties to touch event.
     for (var o in e) {
-      if (e.hasOwnProperty(o)) touch[o] = e[o];
+      touch[o] = e[o];
     }
     // Remove (emulated) mouse events on mobile devices.
     switch (e.type) {

jquery.sketchable.min.js

@@ -2,4 +2,4 @@
  * jQuery sketchable | v1.6 | Luis A. Leiva | MIT license
  * This is a jQuery plugin for the jSketch drawing class.
  */
-(function(g){var e="sketchable";var b={init:function(k){var j=g.extend({},g.fn.sketchable.defaults,k||{});return this.each(function(){var l=g(this),m=l.data(e);if(!m){var n=new jSketch(this,{fillStyle:j.graphics.fillStyle,strokeStyle:j.graphics.strokeStyle,lineWidth:j.graphics.lineWidth,});n.isDrawing=false;l.data(e,{strokes:[],coords:[],timestamp:new Date().getTime(),sketch:n,options:j});if(j.interactive){l.bind("mousedown",h);l.bind("mouseup",i);l.bind("mousemove",f);l.bind("touchstart",d);l.bind("touchend",d);l.bind("touchmove",d);this.onselectstart=function(){return false}}}if(typeof j.events.init==="function"){j.events.init(l,l.data(e))}})},strokes:function(j){if(j){return this.each(function(){var l=g(this),m=l.data(e);m.strokes=j})}else{var k=g(this).data(e);return k.strokes}},handler:function(j){return this.each(function(){var k=g(this),l=k.data(e);j(k,l)})},clear:function(){return this.each(function(){var k=g(this),l=k.data(e),j=l.options;l.sketch.clear();l.strokes=[];if(typeof j.events.clear==="function"){j.events.clear(k,l)}})},reset:function(j){return this.each(function(){var l=g(this),m=l.data(e),k=m.options;l.sketchable("destroy").sketchable(j);if(typeof k.events.reset==="function"){k.events.reset(l,m)}})},destroy:function(){return this.each(function(){var k=g(this),l=k.data(e),j=l.options;if(j.interactive){k.unbind("mousedown",h);k.unbind("mouseup",i);k.unbind("mousemove",f);k.unbind("touchstart",d);k.unbind("touchend",d);k.unbind("touchmove",d)}k.removeData(e);if(typeof j.events.destroy==="function"){j.events.destroy(k,l)}})}};g.fn.sketchable=function(j){if("methods functions hooks".split(" ").indexOf(j)>-1){return b}else{if(b[j]){return b[j].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof j==="object"||!j){return b.init.apply(this,arguments)}else{g.error("Method "+j+' does not exist. See jQuery.sketchable("methods").')}}}return this};g.fn.sketchable.defaults={interactive:true,mouseupMovements:false,events:{},graphics:{firstPointSize:0,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F"}};function c(k){var j=g(k.target),l=j.offset();return{x:Math.round(k.pageX-l.left),y:Math.round(k.pageY-l.top)}}function a(j,l){var k=(new Date).getTime();j.coords.push([l.x,l.y,k,+j.sketch.isDrawing])}function f(n){var k=g(n.target),l=k.data(e),j=l.options;if(!j.mouseupMovements&&!l.sketch.isDrawing){return}var m=c(n);if(l.sketch.isDrawing){l.sketch.lineTo(m.x,m.y)}a(l,m);if(typeof j.events.mousemove==="function"){j.events.mousemove(k,l,n)}}function h(n){var k=g(n.target),l=k.data(e),j=l.options;l.sketch.isDrawing=true;var m=c(n);l.sketch.beginPath();if(j.graphics.firstPointSize>0){l.sketch.fillCircle(m.x,m.y,j.graphics.firstPointSize)}a(l,m);if(typeof j.events.mousedown==="function"){j.events.mousedown(k,l,n)}}function i(m){var k=g(m.target),l=k.data(e),j=l.options;l.sketch.isDrawing=false;l.sketch.closePath();l.strokes.push(l.coords);l.coords=[];if(typeof j.events.mouseup==="function"){j.events.mouseup(k,l,m)}}function d(k){k.preventDefault();var j=g(k.target);var m=k.originalEvent.changedTouches[0];for(var l in k){m[l]=k[l]}switch(k.type){case"touchstart":j.unbind(k.type,h);h(m);break;case"touchmove":j.unbind(k.type,f);f(m);break;case"touchend":j.unbind(k.type,i);i(m);break;default:return}}})(jQuery);
+(function(g){var e="sketchable";var b={init:function(k){var j=g.extend({},g.fn.sketchable.defaults,k||{});return this.each(function(){var l=g(this),m=l.data(e);if(!m){var n=new jSketch(this,{fillStyle:j.graphics.fillStyle,strokeStyle:j.graphics.strokeStyle,lineWidth:j.graphics.lineWidth,});n.isDrawing=false;l.data(e,{strokes:[],coords:[],timestamp:new Date().getTime(),sketch:n,options:j});if(j.interactive){l.bind("mousedown",h);l.bind("mouseup",i);l.bind("mousemove",f);l.bind("touchstart",d);l.bind("touchend",d);l.bind("touchmove",d);this.onselectstart=function(){return false}}}if(typeof j.events.init==="function"){j.events.init(l,l.data(e))}})},strokes:function(j){if(j){return this.each(function(){var l=g(this),m=l.data(e);m.strokes=j})}else{var k=g(this).data(e);return k.strokes}},handler:function(j){return this.each(function(){var k=g(this),l=k.data(e);j(k,l)})},clear:function(){return this.each(function(){var k=g(this),l=k.data(e),j=l.options;l.sketch.clear();l.strokes=[];l.coords=[];if(typeof j.events.clear==="function"){j.events.clear(k,l)}})},reset:function(j){return this.each(function(){var l=g(this),m=l.data(e),k=m.options;l.sketchable("destroy").sketchable(j);if(typeof k.events.reset==="function"){k.events.reset(l,m)}})},destroy:function(){return this.each(function(){var k=g(this),l=k.data(e),j=l.options;if(j.interactive){k.unbind("mousedown",h);k.unbind("mouseup",i);k.unbind("mousemove",f);k.unbind("touchstart",d);k.unbind("touchend",d);k.unbind("touchmove",d)}k.removeData(e);if(typeof j.events.destroy==="function"){j.events.destroy(k,l)}})}};g.fn.sketchable=function(j){if("methods functions hooks".split(" ").indexOf(j)>-1){return b}else{if(b[j]){return b[j].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof j==="object"||!j){return b.init.apply(this,arguments)}else{g.error("Method "+j+' does not exist. See jQuery.sketchable("methods").')}}}return this};g.fn.sketchable.defaults={interactive:true,mouseupMovements:false,events:{},graphics:{firstPointSize:0,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F"}};function c(k){var j=g(k.target),l=j.offset();return{x:Math.round(k.pageX-l.left),y:Math.round(k.pageY-l.top)}}function a(j,l){var k=(new Date).getTime();j.coords.push([l.x,l.y,k,+j.sketch.isDrawing])}function f(n){var k=g(n.target),l=k.data(e),j=l.options;if((!j.mouseupMovements||l.strokes.length===0)&&!l.sketch.isDrawing){return}var m=c(n);if(l.sketch.isDrawing){l.sketch.lineTo(m.x,m.y)}a(l,m);if(typeof j.events.mousemove==="function"){j.events.mousemove(k,l,n)}}function h(n){var k=g(n.target),l=k.data(e),j=l.options;l.sketch.isDrawing=true;var m=c(n);l.sketch.beginPath();if(j.graphics.firstPointSize>0){l.sketch.fillCircle(m.x,m.y,j.graphics.firstPointSize)}a(l,m);if(typeof j.events.mousedown==="function"){j.events.mousedown(k,l,n)}}function i(m){var k=g(m.target),l=k.data(e),j=l.options;l.sketch.isDrawing=false;l.sketch.closePath();l.strokes.push(l.coords);l.coords=[];if(typeof j.events.mouseup==="function"){j.events.mouseup(k,l,m)}}function d(k){k.preventDefault();var j=g(k.target);var m=k.originalEvent.changedTouches[0];for(var l in k){m[l]=k[l]}switch(k.type){case"touchstart":j.unbind(k.type,h);h(m);break;case"touchmove":j.unbind(k.type,f);f(m);break;case"touchend":j.unbind(k.type,i);i(m);break;default:return}}})(jQuery);