mirror of https://github.com/luileito/jsketch.git
Added triggers to memento plugin
This commit is contained in:
Luis Leiva
parent
d0442c4220
commit
eadc93c4ff
|
|
@ -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 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.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;g<f.length;g++){var h=f[g];d.sketchable("decorate",h,e[h],"memento")}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}}});var i=d.sketchable("data");i.memento=new b(d),i.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.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function d(a){b.sketchable("handler",function(b,c){a&&a.identifier>0?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 g<f.length-1&&(g++,this.restore(),b.sketchable("trigger","mementoredo")),this},this.reset=function(){return f=[],g=-1,b.sketchable("trigger","mementoreset"),d(),this},this.save=function(a){return d(a),b.sketchable("trigger","mementosave"),this},this.state=function(){return JSON.parse(JSON.stringify(f[g]))},this.restore=function(a){a||(a=f[g]);var d=new Image;return d.src=a.image,d.onload=function(){c(this,a),b.sketchable("trigger","mementochange")},this},this.init=function(){return a(document).off("keypress",e),a(document).on("keypress",e),b.sketchable("trigger","mementoinit"),d(),this},this.destroy=function(){return a(document).off("keypress",e),b.sketchable("trigger","mementodestroy"),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;g<f.length;g++){var h=f[g];d.sketchable("decorate",h,e[h],"memento")}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}}});var i=d.sketchable("data");i.memento=new b(d),i.memento.init()}}(jQuery);
|
||||
|
|
@ -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.strokes.slice(),d.sketch.callStack=c.callStack.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(),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;f<e.length;f++){var g=e[f];a.decorate(g,d[g],"memento")}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}}});var h=dataBind(a.elem)[c];h.memento=new b(a),h.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.strokes.slice(),d.sketch.callStack=c.callStack.slice()})}function c(b){a.handler(function(a,c){b&&b.identifier>0?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<e.length-1&&(f++,this.restore(),a.trigger("mementoredo")),this},this.reset=function(){return e=[],f=-1,c(),this},this.save=function(b){return c(b),a.trigger("mementosave"),this},this.state=function(){return JSON.parse(JSON.stringify(e[f]))},this.restore=function(c){c||(c=e[f]);var d=new Image;return d.src=c.image,d.onload=function(){b(this,c),a.trigger("mementochange")},this},this.init=function(){return Event.remove(document,"keypress",d),Event.add(document,"keypress",d),a.trigger("mementoinit"),c(),this},this.destroy=function(){return Event.remove(document,"keypress",d),a.trigger("mementodestroy"),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;f<e.length;f++){var g=e[f];a.decorate(g,d[g],"memento")}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}}});var h=dataBind(a.elem)[c];h.memento=new b(a),h.memento.init()}}(this);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Memento plugin for jQuery Sketchable | v2.2 | Luis A. Leiva | MIT license
|
||||
* Memento plugin for jQuery Sketchable | v2.3 | Luis A. Leiva | MIT license
|
||||
*/
|
||||
|
||||
/* eslint-env browser */
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
var stack = [];
|
||||
var stpos = -1;
|
||||
var self = this;
|
||||
|
||||
/**
|
||||
* Update state.
|
||||
* @param {Image} snapshot - Image object.
|
||||
|
|
@ -47,6 +48,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.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++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue