diff --git a/dist/jquery.jsketchable.memento.min.js b/dist/jquery.jsketchable.memento.min.js new file mode 100644 index 0000000..03be1e2 --- /dev/null +++ b/dist/jquery.jsketchable.memento.min.js @@ -0,0 +1 @@ +!function(a){function b(b,f){function g(a){if(i&&i.events&&"function"==typeof i.events[a]){var b=i.events[a];i.events[a]=function(){var c=Array.prototype.slice.call(arguments,0);b.apply(h,c),k[a].apply(h,c)}}else d.defaults.events[a]=k[a]}var h=b,i=a.extend(!0,d.defaults,f);if(!i.interactive)return f;var j=new c(b),k={init:function(a,b){b.memento=j,b.memento.save(),b.memento.init()},clear:function(a,b){b.memento.save()},mouseup:function(a,b,c){b.memento.save()},destroy:function(a,b){b.memento.destroy()}};if(!d.isMementoReady){for(var l="init mouseup clear destroy".split(" "),m=0;m0){h--;var a=new Image;a.src=g[h].image,a.onload=function(){e(this)}}}function d(){if(h0&&g.sketch.fillCircle(i.x,i.y,h.graphics.firstPointSize),g.coords[e]||(g.coords[e]=[]),g.coords[e].length>0&&(g.strokes.push(g.coords[e]),g.coords[e]=[]),c(e,g,i),"function"==typeof h.events.mousedown&&h.events.mousedown(f,g,d)}function k(d){var e=d.identifier||0,f=a(d.target),g=f.data(m),h=g.options;if(h.mouseupMovements&&0!==g.strokes.length||g.sketch.isDrawing){var i=b(d);if(g.sketch.isDrawing){var j=g.coords[e][g.coords[e].length-1];g.sketch.beginPath().line(j[0],j[1],i.x,i.y).stroke().closePath()}c(e,g,i),"function"==typeof h.events.mousemove&&h.events.mousemove(f,g,d)}}function l(b){var c=b.identifier||0,d=a(b.target),e=d.data(m),f=e.options;e.sketch.isDrawing=!1,e.strokes.push(e.coords[c]),e.coords[c]=[],"function"==typeof f.events.mouseup&&f.events.mouseup(d,e,b)}var m="sketchable",n={init:function(b){var c=a.extend(!0,{},a.fn.sketchable.defaults,b||{});return this.each(function(){var b=a(this),j=b.data(m);j||c.interactive&&(b.bind("mousedown",d),b.bind("mousemove",e),b.bind("mouseup",f),b.bind("touchstart",g),b.bind("touchmove",h),b.bind("touchend",i),this.onselectstart=function(){return!1});var k=new jSketch(this,c.graphics);k.isDrawing=!1,b.data(m,{strokes:[],coords:{},timestamp:(new Date).getTime(),sketch:k,options:c}),"function"==typeof c.events.init&&c.events.init(b,b.data(m))})},config:function(b){return this.each(function(){var c=a(this),d=c.data(m);d.options=a.extend(!0,{},a.fn.sketchable.defaults,b||{})})},strokes:function(b){if(b)return this.each(function(){var c=a(this),d=c.data(m);d.strokes=b});var c=a(this).data(m);return c.strokes},handler:function(b){return this.each(function(){var c=a(this),d=c.data(m);b(c,d)})},clear:function(){return this.each(function(){var b=a(this),c=b.data(m)||{},d=c.options;c.sketch&&(c.sketch.clear(),c.strokes=[],c.coords={}),d&&"function"==typeof d.events.clear&&d.events.clear(b,c)})},reset:function(b){return this.each(function(){var c=a(this),d=c.data(m)||{},e=d.options;c.sketchable("destroy").sketchable(b),e&&"function"==typeof e.events.reset&&e.events.reset(c,d)})},destroy:function(){return this.each(function(){var b=a(this),c=b.data(m)||{},j=c.options;j.interactive&&(b.unbind("mouseup",f),b.unbind("mousemove",e),b.unbind("mousedown",d),b.unbind("touchstart",g),b.unbind("touchmove",h),b.unbind("touchend",i)),b.removeData(m),j&&"function"==typeof j.events.destroy&&j.events.destroy(b,c)})}};a.fn.sketchable=function(b){return"methods functions hooks".split(" ").indexOf(b)>-1?n:n[b]?n[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?(a.error("Method "+b+' does not exist. See jQuery.sketchable("methods").'),this):n.init.apply(this,arguments)},a.fn.sketchable.defaults={interactive:!0,mouseupMovements:!1,relTimestamps:!1,multitouch:!0,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/jsketch.all.min.js b/dist/jsketch.all.min.js new file mode 100644 index 0000000..d67e516 --- /dev/null +++ b/dist/jsketch.all.min.js @@ -0,0 +1,2 @@ +/*! jSketch drawing lib (all in one) | v1.8 | 2015-09-21 */ +!function(a){var b=function(a,b){return new c(a,b)},c=function(a,b){return a?(this.context(a),this.stageWidth=a.width,this.stageHeight=a.height,this.data={},this.drawingDefaults(b),this):void 0};b.fn=c.prototype={context:function(a){if(null===a)throw"No canvas element specified.";return this.canvas=a,this.graphics=a.getContext("2d"),this},drawingDefaults:function(a){return"undefined"==typeof a&&(a={}),"undefined"==typeof a.fillStyle&&(a.fillStyle="#F00"),"undefined"==typeof a.strokeStyle&&(a.strokeStyle="#F0F"),"undefined"==typeof a.lineWidth&&(a.lineWidth=2),"undefined"==typeof a.lineCap&&(a.lineCap="round"),"undefined"==typeof a.lineJoin&&(a.lineJoin="round"),"undefined"==typeof a.miterLimit&&(a.miterLimit=10),this.saveGraphics(a),this.restoreGraphics(a),this},size:function(a,b){return this.stageWidth=a,this.stageHeight=b,this.canvas.width=a,this.canvas.height=b,this.restoreGraphics(),this},background:function(a){return this.beginFill(a),this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight),this.endFill(),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics(),this.graphics.fillStyle=a,this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){return this.graphics.strokeStyle=a||this.graphics.strokeStyle,this.graphics.lineWidth=b||this.graphics.lineWidth,this.graphics.lineCap=c||this.graphics.lineCap,this.graphics.lineJoin=d||this.graphics.lineJoin,this.graphics.miterLimit=e||this.graphics.miterLimit,this},moveTo:function(a,b){return this.graphics.moveTo(a,b),this},lineTo:function(a,b){return this.graphics.lineTo(a,b),this},line:function(a,b,c,d){return this.graphics.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){return this.graphics.quadraticCurveTo(c,d,a,b),this},curve:function(a,b,c,d,e,f){return this.graphics.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.graphics.stroke(),this},strokeRect:function(a,b,c,d){return this.graphics.beginPath(),this.graphics.strokeRect(a,b,c,d),this.graphics.closePath(),this},fillRect:function(a,b,c,d){return this.graphics.beginPath(),this.graphics.fillRect(a,b,c,d),this.graphics.closePath(),this},strokeCircle:function(a,b,c){return this.graphics.beginPath(),this.graphics.arc(a,b,c,0,2*Math.PI,!1),this.graphics.stroke(),this.graphics.closePath(),this},fillCircle:function(a,b,c){return this.graphics.beginPath(),this.graphics.arc(a,b,c,0,2*Math.PI,!1),this.graphics.fill(),this.graphics.closePath(),this},radialCircle:function(a,b,c,d,e){var f=this.graphics.createRadialGradient(a,b,c,a,b,e);return f.addColorStop(0,d),f.addColorStop(1,"rgba(0,0,0,0)"),this.graphics.fillStyle=f,this.fillCircle(a,b,c),this},beginPath:function(){return this.saveGraphics(),this.graphics.beginPath(),this},closePath:function(){return this.graphics.closePath(),this.restoreGraphics(),this},eraser:function(a){return"undefined"==typeof a&&(a=15),this.graphics.globalCompositeOperation="destination-out",this.graphics.lineWidth=a,this},pencil:function(a){return"undefined"!=typeof a&&(this.graphics.lineWidth=a),this.graphics.globalCompositeOperation="source-over",this},clear:function(){return this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight),this},save:function(){return this.graphics.save(),this},restore:function(){return this.graphics.restore(),this},saveGraphics:function(a){return"undefined"==typeof a&&(a=this.data.options),this.data.options=a,this},restoreGraphics:function(a){"undefined"==typeof a&&(a=this.data.options);for(var b in a)this.graphics[b]=a[b];return this},drawImage:function(a,b,c){"undefined"==typeof b&&(b=0),"undefined"==typeof c&&(c=0);var d=this,e=new Image;return e.src=a,e.onload=function(){d.graphics.drawImage(e,b,c)},this}},a.jSketch=b}(this),function(a){function b(b){var c=a(b.target),d=c.offset();return{x:Math.round(b.pageX-d.left),y:Math.round(b.pageY-d.top)}}function c(a,b,c){b.coords[a]||(b.coords[a]=[]);var d=(new Date).getTime();b.options.relTimestamps&&(0===b.strokes.length&&0===b.coords[a].length&&(b.timestamp=d),d-=b.timestamp),b.coords[a].push([c.x,c.y,d,+b.sketch.isDrawing])}function d(a){return a.originalEvent.touches?!1:void j(a)}function e(a){return a.originalEvent.touches?!1:void k(a)}function f(a){return a.originalEvent.touches?!1:void l(a)}function g(b){var c=a(b.target),d=c.data(m),e=d.options,f=b.originalEvent.changedTouches;if(e.multitouch)for(var g=0;g0&&g.sketch.fillCircle(i.x,i.y,h.graphics.firstPointSize),g.coords[e]||(g.coords[e]=[]),g.coords[e].length>0&&(g.strokes.push(g.coords[e]),g.coords[e]=[]),c(e,g,i),"function"==typeof h.events.mousedown&&h.events.mousedown(f,g,d)}function k(d){var e=d.identifier||0,f=a(d.target),g=f.data(m),h=g.options;if(h.mouseupMovements&&0!==g.strokes.length||g.sketch.isDrawing){var i=b(d);if(g.sketch.isDrawing){var j=g.coords[e][g.coords[e].length-1];g.sketch.beginPath().line(j[0],j[1],i.x,i.y).stroke().closePath()}c(e,g,i),"function"==typeof h.events.mousemove&&h.events.mousemove(f,g,d)}}function l(b){var c=b.identifier||0,d=a(b.target),e=d.data(m),f=e.options;e.sketch.isDrawing=!1,e.strokes.push(e.coords[c]),e.coords[c]=[],"function"==typeof f.events.mouseup&&f.events.mouseup(d,e,b)}var m="sketchable",n={init:function(b){var c=a.extend(!0,{},a.fn.sketchable.defaults,b||{});return this.each(function(){var b=a(this),j=b.data(m);j||c.interactive&&(b.bind("mousedown",d),b.bind("mousemove",e),b.bind("mouseup",f),b.bind("touchstart",g),b.bind("touchmove",h),b.bind("touchend",i),this.onselectstart=function(){return!1});var k=new jSketch(this,c.graphics);k.isDrawing=!1,b.data(m,{strokes:[],coords:{},timestamp:(new Date).getTime(),sketch:k,options:c}),"function"==typeof c.events.init&&c.events.init(b,b.data(m))})},config:function(b){return this.each(function(){var c=a(this),d=c.data(m);d.options=a.extend(!0,{},a.fn.sketchable.defaults,b||{})})},strokes:function(b){if(b)return this.each(function(){var c=a(this),d=c.data(m);d.strokes=b});var c=a(this).data(m);return c.strokes},handler:function(b){return this.each(function(){var c=a(this),d=c.data(m);b(c,d)})},clear:function(){return this.each(function(){var b=a(this),c=b.data(m)||{},d=c.options;c.sketch&&(c.sketch.clear(),c.strokes=[],c.coords={}),d&&"function"==typeof d.events.clear&&d.events.clear(b,c)})},reset:function(b){return this.each(function(){var c=a(this),d=c.data(m)||{},e=d.options;c.sketchable("destroy").sketchable(b),e&&"function"==typeof e.events.reset&&e.events.reset(c,d)})},destroy:function(){return this.each(function(){var b=a(this),c=b.data(m)||{},j=c.options;j.interactive&&(b.unbind("mouseup",f),b.unbind("mousemove",e),b.unbind("mousedown",d),b.unbind("touchstart",g),b.unbind("touchmove",h),b.unbind("touchend",i)),b.removeData(m),j&&"function"==typeof j.events.destroy&&j.events.destroy(b,c)})}};a.fn.sketchable=function(b){return"methods functions hooks".split(" ").indexOf(b)>-1?n:n[b]?n[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?(a.error("Method "+b+' does not exist. See jQuery.sketchable("methods").'),this):n.init.apply(this,arguments)},a.fn.sketchable.defaults={interactive:!0,mouseupMovements:!1,relTimestamps:!1,multitouch:!0,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}}}(jQuery),function(a){function b(b,f){function g(a){if(i&&i.events&&"function"==typeof i.events[a]){var b=i.events[a];i.events[a]=function(){var c=Array.prototype.slice.call(arguments,0);b.apply(h,c),k[a].apply(h,c)}}else d.defaults.events[a]=k[a]}var h=b,i=a.extend(!0,d.defaults,f);if(!i.interactive)return f;var j=new c(b),k={init:function(a,b){b.memento=j,b.memento.save(),b.memento.init()},clear:function(a,b){b.memento.save()},mouseup:function(a,b,c){b.memento.save()},destroy:function(a,b){b.memento.destroy()}};if(!d.isMementoReady){for(var l="init mouseup clear destroy".split(" "),m=0;m0){h--;var a=new Image;a.src=g[h].image,a.onload=function(){e(this)}}}function d(){if(h0){stpos--;var snapshot=new Image;snapshot.src=stack[stpos].image;snapshot.onload=function(){restore(this)}}}function next(){if(stpos-1){return methods}else if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof method==="object"||!method){return methods.init.apply(this,arguments)}else{$.error("Method "+method+' does not exist. See jQuery.sketchable("methods").')}return this};$.fn.sketchable.defaults={interactive:true,mouseupMovements:false,relTimestamps:false,multitouch:true,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}};function getMousePos(e){var elem=$(e.target),pos=elem.offset();return{x:Math.round(e.pageX-pos.left),y:Math.round(e.pageY-pos.top)}}function saveMousePos(idx,data,pt){if(!data.coords[idx]){data.coords[idx]=[]}var time=(new Date).getTime();if(data.options.relTimestamps){if(data.strokes.length===0&&data.coords[idx].length===0)data.timestamp=time;time-=data.timestamp}data.coords[idx].push([pt.x,pt.y,time,+data.sketch.isDrawing])}function mousedownHandler(e){if(e.originalEvent.touches)return false;downHandler(e)}function mousemoveHandler(e){if(e.originalEvent.touches)return false;moveHandler(e)}function mouseupHandler(e){if(e.originalEvent.touches)return false;upHandler(e)}function touchdownHandler(e){var elem=$(e.target),data=elem.data(_ns),options=data.options;var touches=e.originalEvent.changedTouches;if(options.multitouch){for(var i=0;i0){data.sketch.fillCircle(p.x,p.y,options.graphics.firstPointSize)}if(!data.coords[idx]){data.coords[idx]=[]}if(data.coords[idx].length>0){data.strokes.push(data.coords[idx]);data.coords[idx]=[]}saveMousePos(idx,data,p);if(typeof options.events.mousedown==="function"){options.events.mousedown(elem,data,e)}}function moveHandler(e){var idx=e.identifier||0;var elem=$(e.target),data=elem.data(_ns),options=data.options;if((!options.mouseupMovements||data.strokes.length===0)&&!data.sketch.isDrawing)return;var p=getMousePos(e);if(data.sketch.isDrawing){var last=data.coords[idx][data.coords[idx].length-1];data.sketch.beginPath().line(last[0],last[1],p.x,p.y).stroke().closePath()}saveMousePos(idx,data,p);if(typeof options.events.mousemove==="function"){options.events.mousemove(elem,data,e)}}function upHandler(e){var idx=e.identifier||0;var elem=$(e.target),data=elem.data(_ns),options=data.options;data.sketch.isDrawing=false;data.strokes.push(data.coords[idx]);data.coords[idx]=[];if(typeof options.events.mouseup==="function"){options.events.mouseup(elem,data,e)}}})(jQuery); diff --git a/jsketch.min.js b/jsketch.min.js deleted file mode 100644 index 3aad5fb..0000000 --- a/jsketch.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(window){var jSketch=function(elem,options){return new Sketch(elem,options)};var Sketch=function(elem,options){if(!elem)return;this.context(elem);this.stageWidth=elem.width;this.stageHeight=elem.height;this.data={};this.drawingDefaults(options);return this};jSketch.fn=Sketch.prototype={context:function(elem){if(elem===null)throw"No canvas element specified.";this.canvas=elem;this.graphics=elem.getContext("2d");return this},drawingDefaults:function(options){if(typeof options==="undefined")options={};if(typeof options.fillStyle==="undefined")options.fillStyle="#F00";if(typeof options.strokeStyle==="undefined")options.strokeStyle="#F0F";if(typeof options.lineWidth==="undefined")options.lineWidth=2;if(typeof options.lineCap==="undefined")options.lineCap="round";if(typeof options.lineJoin==="undefined")options.lineJoin="round";if(typeof options.miterLimit==="undefined")options.miterLimit=10;this.saveGraphics(options);this.restoreGraphics(options);return this},size:function(width,height){this.stageWidth=width;this.stageHeight=height;this.canvas.width=width;this.canvas.height=height;this.restoreGraphics();return this},background:function(color){this.beginFill(color);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.endFill();return this},stage:function(width,height,bgcolor){this.size(width,height).background(bgcolor);return this},beginFill:function(color){this.saveGraphics();this.graphics.fillStyle=color;return this},endFill:function(){this.restoreGraphics();return this},lineStyle:function(color,thickness,capStyle,joinStyle,miter){this.graphics.strokeStyle=color||this.graphics.strokeStyle;this.graphics.lineWidth=thickness||this.graphics.lineWidth;this.graphics.lineCap=capStyle||this.graphics.lineCap;this.graphics.lineJoin=joinStyle||this.graphics.lineJoin;this.graphics.miterLimit=miter||this.graphics.miterLimit;return this},moveTo:function(x,y){this.graphics.moveTo(x,y);return this},lineTo:function(x,y){this.graphics.lineTo(x,y);return this},line:function(x1,y1,x2,y2){this.graphics.moveTo(x1,y1);this.lineTo(x2,y2);return this},curveTo:function(x,y,cpx,cpy){this.graphics.quadraticCurveTo(cpx,cpy,x,y);return this},curve:function(x1,y1,x2,y2,cpx,cpy){this.graphics.moveTo(x1,y1);this.curveTo(x2,y2,cpx,cpy);return this},stroke:function(){this.graphics.stroke();return this},strokeRect:function(x,y,width,height){this.graphics.beginPath();this.graphics.strokeRect(x,y,width,height);this.graphics.closePath();return this},fillRect:function(x,y,width,height){this.graphics.beginPath();this.graphics.fillRect(x,y,width,height);this.graphics.closePath();return this},strokeCircle:function(x,y,radius){this.graphics.beginPath();this.graphics.arc(x,y,radius,0,Math.PI*2,false);this.graphics.stroke();this.graphics.closePath();return this},fillCircle:function(x,y,radius){this.graphics.beginPath();this.graphics.arc(x,y,radius,0,Math.PI*2,false);this.graphics.fill();this.graphics.closePath();return this},radialCircle:function(x,y,radius,color,glowSize){var g=this.graphics.createRadialGradient(x,y,radius,x,y,glowSize);g.addColorStop(0,color);g.addColorStop(1,"rgba(0,0,0,0)");this.graphics.fillStyle=g;this.fillCircle(x,y,radius);return this},beginPath:function(){this.saveGraphics();this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();this.restoreGraphics();return this},eraser:function(brushSize){if(typeof brushSize==="undefined")brushSize=15;this.graphics.globalCompositeOperation="destination-out";this.graphics.lineWidth=brushSize;return this},pencil:function(brushSize){if(typeof brushSize!=="undefined")this.graphics.lineWidth=brushSize;this.graphics.globalCompositeOperation="source-over";return this},clear:function(){this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight);return this},save:function(){this.graphics.save();return this},restore:function(){this.graphics.restore();return this},saveGraphics:function(options){if(typeof options==="undefined")options=this.data.options;this.data.options=options;return this},restoreGraphics:function(options){if(typeof options==="undefined")options=this.data.options;for(var opt in options){this.graphics[opt]=options[opt]}return this},drawImage:function(src,x,y){if(typeof x==="undefined")x=0;if(typeof y==="undefined")y=0;var self=this,img=new Image;img.src=src;img.onload=function(){self.graphics.drawImage(img,x,y)};return this}};window.jSketch=jSketch})(this);