Updated code doc

dist/jquery.sketchable.memento.min.js

@@ -1 +1 @@
-!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 f<e.length-1&&(f++,this.restore()),this},this.reset=function(){return e=[],f=-1,this.save()},this.save=function(a){return b.sketchable("handler",function(b,c){a&&a.identifier>0?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;i<h.length;i++)e(h[i]);a.extend(a.fn.sketchable.api,{memento:{undo:function(){var b=a(this).data(c);return b.memento.undo(),d},redo:function(){var b=a(this).data(c);return b.memento.redo(),d},save:function(){var b=a(this).data(c);return b.memento.save(),d},state:function(){var b=a(this).data(c);return b.memento.state(),d},restore:function(b){var e=a(this).data(c);return e.memento.restore(b),d}}}),f.memento=new b(d),f.memento.init()}}(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 f<e.length-1&&(f++,this.restore()),this},this.reset=function(){return e=[],f=-1,this.save()},this.save=function(a){return b.sketchable("handler",function(b,c){a&&a.identifier>0?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;i<h.length;i++)e(h[i]);a.extend(a.fn.sketchable.api,{memento:{undo:function(){var b=a(this).data(c);return b.memento.undo(),d},redo:function(){var b=a(this).data(c);return b.memento.redo(),d},save:function(){var b=a(this).data(c);return b.memento.save(),d},state:function(){var b=a(this).data(c);return b.memento.state()},restore:function(b){var e=a(this).data(c);return e.memento.restore(b),d}}}),f.memento=new b(d),f.memento.init()}}(jQuery);

dist/sketchable.memento.min.js

@@ -1 +1 @@
-!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.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 e<d.length-1&&(e++,this.restore()),this},this.reset=function(){return d=[],e=-1,this.save()},this.save=function(b){return a.handler(function(a,c){b&&b.identifier>0?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;h<g.length;h++)d(g[h]);deepExtend(a,{memento:{undo:function(){var b=dataBind(a.elem)[c];return b.memento.undo(),a},redo:function(){var b=dataBind(a.elem)[c];return b.memento.redo(),a},save:function(){var b=dataBind(a.elem)[c];return b.memento.save(),a},state:function(){var b=dataBind(a.elem)[c];return b.memento.state(),a},restore:function(b){var d=dataBind(a.elem)[c];return d.memento.restore(b),a}}}),e.memento=new b(a),e.memento.init()}}(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.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 e<d.length-1&&(e++,this.restore()),this},this.reset=function(){return d=[],e=-1,this.save()},this.save=function(b){return a.handler(function(a,c){b&&b.identifier>0?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;h<g.length;h++)d(g[h]);deepExtend(a,{memento:{undo:function(){var b=dataBind(a.elem)[c];return b.memento.undo(),a},redo:function(){var b=dataBind(a.elem)[c];return b.memento.redo(),a},save:function(){var b=dataBind(a.elem)[c];return b.memento.save(),a},state:function(){var b=dataBind(a.elem)[c];return b.memento.state()},restore:function(b){var d=dataBind(a.elem)[c];return d.memento.restore(b),a}}}),e.memento=new b(a),e.memento.init()}}(this);

jquery.sketchable.animate.js

@@ -13,7 +13,7 @@
    * Brings animation capabilities to Sketchable elements.
    * @class
    * @version 1.0
-   * @param {Sketchable} $instance jQuery Sketchable element.
+   * @param {jQuery} $instance - jQuery sketchable element.
    */
   function AnimateSketch($instance) {
     var self = this;
@@ -71,10 +71,10 @@
      * Draw line on jSketch canvas at time t.
      * Optionally set graphics options.
      * @private
-     * @param sketch     Object jSketch canvas.
+     * @param {object} sketch - jSketch canvas.
-     * @param coords     Array  Stroke coordinates.
+     * @param {array} coords - Stroke coordinates.
-     * @param t          Int    Time iterator.
+     * @param {number} t - Time iterator.
-     * @param [graphics] Object Graphics options.
+     * @param {object} [graphics] - Graphics options.
      */
     function drawLine(sketch, coords, t, graphics) {
       var prevPt = coords[t - 1];
@@ -95,8 +95,8 @@
     /**
      * Convert point array to object.
      * @private
-     * @param {Array} p Point, having [x,y,t] items.
+     * @param {array} p - Point, having at least [x,y,t] items.
-     * @return {Object}
+     * @return {object}
      */
     function toPoint(p) {
       if (!(p instanceof Array)) return p;
@@ -106,7 +106,7 @@
 
   /**
    * Animate 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.animate = function($instance) {
@@ -155,7 +155,7 @@
       animate: {
         /**
          * Animate canvas strokes.
-         * @return {AnimateSketch}
+         * @return {jQuery} jQuery sketchable element.
          * @memberof $.fn.sketchable
          * @example jqueryElem.sketchable('strokes', strokesArray).sketchable('animate.strokes');
          * @example

jquery.sketchable.js

@@ -6,8 +6,8 @@
 /**
  * @method $
  * @description jQuery constructor. See {@link https://jquery.com}
- * @param {String} selector jQuery selector.
+ * @param {string} selector - jQuery selector.
- * @return {Object} jQuery
+ * @return {object} jQuery
  */
 /**
  * @namespace $.fn
@@ -25,7 +25,7 @@
   var api = {
     /**
      * Initialize the selected jQuery objects.
-     * @param {Object} [opts] Configuration (default: {@link $.fn.sketchable.defaults}).
+     * @param {object} [opts] - Configuration (default: {@link $.fn.sketchable.defaults}).
      * @return jQuery
      * @memberof $.fn.sketchable
      * @ignore
@@ -74,7 +74,7 @@
     },
     /**
      * Change configuration of an existing jQuery Sketchable element.
-     * @param {Object} [opts] Configuration (default: {@link $.fn.sketchable.defaults}).
+     * @param {object} [opts] - Configuration (default: {@link $.fn.sketchable.defaults}).
      * @return jQuery
      * @memberof $.fn.sketchable
      * @example
@@ -95,7 +95,7 @@
     },
     /**
      * 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).
+     * @param {array} [arr] - Multidimensional array of [x,y,time,status] tuples; status = 0 (pen down) or 1 (pen up).
      * @return Strokes object on get, jQuery instance on set (with the new data attached).
      * @memberof $.fn.sketchable
      * @example
@@ -117,7 +117,7 @@
     },
     /**
      * Allow 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 jQuery
      * @memberof $.fn.sketchable
      * @example
@@ -160,7 +160,7 @@
     },
     /**
      * Reinitialize a sketchable canvas with given configuration options.
-     * @param {Object} [opts] Configuration (default: {@link $.fn.sketchable.defaults}).
+     * @param {object} [opts] - Configuration (default: {@link $.fn.sketchable.defaults}).
      * @return jQuery
      * @memberof $.fn.sketchable
      * @example
@@ -212,7 +212,7 @@
    * Create a <tt>jQuery Sketchable</tt> instance.
    * This is a jQuery wrapper for the <tt>jSketch</tt> 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.<br>
    * 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 <tt>interactive</tt> is set to <tt>true</tt>.
    * @namespace $.fn.sketchable.defaults
-   * @type {Object}
+   * @type {object}
    * @example
    * // The following is the default configuration:
    * $('canvas').sketchable({

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 {Image} snapshot - Image object.
-     * @param {Array} strokes Strokes associated with snapshot.
+     * @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) {
+    function keyManager(ev) {
-      if (e.ctrlKey) {
+      if (ev.ctrlKey) {
-        switch (e.which) {
+        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) {
+      mouseup: function(elem, data, ev) {
-        data.memento.save(evt);
+        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 data.memento.state();
-          return $instance;
         },
         /**
          * Restore a CANVAS state.
-         * @param {Object} state
+         * @param {object} state - State data.
-         * @param {String} state.image Base64 image.
+         * @param {string} state.image - Base64 image.
-         * @param {Array} state.strokes Associated strokes.
+         * @param {array} state.strokes - Associated strokes.
-         * @return {MementoCanvas}
+         * @return {jQuery} jQuery sketchable element.
          * @memberof $.fn.sketchable
          * @example jqueryElem.sketchable('memento.restore', state);
          */

jsketch.js

@@ -24,8 +24,8 @@
 ;(function(window) {
   /**
    * @constructor
-   * @param {Object|Strig} elem DOM element or selector.
+   * @param {object|strig} elem - DOM element or selector.
-   * @param {Object} [options] Configuration (default: {@link Sketchable#defaults}).
+   * @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} width - New canvas width.
-     * @param {Number} height 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} width - New canvas width.
-     * @param {Number} height New canvas width.
+     * @param {number} height - New canvas width.
-     * @param {String} bgcolor An HTML color.
+     * @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 {string} color - An HTML color.
-     * @param {Number} thickness Line thickness.
+     * @param {number} thickness - Line thickness.
-     * @param {String} capStyle Style of line cap.
+     * @param {string} capStyle - Style of line cap.
-     * @param {String} joinStyle Style of line join.
+     * @param {string} joinStyle - Style of line join.
-     * @param {String} miter Style of line miter. Only works if capStyle is "miter".
+     * @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} x - Horizontal coordinate.
-     * @param {Number} y Vertical 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} x - Horizontal coordinate.
-     * @param {Number} y Vertical 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} x1 - Horizontal coordinate of point 1.
-     * @param {Number} y1 Vertical coordinate of point 1.
+     * @param {number} y1 - Vertical coordinate of point 1.
-     * @param {Number} x2 Horizontal coordinate of point 2.
+     * @param {number} x2 - Horizontal coordinate of point 2.
-     * @param {Number} y2 Vertical 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} x - Horizontal coordinate.
-     * @param {Number} y Vertical coordinate.
+     * @param {number} y - Vertical coordinate.
-     * @param {Number} cpx Horizontal coordinate of control point.
+     * @param {number} cpx - Horizontal coordinate of control point.
-     * @param {Number} cpy Vertical 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} x1 - Horizontal coordinate of point 1.
-     * @param {Number} y1 Vertical coordinate of point 1.
+     * @param {number} y1 - Vertical coordinate of point 1.
-     * @param {Number} x2 Horizontal coordinate of point 2.
+     * @param {number} x2 - Horizontal coordinate of point 2.
-     * @param {Number} y2 Vertical coordinate of point 2.
+     * @param {number} y2 - Vertical coordinate of point 2.
-     * @param {Number} cpx Horizontal coordinate of control point.
+     * @param {number} cpx - Horizontal coordinate of control point.
-     * @param {Number} cpy Vertical 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} x - Horizontal coordinate.
-     * @param {Number} y Vertical coordinate.
+     * @param {number} y - Vertical coordinate.
-     * @param {Number} width Rectangle width.
+     * @param {number} width - Rectangle width.
-     * @param {Number} height Rectangle height.
+     * @param {number} height - Rectangle height.
      * @return jSketch
      * @memberof jSketch
      */
@@ -253,10 +253,10 @@
     },
     /**
      * Draws a filled rectangle.
-     * @param {Number} x Horizontal coordinate.
+     * @param {number} x - Horizontal coordinate.
-     * @param {Number} y Vertical coordinate.
+     * @param {number} y - Vertical coordinate.
-     * @param {Number} width Rectangle width.
+     * @param {number} width - Rectangle width.
-     * @param {Number} height Rectangle height.
+     * @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} x - Horizontal coordinate.
-     * @param {Number} y Vertical coordinate.
+     * @param {number} y - Vertical coordinate.
-     * @param {Number} radius Circle radius.
+     * @param {number} radius - Circle radius.
      * @return jSketch
      * @memberof jSketch
      */
@@ -283,9 +283,9 @@
     },
     /**
      * Draws a filled circle.
-     * @param {Number} x Horizontal coordinate.
+     * @param {number} x - Horizontal coordinate.
-     * @param {Number} y Vertical coordinate.
+     * @param {number} y - Vertical coordinate.
-     * @param {Number} radius Circle radius.
+     * @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 {string} src - Image source path.
-     * @param {Number} [x] Horizontal coordinate.
+     * @param {number} [x] - Horizontal coordinate.
-     * @param {Number} [y] Vertical coordinate.
+     * @param {number} [y] - Vertical coordinate.
      * @return jSketch
      * @memberof jSketch
      */

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 {object} sketch - jSketch canvas.
-     * @param coords     Array  Stroke coordinates.
+     * @param {array} coords - Stroke coordinates.
-     * @param t          Int    Time iterator.
+     * @param {number} t - Time iterator.
-     * @param [graphics] Object Graphics options.
+     * @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.
+     * @param {array} p - Point, having at least [x,y,t] items.
-     * @return {Object}
+     * @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.
          *     },
          *   }
          * })

