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

Added (optional) relative timestamps options (saves bandwith)

This commit is contained in:
Luis Leiva 2014-05-09 17:59:15 +02:00
parent 9de9845a22
commit 58d6192fbf
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
jquery.sketchable.js
View File

@ -1,5 +1,5 @@
/*!
* jQuery sketchable | v1.6 | Luis A. Leiva | MIT license
* jQuery sketchable | v1.7 | Luis A. Leiva | MIT license
* This is a jQuery plugin for the jSketch drawing class.
*/
/**
@ -213,6 +213,7 @@
* $(selector).sketchable({
* interactive: true,
* mouseupMovements: false,
* relTimestamps: false,
* events: {
* init: function(elem, data){},
* clear: function(elem, data){},
@ -222,7 +223,7 @@
* mouseup: function(elem, data, evt){},
* },
* graphics: {
* firstPointSize: 0,
* firstPointSize: 3,
* lineWidth: 3,
* strokeStyle: '#F0F',
* fillStyle: '#F0F',
@ -238,6 +239,8 @@
// Indicate whether non-drawing strokes should be registered as well.
// Notice that the last mouseUp stroke is never recorded, as the user has already finished drawing.
mouseupMovements: false,
// Inidicate whether timestamps should be relative (start at time 0) or absolute (start at Unix epoch).
relTimestamps: false,
// Callback Event
events: {
// init: function(elem, data){},
@ -252,10 +255,10 @@
firstPointSize: 3,
lineWidth: 3,
strokeStyle: '#F0F',
fillStyle: '#F0F'
//lineCap:
//lineJoin:
//miterLimit:
fillStyle: '#F0F',
lineCap: "round",
lineJoin: "round",
miterLimit: 10
}
};
@ -270,9 +273,13 @@
};
function saveMousePos(data, pt) {
// TODO: Compress mouse data in order to save bandwidth.
//var delta = (new Date).getTime() - data.timestamp;
var time = (new Date).getTime();
if (data.options.relTimestamps) {
// The first timestamp is relative to initialization time;
// thus fix it so that it is relative to the timestamp of the first stroke.
if (data.strokes.length === 0 && data.coords.length === 0) data.timestamp = time;
time -= data.timestamp;
}
data.coords.push([ pt.x, pt.y, time, +data.sketch.isDrawing ]);
};

4
jquery.sketchable.min.js vendored
View File

@ -1,5 +1,5 @@
/*!
* jQuery sketchable | v1.6 | Luis A. Leiva | MIT license
* jQuery sketchable | v1.7 | 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(true,{},g.fn.sketchable.defaults,k||{});return this.each(function(){var l=g(this),m=l.data(e);if(!m){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}}}var n=new jSketch(this,j.graphics);n.isDrawing=false;l.data(e,{strokes:[],coords:[],timestamp:new Date().getTime(),sketch:n,options:j});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:3,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)}if(l.coords.length>0){l.strokes.push(l.coords);l.coords=[]}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(true,{},g.fn.sketchable.defaults,k||{});return this.each(function(){var l=g(this),m=l.data(e);if(!m){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}}}var n=new jSketch(this,j.graphics);n.isDrawing=false;l.data(e,{strokes:[],coords:[],timestamp:new Date().getTime(),sketch:n,options:j});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,relTimestamps:false,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}};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();if(j.options.relTimestamps){if(j.strokes.length===0&&j.coords.length===0){j.timestamp=k}k-=j.timestamp}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)}if(l.coords.length>0){l.strokes.push(l.coords);l.coords=[]}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);