Commit 47143c01 authored by bbaer's avatar bbaer
Browse files

redo and undo implemented in fabric

parent d354a561
Pipeline #1666 passed with stage
in 2 minutes and 19 seconds
......@@ -99,7 +99,30 @@
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-hand-up"
},
{
"name": "undo",
"selector": "undo",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-repeat"
},
{
"name": "redo",
"selector": "redo",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-repeat"
}
],
"currentMode": "draw",
"colors": [
......
......@@ -24,16 +24,24 @@ var QfqNS = QfqNS || {};
};
n.History.prototype.put = function(object) {
if (this.pointerAtCurrent()) {
this._removeForwardHistory();
if (this.history.length > 1) {
if (this.canGoForward()) {
console.log("trying to remove history");
this._removeForwardHistory();
}
}
this.history.push(object);
this.pointer = this.history.length - 1;
if (JSON.stringify(this.history[this.pointer]) !== JSON.stringify(object)) {
this.history.push(object);
this.pointer = this.history.length - 1;
}
console.log(this);
};
n.History.prototype.back = function() {
if (this.canGoBack()) {
this.pointer--;
this.pointer = this.pointer - 1;
console.log(this.pointer + "/" + this.history.length);
console.log(this.history);
return this.history[this.pointer];
} else {
console.log("At the beginning of history");
......@@ -42,8 +50,9 @@ var QfqNS = QfqNS || {};
};
n.History.prototype.forward = function() {
console.log(this.pointer);
if (this.canGoForward()) {
this.pointer++;
this.pointer = this.pointer + 1;
return this.history[this.pointer];
} else {
console.log("At the end of history");
......@@ -59,16 +68,8 @@ var QfqNS = QfqNS || {};
return this.pointer < this.history.length - 1;
};
n.History.prototype.pointerAtCurrent = function() {
return this.pointer === this.history.length - 1;
};
n.History.prototype._removeForwardHistory = function() {
var tempPointer = this.history.length - 1;
while (tempPointer > this.pointer && this.history.length > 0) {
this.history.pop();
tempPointer--;
}
this.history.splice(this.pointer + 1, this.history.length - this.pointer);
};
......
......@@ -26,6 +26,7 @@ $(function (n) {
this.emojiContainer = {};
this.eventEmitter = new EventEmitter();
this.qfqPage = {};
this.changeHistory = true;
this.scaled = false;
this.textContainer = {};
this.userTextInput = {};
......@@ -187,6 +188,11 @@ $(function (n) {
}
};
ModeSettings.prototype.disableButton = function(id, bool) {
var $button = this.getButtonById(id);
$button.prop("disabled",bool);
};
ModeSettings.prototype.getModeByName = function (string) {
$.each(this.myModes.modes, function(i, o) {
if (o.name === string) {
......@@ -332,6 +338,7 @@ $(function (n) {
if (defaultColor) {
this.setColor(defaultColor);
}
this.history.put(this.canvas.toJSON());
};
n.Fabric.prototype.prepareJSON = function (jsonString) {
......@@ -844,6 +851,12 @@ $(function (n) {
case "exportImage":
this.prepareForExport();
break;
case "undo":
this.changeState("undo");
break;
case "redo":
this.changeState("redo");
break;
default:
console.error("unrecognized mode");
}
......@@ -981,6 +994,37 @@ $(function (n) {
this.setBrush();
};
/**
* Calls state from attached history and moves in defined
* direction. (undo / redo)
* @param direction string, undo or redo
*/
n.Fabric.prototype.changeState = function(direction) {
var state = {};
console.log(direction);
if (direction === "undo") {
state = this.history.back();
} else {
state = this.history.forward();
}
if (state) {
this.changeHistory = false;
var that = this;
this.canvas.loadFromJSON(state, function() {
that.canvas.renderAll();
that.changeHistory = true;
});
}
this.updateHistoryButtons();
};
n.Fabric.prototype.updateHistoryButtons = function() {
this.modeSettings.disableButton("undo", !this.history.canGoBack());
this.modeSettings.disableButton("redo", !this.history.canGoForward());
};
n.Fabric.prototype.rectangle = function() {
this.drawRectangleMode = true;
};
......@@ -1003,6 +1047,10 @@ $(function (n) {
/* Important! Changes only possible after initialisation */
if (this.userChangePossible) {
var that = this;
if (this.changeHistory) {
this.history.put(this.canvas.toJSON());
this.updateHistoryButtons();
}
this.outputField.val(JSON.stringify(that.canvas.toJSON()));
if (this.qfqPage.qfqForm) {
this.qfqPage.qfqForm.eventEmitter.emitEvent('form.changed', n.EventEmitter.makePayload(that, null));
......
......@@ -89,8 +89,18 @@
"icon": "glyphicon-trash"
},
{
"name": "rotateRight",
"selector": "turn-right",
"name": "undo",
"selector": "undo",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-repeat"
}, {
"name": "redo",
"selector": "redo",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment