diff --git a/dist/jquery.sketchable.full.min.js b/dist/jquery.sketchable.full.min.js index 383d4e6..276a601 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.0 | 2017-12-04 */ -!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.width,this.stageHeight=a.height,this.data=b,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(){return this.saveGraphics({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}).restoreGraphics()},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.context.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.context.fillStyle=a,this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){return this.saveGraphics({strokeStyle:a||this.data.strokeStyle,lineWidth:b||this.data.lineWidth,lineCap:c||this.data.lineCap,lineJoin:d||this.data.lineJoin,miterLimit:e||this.data.miterLimit}).restoreGraphics()},moveTo:function(a,b){return this.context.moveTo(a,b),this},lineTo:function(a,b){return this.context.lineTo(a,b),this},line:function(a,b,c,d){return this.context.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){return this.context.quadraticCurveTo(c,d,a,b),this},curve:function(a,b,c,d,e,f){return this.context.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this},strokeRect:function(a,b,c,d){return this.context.beginPath(),this.context.strokeRect(a,b,c,d),this.context.closePath(),this},fillRect:function(a,b,c,d){return this.context.beginPath(),this.context.fillRect(a,b,c,d),this.context.closePath(),this},strokeCircle:function(a,b,c){return this.context.beginPath(),this.context.arc(a,b,c,0,2*Math.PI,!1),this.context.stroke(),this.context.closePath(),this},fillCircle:function(a,b,c){return this.context.beginPath(),this.context.arc(a,b,c,0,2*Math.PI,!1),this.context.fill(),this.context.closePath(),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 f=d.length-1,g=d[f],h=d[f-1];g[0]==h[0]&&g[1]==h[1]&&d.splice(f,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=b.identifier||0,f=a(b.target),g=f.data(p),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=b.identifier||0,f=a(b.target),g=f.data(p),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=g.sketch;g.sketch.isDrawing?l.lineStyle(h.graphics.strokeStyle,h.graphics.lineWidth):h.mouseupMovements.visible!==!1&&l.lineStyle(h.mouseupMovements.strokeStyle||"#DDD",h.mouseupMovements.lineWidth||1),l.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=b.identifier||0,d=a(b.target),e=d.data(p),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(p),f=e.options;if(f.multitouch)for(var g=b.originalEvent.changedTouches,h=0;h-1){var e=c(q,b);return e.apply(this,d)}return q[b]?q[b].apply(this,d):(a.error("Unknown method: "+b),this)},a.fn.sketchable.api=q,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.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[0].toDataURL(),strokes:c.strokes.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;b.src=a.image,b.onload=function(){c(this,a.strokes)}},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){function e(a){if(!f.options["_bound.memento$"+a])if(f.options["_bound.memento$"+a]=!0,f.options.events&&"function"==typeof f.options.events[a]){var b=f.options.events[a];f.options.events[a]=function(){b.apply(d,arguments),g[a].apply(d,arguments)}}else f.options.events[a]=g[a]}for(var f=d.sketchable("config"),g={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},h="mouseup clear destroy".split(" "),i=0;i1?f:e;a.beginFill(a.data.strokeStyle).fillCircle(g.x,g.y,a.data.firstPointSize)}a.lineStyle(d.strokeStyle,d.lineWidth).beginPath(),f.strokeId===e.strokeId&&a.line(e.x,e.y,f.x,f.y).stroke(),a.closePath()}function d(a){return a instanceof Array?{x:a[0],y:a[1],t:a[2]}: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 f=d.length-1,g=d[f],h=d[f-1];g[0]==h[0]&&g[1]==h[1]&&d.splice(f,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=b.identifier||0,f=a(b.target),g=f.data(p),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=b.identifier||0,f=a(b.target),g=f.data(p),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=g.sketch;g.sketch.isDrawing?l.lineStyle(h.graphics.strokeStyle,h.graphics.lineWidth):h.mouseupMovements.visible!==!1&&l.lineStyle(h.mouseupMovements.strokeStyle||"#DDD",h.mouseupMovements.lineWidth||1),l.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=b.identifier||0,d=a(b.target),e=d.data(p),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(p),f=e.options;if(f.multitouch)for(var g=b.originalEvent.changedTouches,h=0;h-1){var e=c(q,b);return e.apply(this,d)}return q[b]?q[b].apply(this,d):(a.error("Unknown method: "+b),this)},a.fn.sketchable.api=q,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.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[0].toDataURL(),strokes:c.strokes.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.strokes)},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){function e(a){if(!f.options["_bound.memento$"+a])if(f.options["_bound.memento$"+a]=!0,f.options.events&&"function"==typeof f.options.events[a]){var b=f.options.events[a];f.options.events[a]=function(){b.apply(d,arguments),g[a].apply(d,arguments)}}else f.options.events[a]=g[a]}for(var f=d.sketchable("config"),g={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},h="mouseup clear destroy".split(" "),i=0;i1?f:e;a.beginFill(a.data.strokeStyle).fillCircle(g.x,g.y,a.data.firstPointSize)}a.lineStyle(d.strokeStyle,d.lineWidth).beginPath(),f.strokeId===e.strokeId&&a.line(e.x,e.y,f.x,f.y).stroke(),a.closePath()}function d(a){return a instanceof Array?{x:a[0],y:a[1],t:a[2]}:a}for(var e=a.data(c),f=e.sketch,g=e.strokes,h=e.options.events,i=e.options.graphics,j=[],k=0;k0&&(f--,this.restore()),this},this.redo=function(){return f0?e[f].strokes=c.strokes.slice():(e.push({image:b[0].toDataURL(),strokes:c.strokes.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;b.src=a.image,b.onload=function(){c(this,a.strokes)}},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){function e(a){if(!f.options["_bound.memento$"+a])if(f.options["_bound.memento$"+a]=!0,f.options.events&&"function"==typeof f.options.events[a]){var b=f.options.events[a];f.options.events[a]=function(){b.apply(d,arguments),g[a].apply(d,arguments)}}else f.options.events[a]=g[a]}for(var f=d.sketchable("config"),g={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},h="mouseup clear destroy".split(" "),i=0;i0&&(f--,this.restore()),this},this.redo=function(){return f0?e[f].strokes=c.strokes.slice():(e.push({image:b[0].toDataURL(),strokes:c.strokes.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.strokes)},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){function e(a){if(!f.options["_bound.memento$"+a])if(f.options["_bound.memento$"+a]=!0,f.options.events&&"function"==typeof f.options.events[a]){var b=f.options.events[a];f.options.events[a]=function(){b.apply(d,arguments),g[a].apply(d,arguments)}}else f.options.events[a]=g[a]}for(var f=d.sketchable("config"),g={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},h="mouseup clear destroy".split(" "),i=0;id)&&(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 f=d.length-1,g=d[f],h=d[f-1];g[0]==h[0]&&g[1]==h[1]&&d.splice(f,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=a.identifier||0,c=a.target,d=dataBind(c)[q],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=a.identifier||0,c=a.target,d=dataBind(c)[q],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.visible!==!1&&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=a.identifier||0,c=a.target,d=dataBind(c)[q],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)[q],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g0&&(e--,this.restore()),this},this.redo=function(){return e0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.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;c.src=a.image,c.onload=function(){b(this,a.strokes)}},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){function d(b){if(!e.options["_bound.memento$"+b])if(e.options["_bound.memento$"+b]=!0,e.options.events&&"function"==typeof e.options.events[b]){var c=e.options.events[b];e.options.events[b]=function(){c.apply(a,arguments),f[b].apply(a,arguments)}}else e.options.events[b]=f[b]}for(var e=a.config(),f={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},g="mouseup clear destroy".split(" "),h=0;h1?f:e;a.beginFill(a.data.strokeStyle).fillCircle(g.x,g.y,a.data.firstPointSize)}a.lineStyle(d.strokeStyle,d.lineWidth).beginPath(),f.strokeId===e.strokeId&&a.line(e.x,e.y,f.x,f.y).stroke(),a.closePath()}function d(a){return a instanceof Array?{x:a[0],y:a[1],t:a[2]}: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 f=d.length-1,g=d[f],h=d[f-1];g[0]==h[0]&&g[1]==h[1]&&d.splice(f,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=a.identifier||0,c=a.target,d=dataBind(c)[q],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=a.identifier||0,c=a.target,d=dataBind(c)[q],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.visible!==!1&&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=a.identifier||0,c=a.target,d=dataBind(c)[q],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)[q],e=d.options;if(e.multitouch)for(var f=a.changedTouches,g=0;g0&&(e--,this.restore()),this},this.redo=function(){return e0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.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.strokes)},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){function d(b){if(!e.options["_bound.memento$"+b])if(e.options["_bound.memento$"+b]=!0,e.options.events&&"function"==typeof e.options.events[b]){var c=e.options.events[b];e.options.events[b]=function(){c.apply(a,arguments),f[b].apply(a,arguments)}}else e.options.events[b]=f[b]}for(var e=a.config(),f={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},g="mouseup clear destroy".split(" "),h=0;h1?f:e;a.beginFill(a.data.strokeStyle).fillCircle(g.x,g.y,a.data.firstPointSize)}a.lineStyle(d.strokeStyle,d.lineWidth).beginPath(),f.strokeId===e.strokeId&&a.line(e.x,e.y,f.x,f.y).stroke(),a.closePath()}function d(a){return a instanceof Array?{x:a[0],y:a[1],t:a[2]}: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;k0&&(e--,this.restore()),this},this.redo=function(){return e0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.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;c.src=a.image,c.onload=function(){b(this,a.strokes)}},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){function d(b){if(!e.options["_bound.memento$"+b])if(e.options["_bound.memento$"+b]=!0,e.options.events&&"function"==typeof e.options.events[b]){var c=e.options.events[b];e.options.events[b]=function(){c.apply(a,arguments),f[b].apply(a,arguments)}}else e.options.events[b]=f[b]}for(var e=a.config(),f={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},g="mouseup clear destroy".split(" "),h=0;h0&&(e--,this.restore()),this},this.redo=function(){return e0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.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.strokes)},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){function d(b){if(!e.options["_bound.memento$"+b])if(e.options["_bound.memento$"+b]=!0,e.options.events&&"function"==typeof e.options.events[b]){var c=e.options.events[b];e.options.events[b]=function(){c.apply(a,arguments),f[b].apply(a,arguments)}}else e.options.events[b]=f[b]}for(var e=a.config(),f={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},g="mouseup clear destroy".split(" "),h=0;hjQuery Sketchable instance. * This is a jQuery wrapper for the jSketch drawing class. * @namespace $.fn.sketchable - * @param {String|Object} method Method to invoke, or a configuration object. + * @param {string|object} method - Method to invoke, or a configuration object. * @return jQuery * @version 2.1 * @author Luis A. Leiva @@ -243,7 +243,7 @@ * Public API. Provides access to all methods of jQuery Sketchable instances.
* Note: This is equivalent to accessing `Sketchable.prototype` in the non-jQuery version. * @namespace $.fn.sketchable.api - * @type {Object} + * @type {object} * @see Sketchable.prototype */ $.fn.sketchable.api = api; @@ -251,7 +251,7 @@ /** * Plugins store. * @namespace $.fn.sketchable.plugins - * @type {Object} + * @type {object} * @example * // All plugins are created after instance initialization: * $.fn.sketchable.plugins['your-awesome-plugin'] = function($instance) { @@ -264,7 +264,7 @@ * Default configuration. * Note that `events.mouse*` callbacks are triggered only if interactive is set to true. * @namespace $.fn.sketchable.defaults - * @type {Object} + * @type {object} * @example * // The following is the default configuration: * $('canvas').sketchable({ diff --git a/jquery.sketchable.memento.js b/jquery.sketchable.memento.js index b0cb865..a07953a 100644 --- a/jquery.sketchable.memento.js +++ b/jquery.sketchable.memento.js @@ -14,7 +14,7 @@ * and is part of the {@link $.fn.sketchable.plugins.memento} plugin. * @class * @version 2.1 - * @param {Sketchable} $instance jQuery Sketchable element. + * @param {jQuery} $instance - jQuery sketchable element. * @example * var sketcher = $('canvas').sketchable(); * // This is internally done by the plugin, plus some checks: @@ -27,8 +27,8 @@ var self = this; /** * Update state. - * @param {Image} snapshot Image object. - * @param {Array} strokes Strokes associated with snapshot. + * @param {Image} snapshot - Image object. + * @param {array} strokes - Strokes associated with snapshot. * @private */ function draw(snapshot, strokes) { @@ -48,15 +48,15 @@ * Key event manager. * - Undo: "Ctrl + Z" * - Redo: "Ctrl + Y" or "Ctrl + Shift + Z" - * @param {Object} e DOM event. + * @param {object} ev - DOM event. * @private * @todo Decouple shortcut definition, perhaps via jquery.hotkeys plugin. */ - function keyManager(e) { - if (e.ctrlKey) { - switch (e.which) { + function keyManager(ev) { + if (ev.ctrlKey) { + switch (ev.which) { case 26: // Z - if (e.shiftKey) self.redo(); + if (ev.shiftKey) self.redo(); else self.undo(); break; case 25: // Y @@ -101,14 +101,14 @@ }; /** * Save current state. - * @param {Object} evt DOM event. + * @param {object} ev - DOM event. * @return {MementoCanvas} Class instance. */ - this.save = function(evt) { + this.save = function(ev) { $instance.sketchable('handler', function(elem, data) { // With multitouch events, only the first event should be used to store a snapshot. // Then, the subsequent multitouch events must update current strokes data. - if (evt && evt.identifier > 0) { + if (ev && ev.identifier > 0) { stack[stpos].strokes = data.strokes.slice(); } else { stack.push({image: elem[0].toDataURL(), strokes: data.strokes.slice()}); @@ -119,7 +119,7 @@ }; /** * Read current state: `{ image:String, strokes:Array }`. - * @return {Object} + * @return {object} */ this.state = function() { // Create a fresh copy of the current state. @@ -127,7 +127,8 @@ }; /** * Restore state. - * @param {Object} state Canvas state: `{ image:String, strokes:Array }`. Default: current state. + * @param {object} state - Canvas state: `{ image:String, strokes:Array }`. Default: current state. + * @return {MementoCanvas} Class instance. * @private */ this.restore = function(state) { @@ -163,7 +164,7 @@ /** * Memento plugin constructor for jQuery Sketchable instances. - * @param {Object} $instance jQuery Sketchable instance. + * @param {jQuery} $instance - jQuery sketchable instance. * @memberof $.fn.sketchable.plugins */ $.fn.sketchable.plugins.memento = function($instance) { @@ -174,8 +175,8 @@ clear: function(elem, data) { data.memento.reset(); }, - mouseup: function(elem, data, evt) { - data.memento.save(evt); + mouseup: function(elem, data, ev) { + data.memento.save(ev); }, destroy: function(elem, data) { data.memento.destroy(); @@ -202,7 +203,7 @@ } } - // Note: the init event is used to create sketchable instances, + // Note: the init event is used to create jQuery sketchable instances, // therefore it should NOT be overriden. var events = 'mouseup clear destroy'.split(' '); for (var i = 0; i < events.length; i++) { @@ -215,7 +216,7 @@ memento: { /** * Goes back to the previous CANVAS state, if available. - * @return {MementoCanvas} + * @return {jQuery} jQuery sketchable element. * @memberof $.fn.sketchable * @example jqueryElem.sketchable('memento.undo'); */ @@ -226,7 +227,7 @@ }, /** * Goes forward to the previous CANVAS state, if available. - * @return {MementoCanvas} + * @return {jQuery} jQuery sketchable element. * @memberof $.fn.sketchable * @example jqueryElem.sketchable('memento.redo'); */ @@ -237,7 +238,7 @@ }, /** * Save a snapshot of the current CANVAS. - * @return {MementoCanvas} + * @return {jQuery} jQuery sketchable element. * @memberof $.fn.sketchable * @example jqueryElem.sketchable('memento.save'); */ @@ -248,21 +249,20 @@ }, /** * Read current CANVAS state: `{ image:String, strokes:Array }`. - * @return {Object} + * @return {object} * @memberof $.fn.sketchable * @example var state = jqueryElem.sketchable('memento.state'); */ state: function() { var data = $(this).data(namespace); - data.memento.state(); - return $instance; + return data.memento.state(); }, /** * Restore a CANVAS state. - * @param {Object} state - * @param {String} state.image Base64 image. - * @param {Array} state.strokes Associated strokes. - * @return {MementoCanvas} + * @param {object} state - State data. + * @param {string} state.image - Base64 image. + * @param {array} state.strokes - Associated strokes. + * @return {jQuery} jQuery sketchable element. * @memberof $.fn.sketchable * @example jqueryElem.sketchable('memento.restore', state); */ diff --git a/jsketch.js b/jsketch.js index 48a2c90..91de12e 100644 --- a/jsketch.js +++ b/jsketch.js @@ -24,8 +24,8 @@ ;(function(window) { /** * @constructor - * @param {Object|Strig} elem DOM element or selector. - * @param {Object} [options] Configuration (default: {@link Sketchable#defaults}). + * @param {object|strig} elem - DOM element or selector. + * @param {object} [options] - Configuration (default: {@link Sketchable#defaults}). */ function jSketch(elem, options) { if (!elem) throw new Error('Sketchable requires a DOM element.'); @@ -50,7 +50,7 @@ jSketch.prototype = { /** * Allows to change the drawing context at runtime. - * @param {Object} elem DOM element. + * @param {object} elem - DOM element. * @return jSketch * @memberof jSketch */ @@ -85,8 +85,8 @@ }, /** * Sets the dimensions of canvas. - * @param {Number} width New canvas width. - * @param {Number} height New canvas width. + * @param {number} width - New canvas width. + * @param {number} height - New canvas width. * @return jSketch * @memberof jSketch */ @@ -101,7 +101,7 @@ }, /** * Sets the background color of canvas. - * @param {String} color An HTML color. + * @param {string} color - An HTML color. * @return jSketch * @memberof jSketch */ @@ -113,9 +113,9 @@ }, /** * Shortcut for setting the size + background color. - * @param {Number} width New canvas width. - * @param {Number} height New canvas width. - * @param {String} bgcolor An HTML color. + * @param {number} width - New canvas width. + * @param {number} height - New canvas width. + * @param {string} bgcolor - An HTML color. * @return jSketch * @memberof jSketch */ @@ -125,7 +125,7 @@ }, /** * Sets the fill color. - * @param {String} color An HTML color. + * @param {string} color - An HTML color. * @return jSketch * @memberof jSketch */ @@ -145,11 +145,11 @@ }, /** * Sets the line style. - * @param {String} color An HTML color. - * @param {Number} thickness Line thickness. - * @param {String} capStyle Style of line cap. - * @param {String} joinStyle Style of line join. - * @param {String} miter Style of line miter. Only works if capStyle is "miter". + * @param {string} color - An HTML color. + * @param {number} thickness - Line thickness. + * @param {string} capStyle - Style of line cap. + * @param {string} joinStyle - Style of line join. + * @param {string} miter - Style of line miter. Only works if capStyle is "miter". * @return jSketch * @memberof jSketch */ @@ -164,8 +164,8 @@ }, /** * Move brush to a coordinate in canvas. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. * @return jSketch * @memberof jSketch */ @@ -175,8 +175,8 @@ }, /** * Draws line to given coordinate. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. * @return jSketch * @memberof jSketch */ @@ -186,10 +186,10 @@ }, /** * Draws line from point 1 to point 2. - * @param {Number} x1 Horizontal coordinate of point 1. - * @param {Number} y1 Vertical coordinate of point 1. - * @param {Number} x2 Horizontal coordinate of point 2. - * @param {Number} y2 Vertical coordinate of point 2. + * @param {number} x1 - Horizontal coordinate of point 1. + * @param {number} y1 - Vertical coordinate of point 1. + * @param {number} x2 - Horizontal coordinate of point 2. + * @param {number} y2 - Vertical coordinate of point 2. * @return jSketch * @memberof jSketch */ @@ -200,10 +200,10 @@ }, /** * Draws curve to given coordinate. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. - * @param {Number} cpx Horizontal coordinate of control point. - * @param {Number} cpy Vertical coordinate of control point. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. + * @param {number} cpx - Horizontal coordinate of control point. + * @param {number} cpy - Vertical coordinate of control point. * @return jSketch * @memberof jSketch */ @@ -213,12 +213,12 @@ }, /** * Draws curve from coordinate 1 to coordinate 2. - * @param {Number} x1 Horizontal coordinate of point 1. - * @param {Number} y1 Vertical coordinate of point 1. - * @param {Number} x2 Horizontal coordinate of point 2. - * @param {Number} y2 Vertical coordinate of point 2. - * @param {Number} cpx Horizontal coordinate of control point. - * @param {Number} cpy Vertical coordinate of control point. + * @param {number} x1 - Horizontal coordinate of point 1. + * @param {number} y1 - Vertical coordinate of point 1. + * @param {number} x2 - Horizontal coordinate of point 2. + * @param {number} y2 - Vertical coordinate of point 2. + * @param {number} cpx - Horizontal coordinate of control point. + * @param {number} cpy - Vertical coordinate of control point. * @return jSketch * @memberof jSketch */ @@ -238,10 +238,10 @@ }, /** * Draws a stroke-only rectangle. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. - * @param {Number} width Rectangle width. - * @param {Number} height Rectangle height. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. + * @param {number} width - Rectangle width. + * @param {number} height - Rectangle height. * @return jSketch * @memberof jSketch */ @@ -253,10 +253,10 @@ }, /** * Draws a filled rectangle. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. - * @param {Number} width Rectangle width. - * @param {Number} height Rectangle height. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. + * @param {number} width - Rectangle width. + * @param {number} height - Rectangle height. * @return jSketch * @memberof jSketch */ @@ -268,9 +268,9 @@ }, /** * Draws a stroke-only circle. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. - * @param {Number} radius Circle radius. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. + * @param {number} radius - Circle radius. * @return jSketch * @memberof jSketch */ @@ -283,9 +283,9 @@ }, /** * Draws a filled circle. - * @param {Number} x Horizontal coordinate. - * @param {Number} y Vertical coordinate. - * @param {Number} radius Circle radius. + * @param {number} x - Horizontal coordinate. + * @param {number} y - Vertical coordinate. + * @param {number} radius - Circle radius. * @return jSketch * @memberof jSketch */ @@ -381,7 +381,7 @@ }, /** * Saves given drawing settings. - * @param {Object} [options] Graphics options. + * @param {object} [options] - Graphics options. * @return jSketch * @memberof jSketch */ @@ -404,9 +404,9 @@ }, /** * Draws an image. - * @param {String} src Image source path. - * @param {Number} [x] Horizontal coordinate. - * @param {Number} [y] Vertical coordinate. + * @param {string} src - Image source path. + * @param {number} [x] - Horizontal coordinate. + * @param {number} [y] - Vertical coordinate. * @return jSketch * @memberof jSketch */ diff --git a/sketchable.animate.js b/sketchable.animate.js index 93ef31e..bc64410 100644 --- a/sketchable.animate.js +++ b/sketchable.animate.js @@ -15,7 +15,7 @@ * Brings animation capabilities to Sketchable elements. * @class * @version 1.0 - * @param {Sketchable} instance Sketchable element. + * @param {Sketchable} instance - Sketchable element. */ function AnimateSketch(instance) { var self = this; @@ -73,10 +73,10 @@ * Draw line on jSketch canvas at time t. * Optionally set graphics options. * @private - * @param sketch Object jSketch canvas. - * @param coords Array Stroke coordinates. - * @param t Int Time iterator. - * @param [graphics] Object Graphics options. + * @param {object} sketch - jSketch canvas. + * @param {array} coords - Stroke coordinates. + * @param {number} t - Time iterator. + * @param {object} [graphics] - Graphics options. */ function drawLine(sketch, coords, t, graphics) { var prevPt = coords[t - 1]; @@ -97,8 +97,8 @@ /** * Convert point array to object. * @private - * @param {Array} p Point, having [x,y,t] items. - * @return {Object} + * @param {array} p - Point, having at least [x,y,t] items. + * @return {object} */ function toPoint(p) { if (!(p instanceof Array)) return p; @@ -108,7 +108,7 @@ /** * Animate plugin constructor for jQuery Sketchable instances. - * @param {Sketchable} instance Sketchable element. + * @param {Sketchable} instance - Sketchable element. * @memberof Sketchable#plugins */ Sketchable.prototype.plugins.animate = function(instance) { @@ -157,7 +157,7 @@ animate: { /** * Animate canvas strokes. - * @return {AnimateSketch} + * @return {Sketchable} instance Sketchable element. * @memberof Sketchable * @example sketchableInstance.strokes(strokeArray).animate.strokes(); * @example @@ -168,7 +168,7 @@ * // Animation started. * }, * animationend: function(elem, data) { - * // Animation finished. + * // Animation ended. * }, * } * }) diff --git a/sketchable.js b/sketchable.js index 45f03d1..e8e8166 100644 --- a/sketchable.js +++ b/sketchable.js @@ -17,8 +17,8 @@ /** * Initialize the plugin: make CANVAS elements drawable.
* Contrary to the jQuery version, only one element can be passed in at a time. - * @param {Object|Strig} elem DOM element or selector. - * @param {Object} [options] Configuration (default: {@link Sketchable#defaults}). + * @param {object|string} elem - DOM element or selector. + * @param {object} [options] - Configuration (default: {@link Sketchable#defaults}). * @class * @global * @version 2.1 @@ -50,7 +50,7 @@ Sketchable.prototype = { /** * Initialize the selected CANVAS elements. - * @param {Object} [opts] Configuration (default: {@link Sketchable#defaults}). + * @param {object} [opts] - Configuration (default: {@link Sketchable#defaults}). * @return {Sketchable} * @memberof Sketchable * @protected @@ -103,7 +103,7 @@ }, /** * Change configuration of an existing Sketchable instance. - * @param {Object} [opts] Configuration (default: {@link Sketchable#defaults}). + * @param {object} [opts] - Configuration (default: {@link Sketchable#defaults}). * @return {Sketchable} * @memberof Sketchable * @example @@ -124,8 +124,8 @@ }, /** * Get/Set drawing data strokes sequence. - * @param {Array} [arr] Multidimensional array of [x,y,time,status] tuples; status = 0 (pen down) or 1 (pen up). - * @return {Array|Sketchable} Strokes object on get, Sketchable instance on set (with the new data attached). + * @param {array} [arr] - Multidimensional array of [x,y,time,status] tuples; status = 0 (pen down) or 1 (pen up). + * @return {array|Sketchable} Strokes object on get, Sketchable instance on set (with the new data attached). * @memberof Sketchable * @example * var sketcher = new Sketchable('#my-canvas'); @@ -146,7 +146,7 @@ }, /** * Allows low-level manipulation of the sketchable canvas. - * @param {Function} callback Callback function, invoked with 2 arguments: elem (CANVAS element) and data (private element data). + * @param {function} callback - Callback function, invoked with 2 arguments: elem (CANVAS element) and data (private element data). * @return {Sketchable} * @memberof Sketchable * @example @@ -190,7 +190,7 @@ }, /** * Reinitializes a sketchable canvas with given configuration options. - * @param {Object} [opts] Configuration (default: {@link Sketchable#defaults}). + * @param {object} [opts] - Configuration (default: {@link Sketchable#defaults}). * @return {Sketchable} * @memberof Sketchable * @example @@ -242,7 +242,7 @@ /** * Plugins store. * @namespace Sketchable.prototype.plugins - * @type {Object} + * @type {object} * @static * @example * // Note: All plugins are created after instance initialization. @@ -256,7 +256,7 @@ * Default configuration. * Note that `events.mouse*` callbacks are triggered only if interactive is set to true. * @namespace Sketchable.prototype.defaults - * @type {Object} + * @type {object} * @static * @example * // The following is the default configuration: diff --git a/sketchable.memento.js b/sketchable.memento.js index d8cc32f..49fe66b 100644 --- a/sketchable.memento.js +++ b/sketchable.memento.js @@ -16,7 +16,7 @@ * and is part of the {@link Sketchable.plugins.memento} plugin. * @class * @version 2.1 - * @param {Sketchable} instance Sketchable element. + * @param {Sketchable} instance - Sketchable element. * @example * var sketcher = new Sketchable('canvas'); * // This is internally done by the plugin, plus some checks: @@ -29,8 +29,8 @@ var self = this; /** * Update state. - * @param {Image} snapshot Image object. - * @param {Array} strokes Strokes associated with snapshot. + * @param {Image} snapshot - Image object. + * @param {array} strokes - Strokes associated with snapshot. * @private */ function draw(snapshot, strokes) { @@ -50,15 +50,15 @@ * Key event manager. * - Undo: "Ctrl + Z" * - Redo: "Ctrl + Y" or "Ctrl + Shift + Z" - * @param {Object} e DOM event. + * @param {object} ev - DOM event. * @private * @todo Decouple shortcut definition. */ - function keyManager(e) { - if (e.ctrlKey) { - switch (e.which) { + function keyManager(ev) { + if (ev.ctrlKey) { + switch (ev.which) { case 26: // Z - if (e.shiftKey) self.redo(); + if (ev.shiftKey) self.redo(); else self.undo(); break; case 25: // Y @@ -103,14 +103,14 @@ }; /** * Save current state. - * @param {Object} evt DOM event. + * @param {object} ev - DOM event. * @return {MementoCanvas} Class instance. */ - this.save = function(evt) { + this.save = function(ev) { instance.handler(function(elem, data) { // With multitouch events, only the first event should be used to store a snapshot. // Then, the subsequent multitouch events must update current strokes data. - if (evt && evt.identifier > 0) { + if (ev && ev.identifier > 0) { stack[stpos].strokes = data.strokes.slice(); } else { stack.push({image: elem.toDataURL(), strokes: data.strokes.slice()}); @@ -121,7 +121,7 @@ }; /** * Read current state: `{ image:String, strokes:Array }`. - * @return {Object} + * @return {object} */ this.state = function() { // Create a fresh copy of the current state. @@ -129,7 +129,8 @@ }; /** * Restore state. - * @param {Object} state Canvas state: `{ image:String, strokes:Array }`. Default: current state. + * @param {object} state - Canvas state: `{ image:String, strokes:Array }`. Default: current state. + * @return {MementoCanvas} Class instance. * @private */ this.restore = function(state) { @@ -165,7 +166,7 @@ /** * Memento plugin constructor for Sketchable instances. - * @param {Sketchable} instance Sketchable element. + * @param {Sketchable} instance - Sketchable element. * @memberof Sketchable#plugins */ Sketchable.prototype.plugins.memento = function(instance) { @@ -176,8 +177,8 @@ clear: function(elem, data) { data.memento.reset(); }, - mouseup: function(elem, data, evt) { - data.memento.save(evt); + mouseup: function(elem, data, ev) { + data.memento.save(ev); }, destroy: function(elem, data) { data.memento.destroy(); @@ -217,7 +218,7 @@ memento: { /** * Goes back to the previous CANVAS state, if available. - * @return {MementoCanvas} + * @return {Sketchable} Sketchable instance. * @memberof Sketchable * @example sketchableInstance.memento.undo(); */ @@ -228,7 +229,7 @@ }, /** * Goes forward to the previous CANVAS state, if available. - * @return {MementoCanvas} + * @return {Sketchable} Sketchable instance. * @memberof Sketchable * @example sketchableInstance.memento.redo(); */ @@ -239,7 +240,7 @@ }, /** * Save a snapshot of the current CANVAS. - * @return {MementoCanvas} + * @return {Sketchable} Sketchable instance. * @memberof Sketchable * @example sketchableInstance.memento.save(); */ @@ -250,21 +251,20 @@ }, /** * Read current CANVAS state: `{ image:String, strokes:Array }`. - * @return {Object} + * @return {object} * @memberof Sketchable * @example var state = sketchableInstance.memento.state(); */ state: function() { var data = dataBind(instance.elem)[namespace]; - data.memento.state(); - return instance; + return data.memento.state(); }, /** * Restore a CANVAS state. - * @param {Object} state - * @param {String} state.image Base64 image. - * @param {Array} state.strokes Associated strokes. - * @return {MementoCanvas} + * @param {object} state - State data. + * @param {string} state.image - Base64 image. + * @param {array} state.strokes - Associated strokes. + * @return {Sketchable} Sketchable instance. * @memberof Sketchable * @example * var someState = sketchableInstance.memento.state(); diff --git a/sketchable.utils.js b/sketchable.utils.js index 1063df4..886ba7d 100644 --- a/sketchable.utils.js +++ b/sketchable.utils.js @@ -15,7 +15,8 @@ * Add/Read private data to a DOM element. * @global * @method - * @param {Object} elem - DOM element to attach data to. + * @param {object} elem - DOM element to bind data to. + * @return {void} * @example * var elem = document.getElementById('foo'); * // Attach private data to element: @@ -37,16 +38,21 @@ window.Event = { /** * Add event to DOM element. * @memberof module:Event - * @param {Object} elem - DOM element. - * @param {String} type - Event type. - * @param {Function} fn - Callback. + * @param {object|string} elem - DOM element or selector. + * @param {string} type - Event type. + * @param {function} fn - Callback. + * @return {void} * @example * Event.add(document.getElementById('foo'), 'click', function fooClick(evt) { * // Element was clicked. * }); + * Event.add('#foo', 'click', function fooClick(evt) { + * // Element was clicked. + * }); */ add: function(elem, type, fn) { if (!elem) return false; + if (typeof elem === 'string') elem = document.querySelector(elem); if (elem.addEventListener) { // W3C standard elem.addEventListener(type, fn, false); } else if (elem.attachEvent) { // Old IE versions @@ -60,15 +66,18 @@ window.Event = { /** * Remove event from DOM element. * @memberof module:Event - * @param {Object} elem - DOM element. - * @param {String} type - Event type. - * @param {Function} fn - Callback. + * @param {object|string} elem - DOM element or selector. + * @param {string} type - Event type. + * @param {function} fn - Callback. + * @return {void} * @example * // Assuming elemen had the `fooClick` function (see previous example): * Event.remove(document.getElementById('foo'), 'click', fooClick); + * Event.remove('#foo'), 'click', fooClick); */ remove: function(elem, type, fn) { if (!elem) return false; + if (typeof elem === 'string') elem = document.querySelector(elem); if (elem.removeEventListener) { // W3C standard elem.removeEventListener(type, fn, false); } else if (elem.detachEvent) { // Old IE versions @@ -80,8 +89,8 @@ window.Event = { /** * Determine if an event is a "right click" event. * @memberof module:Event - * @param {Object} ev - DOM event. - * @return {Boolean} + * @param {object} ev - DOM event. + * @return {boolean} * @example * // Assume this function is a click event listener. * function clickHandler(evt) { @@ -101,8 +110,8 @@ window.Event = { * A handy method to (deep) extend an object. * The input object is modified. * @global - * @param {Object} myObj - Input object. - * @return {Object} + * @param {object} myObj - Input object. + * @return {object} * @example * var one = { foo:1, bar: { a:true, b:false } }; * var two = { bar: { a:false } };