Commit 5b31b4bf authored by Carsten  Rose's avatar Carsten Rose
Browse files

Merge branch 'undo' into 'master'

Undo

See merge request !129
parents 1f6a89c1 f0413a65
Pipeline #1678 passed with stage
in 2 minutes and 12 seconds
......@@ -9,6 +9,8 @@
"toggle": "isDrawingMode",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Draw with a pencil",
"icon": "glyphicon-pencil"
},
{
......@@ -20,6 +22,8 @@
"toggle": "isHighlightMode",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Highlighter",
"icon": "glyphicon-pencil"
},
......@@ -32,6 +36,8 @@
"toggle": "emojiMode",
"hasToggleElement": true,
"toggleElement": "emojiContainer",
"disabled": false,
"tooltip": "Emojis",
"icon": "glyphicon-ice-lolly-tasted"
},
{
......@@ -43,6 +49,8 @@
"toggle": "drawRectangleMode",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Draw a rectangle to highlight areas",
"icon": "glyphicon-stop"
},
{
......@@ -54,6 +62,8 @@
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Adds a customizable text to canvas",
"icon": "glyphicon-text-height"
},
{
......@@ -65,6 +75,8 @@
"toggle": "moveMode",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Move the viewport, useful if zoomed",
"icon": "glyphicon-move"
},
{
......@@ -76,6 +88,8 @@
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Delete selected object",
"icon": "glyphicon-trash"
},
{
......@@ -87,6 +101,8 @@
"toggle": "isZoomMode",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Zoom viewport",
"icon": "glyphicon-search"
},
{
......@@ -98,8 +114,37 @@
"toggle": "isMouseMode",
"hasToggleElement": false,
"toggleElement": "",
"disabled": false,
"tooltip": "Normal mouse to select objects in canvas",
"icon": "glyphicon-hand-up"
},
{
"name": "undo",
"selector": "undo",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"disabled": true,
"tooltip": "Undo",
"icon": "glyphicon-repeat icon-flipped"
},
{
"name": "redo",
"selector": "redo",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"disabled": true,
"tooltip": "Redo",
"icon": "glyphicon-repeat"
}
],
"currentMode": "draw",
"colors": [
......
/**
* @author Benjamin Baer <benjamin.baer@math.uzh.ch>
*/
/* global $ */
/**
* Qfq Namespace
*
* @namespace QfqNS
*/
var QfqNS = QfqNS || {};
(function (n) {
'use strict';
/**
* A custom history to use for undo and redo functionality.
**/
n.History = function() {
this.history = [];
this.pointer = 0;
};
n.History.prototype.put = function(object) {
if (this.history.length > 1) {
if (this.canGoForward()) {
console.log("trying to remove history");
this._removeForwardHistory();
}
}
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 - 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");
return false;
}
};
n.History.prototype.forward = function() {
console.log(this.pointer);
if (this.canGoForward()) {
this.pointer = this.pointer + 1;
return this.history[this.pointer];
} else {
console.log("At the end of history");
return false;
}
};
n.History.prototype.canGoBack = function() {
return this.pointer > 0;
};
n.History.prototype.canGoForward = function() {
return this.pointer < this.history.length - 1;
};
n.History.prototype._removeForwardHistory = function() {
this.history.splice(this.pointer + 1, this.history.length - this.pointer);
};
})(QfqNS);
\ No newline at end of file
......@@ -26,6 +26,7 @@ $(function (n) {
this.emojiContainer = {};
this.eventEmitter = new EventEmitter();
this.qfqPage = {};
this.changeHistory = true;
this.scaled = false;
this.textContainer = {};
this.userTextInput = {};
......@@ -63,6 +64,8 @@ $(function (n) {
this.mouseInsideCanvas = false;
this.imageOutput = '';
this.localStore = new n.LocalStorage("fabric");
this.history = new n.History();
this.firstLoad = false;
// Handles button states and generation of said buttons. Should be renamed.
function ModeSettings() {
......@@ -110,6 +113,8 @@ $(function (n) {
$button.on("click", function() {
that.qFabric.buttonPress(modePressed, $button)
});
$button.prop("disabled", o.disabled);
$button.prop("title", o.tooltip)
});
$controlWrapper.append($buttonGroup);
......@@ -186,6 +191,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) {
......@@ -314,7 +324,9 @@ $(function (n) {
this.generateCanvas(width, height);
if (this.outputField.val()) {
var fabricJSON = this.prepareJSON(this.outputField.val());
this.history.put(fabricJSON);
this.canvas.loadFromJSON(fabricJSON, function() {
this.firstLoad = true;
that.setBackground();
that.resizeCanvas();
that.setBrush();
......@@ -326,6 +338,7 @@ $(function (n) {
that.setBrush();
that.canvas.renderAll();
that.userChangePossible = true;
this.history.put(this.canvas.toJSON());
}
var defaultColor = $fabricElement.data('fabric-color') || false;
if (defaultColor) {
......@@ -530,6 +543,7 @@ $(function (n) {
this.setBackground();
this.canvas.renderAll();
}
};
n.Fabric.prototype.zoomCanvas = function(o, zoomCalc) {
......@@ -558,7 +572,10 @@ $(function (n) {
centeredScaling: true,
centeredRotation: true
});
that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
that.canvas.setBackgroundImage(img, function() {
that.canvas.renderAll.bind(that.canvas);
that.canvas.renderAll();
});
});
} else {
var $image = document.getElementsByClassName("qfq-fabric-image")[0];
......@@ -574,9 +591,12 @@ $(function (n) {
centeredRotation: true
});
img.rotate(that.rotation);
that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
that.canvas.renderAll();
that.canvas.setBackgroundImage(img, function() {
that.canvas.renderAll.bind(that.canvas);
that.canvas.renderAll();
});
};
that.canvas.renderAll();
}
};
......@@ -843,6 +863,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");
}
......@@ -980,6 +1006,38 @@ $(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.setBackground();
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;
};
......@@ -1000,7 +1058,12 @@ $(function (n) {
n.Fabric.prototype.defaultChangeHandler = function () {
/* Important! Changes only possible after initialisation */
if (this.userChangePossible) {
if (this.changeHistory) {
this.history.put(this.canvas.toJSON());
this.updateHistoryButtons();
}
var that = this;
this.outputField.val(JSON.stringify(that.canvas.toJSON()));
if (this.qfqPage.qfqForm) {
......
......@@ -765,7 +765,9 @@ select.qfq-locked:invalid {
}
legend {
margin-bottom: 5px;
margin-bottom: 25px;
margin-top: 15px;
padding-bottom: 5px;
}
/* glyphicon functions */
......
......@@ -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