jsketch/dist/sketchable.min.js

!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=t.querySelector(a)),this.elem=a,this.init(b)}function c(b){var c=b.getBoundingClientRect(),d=t.body,e=t.documentElement,f=a.pageYOffset||e.scrollTop||d.scrollTop,g=a.pageXOffset||e.scrollLeft||d.scrollLeft,h=e.clientTop||d.clientTop||0,i=e.clientLeft||d.clientLeft||0,j=c.top+f-h,k=c.left+g-i;return{top:Math.round(j),left:Math.round(k)}}function d(a,b){b||(b=dataBind(a)[s].options),b.cssCursors&&(a.style.cursor=b.interactive?"pointer":"not-allowed"),a.onselectstart=function(){return!1}}function e(a){var b=a.target,d=c(b);return{x:Math.round(a.pageX-d.left),y:Math.round(a.pageY-d.top),time:Date.now()}}function f(a,b,c){var d=b.coords[a];if(b.options.relTimestamps&&(0===b.strokes.length&&0===d.length&&(b.timestamp=c.time),c.time-=b.timestamp),d.push([c.x,c.y,c.time,+b.sketch.isDrawing,a]),b.options.filterCoords&&d.length>1){var e=d.length-1,f=d[e],g=d[e-1];f[0]==g[0]&&f[1]==g[1]&&d.splice(e,1)}}function g(a){return a.touches?!1:void m(a)}function h(a){return a.touches?!1:void n(a)}function i(a){return a.touches?!1:void o(a)}function j(a){p(a,m),a.preventDefault()}function k(a){p(a,n),a.preventDefault()}function l(a){p(a,o),a.preventDefault()}function m(a){if(Event.isRightClick(a))return!1;var b=Math.abs(a.identifier||0),c=a.target,d=dataBind(c)[s],g=d.options;if(g.interactive){var h=e(a);"function"==typeof g.events.mousedownBefore&&g.events.mousedownBefore(c,d,a),g.graphics.firstPointSize>0&&d.sketch.beginFill(g.graphics.fillStyle).fillCircle(h.x,h.y,g.graphics.firstPointSize).endFill(),d.sketch.isDrawing=!0,d.sketch.beginPath();var i=d.coords[b];i||(i=[]),i.length>0&&d.strokes.push(i),d.coords[b]=[],f(b,d,h),"function"==typeof g.events.mousedown&&g.events.mousedown(c,d,a)}}function n(a){var b=Math.abs(a.identifier||0),c=a.target,d=dataBind(c)[s],g=d.options;if(g.interactive&&(g.mouseupMovements&&0!==d.strokes.length||d.sketch.isDrawing)){var h=e(a);"function"==typeof g.events.mousemoveBefore&&g.events.mousemoveBefore(c,d,a);var i=d.coords[b],j=i[i.length-1];if(j){var k=d.sketch;d.sketch.isDrawing?k.lineStyle(g.graphics.strokeStyle,g.graphics.lineWidth):g.mouseupMovements&&k.lineStyle(g.mouseupMovements.strokeStyle||"#DDD",g.mouseupMovements.lineWidth||1),k.line(j[0],j[1],h.x,h.y).stroke()}f(b,d,h),"function"==typeof g.events.mousemove&&g.events.mousemove(c,d,a)}}function o(a){var b=Math.abs(a.identifier||0),c=a.target,d=dataBind(c)[s],e=d.options;e.interactive&&("function"==typeof e.events.mouseupBefore&&e.events.mouseupBefore(c,d,a),d.sketch.isDrawing=!1,d.sketch.closePath(),d.strokes.push(d.coords[b]),d.coords[b]=[],"function"==typeof e.events.mouseup&&e.events.mouseup(c,d,a))}function p(a,b){var c=a.target,d=dataBind(c)[s],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g<f.length;g++){var h=f[g];q(h,a),b(h)}else{var h=a.touches[0];q(h,a),b(h)}a.preventDefault()}function q(a,b){a.type||(a.type=b.type)}function r(a){var b=dataBind(a)[s],c=b.options,d=b.sketch;d.clear();for(var e=0;e<b.strokes.length;e++)for(var f=b.strokes[e],g=0;g<f.length;g++){var h=f[g],i=f[g+1],j=!0;if(h.length>3&&(j=1===h[3]),!j&&!c.mouseupMovements)break;if(0===g){c.graphics.firstPointSize>0&&d.beginFill(c.graphics.fillStyle).fillCircle(h[0],h[1],c.graphics.firstPointSize).endFill();var k,l;j?(k=c.strokeStyle,l=c.lineWidth):c.mouseupMovements&&(k=c.mouseupMovements.strokeStyle||"#DDD",l=c.mouseupMovements.lineWidth||1),d.lineStyle(k,l)}else i&&d.beginPath().line(h[0],h[1],i[0],i[1]).stroke().closePath()}}var s="sketchable",t=a.document;b.prototype={init:function(a){var c=deepExtend({},b.prototype.defaults,a||{}),e=this.elem,f=dataBind(e)[s];f||(Event.add(e,"mousedown",g),Event.add(e,"mousemove",h),Event.add(e,"mouseup",i),Event.add(e,"touchstart",j),Event.add(e,"touchmove",k),Event.add(e,"touchend",l),d(e,c));var m=new jSketch(e,c.graphics);dataBind(e)[s]=f={strokes:[],coords:{},timestamp:0,sketch:m,instance:this,options:c},"function"==typeof c.events.init&&c.events.init(e,f);for(var n in this.plugins)this.plugins[n](this);return this},config:function(a){var c=this.elem,e=dataBind(c)[s];return a?(e.options=deepExtend({},b.prototype.defaults,e.options,a),d(c),this):e.options},data:function(a){var b=this.elem,c=dataBind(b)[s];return a?c[a]:c},strokes:function(a){var b=this.elem,c=dataBind(b)[s];return a?(c.strokes=a,r(b),this):c.strokes},handler:function(a){var b=this.elem,c=dataBind(b)[s];return a(b,c),this},trigger:function(a){var b=this.elem,c=dataBind(b)[s],d=c.options.events;return d&&"function"==typeof d[a]&&d[a](b,c),this},clear:function(a){var b=this.elem,c=dataBind(b)[s],d=c.options;return c.sketch.clear(),a||(c.strokes=[],c.coords={}),"function"==typeof d.events.clear&&d.events.clear(b,c),this},reset:function(a){var b=this.elem,c=dataBind(b)[s],d=c.options;return this.destroy().init(a),"function"==typeof d.events.reset&&d.events.reset(b,c),this},destroy:function(){var a=this.elem,b=dataBind(a)[s],c=b.options;return Event.remove(a,"mouseup",i),Event.remove(a,"mousemove",h),Event.remove(a,"mousedown",g),Event.remove(a,"touchstart",j),Event.remove(a,"touchmove",k),Event.remove(a,"touchend",l),dataBind(a)[s]=null,"function"==typeof c.events.destroy&&c.events.destroy(a,b),this},decorate:function(a,b,c){var d=this.elem,e=dataBind(d)[s],f=e.options,g="_bound$"+a+"."+c;if(!e[g]){if(e[g]=!0,f.events&&"function"==typeof f.events[a]){var h=f.events[a];f.events[a]=function(){h.apply(this,arguments),b.apply(this,arguments)}}else f.events[a]=b;return this}}},b.prototype.plugins={},b.prototype.defaults={interactive:!0,mouseupMovements:!1,relTimestamps:!1,multitouch:!0,cssCursors:!0,filterCoords:!1,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}},a.Sketchable=b}(this);