added update Background and some mousechecks

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() {