From 818d6f1a6d49f0dc039aa86dc041fb864b38cf30 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Wed, 1 Nov 2017 14:34:20 +0100
Subject: [PATCH] added more event listeners, reactivated move mode
---
javascript/src/Plugins/qfq.fabric.js | 64 ++++++++++++++++++++++------
1 file changed, 50 insertions(+), 14 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index 48a0acd5c..d0f2b4158 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -42,6 +42,8 @@ $(function (n) {
this.origX = 0;
this.origY = 0;
this.userChangePossible = false;
+ this.overObject = false;
+ this.selectionActive = false;
// Handles button states and generation of said buttons. Should be renamed.
function ModeSettings() {
@@ -294,7 +296,14 @@ $(function (n) {
this.canvas.on('mouse:down', function (e) { that.defaultMouseDownEvent(e) });
this.canvas.on('mouse:move', function (e) { that.defaultMouseMoveEvent(e) });
this.canvas.on('mouse:out', function (e) { that.defaultMouseOutEvent(e) });
- this.canvas.on('after:render', function(e) { that.defaultChangeHandler(e) });
+ this.canvas.on('after:render', function(e) { that.defaultRenderHandler(e) });
+ this.canvas.on('object:added', function(e) { that.defaultChangeHandler(e) });
+ this.canvas.on('object:modified', function(e) { that.defaultChangeHandler(e) });
+ this.canvas.on('path:created', function(e) { that.defaultChangeHandler(e) });
+ this.canvas.on('object:over', function(e) { that.defaultObjectHoverHandler(e) });
+ this.canvas.on('object:out', function(e) { that.defaultObjectOutHandler(e) });
+ this.canvas.on('object:selected', function(e) { that.defaultSelectionCreateHandler(e) });
+ this.canvas.on('selection:cleared', function(e) { that.defaultSelectionClearHandler(e) });
window.addEventListener('keydown', function(e) { that.defaultKeyStrokeHandler(e) });
$('.canvas').on('contextmenu', function(e) { that.defaultRightClickEvent(e) });
$(window).resize(function() { that.resizeCanvas(); });
@@ -332,7 +341,7 @@ $(function (n) {
var zoom = this.canvas.getZoom() + zoomCalc;
this.canvas.setZoom(zoom);
this.canvas.renderAll();
- }
+ };
n.Fabric.prototype.setBackground = function (imageSelector) {
/* Old code to load image From URL, stays here for reference
@@ -396,7 +405,7 @@ $(function (n) {
};
n.Fabric.prototype.panImage = function(e) {
- if (this.panning && e && e.e) {
+ if (this.panning && e && e.e && !this.overObject && !this.selectionActive) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
this.canvas.relativePan(delta);
}
@@ -536,20 +545,24 @@ $(function (n) {
};
n.Fabric.prototype.defaultMouseDownEvent = function(e) {
- if (this.moveMode) {
- this.panning = true;
- }
- if (this.drawRectangleMode) {
- this.freeDrawRectangleStart(e);
- }
- if (this.drawTextBoxMode) {
- this.freeDrawTextBoxStart(e);
+ if (!this.selectionActive) {
+ if (this.moveMode) {
+ this.panning = true;
+ }
+ if (this.drawRectangleMode) {
+ this.freeDrawRectangleStart(e);
+ }
+ if (this.drawTextBoxMode) {
+ this.freeDrawTextBoxStart(e);
+ }
}
};
n.Fabric.prototype.defaultMouseMoveEvent = function(e) {
if (this.moveMode) {
- this.panImage(e);
+ if (this.panning) {
+ this.panImage(e);
+ }
}
if (this.drawRectangleMode || this.drawTextBoxMode) {
this.resizeRectangle(e);
@@ -613,11 +626,14 @@ $(function (n) {
this.setBrush();
};
- n.Fabric.prototype.defaultChangeHandler = function (e) {
- var that = this;
+ n.Fabric.prototype.defaultRenderHandler = function (e) {
this.canvas.calcOffset();
+ };
+
+ n.Fabric.prototype.defaultChangeHandler = function (e) {
/* Important! Changes only possible after initialisation */
if (this.userChangePossible) {
+ var that = this;
this.outputField.val(JSON.stringify(that.canvas.toJSON()));
var $saveButton = $("#save-button");
$saveButton.removeClass("disabled");
@@ -669,6 +685,26 @@ $(function (n) {
};
+ n.Fabric.prototype.defaultObjectHoverHandler = function(e) {
+ console.log("Over object");
+ this.overObject = true;
+ };
+
+ n.Fabric.prototype.defaultObjectOutHandler = function(e) {
+ console.log("Left object");
+ this.overObject = false;
+ };
+
+ n.Fabric.prototype.defaultSelectionCreateHandler = function(e) {
+ console.log("Selection created");
+ this.selectionActive = true;
+ };
+
+ n.Fabric.prototype.defaultSelectionClearHandler = function(e) {
+ console.log("Selection cleared");
+ this.selectionActive = false;
+ };
+
n.Fabric.prototype.panWithZoom = function(x, y) {
var zoom = this.canvas.getZoom();
var delta = new fabric.Point(x * zoom, y * zoom);
--
GitLab