From 96999d88f0094b99fe11bbd2e4ad20223389a59e Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Fri, 3 Nov 2017 17:03:36 +0100
Subject: [PATCH] drag and drop seems to work sporadically ...
---
javascript/src/Plugins/qfq.fabric.js | 46 +++++++++++++++++++++++-----
1 file changed, 38 insertions(+), 8 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index f8e8f5519..5afe97a24 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -44,6 +44,8 @@ $(function (n) {
this.userChangePossible = false;
this.overObject = false;
this.selectionActive = false;
+ this.dragAndDrop = false;
+ this.dndData = '';
// Handles button states and generation of said buttons. Should be renamed.
function ModeSettings() {
@@ -225,10 +227,16 @@ $(function (n) {
src: o.url
});
$emojiField.append($img);
- $img.on("click", function() {
- that.qFabric.emojiAdd(o.url);
- console.log(o.name + " clicked");
+ $img.on("mousedown", function(e) {
+ console.log(o.name + " mouseDown");
+ that.qFabric.dragAndDrop = true;
+ that.qFabric.dndData = o.url;
+ $("window").mousedown();
});
+ $img.on("mouseout", function(e) {
+ console.log("Mouse Out Event");
+ that.qFabric.dndMouseOutEvent(e);
+ })
})
};
@@ -305,10 +313,25 @@ $(function (n) {
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) });
+ window.addEventListener('mouseup', function(e) { that.windowMouseUpEvent(e) });
$('.canvas').on('contextmenu', function(e) { that.defaultRightClickEvent(e) });
$(window).resize(function() { that.resizeCanvas(); });
};
+ n.Fabric.prototype.windowMouseUpEvent = function(e) {
+ if (this.dragAndDrop) {
+ this.emojiAdd(this.dndData, e);
+ this.dndData = '';
+ this.dragAndDrop = false;
+ }
+ };
+
+ n.Fabric.prototype.dndMouseOutEvent = function(e) {
+ if (this.dragAndDrop) {
+ $('window').mousedown(e);
+ }
+ };
+
n.Fabric.prototype.resizeCanvas = function () {
var newWidth = this.parentElement.innerWidth();
if (newWidth != this.canvas.width) {
@@ -375,14 +398,15 @@ $(function (n) {
this.panning = false;
};
- n.Fabric.prototype.emojiAdd = function(uri) {
+ n.Fabric.prototype.emojiAdd = function(uri, o) {
var that = this;
+ var pointer = this.canvas.getPointer(o.e);
fabric.Image.fromURL(uri, function(oImg) {
oImg.set({
- left: 30,
- top: 30,
- height: 32,
- width: 32
+ left: pointer.x - 32,
+ top: pointer.y - 32,
+ height: 64,
+ width: 64
});
that.canvas.add(oImg);
});
@@ -523,6 +547,7 @@ $(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();
}
@@ -535,6 +560,11 @@ $(function (n) {
if (this.isZoomMode) {
this.zoomCanvas(e, 0.1);
}
+
+ if (this.dragAndDrop) {
+ console.log("dnd mouseUp");
+
+ }
};
n.Fabric.prototype.defaultMouseOutEvent = function(e) {
--
GitLab