sketchable.js

@@ -17,8 +17,8 @@
   /**
    * Initialize the plugin: make CANVAS elements drawable.<br>
    * 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|string} elem - DOM element or selector.
-   * @param {Object} [options] Configuration (default: {@link Sketchable#defaults}).
+   * @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).
+     * @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).
+     * @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 <tt>interactive</tt> is set to <tt>true</tt>.
    * @namespace Sketchable.prototype.defaults
-   * @type {Object}
+   * @type {object}
    * @static
    * @example
    * // The following is the default configuration:

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 {Image} snapshot - Image object.
-     * @param {Array} strokes Strokes associated with snapshot.
+     * @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) {
+    function keyManager(ev) {
-      if (e.ctrlKey) {
+      if (ev.ctrlKey) {
-        switch (e.which) {
+        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) {
+      mouseup: function(elem, data, ev) {
-        data.memento.save(evt);
+        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 data.memento.state();
-          return instance;
         },
         /**
          * Restore a CANVAS state.
-         * @param {Object} state
+         * @param {object} state - State data.
-         * @param {String} state.image Base64 image.
+         * @param {string} state.image - Base64 image.
-         * @param {Array} state.strokes Associated strokes.
+         * @param {array} state.strokes - Associated strokes.
-         * @return {MementoCanvas}
+         * @return {Sketchable} Sketchable instance.
          * @memberof Sketchable
          * @example
          * var someState = sketchableInstance.memento.state();

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 {object|string} elem - DOM element or selector.
-   * @param {String} type - Event type.
+   * @param {string} type - Event type.
-   * @param {Function} fn - Callback.
+   * @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 {object|string} elem - DOM element or selector.
-   * @param {String} type - Event type.
+   * @param {string} type - Event type.
-   * @param {Function} fn - Callback.
+   * @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.
+   * @param {object} ev - DOM event.
-   * @return {Boolean}
+   * @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.
+ * @param {object} myObj - Input object.
- * @return {Object}
+ * @return {object}
  * @example
  * var one = { foo:1, bar: { a:true, b:false } };
  * var two = { bar: { a:false } };