From 88b85ad577cc51e5e065a4b489fe6d98e9468b7e Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Fri, 5 Jan 2018 12:44:21 +0100
Subject: [PATCH] controlElement generation changed to top because of strange
errors.
---
javascript/src/Plugins/qfq.fabric.js | 74 +++++++++++-----------------
1 file changed, 28 insertions(+), 46 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index 79659c7c1..181ac3dac 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -20,7 +20,9 @@ $(function (n) {
this.parentElement = {};
this.rotation = 0;
this.imageToEdit = 0;
- this.controlElement = {};
+ this.controlElement = $('<div>', {
+ id: 'qfq-fabric-control'
+ });
this.emojiContainer = {};
this.eventEmitter = new EventEmitter();
this.QfqForm = n.QfqForm;
@@ -131,18 +133,9 @@ $(function (n) {
this.myModes.currentMode = modeName;
var that = this;
$.each(this.myModes.modes, function(i, o) {
- if (o.name == that.myModes.currentMode) {
- if (o.requiresDrawing) {
- that.qFabric.canvas.isDrawingMode = true;
- } else {
- that.qFabric.canvas.isDrawingMode = false;
- }
-
- if (o.requiresSelection) {
- that.qFabric.canvas.selection = true;
- } else {
- that.qFabric.canvas.selection = false;
- }
+ if (o.name === that.myModes.currentMode) {
+ that.qFabric.canvas.isDrawingMode = !!o.requiresDrawing;
+ that.qFabric.canvas.selection = !!o.requiresSelection;
if (o.isToggle) {
$button.removeClass("btn-default");
$button.addClass("btn-primary");
@@ -186,7 +179,7 @@ $(function (n) {
ModeSettings.prototype.getModeByName = function (string) {
$.each(this.myModes.modes, function(i, o) {
- if (o.name == string) {
+ if (o.name === string) {
return o;
}
});
@@ -282,18 +275,15 @@ $(function (n) {
var ratio = height / width;
var canvas = document.createElement('canvas');
var that = this;
- var controlElement = $('<div>', {
- id: 'qfq-fabric-control'
- });
canvas.width = this.parentElement.innerWidth();
canvas.height = canvas.width * ratio;
+ this.parentElement.append(this.controlElement);
this.parentElement.append(canvas);
this.canvas = this.__canvas = new fabric.Canvas(canvas, {
isDrawingMode: false,
stateful: true,
enableRetinaScaling: true
});
- this.controlElement = controlElement;
fabric.Image.fromURL(this.backgroundImage, function(oImg) {
oImg.set({
@@ -367,9 +357,6 @@ $(function (n) {
n.Fabric.prototype.generateCanvas = function() {
var canvas = document.createElement('canvas');
canvas.setAttribute('draggable', true);
- var controlElement = $('<div>', {
- id: 'qfq-fabric-control'
- });
var emojiContainer = $('<div>', {
style: 'display: none;'
});
@@ -387,13 +374,10 @@ $(function (n) {
canvas.width = this.parentElement.innerWidth();
canvas.height = canvas.width * ratio;
textContainer.append(textArea);
- this.parentElement.append(controlElement);
+ this.parentElement.append(this.controlElement);
this.parentElement.append(emojiContainer);
this.parentElement.append(textContainer);
- this.controlElement = controlElement;
this.emojiContainer = emojiContainer;
- this.textContainer = textContainer;
- this.userTextInput = textArea;
this.parentElement.append(canvas);
this.canvas = this.__canvas = new fabric.Canvas(canvas, {
isDrawingMode: true,
@@ -437,10 +421,9 @@ $(function (n) {
console.log("resize canvas started");
var backgroundSizing = false;
var oldWidth = this.canvas.getWidth();
+ var backgroundImageWidth = 0;
if (this.canvas.backgroundImage) {
- var backgroundImageWidth = this.canvas.backgroundImage.getWidth() || 0;
- } else {
- var backgroundImageWidth = 0;
+ backgroundImageWidth = this.canvas.backgroundImage.getWidth() || 0;
}
if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0) {
oldWidth = backgroundImageWidth;
@@ -680,8 +663,7 @@ $(function (n) {
};
n.Fabric.prototype.setBrush = function() {
- var color = this.getActiveRGBA();
- this.canvas.freeDrawingBrush.color = color;
+ this.canvas.freeDrawingBrush.color = this.getActiveRGBA();
this.canvas.freeDrawingBrush.width = this.brushSize;
};
@@ -708,7 +690,7 @@ $(function (n) {
}
};
- n.Fabric.prototype.defaultMouseOutEvent = function(e) {
+ n.Fabric.prototype.defaultMouseOutEvent = function() {
this.mouseInsideCanvas = false;
if (this.moveMode) {
@@ -822,18 +804,18 @@ $(function (n) {
this.drawRectangleMode = true;
};
- n.Fabric.prototype.setColor = function(color, $button) {
+ n.Fabric.prototype.setColor = function(color) {
this.activeColor.red = color.red;
this.activeColor.blue = color.blue;
this.activeColor.green = color.green;
this.setBrush();
};
- n.Fabric.prototype.defaultRenderHandler = function (e) {
+ n.Fabric.prototype.defaultRenderHandler = function () {
this.canvas.calcOffset();
};
- n.Fabric.prototype.defaultChangeHandler = function (e) {
+ n.Fabric.prototype.defaultChangeHandler = function () {
/* Important! Changes only possible after initialisation */
if (this.userChangePossible) {
var that = this;
@@ -848,65 +830,65 @@ $(function (n) {
n.Fabric.prototype.defaultKeyStrokeHandler = function(e) {
if (this.mouseInsideCanvas) {
// Delete key
- if (e.keyCode == 46) {
+ if (e.keyCode === 46) {
this.delete();
}
// Numpad +
- if (e.keyCode == 107) {
+ if (e.keyCode === 107) {
this.zoomCanvasToCenter(0.1);
}
// Numpad -
- if (e.keyCode == 109) {
+ if (e.keyCode === 109) {
this.zoomCanvasToCenter(-0.1);
}
// Up Arrow
- if (e.keyCode == 38) {
+ if (e.keyCode === 38) {
this.panWithZoom(0, 10);
e.preventDefault();
}
// Down Arrow
- if (e.keyCode == 40) {
+ if (e.keyCode === 40) {
this.panWithZoom(0, -10);
e.preventDefault();
}
// Left Arrow
- if (e.keyCode == 37) {
+ if (e.keyCode === 37) {
this.panWithZoom(-10, 0);
}
// Numpad 0
- if (e.keyCode == 96) {
+ if (e.keyCode === 96) {
this.resetZoom();
}
// Right Arrow
- if (e.keyCode == 39) {
+ if (e.keyCode === 39) {
this.panWithZoom(10, 0);
}
}
};
- n.Fabric.prototype.defaultObjectHoverHandler = function(e) {
+ n.Fabric.prototype.defaultObjectHoverHandler = function() {
console.log("Over object");
this.overObject = true;
};
- n.Fabric.prototype.defaultObjectOutHandler = function(e) {
+ n.Fabric.prototype.defaultObjectOutHandler = function() {
console.log("Left object");
this.overObject = false;
};
- n.Fabric.prototype.defaultSelectionCreateHandler = function(e) {
+ n.Fabric.prototype.defaultSelectionCreateHandler = function() {
console.log("Selection created");
this.selectionActive = true;
};
- n.Fabric.prototype.defaultSelectionClearHandler = function(e) {
+ n.Fabric.prototype.defaultSelectionClearHandler = function() {
console.log("Selection cleared");
this.selectionActive = false;
};
--
GitLab