diff --git a/dist/jquery.sketchable.memento.min.js b/dist/jquery.sketchable.memento.min.js index b0ff627..94a4c43 100644 --- a/dist/jquery.sketchable.memento.min.js +++ b/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.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore()),this},this.redo=function(){return f0?e[f].strokes=c.strokes.slice():(e.push({image:b.get(0).toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),f++)}),this},this.state=function(){return JSON.parse(JSON.stringify(e[f]))},this.restore=function(a){a||(a=e[f]);var b=new Image;return b.src=a.image,b.onload=function(){c(this,a)},this},this.init=function(){return a(document).off("keypress",d),a(document).on("keypress",d),this.save()},this.destroy=function(){return a(document).off("keypress",d),this.reset()}}var c="sketchable";a.fn.sketchable.plugins.memento=function(d){for(var e={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},f="mouseup clear destroy".split(" "),g=0;g0?f[g].strokes=c.strokes.slice():(f.push({image:b.get(0).toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),g++)})}function e(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?h.redo():h.undo();break;case 25:h.redo()}}var f=[],g=-1,h=this;this.undo=function(){return g>0&&(g--,this.restore(),b.sketchable("trigger","mementoundo")),this},this.redo=function(){return g0&&(e--,this.restore()),this},this.redo=function(){return e0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),e++)}),this},this.state=function(){return JSON.parse(JSON.stringify(d[e]))},this.restore=function(a){a||(a=d[e]);var c=new Image;return c.src=a.image,c.onload=function(){b(this,a)},this},this.init=function(){return Event.remove(document,"keypress",c),Event.add(document,"keypress",c),this.save()},this.destroy=function(){return Event.remove(document,"keypress",c),this.reset()}}var c="sketchable";Sketchable.prototype.plugins.memento=function(a){for(var d={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},e="mouseup clear destroy".split(" "),f=0;f0?e[f].strokes=c.strokes.slice():(e.push({image:a.toDataURL(),strokes:c.strokes.slice(),callStack:c.sketch.callStack.slice()}),f++)})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore(),a.trigger("mementoundo")),this},this.redo=function(){return f 0) { + stack[stpos].strokes = data.strokes.slice(); + } else { + stack.push({ + image: elem.get(0).toDataURL(), + strokes: data.strokes.slice(), + callStack: data.sketch.callStack.slice(), + }); + stpos++; + } + }); + } + /** * Key event manager. * - Undo: "Ctrl + Z" @@ -70,6 +97,7 @@ } } } + /** * Goes back to the last saved state, if available. * @return {MementoCanvas} Class instance. @@ -78,6 +106,8 @@ if (stpos > 0) { stpos--; this.restore(); + + $instance.sketchable('trigger', 'mementoundo'); } return this; }; @@ -89,6 +119,8 @@ if (stpos < stack.length - 1) { stpos++; this.restore(); + + $instance.sketchable('trigger', 'mementoredo'); } return this; }; @@ -99,8 +131,13 @@ this.reset = function() { stack = []; stpos = -1; + + $instance.sketchable('trigger', 'mementoreset'); + // Save blank state afterward. - return this.save(); + save(); + + return this; }; /** * Save current state. @@ -108,20 +145,10 @@ * @return {MementoCanvas} Class instance. */ 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 (ev && ev.identifier > 0) { - stack[stpos].strokes = data.strokes.slice(); - } else { - stack.push({ - image: elem.get(0).toDataURL(), - strokes: data.strokes.slice(), - callStack: data.sketch.callStack.slice(), - }); - stpos++; - } - }); + save(ev); + + $instance.sketchable('trigger', 'mementosave'); + return this; }; /** @@ -145,7 +172,10 @@ snapshot.src = state.image; snapshot.onload = function() { draw(this, state); + + $instance.sketchable('trigger', 'mementochange'); }; + return this; }; /** @@ -155,8 +185,13 @@ this.init = function() { $(document).off('keypress', keyManager); $(document).on('keypress', keyManager); + + $instance.sketchable('trigger', 'mementoinit'); + // Save blank state to begin with. - return this.save(); + save(); + + return this; }; /** * Destroy instance: reset state and remove key event listeners. @@ -164,9 +199,11 @@ */ this.destroy = function() { $(document).off('keypress', keyManager); + + $instance.sketchable('trigger', 'mementodestroy'); + return this.reset(); }; - } /** @@ -256,7 +293,7 @@ data.memento.restore(state); return $instance; }, - }, + } }); // Initialize plugin here. diff --git a/src/sketchable.memento.js b/src/sketchable.memento.js index 87813b1..d684f2d 100644 --- a/src/sketchable.memento.js +++ b/src/sketchable.memento.js @@ -1,5 +1,5 @@ /*! - * Memento plugin for Sketchable | v2.2 | Luis A. Leiva | MIT license + * Memento plugin for Sketchable | v2.3 | Luis A. Leiva | MIT license */ // XXX: Requires `sketchable.utils.js` to be loaded first. @@ -27,6 +27,7 @@ var stack = []; var stpos = -1; var self = this; + /** * Update state. * @param {image} snapshot - Image object. @@ -49,6 +50,32 @@ data.sketch.callStack = state.callStack.slice(); }); } + + /** + * Update state. + * @param {Image} snapshot - Image object. + * @param {object} state - State associated with snapshot. + * @param {object} state.strokes - Strokes data. + * @param {object} state.callStack - Actions history. + * @private + */ + function save(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 (ev && ev.identifier > 0) { + stack[stpos].strokes = data.strokes.slice(); + } else { + stack.push({ + image: elem.toDataURL(), + strokes: data.strokes.slice(), + callStack: data.sketch.callStack.slice(), + }); + stpos++; + } + }); + } + /** * Key event manager. * - Undo: "Ctrl + Z" @@ -80,6 +107,8 @@ if (stpos > 0) { stpos--; this.restore(); + + instance.trigger('mementoundo'); } return this; }; @@ -91,6 +120,8 @@ if (stpos < stack.length - 1) { stpos++; this.restore(); + + instance.trigger('mementoredo'); } return this; }; @@ -101,8 +132,11 @@ this.reset = function() { stack = []; stpos = -1; + // Save blank state afterward. - return this.save(); + save(); + + return this; }; /** * Save current state. @@ -110,20 +144,10 @@ * @return {MementoCanvas} Class instance. */ 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 (ev && ev.identifier > 0) { - stack[stpos].strokes = data.strokes.slice(); - } else { - stack.push({ - image: elem.toDataURL(), - strokes: data.strokes.slice(), - callStack: data.sketch.callStack.slice(), - }); - stpos++; - } - }); + save(ev); + + instance.trigger('mementosave'); + return this; }; /** @@ -147,7 +171,10 @@ snapshot.src = state.image; snapshot.onload = function() { draw(this, state); + + instance.trigger('mementochange'); }; + return this; }; /** @@ -157,8 +184,13 @@ this.init = function() { Event.remove(document, 'keypress', keyManager); Event.add(document, 'keypress', keyManager); + + instance.trigger('mementoinit'); + // Save blank state to begin with. - return this.save(); + save(); + + return this; }; /** * Destroy instance: reset state and remove key event listeners. @@ -166,6 +198,9 @@ */ this.destroy = function() { Event.remove(document, 'keypress', keyManager); + + instance.trigger('mementodestroy'); + return this.reset(); };