Added memento plugin for undo/redo capability

jquery.sketchable.memento.js

@@ -0,0 +1,225 @@
+/*!
+ * Memento plugin for jQuery sketchable | v1.1 | Luis A. Leiva | MIT license
+ */
+/**
+ * @name $
+ * @class 
+ * See <a href="http://jquery.com/">the jQuery library</a> for full details.  
+ * This just documents the method that is added to jQuery by this plugin.
+ */
+/**
+ * @name $.fn
+ * @class 
+ * See <a href="http://jquery.com/">the jQuery library</a> for full details.  
+ * This just documents the method that is added to jQuery by this plugin.
+ */
+;(function($) {
+
+  /**
+   * @name MementoCanvas
+   * @class
+   * @return Object
+   * @example
+   * var mc = new MementoCanvas( $('canvas-selector') );
+   */
+  var MementoCanvas = function($canvas) {
+    
+    // Private stuff //////////////////////////////////////////////////////////
+    var stack = [];
+    var stpos = -1;
+    var self = this;
+    
+    function prev() {
+      if (stpos > 0) {
+        stpos--;
+        var snapshot = new Image();
+        snapshot.src = stack[stpos].state;
+        snapshot.onload = function() {
+          restore(this);
+        };
+      }
+    };
+
+    function next() {
+      if (stpos < stack.length - 1) {
+        stpos++;
+        var snapshot = new Image();
+        snapshot.src = stack[stpos].state;
+        snapshot.onload = function() {
+          restore(this);
+        };
+      }
+    };
+
+    function restore(snapshot) {
+      // Manipulate canvas via jQuery sketchable API.
+      // This way, we don't lose default drawing settings et al.
+      $canvas.sketchable('handler', function(elem, data){
+        data.sketch.clear();
+        data.sketch.graphics.drawImage(snapshot, 0,0);
+      });
+    };
+    
+    // Key event manager. 
+    // Undo: "Ctrl + Z"
+    // Redo: "Ctrl + Y" or "Ctrl + Shift + Z"
+    // TODO: decouple shortcut definition, perhaps via jquery.hotkeys plugin.
+    function keyManager(e) {
+      if (e.ctrlKey) {
+        switch (e.which) {
+          case 26: // Z
+            if (e.shiftKey) self.redo();
+            else self.undo();
+            break;
+          case 25: // Y
+            self.redo();
+            break;
+          default:
+            break;
+        }
+      }
+    };
+    
+    // Public stuff ///////////////////////////////////////////////////////////
+    
+    /** 
+     * Goes back to the last saved state, if available.
+     * @name undo
+     * @memberOf MementoCanvas
+     */
+    this.undo = function() {
+      prev();
+      $canvas.sketchable('handler', function(elem, data) {
+        data.strokes = stack[stpos].strokes.slice();
+      });
+    };
+    /** 
+     * Goes forward to the last saved state, if available.
+     * @name redo
+     * @memberOf MementoCanvas
+     */
+    this.redo = function() {
+      next();
+      $canvas.sketchable('handler', function(elem, data) {
+        data.strokes = stack[stpos].strokes.slice();
+      });
+    };
+    /** 
+     * Resets stack.
+     * @name reset
+     * @memberOf MementoCanvas
+     */
+    this.reset = function() {
+      stack = [];
+      stpos = -1;
+    };
+    /** 
+     * Save state.
+     * @name save
+     * @memberOf MementoCanvas
+     */
+    this.save = function() {
+      stpos++;
+      if (stpos < stack.length) stack.length = stpos;
+      $canvas.sketchable('handler', function(elem, data) {
+        stack.push({ state: elem[0].toDataURL(), strokes: data.strokes.slice() });
+      });
+    };
+    /** 
+     * Init instance.
+     * @name init
+     * @memberOf MementoCanvas
+     */
+    this.init = function() {
+      $(document).on("keypress", keyManager);
+    };
+    /** 
+     * Destroy instance.
+     * @name destroy
+     * @memberOf MementoCanvas
+     */
+    this.destroy = function() {
+      $(document).off("keypress", keyManager);
+      this.reset();
+    };
+    
+  };
+  
+  // Bind plugin extension ////////////////////////////////////////////////////
+  
+  var plugin = $.fn.sketchable;
+  var availMethods = plugin('methods');
+  
+  function configure(elem, options) {
+    $.extend(plugin.defaults, options);
+    
+    var mc = new MementoCanvas(elem);
+    
+    var callbacks = {
+      init: function(elem, data) {
+        data.memento = mc;
+        data.memento.save();
+        data.memento.init();
+      },
+      mouseup: function(elem, data, e) {
+        data.memento.save();
+      },
+      destroy: function(elem, data) {
+        data.memento.destroy();
+      }
+    };
+    
+    // A helper function to override user-defined event listeners.
+    function override(ev) {
+      if (options.events && typeof options.events[ev] === 'function') {
+        var _init = options.events[ev];
+        options.events[ev] = function() {
+          var args = Array.prototype.slice.call(arguments, 0);
+          _init.call(this, args);
+          callbacks[ev].apply(this, args);
+        }
+      } else {
+        plugin.defaults.events[ev] = callbacks[ev];
+      }
+    };
+    
+    var events = 'init mouseup destroy'.split(" ");
+    for (var i = 0; i < events.length; i++) {
+      override(events[i]);
+    }
+    
+    // Expose public API for jquery.sketchable plugin.
+    $.extend(availMethods, {
+      undo: function() {
+        mc.undo();
+      },
+      redo: function() {
+        mc.redo();
+      },
+    });
+    
+    return plugin.defaults;
+  };
+  
+  /** 
+   * Creates a new memento-capable jQuery.sketchable object.
+   * @param {String|Object} method name of the method to invoke, 
+   *  or a configuration object.
+   * @return jQuery
+   * @class
+   * @example
+   * $(selector).sketchable();
+   * $(selector).sketchable({interactive:false});
+   */
+  $.fn.sketchable = function(method) {
+    if (typeof method === 'object' || !method) {
+      // Object creation: configure memento extension.
+      var newOptions = configure(this, arguments[0]);
+      return availMethods.init.apply(this, [newOptions]);
+    } else if (availMethods[method]) {
+      // Method invocation: execute it as usual.
+      return availMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    }
+  };
+
+})(jQuery);

