From da4ec6abeca85e6ed323415b31a75ab41cb161d6 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Wed, 3 Jan 2018 12:45:13 +0100
Subject: [PATCH] added update Background and some mousechecks
---
javascript/src/Plugins/qfq.fabric.js | 88 ++++++++++++++++++++--------
1 file changed, 64 insertions(+), 24 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index b0c9f8269..d71286423 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -18,6 +18,7 @@ var QfqNS = QfqNS || {};
$(function (n) {
n.Fabric = function() {
this.parentElement = {};
+ this.rotation = 0;
this.controlElement = {};
this.emojiContainer = {};
this.eventEmitter = new EventEmitter();
@@ -37,6 +38,7 @@ $(function (n) {
this.drawTextBoxMode = false;
this.emojiMode = false;
this.isHighlightMode = false;
+ this.isMouseMode = false;
this.isDrawingMode = true;
this.isDown = false;
this.origX = 0;
@@ -128,10 +130,8 @@ $(function (n) {
var that = this;
$.each(this.myModes.modes, function(i, o) {
if (o.name == that.myModes.currentMode) {
- console.log(o.requiresDrawing);
if (o.requiresDrawing) {
that.qFabric.canvas.isDrawingMode = true;
- console.log(that.qFabric);
} else {
that.qFabric.canvas.isDrawingMode = false;
}
@@ -147,7 +147,6 @@ $(function (n) {
that.qFabric[o.toggle] = true;
}
if (o.hasToggleElement) {
- console.log(o.toggleElement);
that.qFabric[o.toggleElement].slideToggle();
}
} else {
@@ -375,7 +374,9 @@ $(function (n) {
n.Fabric.prototype.dragEndEvent = function(e) {
if (this.dragAndDrop) {
- this.emojiAdd(this.dndData, e);
+ if (this.mouseInsideCanvas) {
+ this.emojiAdd(this.dndData, e);
+ }
this.dndData = '';
this.dragAndDrop = false;
}
@@ -389,16 +390,16 @@ $(function (n) {
console.log("resize canvas started");
var backgroundSizing = false;
var oldWidth = this.canvas.getWidth();
- console.log("canvas: " + oldWidth);
- var backgroundImageWidth = this.canvas.backgroundImage.width || 0;
- console.log("bgimage: " + backgroundImageWidth);
+ if (this.canvas.backgroundImage) {
+ var backgroundImageWidth = this.canvas.backgroundImage.getWidth() || 0;
+ } else {
+ var backgroundImageWidth = 0;
+ }
if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0) {
oldWidth = backgroundImageWidth;
backgroundSizing = true;
}
- console.log("canvas oldWidth: " + oldWidth);
var newWidth = this.parentElement.innerWidth();
- console.log("html: " + newWidth);
if (newWidth !== oldWidth) {
var scaleMultiplier = newWidth / oldWidth;
var oldHeight;
@@ -436,8 +437,8 @@ $(function (n) {
};
n.Fabric.prototype.setBackground = function () {
+ var that = this;
if (this.backgroundImage) {
- var that = this;
fabric.Image.fromURL(this.backgroundImage, function(img) {
img.set({
width: that.canvas.width,
@@ -445,7 +446,8 @@ $(function (n) {
originX: 'left',
originY: 'top',
lockUniScaling: true,
- centeredScaling: true
+ centeredScaling: true,
+ centeredRotation: true
});
that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
});
@@ -460,10 +462,28 @@ $(function (n) {
originX: 'left',
originY: 'top',
lockUniScaling: true,
- centeredScaling: true
+ centeredScaling: true,
+ centeredRotation: true
});
- this.canvas.setBackgroundImage(0, this.canvas.renderAll.bind(this.canvas));
+ img.rotate(this.rotation);
+ img.onload = function() { that.canvas.renderAll(); };
this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
+ this.canvas.renderAll();
+ }
+ };
+
+ n.Fabric.prototype.updateBackground = function () {
+ if (this.canvas.backgroundImage) {
+ console.log("set");
+ this.canvas.backgroundImage.setWidth(this.canvas.getWidth());
+ this.canvas.backgroundImage.setHeight(this.canvas.getHeight());
+ this.canvas.renderAll();
+ } else {
+ console.log("later");
+ var that = this;
+ setTimeout(function () {
+ that.updateBackground();
+ }, 200);
}
};
@@ -620,7 +640,6 @@ $(function (n) {
// Default Canvas mouse events are currently strangely implemented.
n.Fabric.prototype.defaultMouseUpEvent = function(e) {
- console.log("Default Mouse Up Event");
if (this.moveMode) {
this.deactivatePanning();
}
@@ -633,11 +652,6 @@ $(function (n) {
if (this.isZoomMode) {
this.zoomCanvas(e, 0.1);
}
-
- if (this.dragAndDrop) {
- console.log("dnd mouseUp");
-
- }
};
n.Fabric.prototype.defaultRightClickHandler = function(e) {
@@ -702,17 +716,43 @@ $(function (n) {
this.delete();
break;
case "rotateRight":
- this.rotateRight(90);
+ this.rotateCanvas(90);
break;
default:
console.error("unrecognized mode");
}
};
- n.Fabric.prototype.rotateRight = function(degrees) {
- var currentAngle = this.canvas.backgroundImage.angle;
- this.canvas.backgroundImage.setAngle(currentAngle + degrees);
- this.resizeCanvas();
+ n.Fabric.prototype.rotateCanvas = function(degrees) {
+ var newHeight = this.canvas.getWidth();
+ var newWidth = this.canvas.getHeight();
+ this.setRotation(this.rotation + degrees);
+ this.canvas.setHeight(newHeight);
+ this.canvas.setWidth(newWidth);
+ this.canvas.backgroundImage.rotate(this.rotation);
+ this.canvas.resizeCanvas();
+ };
+
+ n.Fabric.prototype.setRotation = function(degrees) {
+ var mirror = false;
+ if (degrees < 0) {
+ degrees = Math.abs(degrees);
+ mirror = true;
+ }
+
+ while (degrees > 360) {
+ degrees = degrees - 360;
+ }
+
+ if (mirror) {
+ degrees = 360 - degrees;
+ }
+
+ if (degrees >= 0 && degrees <= 360) {
+ this.rotation = degrees;
+ } else {
+ console.error("You broke the laws of mathematics!");
+ }
};
n.Fabric.prototype.delete = function() {
--
GitLab