From a5688be06d9af4832d6ef60f31e1d0d476734d2b Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Wed, 1 Nov 2017 13:00:19 +0100
Subject: [PATCH] added delete key, added zoom on numpad, added pan on
arrowkeys
---
javascript/src/Plugins/qfq.fabric.js | 70 ++++++++++++++++++++++++++--
1 file changed, 66 insertions(+), 4 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index b8e0c3089..48a0acd5c 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -294,7 +294,8 @@ $(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.defaultChangeHandler(e) });
+ window.addEventListener('keydown', function(e) { that.defaultKeyStrokeHandler(e) });
$('.canvas').on('contextmenu', function(e) { that.defaultRightClickEvent(e) });
$(window).resize(function() { that.resizeCanvas(); });
};
@@ -314,7 +315,9 @@ $(function (n) {
objects[i].setCoords();
}
this.setBackground();
+ this.userChangePossible = false;
this.canvas.renderAll();
+ this.userChangePossible = true;
}
};
@@ -325,6 +328,12 @@ $(function (n) {
this.canvas.renderAll();
};
+ n.Fabric.prototype.zoomCanvasToCenter = function(zoomCalc) {
+ 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
var that = this;
@@ -548,7 +557,6 @@ $(function (n) {
};
n.Fabric.prototype.defaultRightClickEvent = function(e) {
- console.log("Text");
if (this.isZoomMode) {
this.zoomCanvas(e, -0.1);
return false;
@@ -608,10 +616,8 @@ $(function (n) {
n.Fabric.prototype.defaultChangeHandler = function (e) {
var that = this;
this.canvas.calcOffset();
- console.log("Changehandler called.");
/* Important! Changes only possible after initialisation */
if (this.userChangePossible) {
- console.log("User Change detected");
this.outputField.val(JSON.stringify(that.canvas.toJSON()));
var $saveButton = $("#save-button");
$saveButton.removeClass("disabled");
@@ -620,6 +626,62 @@ $(function (n) {
}
};
+ n.Fabric.prototype.defaultKeyStrokeHandler = function(e) {
+ // Delete key
+ if (e.keyCode == 46) {
+ this.delete();
+ }
+
+ // Numpad +
+ if (e.keyCode == 107) {
+ this.zoomCanvasToCenter(0.1);
+ }
+
+ // Numpad -
+ if (e.keyCode == 109) {
+ this.zoomCanvasToCenter(-0.1);
+ }
+
+ // Up Arrow
+ if (e.keyCode == 38) {
+ this.panWithZoom(0, 10);
+ e.preventDefault();
+ }
+
+ // Down Arrow
+ if (e.keyCode == 40) {
+ this.panWithZoom(0, -10);
+ e.preventDefault();
+ }
+
+ // Left Arrow
+ if (e.keyCode == 37) {
+ this.panWithZoom(-10, 0);
+ }
+
+ if (e.keyCode == 96) {
+ this.resetZoom();
+ }
+
+ if (e.keyCode == 39) {
+ this.panWithZoom(10, 0);
+ }
+
+ };
+
+ n.Fabric.prototype.panWithZoom = function(x, y) {
+ var zoom = this.canvas.getZoom();
+ var delta = new fabric.Point(x * zoom, y * zoom);
+ this.canvas.relativePan(delta);
+ };
+
+ n.Fabric.prototype.resetZoom = function() {
+ var delta = new fabric.Point(0,0);
+ this.canvas.absolutePan(delta);
+ this.canvas.setZoom(1);
+ this.canvas.renderAll();
+ };
+
/*
later
$("#text-bg-submit").on("click", function() {
--
GitLab