jquery.sketchable.memento.min.js

@@ -0,0 +1,4 @@
+/*!
+ * Memento plugin for jQuery sketchable | v1.1 | Luis A. Leiva | MIT license
+ */
+(function(d){var a=function(l){var g=[];var f=-1;var h=this;function k(){if(f>0){f--;var n=new Image();n.src=g[f].state;n.onload=function(){i(this)}}}function j(){if(f<g.length-1){f++;var n=new Image();n.src=g[f].state;n.onload=function(){i(this)}}}function i(n){l.sketchable("handler",function(o,p){p.sketch.clear();p.sketch.graphics.drawImage(n,0,0)})}function m(n){if(n.ctrlKey){switch(n.which){case 26:if(n.shiftKey){h.redo()}else{h.undo()}break;case 25:h.redo();break;default:break}}}this.undo=function(){k();l.sketchable("handler",function(n,o){o.strokes=g[f].strokes.slice()})};this.redo=function(){j();l.sketchable("handler",function(n,o){o.strokes=g[f].strokes.slice()})};this.reset=function(){g=[];f=-1};this.save=function(){f++;if(f<g.length){g.length=f}l.sketchable("handler",function(n,o){g.push({state:n[0].toDataURL(),strokes:o.strokes.slice()})})};this.init=function(){d(document).on("keypress",m)};this.destroy=function(){d(document).off("keypress",m);this.reset()}};var c=d.fn.sketchable;var e=c("methods");function b(l,f){d.extend(c.defaults,f);var m=new a(l);var k={init:function(i,n){n.memento=m;n.memento.save();n.memento.init()},mouseup:function(i,n,o){n.memento.save()},destroy:function(i,n){n.memento.destroy()}};function j(i){if(f.events&&typeof f.events[i]==="function"){var n=f.events[i];f.events[i]=function(){var o=Array.prototype.slice.call(arguments,0);n.call(this,o);k[i].apply(this,o)}}else{c.defaults.events[i]=k[i]}}var h="init mouseup destroy".split(" ");for(var g=0;g<h.length;g++){j(h[g])}d.extend(e,{undo:function(){m.undo()},redo:function(){m.redo()},});return c.defaults}d.fn.sketchable=function(g){if(typeof g==="object"||!g){var f=b(this,arguments[0]);return e.init.apply(this,[f])}else{if(e[g]){return e[g].apply(this,Array.prototype.slice.call(arguments,1))}}}})(jQuery);