happyz
/
jsketch
mirror of https://github.com/luileito/jsketch.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed remaining mouseup bug

This commit is contained in:
Luis Leiva 2014-05-07 20:18:14 +02:00
parent d4f211f46f
commit 21d16ae27c
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
jquery.sketchable.js
View File

@ -44,7 +44,7 @@
var sketch = new jSketch(this, { var sketch = new jSketch(this, {
fillStyle: options.graphics.fillStyle, fillStyle: options.graphics.fillStyle,
strokeStyle: options.graphics.strokeStyle, strokeStyle: options.graphics.strokeStyle,
lineWidth: options.graphics.lineWidth lineWidth: options.graphics.lineWidth,
}); });
// Flag drawing state on a per-canvas basis. // Flag drawing state on a per-canvas basis.
sketch.isDrawing = false; sketch.isDrawing = false;
@ -129,6 +129,7 @@
var elem = $(this), data = elem.data(_ns), options = data.options; var elem = $(this), data = elem.data(_ns), options = data.options;
data.sketch.clear(); data.sketch.clear();
data.strokes = []; data.strokes = [];
data.coords = [];
if (typeof options.events.clear === 'function') { if (typeof options.events.clear === 'function') {
options.events.clear(elem, data); options.events.clear(elem, data);
} }
@ -220,7 +221,7 @@
* destroy: function(elem, data){}, * destroy: function(elem, data){},
* mousedown: function(elem, data, evt){}, * mousedown: function(elem, data, evt){},
* mousemove: function(elem, data, evt){}, * mousemove: function(elem, data, evt){},
* mouseup: function(elem, data, evt){} * mouseup: function(elem, data, evt){},
* }, * },
* graphics: { * graphics: {
* firstPointSize: 0, * firstPointSize: 0,
@ -246,7 +247,7 @@
// destroy: function(elem, data){}, // destroy: function(elem, data){},
// mousedown: function(elem, data, evt){}, // mousedown: function(elem, data, evt){},
// mousemove: 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 // TODO: add more jSketch config options
graphics: { graphics: {
@ -254,9 +255,9 @@
lineWidth: 3, lineWidth: 3,
strokeStyle: '#F0F', strokeStyle: '#F0F',
fillStyle: '#F0F' fillStyle: '#F0F'
//lineCap: "round", //lineCap:
//lineJoin: "round", //lineJoin:
//miterLimit: 10 //miterLimit:
} }
}; };
@ -279,9 +280,9 @@
function mousemoveHandler(e) { function mousemoveHandler(e) {
var elem = $(e.target), data = elem.data(_ns), options = data.options; 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); var p = getMousePos(e);
if (data.sketch.isDrawing) data.sketch.lineTo(p.x, p.y); if (data.sketch.isDrawing) data.sketch.lineTo(p.x, p.y);
@ -323,7 +324,7 @@
var touch = e.originalEvent.changedTouches[0]; var touch = e.originalEvent.changedTouches[0];
// Copy original event properties to touch event. // Copy original event properties to touch event.
for (var o in e) { for (var o in e) {
if (e.hasOwnProperty(o)) touch[o] = e[o]; touch[o] = e[o];
} }
// Remove (emulated) mouse events on mobile devices. // Remove (emulated) mouse events on mobile devices.
switch (e.type) { switch (e.type) {

2
jquery.sketchable.min.js vendored
View File

@ -2,4 +2,4 @@
* jQuery sketchable | v1.6 | Luis A. Leiva | MIT license * jQuery sketchable | v1.6 | Luis A. Leiva | MIT license
* This is a jQuery plugin for the jSketch drawing class. * 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);