mirror of https://github.com/luileito/jsketch.git
Added memento plugin for undo/redo capability
This commit is contained in:
Luis Leiva
parent
aad5334dd3
commit
7090bb9a3a
|
|
@ -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);
|
||||||
|
|
@ -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);
|
||||||
Loading…
Reference in New Issue