diff --git a/dist/jquery.sketchable.full.min.js b/dist/jquery.sketchable.full.min.js index c26da27..7f39603 100644 --- a/dist/jquery.sketchable.full.min.js +++ b/dist/jquery.sketchable.full.min.js @@ -1,2 +1,2 @@ -/*! jSketch drawing lib (all in one) | v2.0.1 | 2019-07-23 */ -!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element or selector.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.offsetWidth,this.stageHeight=a.offsetHeight,this.data=b,this.callStack=[],this.setDefaults()}b.prototype={setContext:function(a){if(!a)throw new Error("No canvas element specified.");return this.canvas=a,this.context=a.getContext("2d"),this},setDefaults:function(){var a={fillStyle:this.data.fillStyle||"#F00",strokeStyle:this.data.strokeStyle||"#F0F",lineWidth:this.data.lineWidth||2,lineCap:this.data.lineCap||"round",lineJoin:this.data.lineJoin||"round",miterLimit:this.data.miterLimit||10};for(var b in a){var c=a[b];this.callStack.push({property:b,value:c})}return this.saveGraphics(a).restoreGraphics()},size:function(a,b){var c=parseFloat(a),d=parseFloat(b);return this.stageWidth=c,this.stageHeight=d,this.canvas.width=c,this.canvas.height=d,this.restoreGraphics(),this},background:function(a){var b=[0,0,this.stageWidth,this.stageHeight];return this.beginFill(a),this.context.fillRect.apply(this.context,b),this.endFill(),this.callStack.push({property:"fillStyle",value:a}),this.callStack.push({method:"fillRect",args:b}),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics({fillStyle:a}),this.context.fillStyle=a,this.callStack.push({property:"fillStyle",value:a}),this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){var f={strokeStyle:a,lineWidth:b,lineCap:c,lineJoin:d,miterLimit:e};return this.saveGraphics(f).restoreGraphics()},moveTo:function(a,b){var c=[].slice.call(arguments);return this.context.moveTo.apply(this.context,c),this.callStack.push({method:"moveTo",args:c}),this},lineTo:function(a,b){var c=[].slice.call(arguments);return this.context.lineTo.apply(this.context,c),this.callStack.push({method:"lineTo",args:c}),this},line:function(a,b,c,d){return this.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){var e=[c,d,a,b];return this.context.quadraticCurveTo.apply(this.context,e),this.callStack.push({method:"quadraticCurveTo",args:e}),this},curve:function(a,b,c,d,e,f){return this.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this.callStack.push({method:"stroke"}),this},strokeRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.strokeRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"strokeRect",args:e}),this},fillRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.fillRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"fillRect",args:e}),this},rect:function(a,b,c,d){var e=[].slice.call(arguments);return this.fillRect.apply(this,e),this.strokeRect.apply(this,e),this},strokeCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.stroke(),this.context.closePath(),this.callStack.push({method:"strokeCircle",args:d}),this},fillCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.fill(),this.context.closePath(),this.callStack.push({method:"fillCircle",args:d}),this},circle:function(a,b,c){var d=[].slice.call(arguments);return this.fillCircle.apply(this,d),this.strokeCircle.apply(this,d),this},radialCircle:function(a,b,c,d,e){("undefined"==typeof d||0>d)&&(d=1);var f=this.context.createRadialGradient(a,b,c,a,b,d);e&&"array"===e.constructor.name.toLowerCase()||(e=[this.context.fillStyle,"white"]);for(var g=0;g1){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 f(a){return a.originalEvent.touches?!1:void l(a)}function g(a){return a.originalEvent.touches?!1:void m(a)}function h(a){return a.originalEvent.touches?!1:void n(a)}function i(a){o(a,l),a.preventDefault()}function j(a){o(a,m),a.preventDefault()}function k(a){o(a,n),a.preventDefault()}function l(b){if(3===b.which)return!1;var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive){var i=d(b);"function"==typeof h.events.mousedownBefore&&h.events.mousedownBefore(f,g,b),h.graphics.firstPointSize>0&&g.sketch.beginFill(h.graphics.fillStyle).fillCircle(i.x,i.y,h.graphics.firstPointSize).endFill(),g.sketch.isDrawing=!0,g.sketch.beginPath();var j=g.coords[c];j||(j=[]),j.length>0&&g.strokes.push(j),g.coords[c]=[],e(c,g,i),"function"==typeof h.events.mousedown&&h.events.mousedown(f,g,b)}}function m(b){var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive&&(h.mouseupMovements&&0!==g.strokes.length||g.sketch.isDrawing)){var i=d(b);"function"==typeof h.events.mousemoveBefore&&h.events.mousemoveBefore(f,g,b);var j=g.coords[c],k=j[j.length-1];if(k){var l,m;g.sketch.isDrawing?(l=h.strokeStyle,m=h.lineWidth):h.mouseupMovements&&(l=h.mouseupMovements.strokeStyle||"#DDD",m=h.mouseupMovements.lineWidth||1),g.sketch.lineStyle(l,m).line(k[0],k[1],i.x,i.y).stroke()}e(c,g,i),"function"==typeof h.events.mousemove&&h.events.mousemove(f,g,b)}}function n(b){var c=Math.abs(b.identifier||0),d=a(b.target),e=d.data(q),f=e.options;f.interactive&&("function"==typeof f.events.mouseupBefore&&f.events.mouseupBefore(d,e,b),e.sketch.isDrawing=!1,e.sketch.closePath(),e.strokes.push(e.coords[c]),e.coords[c]=[],"function"==typeof f.events.mouseup&&f.events.mouseup(d,e,b))}function o(b,c){var d=a(b.target),e=d.data(q),f=e.options;if(f.multitouch)for(var g=b.originalEvent.changedTouches,h=0;h3&&(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 q="sketchable",r={init:function(c){var d=a.extend(!0,{},a.fn.sketchable.defaults,c||{});return this.each(function(){var c=a(this),e=c.data(q);e||(c.bind("mousedown",f),c.bind("mousemove",g),c.bind("mouseup",h),c.bind("touchstart",i),c.bind("touchmove",j),c.bind("touchend",k),b(c,d));var l=new jSketch(this,d.graphics);c.data(q,{strokes:[],coords:{},timestamp:0,sketch:l,options:d}),"function"==typeof d.events.init&&d.events.init(c,c.data(q));for(var m in a.fn.sketchable.plugins)a.fn.sketchable.plugins[m](c)})},config:function(c){return c?this.each(function(){var d=a(this),e=d.data(q);e.options=a.extend(!0,{},a.fn.sketchable.defaults,e.options,c),b(d)}):a(this).data(q).options},data:function(b){var c=a(this).data(q);return b?c[b]:c},strokes:function(b){if(b)return this.each(function(){var c=a(this),d=c.data(q);d.strokes=b,p(c)});var c=a(this).data(q);return c.strokes},handler:function(b){return this.each(function(){var c=a(this),d=c.data(q);b(c,d)})},clear:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;d.sketch.clear(),b||(d.strokes=[],d.coords={}),"function"==typeof e.events.clear&&e.events.clear(c,d)})},reset:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;c.sketchable("destroy").sketchable(b),"function"==typeof e.events.reset&&e.events.reset(c,d)})},destroy:function(){return this.each(function(){var b=a(this),c=b.data(q),d=c.options;b.unbind("mouseup",h),b.unbind("mousemove",g),b.unbind("mousedown",f),b.unbind("touchstart",i),b.unbind("touchmove",j),b.unbind("touchend",k),b.removeData(q),d&&"function"==typeof d.events.destroy&&d.events.destroy(b,c)})},decorate:function(b,c,d){return this.each(function(){var e=a(this),f=e.data(q),g=f.options,h="_bound$"+b+"."+d;if(!f[h])if(f[h]=!0,g.events&&"function"==typeof g.events[b]){var i=g.events[b];g.events[b]=function(){i.apply(this,arguments),c.apply(this,arguments)}}else g.events[b]=c})}};a.fn.sketchable=function(b){var d=Array.prototype.slice.call(arguments,1);if("object"==typeof b||!b)return r.init.apply(this,arguments);if(b.indexOf(".")>-1){var e=c(r,b);return e.apply(this,d)}return r[b]?r[b].apply(this,d):(a.error("Unknown method: "+b),this)},a.fn.sketchable.api=r,a.fn.sketchable.plugins={},a.fn.sketchable.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}}}(jQuery),function(a){function b(b){function c(a,c){b.sketchable("handler",function(b,d){d.sketch.clear(),d.sketch.context.drawImage(a,0,0),d.strokes=c.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore()),this},this.redo=function(){return f0?e[f].strokes=c.strokes.slice():(e.push({image:b.get(0).toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),f++)}),this},this.state=function(){return JSON.parse(JSON.stringify(e[f]))},this.restore=function(a){a||(a=e[f]);var b=new Image;return b.src=a.image,b.onload=function(){c(this,a)},this},this.init=function(){return a(document).off("keypress",d),a(document).on("keypress",d),this.save()},this.destroy=function(){return a(document).off("keypress",d),this.reset()}}var c="sketchable";a.fn.sketchable.plugins.memento=function(d){for(var e={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},f="mouseup clear destroy".split(" "),g=0;g0?g:f;b.beginFill(b.data.strokeStyle).fillCircle(i.x,i.y,b.data.firstPointSize).endFill()}d>0&&"function"==typeof h.animationstep&&h.animationstep(a,e),b.closePath().beginPath()}f.strokeId===g.strokeId&&b.line(f.x,f.y,g.x,g.y).stroke()}function d(a){return a instanceof Array?{x:a[0],y:a[1],time:a[2],strokeId:a[4]}:a}for(var e=a.data(c),f=e.sketch,g=e.strokes,h=e.options.events,i=e.options.graphics,j=[],k=0;kd)&&(d=1);var f=this.context.createRadialGradient(a,b,c,a,b,d);e&&"array"===e.constructor.name.toLowerCase()||(e=[this.context.fillStyle,"white"]);for(var g=0;g1){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 f(a){return a.originalEvent.touches?!1:void l(a)}function g(a){return a.originalEvent.touches?!1:void m(a)}function h(a){return a.originalEvent.touches?!1:void n(a)}function i(a){o(a,l),a.preventDefault()}function j(a){o(a,m),a.preventDefault()}function k(a){o(a,n),a.preventDefault()}function l(b){if(3===b.which)return!1;var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive){var i=d(b);"function"==typeof h.events.mousedownBefore&&h.events.mousedownBefore(f,g,b),h.graphics.firstPointSize>0&&g.sketch.beginFill(h.graphics.fillStyle).fillCircle(i.x,i.y,h.graphics.firstPointSize).endFill(),g.sketch.isDrawing=!0,g.sketch.beginPath();var j=g.coords[c];j||(j=[]),j.length>0&&g.strokes.push(j),g.coords[c]=[],e(c,g,i),"function"==typeof h.events.mousedown&&h.events.mousedown(f,g,b)}}function m(b){var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive&&(h.mouseupMovements&&0!==g.strokes.length||g.sketch.isDrawing)){var i=d(b);"function"==typeof h.events.mousemoveBefore&&h.events.mousemoveBefore(f,g,b);var j=g.coords[c],k=j[j.length-1];if(k){var l,m;g.sketch.isDrawing?(l=h.strokeStyle,m=h.lineWidth):h.mouseupMovements&&(l=h.mouseupMovements.strokeStyle||"#DDD",m=h.mouseupMovements.lineWidth||1),g.sketch.lineStyle(l,m).line(k[0],k[1],i.x,i.y).stroke()}e(c,g,i),"function"==typeof h.events.mousemove&&h.events.mousemove(f,g,b)}}function n(b){var c=Math.abs(b.identifier||0),d=a(b.target),e=d.data(q),f=e.options;f.interactive&&("function"==typeof f.events.mouseupBefore&&f.events.mouseupBefore(d,e,b),e.sketch.isDrawing=!1,e.sketch.closePath(),e.strokes.push(e.coords[c]),e.coords[c]=[],"function"==typeof f.events.mouseup&&f.events.mouseup(d,e,b))}function o(b,c){var d=a(b.target),e=d.data(q),f=e.options;if(f.multitouch)for(var g=b.originalEvent.changedTouches,h=0;h3&&(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 q="sketchable",r={init:function(c){var d=a.extend(!0,{},a.fn.sketchable.defaults,c||{});return this.each(function(){var c=a(this),e=c.data(q);e||(c.bind("mousedown",f),c.bind("mousemove",g),c.bind("mouseup",h),c.bind("touchstart",i),c.bind("touchmove",j),c.bind("touchend",k),b(c,d));var l=new jSketch(this,d.graphics);c.data(q,{strokes:[],coords:{},timestamp:0,sketch:l,options:d}),"function"==typeof d.events.init&&d.events.init(c,c.data(q));for(var m in a.fn.sketchable.plugins)a.fn.sketchable.plugins[m](c)})},config:function(c){return c?this.each(function(){var d=a(this),e=d.data(q);e.options=a.extend(!0,{},a.fn.sketchable.defaults,e.options,c),b(d)}):a(this).data(q).options},data:function(b){var c=a(this).data(q);return b?c[b]:c},strokes:function(b){if(b)return this.each(function(){var c=a(this),d=c.data(q);d.strokes=b,p(c)});var c=a(this).data(q);return c.strokes},handler:function(b){return this.each(function(){var c=a(this),d=c.data(q);b(c,d)})},trigger:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options.events;e&&"function"==typeof e[b]&&e[b](c,d)})},clear:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;d.sketch.clear(),b||(d.strokes=[],d.coords={}),"function"==typeof e.events.clear&&e.events.clear(c,d)})},reset:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;c.sketchable("destroy").sketchable(b),"function"==typeof e.events.reset&&e.events.reset(c,d)})},destroy:function(){return this.each(function(){var b=a(this),c=b.data(q),d=c.options;b.unbind("mouseup",h),b.unbind("mousemove",g),b.unbind("mousedown",f),b.unbind("touchstart",i),b.unbind("touchmove",j),b.unbind("touchend",k),b.removeData(q),d&&"function"==typeof d.events.destroy&&d.events.destroy(b,c)})},decorate:function(b,c,d){return this.each(function(){var e=a(this),f=e.data(q),g=f.options,h="_bound$"+b+"."+d;if(!f[h])if(f[h]=!0,g.events&&"function"==typeof g.events[b]){var i=g.events[b];g.events[b]=function(){i.apply(this,arguments),c.apply(this,arguments)}}else g.events[b]=c})}};a.fn.sketchable=function(b){var d=Array.prototype.slice.call(arguments,1);if("object"==typeof b||!b)return r.init.apply(this,arguments);if(b.indexOf(".")>-1){var e=c(r,b);return e.apply(this,d)}return r[b]?r[b].apply(this,d):(a.error("Unknown method: "+b),this)},a.fn.sketchable.api=r,a.fn.sketchable.plugins={},a.fn.sketchable.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}}}(jQuery),function(a){function b(b){function c(a,c){b.sketchable("handler",function(b,d){d.sketch.clear(),d.sketch.context.drawImage(a,0,0),d.strokes=c.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function d(a){b.sketchable("handler",function(b,c){a&&a.identifier>0?f[g].strokes=c.strokes.slice():(f.push({image:b.get(0).toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),g++)})}function e(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?h.redo():h.undo();break;case 25:h.redo()}}var f=[],g=-1,h=this;this.undo=function(){return g>0&&(g--,this.restore(),b.sketchable("trigger","mementoundo")),this},this.redo=function(){return g0?f:e;b.beginFill(b.data.strokeStyle).fillCircle(g.x,g.y,b.data.firstPointSize).endFill()}d>0&&a.sketchable("trigger","animationstep"),b.closePath().beginPath()}e.strokeId===f.strokeId&&b.line(e.x,e.y,f.x,f.y).stroke()}function d(a){return a instanceof Array?{x:a[0],y:a[1],time:a[2],strokeId:a[4]}:a}for(var e=a.data(c),f=e.sketch,g=e.strokes,h=(e.options.events,e.options.graphics),i=[],j=0;j1){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 f(a){return a.originalEvent.touches?!1:void l(a)}function g(a){return a.originalEvent.touches?!1:void m(a)}function h(a){return a.originalEvent.touches?!1:void n(a)}function i(a){o(a,l),a.preventDefault()}function j(a){o(a,m),a.preventDefault()}function k(a){o(a,n),a.preventDefault()}function l(b){if(3===b.which)return!1;var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive){var i=d(b);"function"==typeof h.events.mousedownBefore&&h.events.mousedownBefore(f,g,b),h.graphics.firstPointSize>0&&g.sketch.beginFill(h.graphics.fillStyle).fillCircle(i.x,i.y,h.graphics.firstPointSize).endFill(),g.sketch.isDrawing=!0,g.sketch.beginPath();var j=g.coords[c];j||(j=[]),j.length>0&&g.strokes.push(j),g.coords[c]=[],e(c,g,i),"function"==typeof h.events.mousedown&&h.events.mousedown(f,g,b)}}function m(b){var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive&&(h.mouseupMovements&&0!==g.strokes.length||g.sketch.isDrawing)){var i=d(b);"function"==typeof h.events.mousemoveBefore&&h.events.mousemoveBefore(f,g,b);var j=g.coords[c],k=j[j.length-1];if(k){var l,m;g.sketch.isDrawing?(l=h.strokeStyle,m=h.lineWidth):h.mouseupMovements&&(l=h.mouseupMovements.strokeStyle||"#DDD",m=h.mouseupMovements.lineWidth||1),g.sketch.lineStyle(l,m).line(k[0],k[1],i.x,i.y).stroke()}e(c,g,i),"function"==typeof h.events.mousemove&&h.events.mousemove(f,g,b)}}function n(b){var c=Math.abs(b.identifier||0),d=a(b.target),e=d.data(q),f=e.options;f.interactive&&("function"==typeof f.events.mouseupBefore&&f.events.mouseupBefore(d,e,b),e.sketch.isDrawing=!1,e.sketch.closePath(),e.strokes.push(e.coords[c]),e.coords[c]=[],"function"==typeof f.events.mouseup&&f.events.mouseup(d,e,b))}function o(b,c){var d=a(b.target),e=d.data(q),f=e.options;if(f.multitouch)for(var g=b.originalEvent.changedTouches,h=0;h3&&(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 q="sketchable",r={init:function(c){var d=a.extend(!0,{},a.fn.sketchable.defaults,c||{});return this.each(function(){var c=a(this),e=c.data(q);e||(c.bind("mousedown",f),c.bind("mousemove",g),c.bind("mouseup",h),c.bind("touchstart",i),c.bind("touchmove",j),c.bind("touchend",k),b(c,d));var l=new jSketch(this,d.graphics);c.data(q,{strokes:[],coords:{},timestamp:0,sketch:l,options:d}),"function"==typeof d.events.init&&d.events.init(c,c.data(q));for(var m in a.fn.sketchable.plugins)a.fn.sketchable.plugins[m](c)})},config:function(c){return c?this.each(function(){var d=a(this),e=d.data(q);e.options=a.extend(!0,{},a.fn.sketchable.defaults,e.options,c),b(d)}):a(this).data(q).options},data:function(b){var c=a(this).data(q);return b?c[b]:c},strokes:function(b){if(b)return this.each(function(){var c=a(this),d=c.data(q);d.strokes=b,p(c)});var c=a(this).data(q);return c.strokes},handler:function(b){return this.each(function(){var c=a(this),d=c.data(q);b(c,d)})},clear:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;d.sketch.clear(),b||(d.strokes=[],d.coords={}),"function"==typeof e.events.clear&&e.events.clear(c,d)})},reset:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;c.sketchable("destroy").sketchable(b),"function"==typeof e.events.reset&&e.events.reset(c,d)})},destroy:function(){return this.each(function(){var b=a(this),c=b.data(q),d=c.options;b.unbind("mouseup",h),b.unbind("mousemove",g),b.unbind("mousedown",f),b.unbind("touchstart",i),b.unbind("touchmove",j),b.unbind("touchend",k),b.removeData(q),d&&"function"==typeof d.events.destroy&&d.events.destroy(b,c)})},decorate:function(b,c,d){return this.each(function(){var e=a(this),f=e.data(q),g=f.options,h="_bound$"+b+"."+d;if(!f[h])if(f[h]=!0,g.events&&"function"==typeof g.events[b]){var i=g.events[b];g.events[b]=function(){i.apply(this,arguments),c.apply(this,arguments)}}else g.events[b]=c})}};a.fn.sketchable=function(b){var d=Array.prototype.slice.call(arguments,1);if("object"==typeof b||!b)return r.init.apply(this,arguments);if(b.indexOf(".")>-1){var e=c(r,b);return e.apply(this,d)}return r[b]?r[b].apply(this,d):(a.error("Unknown method: "+b),this)},a.fn.sketchable.api=r,a.fn.sketchable.plugins={},a.fn.sketchable.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}}}(jQuery); \ No newline at end of file +!function(a){function b(a,b){b||(b=a.data(q).options);var c=a.get(0);b.cssCursors&&(c.style.cursor=b.interactive?"pointer":"not-allowed"),c.onselectstart=function(){return!1}}function c(a,b){b=b.split(".");for(var c=0;c1){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 f(a){return a.originalEvent.touches?!1:void l(a)}function g(a){return a.originalEvent.touches?!1:void m(a)}function h(a){return a.originalEvent.touches?!1:void n(a)}function i(a){o(a,l),a.preventDefault()}function j(a){o(a,m),a.preventDefault()}function k(a){o(a,n),a.preventDefault()}function l(b){if(3===b.which)return!1;var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive){var i=d(b);"function"==typeof h.events.mousedownBefore&&h.events.mousedownBefore(f,g,b),h.graphics.firstPointSize>0&&g.sketch.beginFill(h.graphics.fillStyle).fillCircle(i.x,i.y,h.graphics.firstPointSize).endFill(),g.sketch.isDrawing=!0,g.sketch.beginPath();var j=g.coords[c];j||(j=[]),j.length>0&&g.strokes.push(j),g.coords[c]=[],e(c,g,i),"function"==typeof h.events.mousedown&&h.events.mousedown(f,g,b)}}function m(b){var c=Math.abs(b.identifier||0),f=a(b.target),g=f.data(q),h=g.options;if(h.interactive&&(h.mouseupMovements&&0!==g.strokes.length||g.sketch.isDrawing)){var i=d(b);"function"==typeof h.events.mousemoveBefore&&h.events.mousemoveBefore(f,g,b);var j=g.coords[c],k=j[j.length-1];if(k){var l,m;g.sketch.isDrawing?(l=h.strokeStyle,m=h.lineWidth):h.mouseupMovements&&(l=h.mouseupMovements.strokeStyle||"#DDD",m=h.mouseupMovements.lineWidth||1),g.sketch.lineStyle(l,m).line(k[0],k[1],i.x,i.y).stroke()}e(c,g,i),"function"==typeof h.events.mousemove&&h.events.mousemove(f,g,b)}}function n(b){var c=Math.abs(b.identifier||0),d=a(b.target),e=d.data(q),f=e.options;f.interactive&&("function"==typeof f.events.mouseupBefore&&f.events.mouseupBefore(d,e,b),e.sketch.isDrawing=!1,e.sketch.closePath(),e.strokes.push(e.coords[c]),e.coords[c]=[],"function"==typeof f.events.mouseup&&f.events.mouseup(d,e,b))}function o(b,c){var d=a(b.target),e=d.data(q),f=e.options;if(f.multitouch)for(var g=b.originalEvent.changedTouches,h=0;h3&&(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 q="sketchable",r={init:function(c){var d=a.extend(!0,{},a.fn.sketchable.defaults,c||{});return this.each(function(){var c=a(this),e=c.data(q);e||(c.bind("mousedown",f),c.bind("mousemove",g),c.bind("mouseup",h),c.bind("touchstart",i),c.bind("touchmove",j),c.bind("touchend",k),b(c,d));var l=new jSketch(this,d.graphics);c.data(q,{strokes:[],coords:{},timestamp:0,sketch:l,options:d}),"function"==typeof d.events.init&&d.events.init(c,c.data(q));for(var m in a.fn.sketchable.plugins)a.fn.sketchable.plugins[m](c)})},config:function(c){return c?this.each(function(){var d=a(this),e=d.data(q);e.options=a.extend(!0,{},a.fn.sketchable.defaults,e.options,c),b(d)}):a(this).data(q).options},data:function(b){var c=a(this).data(q);return b?c[b]:c},strokes:function(b){if(b)return this.each(function(){var c=a(this),d=c.data(q);d.strokes=b,p(c)});var c=a(this).data(q);return c.strokes},handler:function(b){return this.each(function(){var c=a(this),d=c.data(q);b(c,d)})},trigger:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options.events;e&&"function"==typeof e[b]&&e[b](c,d)})},clear:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;d.sketch.clear(),b||(d.strokes=[],d.coords={}),"function"==typeof e.events.clear&&e.events.clear(c,d)})},reset:function(b){return this.each(function(){var c=a(this),d=c.data(q),e=d.options;c.sketchable("destroy").sketchable(b),"function"==typeof e.events.reset&&e.events.reset(c,d)})},destroy:function(){return this.each(function(){var b=a(this),c=b.data(q),d=c.options;b.unbind("mouseup",h),b.unbind("mousemove",g),b.unbind("mousedown",f),b.unbind("touchstart",i),b.unbind("touchmove",j),b.unbind("touchend",k),b.removeData(q),d&&"function"==typeof d.events.destroy&&d.events.destroy(b,c)})},decorate:function(b,c,d){return this.each(function(){var e=a(this),f=e.data(q),g=f.options,h="_bound$"+b+"."+d;if(!f[h])if(f[h]=!0,g.events&&"function"==typeof g.events[b]){var i=g.events[b];g.events[b]=function(){i.apply(this,arguments),c.apply(this,arguments)}}else g.events[b]=c})}};a.fn.sketchable=function(b){var d=Array.prototype.slice.call(arguments,1);if("object"==typeof b||!b)return r.init.apply(this,arguments);if(b.indexOf(".")>-1){var e=c(r,b);return e.apply(this,d)}return r[b]?r[b].apply(this,d):(a.error("Unknown method: "+b),this)},a.fn.sketchable.api=r,a.fn.sketchable.plugins={},a.fn.sketchable.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}}}(jQuery); \ No newline at end of file diff --git a/dist/sketchable.full.min.js b/dist/sketchable.full.min.js index ef7193e..506d699 100644 --- a/dist/sketchable.full.min.js +++ b/dist/sketchable.full.min.js @@ -1,2 +1,2 @@ -/*! jSketch drawing lib (all in one) | v2.0.1 | 2019-07-23 */ -!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element or selector.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.offsetWidth,this.stageHeight=a.offsetHeight,this.data=b,this.callStack=[],this.setDefaults()}b.prototype={setContext:function(a){if(!a)throw new Error("No canvas element specified.");return this.canvas=a,this.context=a.getContext("2d"),this},setDefaults:function(){var a={fillStyle:this.data.fillStyle||"#F00",strokeStyle:this.data.strokeStyle||"#F0F",lineWidth:this.data.lineWidth||2,lineCap:this.data.lineCap||"round",lineJoin:this.data.lineJoin||"round",miterLimit:this.data.miterLimit||10};for(var b in a){var c=a[b];this.callStack.push({property:b,value:c})}return this.saveGraphics(a).restoreGraphics()},size:function(a,b){var c=parseFloat(a),d=parseFloat(b);return this.stageWidth=c,this.stageHeight=d,this.canvas.width=c,this.canvas.height=d,this.restoreGraphics(),this},background:function(a){var b=[0,0,this.stageWidth,this.stageHeight];return this.beginFill(a),this.context.fillRect.apply(this.context,b),this.endFill(),this.callStack.push({property:"fillStyle",value:a}),this.callStack.push({method:"fillRect",args:b}),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics({fillStyle:a}),this.context.fillStyle=a,this.callStack.push({property:"fillStyle",value:a}),this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){var f={strokeStyle:a,lineWidth:b,lineCap:c,lineJoin:d,miterLimit:e};return this.saveGraphics(f).restoreGraphics()},moveTo:function(a,b){var c=[].slice.call(arguments);return this.context.moveTo.apply(this.context,c),this.callStack.push({method:"moveTo",args:c}),this},lineTo:function(a,b){var c=[].slice.call(arguments);return this.context.lineTo.apply(this.context,c),this.callStack.push({method:"lineTo",args:c}),this},line:function(a,b,c,d){return this.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){var e=[c,d,a,b];return this.context.quadraticCurveTo.apply(this.context,e),this.callStack.push({method:"quadraticCurveTo",args:e}),this},curve:function(a,b,c,d,e,f){return this.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this.callStack.push({method:"stroke"}),this},strokeRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.strokeRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"strokeRect",args:e}),this},fillRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.fillRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"fillRect",args:e}),this},rect:function(a,b,c,d){var e=[].slice.call(arguments);return this.fillRect.apply(this,e),this.strokeRect.apply(this,e),this},strokeCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.stroke(),this.context.closePath(),this.callStack.push({method:"strokeCircle",args:d}),this},fillCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.fill(),this.context.closePath(),this.callStack.push({method:"fillCircle",args:d}),this},circle:function(a,b,c){var d=[].slice.call(arguments);return this.fillCircle.apply(this,d),this.strokeCircle.apply(this,d),this},radialCircle:function(a,b,c,d,e){("undefined"==typeof d||0>d)&&(d=1);var f=this.context.createRadialGradient(a,b,c,a,b,d);e&&"array"===e.constructor.name.toLowerCase()||(e=[this.context.fillStyle,"white"]);for(var g=0;g1){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)[r],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)[r],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)[r],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)[r],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g3&&(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 r="sketchable",s=a.document;b.prototype={init:function(a){var c=deepExtend({},b.prototype.defaults,a||{}),e=this.elem,f=dataBind(e)[r];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)[r]=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)[r];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)[r];return a?c[a]:c},strokes:function(a){var b=this.elem,c=dataBind(b)[r];return a?(c.strokes=a,q(b),this):c.strokes},handler:function(a){var b=this.elem,c=dataBind(b)[r];return a(b,c),this},clear:function(a){var b=this.elem,c=dataBind(b)[r],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)[r],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)[r],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)[r]=null,"function"==typeof c.events.destroy&&c.events.destroy(a,b),this},decorate:function(a,b,c){var d=this.elem,e=dataBind(d)[r],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),function(a){function b(a){function b(b,c){a.handler(function(a,d){d.sketch.clear(),d.sketch.context.drawImage(b,0,0),d.strokes=c.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function c(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?f.redo():f.undo();break;case 25:f.redo()}}var d=[],e=-1,f=this;this.undo=function(){return e>0&&(e--,this.restore()),this},this.redo=function(){return e0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),e++)}),this},this.state=function(){return JSON.parse(JSON.stringify(d[e]))},this.restore=function(a){a||(a=d[e]);var c=new Image;return c.src=a.image,c.onload=function(){b(this,a)},this},this.init=function(){return Event.remove(document,"keypress",c),Event.add(document,"keypress",c),this.save()},this.destroy=function(){return Event.remove(document,"keypress",c),this.reset()}}var c="sketchable";Sketchable.prototype.plugins.memento=function(a){for(var d={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},e="mouseup clear destroy".split(" "),f=0;f0?g:f;b.beginFill(b.data.strokeStyle).fillCircle(i.x,i.y,b.data.firstPointSize).endFill()}d>0&&"function"==typeof h.animationstep&&h.animationstep(a,e),b.closePath().beginPath()}f.strokeId===g.strokeId&&b.line(f.x,f.y,g.x,g.y).stroke()}function d(a){return a instanceof Array?{x:a[0],y:a[1],time:a[2],strokeId:a[4]}:a}for(var e=dataBind(a.elem)[c],f=e.sketch,g=e.strokes,h=e.options.events,i=e.options.graphics,j=[],k=0;kd)&&(d=1);var f=this.context.createRadialGradient(a,b,c,a,b,d);e&&"array"===e.constructor.name.toLowerCase()||(e=[this.context.fillStyle,"white"]);for(var g=0;g1){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)[r],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)[r],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)[r],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)[r],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g3&&(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 r="sketchable",s=a.document;b.prototype={init:function(a){var c=deepExtend({},b.prototype.defaults,a||{}),e=this.elem,f=dataBind(e)[r];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)[r]=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)[r];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)[r];return a?c[a]:c},strokes:function(a){var b=this.elem,c=dataBind(b)[r];return a?(c.strokes=a,q(b),this):c.strokes},handler:function(a){var b=this.elem,c=dataBind(b)[r];return a(b,c),this},trigger:function(a){var b=this.elem,c=dataBind(b)[r],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)[r],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)[r],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)[r],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)[r]=null,"function"==typeof c.events.destroy&&c.events.destroy(a,b),this},decorate:function(a,b,c){var d=this.elem,e=dataBind(d)[r],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),function(a){function b(a){function b(b,c){a.handler(function(a,d){d.sketch.clear(),d.sketch.context.drawImage(b,0,0),d.strokes=c.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function c(b){a.handler(function(a,c){b&&b.identifier>0?e[f].strokes=c.strokes.slice():(e.push({image:a.toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),f++)})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore(),a.trigger("mementoundo")),this},this.redo=function(){return f0?f:e;b.beginFill(b.data.strokeStyle).fillCircle(g.x,g.y,b.data.firstPointSize).endFill()}d>0&&a.trigger("animationstep"),b.closePath().beginPath()}e.strokeId===f.strokeId&&b.line(e.x,e.y,f.x,f.y).stroke()}function d(a){return a instanceof Array?{x:a[0],y:a[1],time:a[2],strokeId:a[4]}:a}for(var e=dataBind(a.elem)[c],f=e.sketch,g=e.strokes,h=(e.options.events,e.options.graphics),i=[],j=0;j1){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)[r],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)[r],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)[r],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)[r],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g3&&(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 r="sketchable",s=a.document;b.prototype={init:function(a){var c=deepExtend({},b.prototype.defaults,a||{}),e=this.elem,f=dataBind(e)[r];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)[r]=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)[r];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)[r];return a?c[a]:c},strokes:function(a){var b=this.elem,c=dataBind(b)[r];return a?(c.strokes=a,q(b),this):c.strokes},handler:function(a){var b=this.elem,c=dataBind(b)[r];return a(b,c),this},clear:function(a){var b=this.elem,c=dataBind(b)[r],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)[r],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)[r],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)[r]=null,"function"==typeof c.events.destroy&&c.events.destroy(a,b),this},decorate:function(a,b,c){var d=this.elem,e=dataBind(d)[r],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); \ No newline at end of file +!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=s.querySelector(a)),this.elem=a,this.init(b)}function c(b){var c=b.getBoundingClientRect(),d=s.body,e=s.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)[r].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)[r],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)[r],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)[r],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)[r],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g3&&(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 r="sketchable",s=a.document;b.prototype={init:function(a){var c=deepExtend({},b.prototype.defaults,a||{}),e=this.elem,f=dataBind(e)[r];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)[r]=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)[r];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)[r];return a?c[a]:c},strokes:function(a){var b=this.elem,c=dataBind(b)[r];return a?(c.strokes=a,q(b),this):c.strokes},handler:function(a){var b=this.elem,c=dataBind(b)[r];return a(b,c),this},trigger:function(a){var b=this.elem,c=dataBind(b)[r],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)[r],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)[r],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)[r],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)[r]=null,"function"==typeof c.events.destroy&&c.events.destroy(a,b),this},decorate:function(a,b,c){var d=this.elem,e=dataBind(d)[r],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); \ No newline at end of file diff --git a/src/jquery.sketchable.js b/src/jquery.sketchable.js index e1f644d..7243da5 100644 --- a/src/jquery.sketchable.js +++ b/src/jquery.sketchable.js @@ -1,5 +1,5 @@ /*! - * jQuery sketchable | v2.3 | Luis A. Leiva | MIT license + * jQuery sketchable | v2.4 | Luis A. Leiva | MIT license * A jQuery plugin for the jSketch drawing library. */ @@ -150,9 +150,28 @@ handler: function(callback) { return this.each(function() { var elem = $(this), data = elem.data(namespace); + callback(elem, data); }); }, + /** + * Execute programmatically an event. + * @param {string} event - Event name. + * @return {object} jQuery + * @memberof $.fn.sketchable + * @example + * $('canvas').sketchable('trigger', 'mouseup'); + */ + trigger: function(event) { + return this.each(function() { + var elem = $(this), data = elem.data(namespace); + + var evts = data.options.events; + if (evts && typeof evts[event] === 'function') { + evts[event](elem, data); + } + }); + }, /** * Clears canvas together with associated strokes data. * @return {object} jQuery diff --git a/src/sketchable.js b/src/sketchable.js index a7f52cd..e12a9fd 100644 --- a/src/sketchable.js +++ b/src/sketchable.js @@ -1,5 +1,5 @@ /*! - * Sketchable | v2.3 | Luis A. Leiva | MIT license + * Sketchable | v2.4 | Luis A. Leiva | MIT license * A plugin for the jSketch drawing library. */ @@ -184,6 +184,24 @@ return this; }, + /** + * Execute programmatically an event. + * @param {string} event - Event name. + * @return {Sketchable} + * @memberof Sketchable + * @example + * var sketcher = new Sketchable('#my-canvas', { events: ... }); + * sketcher.trigger('mouseup'); + */ + trigger: function(event) { + var elem = this.elem, data = dataBind(elem)[namespace]; + + var evts = data.options.events; + if (evts && typeof evts[event] === 'function') { + evts[event](elem, data); + } + return this; + }, /** * Clears canvas together with associated strokes data. * @see Sketchable.handler